/*
 * DEKOboko LP — front-end styles (Figma synced)
 * Source: LHPEFl8hKZq3vg0AXI2YpL
 */

:root {
	--dlp-radius-sm: 8px;
	--dlp-radius-md: 12px;
	--dlp-radius-lg: 14px;
	--dlp-radius-pill: 9999px;
	--dlp-stripe-w: 4px;
	--dlp-content-w: 1280px;
	--dlp-section-pad-y: 72px;
	--dlp-section-pad-x: clamp(1rem, 6vw, 80px);

	/* Multi-layer shadows */
	--dlp-shadow-card:
		0 1px 2px rgba(33, 38, 54, 0.04),
		0 4px 12px rgba(33, 38, 54, 0.06),
		0 12px 28px rgba(33, 38, 54, 0.04);
	--dlp-shadow-card-hover:
		0 2px 4px rgba(33, 38, 54, 0.06),
		0 12px 24px rgba(74, 120, 209, 0.10),
		0 24px 48px rgba(33, 38, 54, 0.08);
	--dlp-shadow-button:
		0 1px 2px rgba(74, 120, 209, 0.18),
		0 6px 20px rgba(74, 120, 209, 0.28);
	--dlp-shadow-button-hover:
		0 2px 4px rgba(74, 120, 209, 0.22),
		0 12px 32px rgba(74, 120, 209, 0.42);

	/* CTA gradient */
	--dlp-grad-cta: linear-gradient(135deg, #4A78D1 0%, #5B8FE5 50%, #6EA6F0 100%);
	--dlp-grad-cta-hover: linear-gradient(135deg, #3A60AE 0%, #4A78D1 50%, #5B8FE5 100%);
	--dlp-grad-mint-band: linear-gradient(135deg, #E9F0EA 0%, #EAF1FC 100%);
}

* { box-sizing: border-box; }

/* sticky header (.dlp-header) is position:sticky; offset anchor jumps so the
   target section's eyebrow/title is not hidden behind it. Header height:
   110px (>960px) / 102px (641-960px) / 88px (<=640px) + breathing room. */
html { scroll-behavior: smooth; scroll-padding-top: 126px; }
@media (max-width: 960px) { html { scroll-padding-top: 118px; } }
@media (max-width: 640px) { html { scroll-padding-top: 104px; } }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "palt" 1;
	position: relative;
	background: #FFFFFF;
}

/* --- Global ambient layer (fixed organic blobs drifting behind everything) --- */

body::before {
	content: '';
	position: fixed;
	inset: -10%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 90% 8%, rgba(184, 215, 200, 0.18), transparent 28%),
		radial-gradient(circle at 8% 28%, rgba(158, 188, 226, 0.16), transparent 30%),
		radial-gradient(circle at 92% 58%, rgba(200, 207, 230, 0.16), transparent 30%),
		radial-gradient(circle at 6% 80%, rgba(184, 215, 200, 0.16), transparent 32%),
		radial-gradient(circle at 88% 95%, rgba(158, 188, 226, 0.14), transparent 28%);
	animation: dlp-ambient-drift 60s ease-in-out infinite alternate;
}

/* --- Global paper-grain noise texture --- */

body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.40;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.13  0 0 0 0 0.16  0 0 0 0 0.21  0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}

@keyframes dlp-ambient-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(2%, -1.5%, 0) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
	body::before { animation: none; }
}

.wp-block-group,
.dlp-main { position: relative; z-index: 1; }

h1, h2, h3, h4 { letter-spacing: -0.01em; }
.dlp-section__title,
.dlp-hero__title { letter-spacing: -0.02em; }

p { letter-spacing: 0.01em; }

img, svg { max-width: 100%; height: auto; }

/* --- Accessibility helpers --- */

.dlp-skip-link {
	position: absolute;
	left: -10000px;
	top: 0;
	z-index: 9999;
	background: var(--wp--preset--color--brand-blue);
	color: #FFFFFF;
	padding: 12px 24px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 8px 0;
}

.dlp-skip-link:focus {
	left: 0;
	outline: 3px solid #FFFFFF;
	outline-offset: -2px;
}

:focus-visible {
	outline: 3px solid #4A78D1;
	outline-offset: 2px;
	border-radius: 4px;
}

.dlp-main:focus { outline: none; }

/* --- Section primitives --- */

.dlp-section {
	position: relative;
	padding: var(--dlp-section-pad-y) var(--dlp-section-pad-x);
	overflow: hidden;
}

/* Soft top edge wash to ease the boundary with the previous section */
.dlp-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 80px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent);
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: soft-light;
}

.dlp-section__inner {
	position: relative;
	max-width: var(--dlp-content-w);
	margin-inline: auto;
	z-index: 2;
}

.dlp-section__title {
	font-size: 42px;
	font-weight: 700;
	color: var(--wp--preset--color--text-base);
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.4;
}

.dlp-section__title--center {
	text-align: center;
	margin-inline: auto;
}

.dlp-section__title--center.has-margin-sm { margin-block-end: 8px; }
.dlp-section__title--center.has-margin-md { margin-block-end: 12px; }
.dlp-section__title--center.has-margin-lg { margin-block-end: 24px; }
.dlp-section__title--center.has-margin-xl { margin-block-end: 36px; }

/* Split-style section title: "プレフィックス｜サブタイトル" */

.dlp-em {
	color: var(--wp--preset--color--brand-blue);
}

.dlp-em--pink {
	color: var(--wp--preset--color--brand-pink, #B2598C);
}

.dlp-mark {
	background: linear-gradient(transparent 62%, rgba(74, 120, 209, 0.24) 62%);
	color: var(--wp--preset--color--brand-blue);
	padding: 0 4px;
	font-weight: 700;
}

.dlp-mark--red {
	background: linear-gradient(transparent 58%, rgba(224, 78, 78, 0.22) 58%);
	color: var(--wp--preset--color--brand-red, #E04E4E);
	padding: 0 4px;
	font-weight: 800;
	white-space: nowrap;
}

/* アンバーの蛍光ペン風（文字はダークのまま・ハイライトで強調）。赤の問題色と区別する見出し用 */

/* 緑（ミント）の蛍光ペン風。成長・変容の成果を表すキーフレーズ用 */
.dlp-mark--green {
	background: linear-gradient(transparent 56%, rgba(74, 209, 166, 0.34) 56%);
	color: var(--wp--preset--color--brand-green, #269966);
	font-weight: 800;
}

/* 「福利厚生」強調：家庭・福利のピンク蛍光ペン（経営層向けの価値訴求キーワード用） */
.dlp-mark--welfare {
	background: linear-gradient(transparent 56%, rgba(178, 89, 140, 0.22) 56%);
	color: var(--wp--preset--color--brand-pink, #B2598C);
	font-weight: 800;
	padding: 0 3px;
	white-space: nowrap;
}

/* キーフレーズ強調：文字＝ヒーロー見出しと同じグラデーション（青→ミント）。 */
.dlp-uline {
	background-image: linear-gradient(135deg, #4A78D1 0%, #6FA9E0 45%, #4AD1A6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* 改行で1文字だけ2行目に落ちる「孤立」を防ぐ no-wrap ユーティリティ */
.dlp-nobr { white-space: nowrap; }
/* flexリスト項目内で no-orphan テキストを1つのフレックス要素にまとめる（隙間防止） */
.dlp-nobr-wrap { min-width: 0; }

/* セクション見出しのキーフレーズ＝オレンジのマーカーで統一（濃い文字＋蛍光オレンジの蛍光ペン） */
.dlp-section__title .dlp-em {
	background: linear-gradient(transparent 55%, rgba(255, 138, 0, 0.50) 55%);
	color: var(--wp--preset--color--text-base);
	padding: 0 3px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.dlp-eyebrow {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 16px;
	color: var(--wp--preset--color--brand-blue);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* eyebrow 内のブランド名は uppercase を解除して正しい表記「DEKOboko」を保つ（PC/モバイル共通） */
.dlp-eyebrow__brand { text-transform: none; }

/* v4新セクションの eyebrow は見出しとの間に余白を確保 */
.dlp-worries .dlp-eyebrow,
.dlp-philosophy-sec .dlp-eyebrow,
.dlp-training-areas .dlp-eyebrow,
.dlp-reasons .dlp-eyebrow,
.dlp-formats .dlp-eyebrow,
.dlp-flow .dlp-eyebrow {
	display: block;
	margin-bottom: 16px;
}

/* --- Decorative ellipses (per-section) --- */

/* --- Header --- */

/* (旧) Header/Hero の viewport-fixed 共通グラデは廃止。
   現在は .dlp-top-region ラッパー側に集約。 */

.dlp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

/* スクロール時は背景を変えず、薄いシャドウのみで存在感を出す。
   白フロストは Hero との色差を生むため廃止。 */
.dlp-header.is-scrolled {
	box-shadow: 0 2px 14px rgba(33, 38, 54, 0.06);
}

/* Reset WP template-part wrapper to avoid any default background bleeding through */
.wp-site-blocks > header,
body > header { background: transparent; margin: 0; padding: 0; border: 0; }

.dlp-header__inner {
	max-width: 100%;
	margin-inline: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 18px 60px 18px 30px;
}

.dlp-brand {
	display: inline-flex;
	flex-direction: column;
	gap: 1px;
	text-decoration: none;
	color: inherit;
}

.dlp-brand__top {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.dlp-brand__logo {
	width: auto;
	height: 40px;
	max-width: 150px;
	object-fit: contain;
	flex-shrink: 0;
}

.dlp-brand__text {
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
}

.dlp-brand__kicker {
	font-family: 'Plus Jakarta Sans', var(--wp--preset--font-family--noto-sans-jp);
	font-weight: 600;
	font-style: italic;
	font-size: 14px;
	color: var(--wp--preset--color--text-muted);
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dlp-brand__name {
	font-family: 'Plus Jakarta Sans', var(--wp--preset--font-family--noto-sans-jp);
	font-weight: 800;
	font-size: 27px;
	line-height: 1.05;
	letter-spacing: -0.005em;
	padding: 0 2px;
	background: linear-gradient(135deg, #4A78D1 0%, #6FA9E0 45%, #4AD1A6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.dlp-brand__mission {
	font-family: var(--wp--preset--font-family--noto-sans-jp);
	font-weight: 600;
	font-style: italic;
	font-size: 14px;
	color: var(--wp--preset--color--text-muted);
	letter-spacing: 0.03em;
	font-feature-settings: "palt" 1;
}

/* --- Header inline CTA (Figma: blue bg / white text / 6px radius) --- */

.dlp-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--brand-blue);
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--noto-sans-jp);
	font-weight: 700;
	font-size: 18px;
	padding: 10px 24px;
	border-radius: 6px;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba(74, 120, 209, 0.22);
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.dlp-header__cta:hover,
.dlp-header__cta:focus-visible {
	background: var(--wp--preset--color--brand-blue-dark);
	color: #FFFFFF;
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(74, 120, 209, 0.36);
}

.dlp-mobile-nav__cta {
	margin-top: 8px;
	background: var(--wp--preset--color--brand-blue);
	color: #FFFFFF !important;
	text-align: center;
	border-radius: 6px;
	padding: 14px 20px !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 12px rgba(74, 120, 209, 0.22);
}

.dlp-burger {
	display: none;
	background: var(--wp--preset--color--brand-blue);
	color: #FFFFFF;
	border: none;
	border-radius: 20px;
	width: 60px;
	height: 60px;
	padding: 0;
	cursor: pointer;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(74, 120, 209, 0.32);
	transition: transform 0.2s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}

.dlp-burger:hover { opacity: 0.92; transform: translateY(-1px); }

.dlp-burger span:not(.dlp-burger__label) {
	display: block;
	width: 18px;
	height: 2px;
	background: #FFFFFF;
	border-radius: 999px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.dlp-burger__label {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.10em;
	margin-top: 4px;
	color: #FFFFFF;
}

.dlp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.dlp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.dlp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

.dlp-mobile-nav {
	display: none;
	padding: 16px 20px 24px;
	border-top: 1px solid rgba(74, 120, 209, 0.10);
	background: #ECF3FC;          /* ヘッダー(モバイルtop-region)と同色にして白浮きを解消 */
	flex-direction: column;
	gap: 6px;
}

.dlp-mobile-nav[hidden] { display: none !important; }
.dlp-mobile-nav.is-open { display: flex; }

.dlp-mobile-nav a {
	color: var(--wp--preset--color--text-base);
	text-decoration: none;
	padding: 12px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 19px;
}

.dlp-mobile-nav a:hover {
	background: var(--wp--preset--color--brand-blue-pale);
	color: var(--wp--preset--color--brand-blue);
}

/* --- Hero --- */

.dlp-hero {
	position: relative;
	padding: 50px var(--dlp-section-pad-x) 0;
	overflow: hidden;
	min-height: 600px;
}

/* --- パンフレット風の大波（CTA と被るくらいの大きさ。
       z-index: 1 で CTA (z:2) の下に配置し、CTA は波の上に重なって見える） --- */

.dlp-hero__waves {
	position: absolute !important;
	left: 0;
	right: 0;
	top: auto !important;
	bottom: 0 !important;
	height: 360px;
	pointer-events: none;
	z-index: 1;
	margin: 0;
	padding: 0;
}

@media (min-width: 1100px) {
	.dlp-hero__waves { height: 240px; }
}

.dlp-hero__wave {
	position: absolute !important;
	left: 0;
	right: 0;
	top: 0 !important;
	bottom: 0 !important;
	width: 100%;
	height: 100%;
	display: block;
}

.dlp-hero__wave--back {
	opacity: 1;
	animation: dlp-wave-drift 18s ease-in-out infinite alternate;
}

.dlp-hero__wave--mid {
	animation: dlp-wave-drift 22s ease-in-out infinite alternate-reverse;
}

/* .dlp-hero__wave--front は SVG 側の fill (#FFFEFB) で次セクションのクリーム色と繋ぐため、CSS指定なし */

@keyframes dlp-wave-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-2%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.dlp-hero__wave { animation: none !important; }
}

.dlp-hero__waves { position: absolute; inset: 0; pointer-events: none; }

.dlp-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 980px;
	margin-inline: 0;
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	justify-content: start;
}

.dlp-hero__text { display: flex; flex-direction: column; gap: 34px; width: 100%; max-width: 860px; }

.js-on .dlp-hero__text > * {
	opacity: 0;
	transform: translateY(18px);
	animation: dlp-hero-rise 0.85s cubic-bezier(0.22, 0.8, 0.32, 1) forwards;
}

.js-on .dlp-hero__text > *:nth-child(1) { animation-delay: 0.12s; }
.js-on .dlp-hero__text > *:nth-child(2) { animation-delay: 0.28s; }
.js-on .dlp-hero__text > *:nth-child(3) { animation-delay: 0.44s; }
.js-on .dlp-hero__text > *:nth-child(4) { animation-delay: 0.60s; }

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

.dlp-hero__pill {
	position: relative;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	background: rgba(74, 120, 209, 0.08);
	color: var(--wp--preset--color--brand-blue);
	font-family: var(--wp--preset--font-family--noto-sans-jp);
	font-weight: 500;
	font-size: 16px;
	padding: 6px 14px;
	border-radius: 20px;
	overflow: hidden;
}

.dlp-hero__pill::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(74, 120, 209, 0.22) 50%, transparent 70%);
	transform: translateX(-120%);
	animation: dlp-pill-shimmer 4.5s 2.5s ease-in-out infinite;
}

@keyframes dlp-pill-shimmer {
	0%, 88%, 100% { transform: translateX(-120%); }
	95%           { transform: translateX(120%); }
}

.dlp-hero__title {
	font-family: 'Plus Jakarta Sans', var(--wp--preset--font-family--noto-sans-jp);
	font-weight: 800;
	font-size: 54px;
	line-height: 1.35;
	letter-spacing: -0.025em;
	color: #0F1E3D;
	margin: 0;
}

.dlp-hero__title .dlp-gradient {
	background: linear-gradient(135deg, #4A78D1 0%, #6FA9E0 45%, #4AD1A6 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font-weight: 900;
}

.dlp-hero__title .dlp-mark {
	font-weight: 900;
	font-size: 1em;
	padding: 0 4px;
	color: #FF3F42;
	background: linear-gradient(transparent 62%, #FFCACB 62%);
}

.dlp-hero__lede {
	font-size: 20px;
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

.dlp-hero__cta {
	position: relative;
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: var(--dlp-grad-cta);
	color: #FFFFFF;
	font-weight: 700;
	font-size: 21px;
	padding: 18px 40px;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: var(--dlp-shadow-button);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.3s ease;
}

.dlp-hero__cta::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.30) 50%, transparent 80%);
	transform: translateX(-120%);
	transition: transform 0.9s ease;
	pointer-events: none;
}

.dlp-hero__cta::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 14px;
	background: rgba(74, 120, 209, 0.35);
	z-index: -1;
	filter: blur(12px);
	opacity: 0;
	animation: dlp-cta-halo 3.2s 1.6s ease-in-out infinite;
}

@keyframes dlp-cta-halo {
	0%, 100% { opacity: 0; transform: scale(0.96); }
	50%      { opacity: 0.55; transform: scale(1.04); }
}

.dlp-hero__cta:hover {
	transform: translateY(-2px);
	box-shadow: var(--dlp-shadow-button-hover);
	color: #FFFFFF;
}

.dlp-hero__cta:hover::after { transform: translateX(120%); }

.dlp-hero__cta-arrow {
	font-family: var(--wp--preset--font-family--inter);
	transition: transform 0.25s ease;
	animation: dlp-arrow-nudge 2.4s 2s ease-in-out infinite;
}

.dlp-hero__cta:hover .dlp-hero__cta-arrow {
	transform: translateX(6px);
	animation: none;
}

@keyframes dlp-arrow-nudge {
	0%, 70%, 100% { transform: translateX(0); }
	80%           { transform: translateX(4px); }
	90%           { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.js-on .dlp-hero__text > *,
	.dlp-hero__pill::after,
	.dlp-hero__cta::before,
	.dlp-hero__cta-arrow {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* --- Mid CTA 1 --- */

.dlp-mid-cta-1 {
	background:
		radial-gradient(ellipse at 0% 50%, rgba(74, 120, 209, 0.10), transparent 40%),
		radial-gradient(ellipse at 100% 50%, rgba(74, 120, 209, 0.10), transparent 40%),
		linear-gradient(180deg, #F0F5FC 0%, #EBF1FA 100%);
	padding: clamp(44px, 5.5vw, 60px) var(--dlp-section-pad-x);
}

.dlp-mid-cta-1__inner {
	max-width: var(--dlp-content-w);
	margin-inline: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.dlp-mid-cta-1__text {
	font-size: 20px;
	font-weight: 500;
	color: var(--wp--preset--color--text-base);
	margin: 0;
}

.dlp-mid-cta-1__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: var(--wp--preset--color--brand-blue);
	color: #FFFFFF;
	font-weight: 700;
	font-size: 18px;
	padding: 12px 28px;
	border-radius: 6px;
	text-decoration: none;
	transition: background 0.2s ease;
}

.dlp-mid-cta-1__btn:hover {
	background: var(--wp--preset--color--brand-blue-dark);
	color: #FFFFFF;
}

/* --- 6 Steps --- */

.dlp-steps {
	background:
		radial-gradient(ellipse at 90% 12%, rgba(184, 215, 200, 0.18), transparent 30%),
		radial-gradient(ellipse at 8% 80%, rgba(158, 188, 226, 0.16), transparent 32%),
		linear-gradient(180deg, #F5F7FA 0%, #EEF1F6 100%);
}

.dlp-steps__lede {
	text-align: center;
	font-size: 19px;
	color: var(--wp--preset--color--text-muted);
	margin: 0 auto 36px;
}

.dlp-step-card {
	position: relative;
	flex: 1;
	background: #FFFFFF;
	border: 1px solid #E5E8ED;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow: hidden;
}

.dlp-step-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 4px;
	background: var(--wp--preset--color--brand-blue);
	border-radius: 12px 0 0 12px;
}

.dlp-step-card--final {
	background: var(--wp--preset--color--brand-blue);
	border-color: var(--wp--preset--color--brand-blue);
	color: #FFFFFF;
}

.dlp-step-card--final .dlp-step-card__num,
.dlp-step-card--final .dlp-step-card__title,
.dlp-step-card--final .dlp-step-card__body { color: #FFFFFF; }

.dlp-step-card--final .dlp-step-card__icon { color: rgba(255, 255, 255, 0.7); }

.dlp-step-card__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dlp-step-card__icon {
	color: rgba(74, 120, 209, 0.5);
}

.dlp-step-card__num {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 13px;
	color: #808799;
	letter-spacing: 0.05em;
}

.dlp-step-card__title {
	font-size: 19px;
	line-height: 23px;
	font-weight: 700;
	color: var(--wp--preset--color--brand-blue);
	margin: 0;
}

.dlp-step-card__body {
	font-size: 15px;
	color: #808799;
	margin: 0;
}

/* title+body のラッパ。PCでは透過してカード直下と同じ扱い（従来レイアウト維持）。
   モバイルの FLOW タイムラインでのみ実体のある列として使う。 */
.dlp-step-card__content { display: contents; }

/* --- 4 Areas --- */

.dlp-areas {
	background:
		radial-gradient(ellipse at 12% 22%, rgba(74, 120, 209, 0.10), transparent 32%),
		radial-gradient(ellipse at 92% 78%, rgba(74, 209, 166, 0.10), transparent 32%),
		linear-gradient(180deg, #F5F7FA 0%, #EEF1F6 100%);
}
/* --- 3 Strengths --- */

.dlp-strengths {
	background:
		radial-gradient(ellipse at 92% 18%, rgba(184, 215, 200, 0.20), transparent 30%),
		radial-gradient(ellipse at 8% 80%, rgba(200, 207, 230, 0.18), transparent 32%),
		linear-gradient(180deg, #F5F7FA 0%, #EEF1F6 100%);
}
/* --- Final CTA --- */

.dlp-final {
	background:
		radial-gradient(ellipse at 12% 18%, rgba(184, 215, 200, 0.18), transparent 35%),
		radial-gradient(ellipse at 88% 82%, rgba(158, 188, 226, 0.16), transparent 35%),
		linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
	padding: 72px clamp(1rem, 14vw, 200px);
}

.dlp-final__inner {
	max-width: var(--dlp-content-w);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.dlp-final__lede {
	font-size: 25px;
	line-height: 1.8;
	font-weight: 700;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
	text-align: center;
}

.dlp-final-card {
	background: #F2F7F0;
	border-radius: 16px;
	padding: 40px 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.dlp-final-card__title {
	font-size: 32px;
	font-weight: 700;
	color: var(--wp--preset--color--brand-blue);
	margin: 0;
}

.dlp-final-checks {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 36px;
}

.dlp-final-check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--text-base);
}

.dlp-final-check__circle {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--wp--preset--color--brand-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 20px;
}

.dlp-final-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--brand-blue-light);
	color: #FFFFFF;
	font-weight: 700;
	font-size: 21px;
	padding: 20px 56px;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(74, 120, 209, 0.25);
	transition: background 0.2s ease, transform 0.2s ease;
}

.dlp-final-btn:hover {
	background: var(--wp--preset--color--brand-blue);
	transform: translateY(-1px);
	color: #FFFFFF;
}

.dlp-final-window {
	font-size: 16px;
	color: var(--wp--preset--color--text-base);
	margin: 0;
	text-align: center;
}

.dlp-final-window { color: var(--wp--preset--color--text-muted); font-weight: 400; }

/* --- Fixed CV bar (right side vertical, inspired by co-learningpark) --- */

.dlp-fixed-cv {
	position: fixed;
	top: 180px;
	right: 0;
	z-index: 95;
	display: flex;
	flex-direction: column;
	gap: 12px;
	pointer-events: none;
}

.dlp-fixed-cv__link {
	pointer-events: auto;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 56px;
	min-height: 180px;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	text-orientation: mixed;
	background: #FFFFFF;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.14em;
	padding: 18px 0;
	border-radius: 16px 0 0 16px;
	text-decoration: none;
	transform: translateX(10px);
	box-shadow: 0 6px 18px rgba(33, 38, 54, 0.10);
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

.dlp-fixed-cv__link:hover,
.dlp-fixed-cv__link:focus-visible {
	transform: translateX(0);
	box-shadow: 0 12px 28px rgba(33, 38, 54, 0.14);
}

.dlp-fixed-cv__link--primary {
	color: #FFFFFF;
	background: var(--dlp-grad-cta);
	box-shadow: 0 8px 20px rgba(74, 120, 209, 0.32);
}

.dlp-fixed-cv__link--primary:hover {
	color: #FFFFFF;
	box-shadow: 0 14px 32px rgba(74, 120, 209, 0.45);
}

.dlp-fixed-cv__icon {
	writing-mode: horizontal-tb;
	-webkit-writing-mode: horizontal-tb;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	font-size: 15px;
	flex-shrink: 0;
}

@media (max-width: 960px) {
	.dlp-fixed-cv { display: none; }
}

/* --- Title character stagger --- */

.dlp-stagger-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.dlp-stagger-char.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.dlp-stagger-char {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- Floating CTA (mobile) --- */

.dlp-floating-cta {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 90;
	display: none;
	align-items: center;
	gap: 12px;
	background: var(--dlp-grad-cta);
	color: #FFFFFF;
	font-weight: 700;
	font-size: 19px;
	padding: 14px 20px;
	border-radius: 9999px;
	text-decoration: none;
	box-shadow:
		0 4px 14px rgba(74, 120, 209, 0.32),
		0 12px 30px rgba(33, 38, 54, 0.18);
	transform: translateY(140%);
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
	overflow: hidden;
}

.dlp-floating-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	font-size: 18px;
	flex-shrink: 0;
}

.dlp-floating-cta__text {
	flex: 1;
	text-align: center;
}

.dlp-floating-cta__arrow {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 22px;
	transition: transform 0.25s ease;
}

.dlp-floating-cta:hover .dlp-floating-cta__arrow { transform: translateX(4px); }
.dlp-floating-cta:hover { color: #FFFFFF; }

@media (max-width: 960px) {
	.dlp-floating-cta {
		display: inline-flex;
	}

	.dlp-floating-cta.is-visible {
		transform: translateY(0);
	}

	.dlp-footer { padding-bottom: 80px; }
}

@media (prefers-reduced-motion: reduce) {
	.dlp-floating-cta { transition: none; }
}

/* ==================================================================
   --- Figma blue + mint palette × HP-style grid/noise texture ---
   色合い: Figmaの青/ミント基調 (#E9F0EA / #EAF1FC / #F5F7FA)
   質感: HPの 20/40px 二重グリッド + soft-light ノイズで紙質感を付与
   ================================================================== */

/* Palette tokens */
:root {
	--lp-mint-pale: #E9F0EA;
	--lp-blue-pale: #EAF1FC;
	--lp-gray-soft: #F5F7FA;
	--lp-gray-soft-deep: #EEF1F6;
	--lp-white-warm: #FBFCFE;
	--lp-blue-very-pale: #F0F5FC;
	--lp-grid-thin: rgba(74, 120, 209, 0.025);
	--lp-grid-bold: rgba(74, 120, 209, 0.04);
}

html, body { margin: 0; padding: 0; }

body {
	background: var(--lp-white-warm);
}

/* dlp-top-region — Header と Hero を包む共通ラッパー。
   背景は「ほぼ均一なミントペール単色」とし、Header/Hero 境目で色変化が起きないようにする。
   装飾円は Hero 下半分に絞って配置（::after 経由）。 */
.dlp-top-region {
	position: relative;
	background: var(--lp-mint-pale);
	z-index: 2;
	overflow: hidden;
}

/* 装飾は Hero 下端の波に集約したので、wrapper の blob 装飾は無効化 */
.dlp-top-region::after {
	content: none;
}

/* Hero/Header の内側コンテンツは装飾より前面に */
.dlp-top-region > * { position: relative; z-index: 1; }

.dlp-top-region > .dlp-hero,
.dlp-top-region > header,
.dlp-top-region .dlp-header,
.dlp-top-region .dlp-hero {
	background: transparent !important;
	background-image: none !important;
}

/* HP-style soft-light noise overlay (z-index: -1 でトップリージョンの内側まで及ばないように) */
body::before {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(74, 120, 209, 0.05) 100%),
		url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' seed='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 100% 100%, 80px 80px;
	mix-blend-mode: soft-light;
	opacity: 0.16;
	animation: none;
	z-index: -1; /* 必ず top-region より下に */
}

body::after {
	display: none;
}

/* HP-style double-grid texture applied to all sections (blue-tinted lines) */
.dlp-section,
.dlp-steps,
.dlp-areas,
.dlp-strengths,
.dlp-final {
	background-color: var(--lp-white-warm);
	background-image:
		linear-gradient(to right,  var(--lp-grid-thin) 1px, transparent 1px),
		linear-gradient(to bottom, var(--lp-grid-thin) 1px, transparent 1px),
		linear-gradient(to right,  var(--lp-grid-bold) 1px, transparent 1px),
		linear-gradient(to bottom, var(--lp-grid-bold) 1px, transparent 1px);
	background-size: 20px 20px, 20px 20px, 40px 40px, 40px 40px;
	background-position: 3px 5px, 5px 5px, 3px 5px, 5px 5px;
	background-repeat: repeat;
}

/* Alternate sections use Figma's gray-blue alt tone for rhythm */
.dlp-steps,
.dlp-areas {
	background-color: var(--lp-gray-soft);
}

/* Header + Hero: transparent, both reveal the body's unified gradient */
.dlp-header,
.dlp-hero {
	background: transparent !important;
}

/* Mid CTA 1: Figma pale blue band with grid */
.dlp-mid-cta-1 {
	background-color: var(--lp-blue-very-pale);
	background-image:
		linear-gradient(to right,  rgba(74, 120, 209, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(74, 120, 209, 0.05) 1px, transparent 1px);
	background-size: 20px 20px;
	background-position: 0 5px, 5px 5px;
	background-repeat: repeat;
}

/* Mid CTA 2 stays brand blue */

/* Final CTA card — Figma's mint freshness with grid */
.dlp-final-card {
	background-color: #F2F7F0;
	background-image:
		linear-gradient(to right,  rgba(38, 107, 69, 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(38, 107, 69, 0.04) 1px, transparent 1px);
	background-size: 20px 20px;
}

/* Final CTA card — fresher sage green */
.dlp-final-card {
	background: linear-gradient(135deg, #E8F0DC 0%, #D7E5C5 100%);
}

/* Soften section::before fade since the cream tones already blend smoothly */
.dlp-section::before { display: none; }

/* Cards stay white but get a slight warm cast on their hover for cohesion */
.dlp-step-card {
	background: #FFFFFF;
}

/* Card surfaces — white pops on the blue/gray-tinted backdrop */

.dlp-step-card { background: #FFFFFF; border-color: var(--wp--preset--color--border-soft); }

.dlp-step-card.dlp-step-card--final {
	background: var(--wp--preset--color--brand-blue);
	border-color: var(--wp--preset--color--brand-blue);
	color: #FFFFFF;
}

.dlp-step-card.dlp-step-card--final .dlp-step-card__num,
.dlp-step-card.dlp-step-card--final .dlp-step-card__title,
.dlp-step-card.dlp-step-card--final .dlp-step-card__body { color: #FFFFFF; }

.dlp-step-card.dlp-step-card--final .dlp-step-card__icon { color: rgba(255, 255, 255, 0.7); }

.dlp-step-card.dlp-step-card--final::before { background: var(--wp--preset--color--brand-blue); }

/* --- Floating CTA (mobile) --- */

.dlp-footer {
	background: var(--wp--preset--color--text-base);
	padding: 24px var(--dlp-section-pad-x);
	text-align: center;
}

.dlp-footer__copy {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}

/* --- Glass surfaces --- */

.dlp-hero__pill {
	background: rgba(74, 120, 209, 0.08);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(74, 120, 209, 0.12);
}

/* --- All blue buttons share gradient treatment --- */

.dlp-mid-cta-1__btn,
.dlp-final-btn {
	background: var(--dlp-grad-cta);
	box-shadow: var(--dlp-shadow-button);
	position: relative;
	overflow: hidden;
}

.dlp-mid-cta-1__btn:hover,
.dlp-final-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--dlp-shadow-button-hover);
}

.dlp-mid-cta-1__btn::after,
.dlp-final-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.30) 50%, transparent 80%);
	transform: translateX(-120%);
	transition: transform 0.7s ease;
	pointer-events: none;
}

.dlp-mid-cta-1__btn:hover::after,
.dlp-final-btn:hover::after { transform: translateX(120%); }

/* --- Reveal animation --- */

.js-on .dlp-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-on .dlp-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.js-on .dlp-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- Responsive --- */

@media (max-width: 1100px) {
	.dlp-hero__inner {
		grid-template-columns: 1fr;
		justify-items: center;
	}
}

/* Tablet (769-1024px): keep 3-col layouts that have 3 items; rescale paddings. */
@media (max-width: 1024px) and (min-width: 769px) {
	:root { --dlp-section-pad-y: 80px; }

	.dlp-section__inner { padding-inline: clamp(20px, 4vw, 40px); }

	.dlp-hero__title { font-size: 46px; line-height: 1.35; }
}

@media (max-width: 960px) {
	.dlp-header__inner { padding: 14px 20px; }

	.dlp-header__cta { display: none; }
	.dlp-burger { display: inline-flex; }

	.dlp-hero__title { font-size: 42px; line-height: 1.35; }

}

/* Small tablet / large phone (641-768px): collapse odd-item grids to 1 col
   so 3-card sections do not show a lonely last card. */

@media (max-width: 640px) {
	:root { --dlp-section-pad-y: 56px; }

	.dlp-hero__title { font-size: 35px; line-height: 1.35; }

	.dlp-section__title { font-size: 32px; line-height: 1.5; }

	.dlp-brand__mission, .dlp-brand__kicker { display: none; }

	.dlp-final { padding-inline: 1rem; }
	.dlp-final-card { padding: 28px 20px; }

}

/* ============================================================
   v2 (LP特化型) 追加スタイル
   ============================================================ */

/* --- Hero: cta group --- */
.dlp-hero__cta-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

/* helper: break only on SP（モバイルのみ改行。PCでは無効） */
.dlp-br-sp { display: none; }
@media (max-width: 640px) { .dlp-br-sp { display: inline; } }

/* --- 3 Strengths → numbered frameless list --- */
.dlp-numbered-list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 820px;
}

.dlp-numbered-item {
	display: flex;
	gap: 28px;
	padding: 30px 0;
	align-items: flex-start;
}

.dlp-numbered-item:first-child { padding-top: 0; }
.dlp-numbered-item:last-child { padding-bottom: 0; }

.dlp-numbered-item:not(:last-child) {
	border-bottom: 1px solid var(--wp--preset--color--border-soft);
}

.dlp-numbered-item__num {
	flex-shrink: 0;
	width: 72px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--brand-blue);
	opacity: 0.85;
}

.dlp-numbered-item__content {
	flex: 1;
	min-width: 0;
}

.dlp-numbered-item__title {
	font-size: 23px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text-base);
	margin: 0 0 10px;
}

.dlp-numbered-item__body {
	font-size: 16px;
	line-height: 1.85;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* --- v3 responsive --- */

@media (max-width: 600px) {
	.dlp-numbered-item { gap: 16px; }
	.dlp-numbered-item__num { width: 48px; font-size: 34px; }
	.dlp-numbered-item__title { font-size: 20px; }
}

/* =========================================================
   モバイル磨き込み (v3)
   ねらい: ①タイポを縮小して階層を作る ②カードを軽量化
   ③交互の背景バンドでリズム ④ヒーロー/比較表をモバイル最適化
   既存の @media(640px) より後に置き、競合は当ブロックが勝つ。
   ========================================================= */
@media (max-width: 640px) {
	:root {
		--dlp-section-pad-y: 46px;
		--dlp-section-pad-x: 16px;
	}

	/* --- リズム: 交互の背景バンドで単調さを解消 --- */
	.dlp-strengths     { background: #FFFFFF !important; }

	/* --- タイポ階層: 見出しを締めて本文を小さく --- */
	.dlp-section__title { font-size: 24px; line-height: 1.45; }

	.dlp-eyebrow { font-size: 13px; }

	.dlp-steps__lede { font-size: 14.5px; line-height: 1.7; margin-bottom: 24px; }

	/* --- ヒーロー: 空ビジュアル枠を隠し余白を詰める --- */
	.dlp-hero { min-height: auto; padding-top: 32px; }
	.dlp-hero__inner { gap: 0; }
	.dlp-hero__text { gap: 20px; max-width: 100%; }
	.dlp-hero__title { font-size: 28px; line-height: 1.4; }
	.dlp-hero__lede { font-size: 16px; line-height: 1.65; }
	.dlp-hero__pill { font-size: 13px; }
	.dlp-hero__cta-group { width: 100%; align-items: stretch; }
	.dlp-hero__cta { align-self: stretch; width: 100%; font-size: 16px; padding: 15px 24px; }
	.dlp-hero__waves { height: 200px; }

	/* --- Pain カードを軽量化 --- */

	/* --- Case Studies カードを軽量化 + メトリクスは3列維持で圧縮 --- */

	/* --- v3 要素のモバイル調整 --- */
	.dlp-numbered-item__title { font-size: 19px; }
	.dlp-numbered-item__body { font-size: 14.5px; line-height: 1.75; }

}

/* 極小幅 (iPhone SE 等) のさらなる縮小 */
@media (max-width: 400px) {
	.dlp-hero__title { font-size: 25px; }
	.dlp-section__title { font-size: 22px; }
}

/* =========================================================
   INVESTMENT & SUBSIDY: モバイルは数字を横3列に詰めて縦長を解消
   ROI/助成金とも 1列縦積み → 3列横並び。ROIの試算式は隠して圧縮。
   ========================================================= */

/* =========================================================
   問い合わせ(Final CTA): モバイルで全体を縮小・バランス調整
   ========================================================= */
@media (max-width: 640px) {
	.dlp-final { padding: 44px 16px; }
	.dlp-final__inner { gap: 16px; }
	.dlp-final__lede { font-size: 14px; line-height: 1.8; }

	.dlp-final-card { padding: 24px 16px; gap: 14px; border-radius: 14px; }
	.dlp-final-card__title { font-size: 18px; line-height: 1.45; }

	/* 3項目は横並び折返し(2+1で不揃い)をやめ、縦のチェックリストに。
	   各項目は左揃え・リスト全体はカード中央に配置。 */
	.dlp-final-checks {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		width: fit-content;
		margin: 0 auto;
	}
	.dlp-final-check { font-size: 14px; gap: 10px; }
	.dlp-final-check__circle { width: 24px; height: 24px; font-size: 14px; }

	.dlp-final-btn {
		width: 100%;
		justify-content: center;
		gap: 6px;
		font-size: 14px;
		padding: 15px 12px;
	}

	.dlp-final-window { font-size: 12px; }
}

/* =========================================================
   実績紹介(Track Record): モバイルはロゴチップを小さくして
   一度に数社見えるようにする(220px→140px)
   ========================================================= */

/* =========================================================
   v4 くまちゃんブリーフ（8セクション構成）追加スタイル
   - 課題提起 / DEKObokoの考え方 / 3研修領域 / 松竹梅 / 5ステップ
   - 既存のデザイントークン・カードトーンを流用
   ========================================================= */

/* --- セクション背景リズム（grid texture + 交互トーン） --- */
.dlp-worries,
.dlp-philosophy-sec,
.dlp-formats {
	background-color: var(--lp-white-warm);
	background-image:
		linear-gradient(to right,  var(--lp-grid-thin) 1px, transparent 1px),
		linear-gradient(to bottom, var(--lp-grid-thin) 1px, transparent 1px),
		linear-gradient(to right,  var(--lp-grid-bold) 1px, transparent 1px),
		linear-gradient(to bottom, var(--lp-grid-bold) 1px, transparent 1px);
	background-size: 20px 20px, 20px 20px, 40px 40px, 40px 40px;
	background-position: 3px 5px, 5px 5px, 3px 5px, 5px 5px;
	background-repeat: repeat;
}

.dlp-worries,
.dlp-formats { background-color: var(--lp-gray-soft); }

/* --- 2. 課題提起（こんなお悩み） --- */
.dlp-worries__lede {
	text-align: center;
	font-size: 18px;
	color: var(--wp--preset--color--text-muted);
	margin: 0 auto 36px;
	max-width: 760px;
}

.dlp-worries-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

.dlp-worry-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border-soft);
	border-left: 4px solid var(--wp--preset--color--brand-blue);
	border-radius: var(--dlp-radius-md);
	padding: 20px 24px;
	box-shadow: var(--dlp-shadow-card);
}

.dlp-worry-card__icon {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(74, 120, 209, 0.10);
	color: var(--wp--preset--color--brand-blue);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.dlp-worry-card__text {
	flex: 1;
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--text-base);
	line-height: 1.5;
}

.dlp-worry-card__check {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-red-pale);
	color: var(--wp--preset--color--brand-red);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 800;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.dlp-worries__bridge {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 36px;
}

.dlp-worries__bridge-line {
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--border-medium);
}

.dlp-worries__bridge-text {
	font-size: 17px;
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
	text-align: center;
}

.dlp-worries__bridge-text strong { color: var(--wp--preset--color--brand-blue); }

/* --- 3. DEKObokoの考え方（独自性 + 一般研修との違い） --- */
.dlp-philosophy__lede {
	text-align: center;
	font-size: clamp(20px, 3vw, 25px);
	line-height: 1.7;
	color: var(--wp--preset--color--text-muted);
	margin: 0 auto 32px;
	max-width: 760px;
}

.dlp-philosophy__lede .dlp-em--pink {
	font-weight: 800;
}

.dlp-vs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: center;
}

.dlp-vs__col {
	background: #FFFFFF;
	border-radius: var(--dlp-radius-lg);
	padding: 28px;
	box-shadow: var(--dlp-shadow-card);
}

.dlp-vs__col--general { border: 1px solid var(--wp--preset--color--border-soft); }

.dlp-vs__col--dekoboko {
	border: 2px solid var(--wp--preset--color--brand-blue);
	box-shadow: var(--dlp-shadow-card-hover);
	position: relative;
	z-index: 1;
}

.dlp-vs__head {
	text-align: center;
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wp--preset--color--border-soft);
}

.dlp-vs__col--general .dlp-vs__head { color: var(--wp--preset--color--text-light); }
.dlp-vs__col--dekoboko .dlp-vs__head { color: var(--wp--preset--color--brand-blue); }

.dlp-vs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.dlp-vs__item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 17px;
	line-height: 1.5;
}

.dlp-vs__col--general .dlp-vs__item { color: var(--wp--preset--color--text-light); }
.dlp-vs__col--dekoboko .dlp-vs__item { color: var(--wp--preset--color--text-base); font-weight: 600; }

.dlp-vs__mark {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
}

.dlp-vs__mark--general { background: #EFF1F4; color: var(--wp--preset--color--text-light); font-size: 20px; line-height: 1; }
.dlp-vs__mark--check { background: rgba(74, 209, 166, 0.16); color: var(--wp--preset--color--brand-green); }

.dlp-vs__item--accent { color: var(--wp--preset--color--brand-blue); font-weight: 800; }
.dlp-vs__item--accent .dlp-vs__mark--check { background: var(--wp--preset--color--brand-blue); color: #FFFFFF; }

.dlp-philosophy__punch {
	text-align: center;
	margin: 48px 0 0;
}

.dlp-philosophy__punch::before {
	content: '';
	display: block;
	width: 48px;
	height: 4px;
	margin: 0 auto 22px;
	border-radius: 2px;
	background: var(--dlp-grad-cta);
}

.dlp-philosophy__punch-lead {
	display: block;
	font-size: clamp(15px, 3vw, 19px);
	font-weight: 700;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 8px;
}

.dlp-philosophy__punch-main {
	display: block;
	font-size: clamp(26px, 5.6vw, 42px);
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text-base);
}

/* 独自性 — 4専門領域の横断（図解） */
.dlp-cross {
	margin: 48px auto 40px;
	max-width: 880px;
	text-align: center;
}

.dlp-cross__label {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--brand-blue);
	margin: 0 0 16px;
}

.dlp-cross__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.dlp-cross__chip {
	font-size: clamp(17px, 2.9vw, 23px);
	font-weight: 800;
	color: #FFFFFF;
	background: var(--chip, var(--wp--preset--color--brand-blue));
	padding: 12px 26px;
	border-radius: var(--dlp-radius-pill);
	box-shadow: 0 4px 12px rgba(33, 38, 54, 0.14);
}

.dlp-cross__x {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	font-size: clamp(15px, 2vw, 19px);
	color: var(--wp--preset--color--text-light);
}

.dlp-cross__arrow {
	display: block;
	margin: 16px 0 12px;
	font-size: 45px;
	line-height: 1;
	color: var(--wp--preset--color--brand-blue);
}

.dlp-cross__outcome {
	font-size: clamp(19px, 3.8vw, 28px);
	font-weight: 800;
	line-height: 1.55;
	color: var(--wp--preset--color--text-base);
	margin: 0;
}

/* --- 4. 提供できる研修領域（3領域） --- */
.dlp-training-areas__lede {
	text-align: center;
	font-size: 18px;
	color: var(--wp--preset--color--text-muted);
	margin: 0 auto 36px;
}

.dlp-training-areas__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dlp-tarea-card {
	position: relative;
	background: #FFFFFF;
	border-radius: var(--dlp-radius-lg);
	padding: 28px 32px;
	box-shadow: var(--dlp-shadow-card);
	border-left: 5px solid var(--area-accent);
	overflow: hidden;
}

.dlp-tarea-card__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.dlp-tarea-card__icon {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--area-accent) 12%, #FFFFFF);
	color: var(--area-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.dlp-tarea-card__no {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 800;
	font-size: 22px;
	color: var(--area-accent);
	opacity: 0.55;
}

.dlp-tarea-card__title {
	font-size: 24px;
	font-weight: 800;
	color: var(--area-accent);
	margin: 0;
}

/* テーマ＝スラッシュ区切りのインラインテキスト（ピル廃止） */
.dlp-tarea-card__themes {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
}

.dlp-tarea-card__theme-sep {
	margin: 0 3px;
	font-weight: 400;
	color: var(--wp--preset--color--text-divider);
}

/* --- 6. 研修形式（松竹梅） --- */
.dlp-formats__lede {
	text-align: center;
	font-size: 18px;
	color: var(--wp--preset--color--text-muted);
	margin: 0 auto 40px;
}

.dlp-formats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
}

.dlp-format-card {
	position: relative;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border-soft);
	border-top: 4px solid var(--plan-accent);
	border-radius: var(--dlp-radius-lg);
	padding: 32px 26px;
	box-shadow: var(--dlp-shadow-card);
	display: flex;
	flex-direction: column;
}

.dlp-format-card--featured {
	border: 2px solid var(--plan-accent);
	box-shadow: var(--dlp-shadow-card-hover);
	transform: translateY(-6px);
}

.dlp-format-card__ribbon {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--dlp-grad-cta);
	color: #FFFFFF;
	font-weight: 800;
	font-size: 14px;
	padding: 6px 20px;
	border-radius: var(--dlp-radius-pill);
	box-shadow: var(--dlp-shadow-button);
	white-space: nowrap;
}

.dlp-format-card__badge {
	align-self: flex-start;
	font-size: 14px;
	font-weight: 700;
	color: var(--plan-accent);
	background: color-mix(in srgb, var(--plan-accent) 12%, #FFFFFF);
	padding: 5px 14px;
	border-radius: var(--dlp-radius-pill);
	margin-bottom: 12px;
}

.dlp-format-card__tier {
	font-size: 23px;
	font-weight: 800;
	color: var(--wp--preset--color--text-base);
	line-height: 1.4;
	margin: 0 0 18px;
}

.dlp-format-card__meta {
	margin: 0 0 18px;
	padding: 16px 0;
	border-top: 1px solid var(--wp--preset--color--border-soft);
	border-bottom: 1px solid var(--wp--preset--color--border-soft);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dlp-format-card__meta-row {
	display: flex;
	gap: 12px;
	align-items: baseline;
}

.dlp-format-card__meta-row dt {
	flex-shrink: 0;
	width: 40px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--text-light);
}

.dlp-format-card__meta-row dd {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--text-base);
}

.dlp-format-card__contents {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.dlp-format-card__contents li {
	display: flex;
	gap: 10px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
}

.dlp-format-card__check {
	flex-shrink: 0;
	color: var(--plan-accent);
	font-weight: 800;
}

.dlp-format-card__best {
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--dlp-radius-md);
	background: var(--wp--preset--color--background-alt);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-base);
}

.dlp-format-card__best-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--plan-accent);
	margin-bottom: 6px;
}

.dlp-format-card__best-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 13.5px;
	line-height: 1.5;
	letter-spacing: -0.01em;
}
.dlp-format-card__best-list li {
	position: relative;
	padding-left: 15px;
}
.dlp-format-card__best-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--plan-accent);
}

.dlp-formats__note {
	text-align: center;
	font-size: 16px;
	color: var(--wp--preset--color--text-muted);
	margin: 36px auto 0;
	max-width: 720px;
}

/* --- 7. 導入までの流れ（5ステップ・横並びフロー） --- */
.dlp-flow-row {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: nowrap;
}

.dlp-flow .dlp-step-card {
	flex: 1;
	min-width: 0;
}

/* 横並び（十分広い画面）では幅が狭いので、長い見出し/本文も1行に収まるよう小さめに */
@media (min-width: 1281px) {
	.dlp-flow .dlp-step-card__title { font-size: 15px; line-height: 1.45; }
	.dlp-flow .dlp-step-card__body { font-size: 12.5px; line-height: 1.5; }
}

/* 1280px以下は5枚横並びだと窮屈で2行になるため、縦並びに切替（全幅で1行に収まる） */
@media (max-width: 1280px) {
	.dlp-flow-row { flex-direction: column; align-items: stretch; }
	.dlp-flow-arrow-step { transform: rotate(90deg); padding: 6px 0; }
}

.dlp-flow-arrow-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	color: rgba(74, 120, 209, 0.35);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 22px;
	font-weight: 700;
	flex-shrink: 0;
}

/* --- v4 レスポンシブ --- */
@media (max-width: 960px) {
	.dlp-worries-grid { grid-template-columns: 1fr; }

	.dlp-vs { grid-template-columns: 1fr; gap: 16px; }

	.dlp-formats-grid { grid-template-columns: 1fr; gap: 28px; }
	.dlp-format-card--featured { transform: none; }
}

@media (max-width: 640px) {
	.dlp-tarea-card { padding: 24px 22px; }
	.dlp-tarea-card__title { font-size: 21px; }
	.dlp-worry-card__text { font-size: 16.5px; }
	.dlp-worries__bridge-text { font-size: 15px; }
	.dlp-format-card { padding: 28px 22px; }
}

/* =========================================================
   v4 追補（ブリーフ突き合わせ反映）
   - 課題提起: 三大課題のフレーミング行
   - 研修領域: 「〜を教えるのではなく、〜」の目的対比文
   ========================================================= */

/* 課題提起 — 三大課題 */
.dlp-worries__triad {
	text-align: center;
	font-size: clamp(21px, 4vw, 32px);
	font-weight: 800;
	line-height: 1.6;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text-base);
	margin: 0 auto 16px;
}

.dlp-worries__triad-item { display: inline-block; }

.dlp-worries__triad-item:not(:last-child)::after {
	content: '／';
	margin: 0 0.5em;
	color: var(--wp--preset--color--text-divider);
	font-weight: 400;
}

/* 研修領域 — 目的の対比文（「目的」ラベル付き囲み・訴求文の下の説明として控えめ） */
.dlp-tarea-card__purpose {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 16px;
	padding: 11px 14px;
	font-size: 15px;
	line-height: 1.6;
	background: color-mix(in srgb, var(--area-accent) 6%, #FFFFFF);
	border-left: 3px solid var(--area-accent);
	border-radius: 0 10px 10px 0;
}

.dlp-tarea-card__purpose-label {
	flex: none;
	margin-top: 2px;
	padding: 2px 9px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #FFFFFF;
	background: var(--area-accent);
	border-radius: var(--dlp-radius-pill);
}

.dlp-tarea-card__purpose-body {
	flex: 1 1 auto;
	min-width: 0;
}

.dlp-tarea-card__purpose-not {
	color: var(--wp--preset--color--text-base);
}

.dlp-tarea-card__purpose-goal {
	color: var(--wp--preset--color--text-base);
	font-weight: 700;
}

/* 訴求文（lead）= カードのフック。アクセント色・太字・大きめでカード全体を1色トーンに統一 */
.dlp-tarea-card__lead {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.65;
	color: var(--area-accent);
	margin: 0 0 14px;
	letter-spacing: -0.01em;
}

@media (max-width: 640px) {
	.dlp-tarea-card__purpose { font-size: 15px; }
}

/* =========================================================
   v4 モバイル文字縮小（2026-06-10 第2セッション）
   ねらい: 文字が大きすぎて意図しない改行が多発 →
   全体的に文字を小さくしデスクトップに近い詰まった composition に。
   モバイル用に縮小されていなかった要素（各リード18px / 中間CTA20px /
   philosophyリード20px / cross図解20px 等）も含め一括で縮小。
   既存の @media(640px) 群より後に置き、競合は当ブロックが勝つ。
   ========================================================= */
@media (max-width: 640px) {
	/* --- 共通: 見出し・eyebrow --- */
	/* text-wrap:balance で行長を均等化し、長い見出しの1文字孤立（「式」等）を防ぐ */
	.dlp-section__title { font-size: 20px; line-height: 1.45; text-wrap: balance; }
	.dlp-eyebrow { font-size: 12px; }

	/* リード文・注記も balance で末尾1〜2文字の孤立を抑える */
	.dlp-worries__lede,
	.dlp-philosophy__lede,
	.dlp-training-areas__lede,
	.dlp-formats__lede,
	.dlp-formats__note,
	.dlp-steps__lede,
	.dlp-final__lede,
	.dlp-cross__outcome,
	.dlp-philosophy__punch-main { text-wrap: balance; }
	.dlp-worries .dlp-eyebrow,
	.dlp-philosophy-sec .dlp-eyebrow,
	.dlp-training-areas .dlp-eyebrow,
	.dlp-reasons .dlp-eyebrow,
	.dlp-formats .dlp-eyebrow,
	.dlp-flow .dlp-eyebrow { margin-bottom: 12px; }

	/* --- ヒーロー: ピル + キャッチフレーズ + タグライン + CTA --- */
	.dlp-hero__pill { font-size: 11px; padding: 5px 10px; letter-spacing: 0; }
	.dlp-hero__title { font-size: 27px; line-height: 1.5; }
	.dlp-hero__lede { font-size: 14.5px; line-height: 1.7; }
	.dlp-hero__text { gap: 22px; }

	/* --- 課題提起（worries） --- */
	/* 三大課題：1行に収める（インライン＋「／」区切り、収まるサイズに縮小） */
	.dlp-worries__triad { font-size: 15px; line-height: 1.5; }
	.dlp-worries__triad-item { display: inline; }
	.dlp-worries__triad-item:not(:last-child)::after { display: inline; margin: 0 0.25em; }
	.dlp-worries__triad .dlp-mark--red { padding: 0 2px; }
	/* リード文は1行に収めるため小さめに（34字の長文のため11px） */
	.dlp-worries__lede { font-size: 11px; line-height: 1.5; margin-bottom: 20px; }
	/* お悩みカード：2列にしてスクロール量を圧縮（？マークは省いて横幅を確保） */
	.dlp-worries-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.dlp-worry-card { gap: 9px; padding: 14px 12px; align-items: flex-start; border-left-width: 3px; }
	.dlp-worry-card__icon { width: 32px; height: 32px; }
	.dlp-worry-card__icon svg { width: 17px; height: 17px; }
	/* カード内テキストは小さめ＋行間広めで窮屈さを解消 */
	.dlp-worry-card__text { font-size: 11px; line-height: 1.6; }
	.dlp-worry-card__check { display: none; }
	.dlp-worries__bridge { gap: 12px; margin-top: 24px; }
	.dlp-worries__bridge-text { font-size: 12px; }

	/* --- 考え方（philosophy） --- */
	/* 見出しは強制改行をやめ、text-wrap:balance で2行に均等化（末尾「ること」の孤立を解消） */
	.dlp-philosophy-sec .dlp-section__title { text-wrap: balance; }
	/* リードはやや大きめに（2行に折り返してOK） */
	.dlp-philosophy__lede { font-size: 14px; line-height: 1.65; margin-bottom: 24px; }
	.dlp-cross { margin: 32px auto 28px; }
	.dlp-cross__label { font-size: 13px; margin-bottom: 12px; }
	/* 4つの専門領域チップ：小さくして1行に（折返し禁止） */
	.dlp-cross__chips { gap: 4px; flex-wrap: nowrap; }
	.dlp-cross__chip { font-size: 11.5px; padding: 4px 9px; }
	.dlp-cross__x { font-size: 10px; }
	.dlp-cross__arrow { font-size: 28px; margin: 8px 0 6px; }
	/* outcome も1行に収める */
	.dlp-cross__outcome { font-size: 13px; line-height: 1.55; }
	.dlp-vs { gap: 14px; }
	.dlp-vs__col { padding: 20px; }
	.dlp-vs__head { font-size: 16px; margin-bottom: 14px; padding-bottom: 10px; }
	.dlp-vs__list { gap: 11px; }
	.dlp-vs__item { font-size: 14px; gap: 10px; }
	.dlp-vs__mark { width: 21px; height: 21px; font-size: 12px; }
	.dlp-vs__mark--general { font-size: 17px; }
	.dlp-philosophy__punch { margin-top: 36px; }
	.dlp-philosophy__punch-lead { font-size: 13px; }
	.dlp-philosophy__punch-main { font-size: 20px; line-height: 1.5; }

	/* --- 研修領域（training-areas） --- */
	.dlp-training-areas__lede { font-size: 13.5px; margin-bottom: 28px; }
	.dlp-tarea-card { padding: 20px 18px; }
	.dlp-tarea-card__head { gap: 12px; margin-bottom: 12px; }
	.dlp-tarea-card__icon { width: 46px; height: 46px; }
	.dlp-tarea-card__no { font-size: 18px; }
	.dlp-tarea-card__title { font-size: 17px; line-height: 1.4; }	/* 番号と同じ行に収まるサイズ（独立行への強制はしない） */
	.dlp-tarea-card__lead { font-size: 14.5px; line-height: 1.6; margin-bottom: 12px; }
	.dlp-tarea-card__purpose { font-size: 13px; padding: 10px 12px; margin-bottom: 12px; }
	.dlp-tarea-card__purpose-label { font-size: 11px; }
	.dlp-tarea-card__themes { font-size: 12.5px; }
	/* カード内文章の改行位置改善：語の途中で折り返さず、句読点(<wbr>)/テーマ区切り(" / ")でのみ改行 */
	.dlp-tarea-card__lead,
	.dlp-tarea-card__purpose-body,
	.dlp-tarea-card__themes { word-break: keep-all; overflow-wrap: anywhere; }

	/* --- 選ばれる理由（reasons / numbered-list） --- */
	.dlp-numbered-item { gap: 14px; padding: 22px 0; }
	.dlp-numbered-item__num { width: 40px; font-size: 28px; }
	.dlp-numbered-item__title { font-size: 16px; line-height: 1.45; margin-bottom: 8px; }
	.dlp-numbered-item__body { font-size: 12.5px; line-height: 1.75; word-break: keep-all; }
	/* グラデキー（重要語）は語の途中で折り返さず1単位で改行 */
	.dlp-uline { white-space: nowrap; }

	/* --- 中間CTA --- */
	.dlp-mid-cta .dlp-mid-cta-1__text { font-size: 14px; text-align: center; }
	.dlp-mid-cta .dlp-mid-cta-1__btn { width: 100%; font-size: 15px; }

	/* --- 研修形式（松竹梅） --- */
	.dlp-formats__lede { font-size: 11px; margin-bottom: 12px; }	/* 1行に収める */
	.dlp-format-card { padding: 24px 18px; }
	.dlp-format-card__badge { font-size: 12px; }
	.dlp-format-card__tier { font-size: 18px; margin-bottom: 14px; }
	.dlp-format-card__ribbon { font-size: 12.5px; }
	.dlp-format-card__meta { padding: 12px 0; gap: 8px; margin-bottom: 14px; }
	.dlp-format-card__meta-row dt { font-size: 12px; }
	.dlp-format-card__meta-row dd { font-size: 14px; }
	.dlp-format-card__contents { gap: 10px; margin-bottom: 16px; }
	.dlp-format-card__contents li { font-size: 13.5px; }
	.dlp-format-card__best { font-size: 13px; padding: 12px 14px; }
	.dlp-format-card__best-label { font-size: 11px; }
	.dlp-formats__note { font-size: 13px; margin-top: 28px; }

	/* --- 導入の流れ（flow / step-card） --- */
	.dlp-steps__lede { font-size: 13.5px; }
	.dlp-step-card { padding: 16px; }
	.dlp-step-card__num { font-size: 12px; }
	.dlp-step-card__title { font-size: 16px; line-height: 1.4; }
	.dlp-step-card__body { font-size: 13px; }

	/* --- 最終CTA（final） --- */
	.dlp-final__lede { font-size: 13px; }
	.dlp-final-card { padding: 24px 18px; }
	.dlp-final-card__title { font-size: 16px; }
	.dlp-final-check { font-size: 13px; }
	.dlp-final-check__circle { width: 22px; height: 22px; font-size: 13px; }
	.dlp-final-window { font-size: 11.5px; }
}

/* 極小幅（iPhone SE 等）はさらに一段縮小 */
@media (max-width: 400px) {
	.dlp-hero__title { font-size: 25px; }
	.dlp-section__title { font-size: 19px; }
	.dlp-tarea-card__title { font-size: 16px; }
	.dlp-worries__triad { font-size: 13.5px; }
}

/* =========================================================
   SERVICE（研修領域）: モバイルはスティッキー・スタック表示。
   3枚すべてをスワイプし切らないと次セクションへ進めない没入スクロール。
   各カードが画面に貼り付き、次カードがせり上がって重なる（JSなし）。
   ※ Pain セクションと同じ手法。
   ========================================================= */
@media (max-width: 640px) {
	/* 親 section の overflow:hidden は sticky を無効化するため clip に置換 */
	.dlp-section.dlp-training-areas { overflow: clip; }

	/* スタックコンテナ化（flex→block） */
	.dlp-training-areas__list { display: block; }

	/* カードはコンテンツ本来の高さのまま sticky で積み上げる
	   （min-height で引き伸ばすと上部に余白が出て大きさが崩れるため指定しない）。
	   重なり時に下のカードへ落ちる上向きシャドウだけ追加。 */
	.dlp-training-areas__list > .dlp-tarea-card {
		position: sticky;
		margin: 0;
		box-shadow: 0 -10px 28px rgba(20, 28, 46, 0.12);
	}

	/* せり上がり段差（下のカードほど少し下に止まり、上のカードの縁が覗く） */
	.dlp-training-areas__list > .dlp-tarea-card:nth-child(1) { top: 10px; }
	.dlp-training-areas__list > .dlp-tarea-card:nth-child(2) { top: 24px; }
	.dlp-training-areas__list > .dlp-tarea-card:nth-child(3) { top: 38px; }
	.dlp-training-areas__list > .dlp-tarea-card:nth-child(4) { top: 52px; }
}

/* =========================================================
   PLAN（研修形式・松竹梅）: モバイルは横スワイプ・カルーセル。
   3枚を横並び＋scroll-snap。次カードが少し覗いてスワイプを示唆。
   ========================================================= */
.dlp-formats__hint { display: none; }

@media (max-width: 640px) {
	.dlp-formats-grid {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		/* 上=おすすめリボン分の余白 / 下=スクロールバー分 / 左右=カード影分 */
		padding: 18px 2px 12px;
		scrollbar-width: thin;
	}

	/* 1枚を画面の86%にして次カードが少し覗く＝横スワイプできると分かる */
	.dlp-formats-grid > .dlp-format-card {
		flex: 0 0 86%;
		scroll-snap-align: start;
	}

	/* 横スクロールで画面外のカードが reveal(opacity:0) のまま消えないよう確実に表示 */
	.dlp-formats-grid > .dlp-format-card.dlp-reveal {
		opacity: 1;
		transform: none;
	}

	/* スワイプ誘導 */
	.dlp-formats__hint {
		display: block;
		text-align: center;
		font-size: 12px;
		font-weight: 700;
		color: var(--wp--preset--color--brand-blue);
		letter-spacing: 0.04em;
		margin: 0 0 4px;
	}
}

/* =========================================================
   FLOW（導入までの流れ）: モバイルはカードをやめ、
   コンパクトな縦タイムライン（アイコン丸＋接続線＋テキスト）に。
   ========================================================= */
@media (max-width: 640px) {
	.dlp-flow .dlp-flow-row {
		flex-direction: column;
		gap: 0;
		max-width: 440px;
		margin-inline: auto;
		align-items: stretch;
	}
	.dlp-flow .dlp-flow-arrow-step { display: none; }	/* 矢印は不要 */

	/* カードの装飾（背景・枠・影・左ストライプ）を外してフラットに */
	.dlp-flow .dlp-step-card {
		background: none;
		border: none;
		box-shadow: none;
		border-radius: 0;
		overflow: visible;
		flex-direction: row;
		align-items: flex-start;
		gap: 13px;
		padding: 0 0 20px;
		position: relative;
	}
	.dlp-flow .dlp-step-card:last-child { padding-bottom: 0; }
	.dlp-flow .dlp-step-card::before { display: none; }

	/* タイムラインの縦線（アイコン下端から次アイコンへ直結） */
	.dlp-flow .dlp-step-card:not(:last-child)::after {
		content: '';
		position: absolute;
		left: 18px;
		top: 40px;
		bottom: 0;
		width: 2px;
		background: rgba(74, 120, 209, 0.22);
	}

	/* 左マーカー：アイコン丸のみ（STEP番号は非表示） */
	.dlp-flow .dlp-step-card__head {
		flex-shrink: 0;
		align-items: center;
		width: 38px;
	}
	.dlp-flow .dlp-step-card__num { display: none; }
	.dlp-flow .dlp-step-card__icon {
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: var(--wp--preset--color--brand-blue-pale);
		color: var(--wp--preset--color--brand-blue);
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.dlp-flow .dlp-step-card__icon svg { width: 18px; height: 18px; }

	/* 右テキスト */
	.dlp-flow .dlp-step-card__content {
		display: flex;
		flex-direction: column;
		gap: 2px;
		flex: 1;
		min-width: 0;
		padding-top: 3px;
	}
	.dlp-flow .dlp-step-card__title { font-size: 15px; line-height: 1.4; margin: 0; }
	.dlp-flow .dlp-step-card__body { font-size: 12px; line-height: 1.55; margin: 0; }

	/* 最終ステップ（定着）= ミントのアイコン丸で強調（青ベタ箱は使わない） */
	.dlp-flow .dlp-step-card--final { background: none; }
	.dlp-flow .dlp-step-card--final .dlp-step-card__icon {
		background: var(--wp--preset--color--brand-mint-vibrant, #4AD1A6);
		color: #FFFFFF;
	}
	.dlp-flow .dlp-step-card--final .dlp-step-card__title { color: var(--wp--preset--color--brand-blue); }
	.dlp-flow .dlp-step-card--final .dlp-step-card__body { color: var(--wp--preset--color--text-muted); }
	.dlp-flow .dlp-step-card--final .dlp-step-card__num { color: var(--wp--preset--color--text-light); }
}

/* =========================================================
   ② Our Roots（学習塾ルーツ × 心理学的根拠）— philosophy 内
   会社概要ver3 の「DEKObokoの原点／なぜ法人研修に取り組むのか」と
   パンフレットのホメオスタシス説明を、教育・心理学の訴求として配置。
   ========================================================= */
.dlp-roots {
	max-width: 860px;
	margin: 0 auto;
	padding: 38px 46px;
	border-radius: var(--dlp-radius-lg);
	background: linear-gradient(135deg, #EAF1FC 0%, #E9F0EA 100%);
	border: 1px solid var(--wp--preset--color--border-soft, #E2E8F0);
	text-align: center;
}
.dlp-roots__eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--inter, sans-serif);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-blue, #4A78D1);
	margin-bottom: 12px;
}
.dlp-roots__lead {
	font-size: 27px;
	font-weight: 800;
	line-height: 1.45;
	color: var(--wp--preset--color--text-strong, #1F2937);
	margin: 0 0 14px;
}
.dlp-roots__body {
	font-size: 16.5px;
	line-height: 1.85;
	font-weight: 600;
	color: var(--wp--preset--color--text-muted, #5B6472);
	margin: 0 auto 18px;
	max-width: 700px;
	text-wrap: pretty;
}
.dlp-roots__brand {
	font-family: var(--wp--preset--font-family--inter, sans-serif);
	font-weight: 800;
	color: var(--wp--preset--color--brand-green-deep, #4DA68C);
}
.dlp-roots__hl {
	font-weight: 800;
	color: var(--wp--preset--color--text-strong, #1F2937);
	background: linear-gradient(transparent 60%, rgba(74, 209, 166, 0.35) 60%);
}
@media (max-width: 640px) {
	.dlp-roots { padding: 24px 20px; }
	.dlp-roots__lead { font-size: 20px; }
	.dlp-roots__body { font-size: 14px; }
	.dlp-roots .dlp-founder { margin: 16px 0 0; padding: 16px 0 0; }
	.dlp-roots .dlp-founder__mark { font-size: 38px; }
	.dlp-roots .dlp-founder__message p { font-size: 14px; }
}

/* =========================================================
   ③ Our Team（講師紹介・専門家チーム）
   実務経験豊富な専門家を 4 領域に対応づけて訴求（写真は後日差し替え可）。
   ========================================================= */
.dlp-experts__lede {
	text-align: center;
	font-size: 18px;
	color: var(--wp--preset--color--text-muted, #5B6472);
	margin: 0 auto 40px;
	max-width: 720px;
}
.dlp-experts-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	align-items: stretch;
}
.dlp-expert-card {
	position: relative;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border-soft, #E2E8F0);
	border-top: 4px solid var(--expert-accent);
	border-radius: var(--dlp-radius-lg);
	padding: 26px 22px;
	box-shadow: var(--dlp-shadow-card);
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dlp-expert-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--dlp-shadow-card-hover);
}
.dlp-expert-card__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.dlp-expert-card__avatar {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--noto-sans-jp, sans-serif);
	font-weight: 800;
	font-size: 24px;
	color: #FFFFFF;
	background: linear-gradient(135deg, var(--expert-accent), color-mix(in srgb, var(--expert-accent) 58%, #FFFFFF));
}
/* 専門家の顔写真アバター（イニシャルの代わり）：円形にクロップして表示 */
.dlp-expert-card__avatar--photo {
	background: none;
	overflow: hidden;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--expert-accent) 35%, #FFFFFF);  /* アクセント色の細リング */
}
.dlp-expert-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;   /* 顔(上寄り)を円の中心付近に */
	border-radius: 50%;
	display: block;
}
.dlp-expert-card__id { min-width: 0; }
.dlp-expert-card__name {
	font-size: 19px;
	font-weight: 800;
	margin: 0;
	color: var(--wp--preset--color--text-strong, #1F2937);
}
.dlp-expert-card__role {
	font-size: 13px;
	font-weight: 600;
	margin: 2px 0 0;
	color: var(--wp--preset--color--text-muted, #5B6472);
}
.dlp-expert-card__area {
	align-self: flex-start;
	font-size: 12px;
	font-weight: 700;
	color: var(--expert-accent);
	background: color-mix(in srgb, var(--expert-accent) 12%, #FFFFFF);
	padding: 4px 12px;
	border-radius: var(--dlp-radius-pill);
	margin-bottom: 14px;
}
.dlp-expert-card__bio {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13.5px;
	line-height: 1.6;
	font-weight: 600;
	color: var(--wp--preset--color--text-muted, #5B6472);
}
.dlp-expert-card__bio li { position: relative; padding-left: 14px; }
.dlp-expert-card__bio li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--expert-accent);
}
.dlp-experts__note {
	text-align: center;
	font-size: 14px;
	color: var(--wp--preset--color--text-light, #94A3B8);
	margin: 32px auto 0;
	max-width: 760px;
}
/* タブレット: 2列 */
@media (max-width: 1024px) {
	.dlp-experts-grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 640px;
		margin-inline: auto;
	}
}
/* モバイル: PLAN（松竹梅）と同じ横スワイプ・カルーセル */
.dlp-experts__hint { display: none; }

@media (max-width: 640px) {
	.dlp-experts__lede { font-size: 16px; }

	.dlp-experts-grid {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding: 4px 2px 12px;
		max-width: none;
		scrollbar-width: thin;
	}
	/* 1枚を画面の80%にし、中央スナップで真ん中に配置（両側に次/前カードが少し覗く） */
	.dlp-experts-grid > .dlp-expert-card {
		flex: 0 0 80%;
		scroll-snap-align: center;
	}
	/* 横スクロールで画面外のカードが reveal(opacity:0) のまま消えないよう確実に表示 */
	.dlp-experts-grid > .dlp-expert-card.dlp-reveal {
		opacity: 1;
		transform: none;
	}
	/* スワイプ誘導 */
	.dlp-experts__hint {
		display: block;
		text-align: center;
		font-size: 12px;
		font-weight: 700;
		color: var(--wp--preset--color--brand-blue);
		letter-spacing: 0.04em;
		margin: 0 0 4px;
	}
}

/* =========================================================
   代表メッセージ（philosophy 内・OUR ROOTS の直後）
   学習塾ルーツの「想い・使命」を代表の肉声として補強。
   ========================================================= */
.dlp-founder {
	position: relative;
	max-width: 760px;
	margin: 0 auto 44px;
	padding: 32px 40px 28px;
	background: #FFFFFF;
	border-radius: var(--dlp-radius-lg);
	border-left: 5px solid var(--wp--preset--color--brand-blue, #4A78D1);
	box-shadow: var(--dlp-shadow-card);
}
.dlp-founder__mark {
	position: absolute;
	top: 6px;
	left: 22px;
	font-family: var(--wp--preset--font-family--inter, serif);
	font-size: 64px;
	line-height: 1;
	font-weight: 800;
	color: color-mix(in srgb, var(--wp--preset--color--brand-blue, #4A78D1) 22%, #FFFFFF);
	pointer-events: none;
}
.dlp-founder__message {
	position: relative;
	z-index: 1;
	margin: 0 0 20px;
	padding: 0;
}
.dlp-founder__message p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.95;
	font-weight: 600;
	color: var(--wp--preset--color--text-muted, #5B6472);
}
.dlp-founder__message p:last-child { margin-bottom: 0; }
.dlp-founder__sign {
	display: flex;
	align-items: center;
	gap: 14px;
	justify-content: flex-end;
}
.dlp-founder__id {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
}
.dlp-founder__co {
	font-size: 12px;
	font-weight: 600;
	color: var(--wp--preset--color--text-light, #94A3B8);
}
.dlp-founder__name {
	font-size: 18px;
	font-weight: 800;
	color: var(--wp--preset--color--text-strong, #1F2937);
}
@media (max-width: 640px) {
	.dlp-founder { padding: 28px 22px 24px; margin-bottom: 32px; }
	.dlp-founder__mark { font-size: 48px; left: 16px; }
	.dlp-founder__message p { font-size: 15px; }
	.dlp-founder__sign { justify-content: flex-start; }
}

/* 代表メッセージを OUR ROOTS 内に組み込む場合は、独立カード感を消して溶け込ませる */
.dlp-roots .dlp-founder {
	max-width: 100%;
	margin: 22px 0 0;
	padding: 22px 0 0;
	background: transparent;
	border: 0;
	border-top: 1px solid rgba(74, 120, 209, 0.20);
	border-radius: 0;
	box-shadow: none;
	text-align: left;
}
.dlp-roots .dlp-founder__mark {
	position: static;
	display: block;
	font-size: 46px;
	line-height: 0.8;
	margin-bottom: 4px;
	color: color-mix(in srgb, var(--wp--preset--color--brand-blue, #4A78D1) 30%, #FFFFFF);
}
.dlp-roots .dlp-founder__message { margin-bottom: 12px; }
.dlp-roots .dlp-founder__message p { font-size: 16px; line-height: 1.85; text-wrap: pretty; }

/* =====================================================================
   Retention LP — 定着支援版 追加スタイル (v1.1.0-retention)
   ③職場と家庭(spillover/crossover) ⑥想定対象 ⑦効果のひろがり
   + ④philosophy補強 / ⑤効く所 / ⑪初回トライアル
   既存トークン(--dlp-*, --wp--preset--color--*, --lp-*)踏襲
   ===================================================================== */

/* 新セクションの eyebrow 余白（既存セクションと統一） */
.dlp-workhome .dlp-eyebrow,
.dlp-targets .dlp-eyebrow,
.dlp-ripple .dlp-eyebrow {
	display: block;
	margin-bottom: 16px;
}

/* ④ philosophy 補強リード（③の知見と接続） */
.dlp-philosophy__connect {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	font-size: 16px;
	line-height: 1.85;
	color: var(--wp--preset--color--text-muted);
}
.dlp-philosophy__connect strong { color: var(--wp--preset--color--brand-blue); font-weight: 700; }

/* ⑤ training-areas 効く所ライン */
.dlp-tarea-card__effect {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px dashed var(--wp--preset--color--border-soft);
	font-size: 14.5px;
	line-height: 1.7;
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
	display: flex;
	gap: 10px;
	align-items: baseline;
}
.dlp-tarea-card__effect-label {
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--area-accent);
	background: color-mix(in srgb, var(--area-accent) 12%, #FFFFFF);
	border-radius: var(--dlp-radius-pill);
	padding: 3px 10px;
}

/* ③ 職場と家庭 ===================================================== */
.dlp-workhome { background: var(--lp-blue-very-pale, #F0F5FC); }
.dlp-workhome__lede {
	text-align: center;
	font-size: clamp(16px, 2.4vw, 19px);
	line-height: 1.8;
	color: var(--wp--preset--color--text-muted);
	max-width: 720px;
	margin: 0 auto 36px;
}
.dlp-workhome__close {
	max-width: 820px;
	margin: 36px auto 0;
	text-align: center;
	font-size: clamp(16px, 2.4vw, 20px);
	line-height: 1.9;
	color: var(--wp--preset--color--text-base);
	text-wrap: balance;	/* 1文目の折返しで「す。」が孤立しないよう行を均等化（デスクトップ） */
}
.dlp-workhome__close strong { color: var(--wp--preset--color--brand-blue); font-weight: 800; }
.dlp-workhome__src {
	margin: 16px auto 0;
	text-align: center;
	font-size: 12.5px;
	color: var(--wp--preset--color--text-light);
}
/* セクション末尾（参考の後）の福利厚生・締め。カードなしの中央強調テキスト（2行構成） */
.dlp-workhome__welfare {
	max-width: 860px;
	margin: 28px auto 0;
	text-align: center;
	font-size: clamp(18px, 3vw, 25px);
	font-weight: 800;
	line-height: 1.9;
	color: var(--wp--preset--color--text-base);
}
.dlp-workhome__welfare strong { color: var(--wp--preset--color--brand-blue); font-weight: 800; }

.dlp-spill,
.dlp-cover {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border-soft);
	border-radius: var(--dlp-radius-lg);
	box-shadow: var(--dlp-shadow-card);
	padding: 28px 28px 24px;
	max-width: 900px;
	margin: 0 auto;
}
.dlp-cover { margin-top: 20px; }
.dlp-spill__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 18px;
	font-size: clamp(17px, 2.6vw, 21px);
	font-weight: 800;
	color: var(--wp--preset--color--text-base);
}
.dlp-spill__badge {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #FFFFFF;
	border-radius: var(--dlp-radius-pill);
	padding: 5px 14px;
}
.dlp-spill__badge--a { background: var(--wp--preset--color--brand-blue); }
.dlp-spill__badge--b { background: var(--wp--preset--color--brand-pink); }

.dlp-spill__matrix {
	display: grid;
	grid-template-columns: minmax(72px, 0.5fr) 1fr 1fr;
	gap: 10px;
	align-items: stretch;
}
.dlp-spill__corner { display: block; }
.dlp-spill__colhead {
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	color: var(--wp--preset--color--brand-blue);
	align-self: end;
	padding-bottom: 4px;
}
.dlp-spill__rowhead {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 14px;
	border-radius: var(--dlp-radius-md);
	padding: 0 6px;
	text-align: center;
}
.dlp-spill__rowhead--neg { background: var(--wp--preset--color--brand-red-pale, #FEF5F5); color: var(--wp--preset--color--brand-red, #E04E4E); }
.dlp-spill__rowhead--pos { background: var(--wp--preset--color--brand-green-pale, #F0FAF5); color: var(--wp--preset--color--brand-green, #269966); }
.dlp-spill__cell {
	border-radius: var(--dlp-radius-md);
	padding: 16px;
	font-size: 14.5px;
	line-height: 1.7;
	font-weight: 600;
	color: var(--wp--preset--color--text-base);
}
.dlp-spill__cell--neg { background: var(--wp--preset--color--brand-red-pale, #FEF5F5); border: 1px solid rgba(224, 78, 78, 0.18); }
.dlp-spill__cell--pos { background: var(--wp--preset--color--brand-green-pale, #F0FAF5); border: 1px solid rgba(38, 153, 102, 0.18); }
.dlp-spill__note {
	margin: 18px 0 0;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--wp--preset--color--text-muted);
}
.dlp-spill__note strong { color: var(--wp--preset--color--brand-blue); }
.dlp-spill__pos-text { color: var(--wp--preset--color--brand-green, #269966); font-weight: 800; }
.dlp-spill__neg-text { color: var(--wp--preset--color--brand-red, #E04E4E); font-weight: 800; }

.dlp-cover__desc {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--wp--preset--color--text-muted);
}
.dlp-cover__flows {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.dlp-cover__pair {
	flex: 1 1 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	border-radius: var(--dlp-radius-md);
	padding: 18px 12px;
	box-shadow: 0 2px 12px rgba(20, 30, 50, 0.05);
}
/* 関係性ごとに色分け：職場=青／家庭=バイオレット／同僚=アンバー（赤・緑＝マトリクスの「波」、ピンク＝赤系のため避ける） */
.dlp-cover__pair:nth-child(1) {
	background: color-mix(in srgb, var(--wp--preset--color--brand-blue) 9%, #fff);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-blue) 28%, #fff);
}
.dlp-cover__pair:nth-child(2) {
	background: color-mix(in srgb, #7C5CBF 10%, #fff);
	border: 1px solid color-mix(in srgb, #7C5CBF 30%, #fff);
}
.dlp-cover__pair:nth-child(3) {
	background: color-mix(in srgb, var(--wp--preset--color--brand-amber) 11%, #fff);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-amber) 30%, #fff);
}
.dlp-cover__node {
	font-weight: 800;
	font-size: 16px;
	color: var(--wp--preset--color--text-base);
	background: #fff;
	border-radius: var(--dlp-radius-pill);
	padding: 6px 16px;
	box-shadow: 0 1px 5px rgba(20, 30, 50, 0.10);
}
.dlp-cover__arrow {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	font-size: 20px;
	color: var(--wp--preset--color--brand-pink);
}
.dlp-cover__pair:nth-child(1) .dlp-cover__arrow { color: var(--wp--preset--color--brand-blue); }
.dlp-cover__pair:nth-child(2) .dlp-cover__arrow { color: #7C5CBF; }
.dlp-cover__pair:nth-child(3) .dlp-cover__arrow { color: var(--wp--preset--color--brand-amber); }
.dlp-cover__sub {
	margin: 18px 0 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--wp--preset--color--text-muted);
}

/* ⑥ 想定対象 ===================================================== */
.dlp-targets__lede {
	text-align: center;
	font-size: 18px;
	color: var(--wp--preset--color--text-muted);
	margin: 0 auto 36px;
}
.dlp-targets__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
}
.dlp-target-card {
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border-soft);
	border-top: 4px solid var(--target-accent);
	border-radius: var(--dlp-radius-lg);
	box-shadow: var(--dlp-shadow-card);
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
}
.dlp-target-card__icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--target-accent) 12%, #FFFFFF);
	color: var(--target-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.dlp-target-card__title {
	font-size: 21px;
	font-weight: 800;
	color: var(--wp--preset--color--text-base);
	margin: 0 0 10px;
}
.dlp-target-card__tag {
	align-self: flex-start;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--target-accent);
	background: color-mix(in srgb, var(--target-accent) 10%, #FFFFFF);
	border-radius: var(--dlp-radius-pill);
	padding: 4px 12px;
	margin-bottom: 14px;
}
.dlp-target-card__body {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--wp--preset--color--text-muted);
}
.dlp-targets__note {
	text-align: center;
	margin: 32px auto 0;
	font-size: clamp(19px, 2.9vw, 24px);
	font-weight: 800;
	line-height: 1.8;
	color: var(--wp--preset--color--text-base);
}
/* モバイルは大きい強調だと読みにくいので、小さく・軽く・自然な折返しに */
@media (max-width: 640px) {
	.dlp-targets__note { font-size: 16px; font-weight: 700; line-height: 1.7; }
}

/* ⑦ 効果のひろがり ================================================ */
.dlp-ripple { background: var(--lp-gray-soft, #F5F7FA); }
.dlp-ripple__lede {
	text-align: center;
	font-size: 18px;
	color: var(--wp--preset--color--text-muted);
	margin: 0 auto 36px;
}
.dlp-ripple__chain {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1180px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 10px;
	position: relative;
}
/* 番号サークルの中心を貫く連結ライン（横フロー時） */
.dlp-ripple__chain::before {
	content: "";
	position: absolute;
	top: 36px;
	left: 7%;
	right: 7%;
	height: 4px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--wp--preset--color--brand-blue) 24%, #FFFFFF);
	z-index: 0;
}
.dlp-ripple__step {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
}
.dlp-ripple__step::after { display: none; }
.dlp-ripple__num {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--brand-blue) 12%, #FFFFFF);
	box-shadow: 0 0 0 5px var(--lp-gray-soft, #F5F7FA), 0 6px 18px rgba(74, 120, 209, 0.18);
	color: var(--wp--preset--color--brand-blue);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 800;
	font-size: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.dlp-ripple__label {
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.55;
	color: var(--wp--preset--color--text-base);
}
.dlp-ripple__step--goal .dlp-ripple__num {
	background: var(--dlp-grad-cta);
	color: #FFFFFF;
	box-shadow: 0 0 0 5px var(--lp-gray-soft, #F5F7FA), 0 10px 26px rgba(74, 120, 209, 0.4);
	transform: scale(1.1);
}
.dlp-ripple__step--goal .dlp-ripple__label {
	color: var(--wp--preset--color--brand-blue);
	font-weight: 800;
}
.dlp-ripple__bi {
	max-width: 880px;
	margin: 28px auto 0;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border-soft);
	border-left: 4px solid var(--wp--preset--color--brand-blue);
	border-radius: var(--dlp-radius-md);
	padding: 16px 20px;
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--wp--preset--color--text-muted);
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.dlp-ripple__bi-label {
	flex-shrink: 0;
	display: inline-block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #FFFFFF;
	background: var(--wp--preset--color--brand-blue);
	border-radius: var(--dlp-radius-pill);
	padding: 3px 10px;
}
.dlp-ripple__close {
	text-align: center;
	margin: 26px auto 0;
	font-size: clamp(17px, 2.6vw, 22px);
	font-weight: 800;
	line-height: 1.7;
	color: var(--wp--preset--color--text-base);
}
.dlp-ripple__src {
	text-align: center;
	margin: 14px auto 0;
	font-size: 12.5px;
	color: var(--wp--preset--color--text-light);
}

/* ⑪ 初回トライアル ================================================ */
.dlp-trial {
	display: flex;
	align-items: center;
	gap: 22px;
	max-width: 900px;
	margin: 0 auto 28px;
	background: linear-gradient(135deg, #EAF1FC 0%, #E9F0EA 100%);
	border: 1px solid var(--wp--preset--color--border-soft);
	border-radius: var(--dlp-radius-lg);
	padding: 24px 28px;
}
.dlp-trial__badge {
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #FFFFFF;
	background: var(--dlp-grad-cta);
	border-radius: var(--dlp-radius-pill);
	padding: 8px 16px;
	box-shadow: var(--dlp-shadow-button);
}
.dlp-trial__title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 800;
	color: var(--wp--preset--color--brand-blue);
}
.dlp-trial__note {
	margin: 0;
	font-size: 13.5px;
	color: var(--wp--preset--color--text-muted);
}
/* 初回トライアル：内容＝タグ、対象＝ラベル付き行（区切り詰め込みを解消し可読性UP） */
.dlp-trial__spec {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 10px;
}
.dlp-trial__speclabel {
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--brand-blue);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-blue) 35%, transparent);
	border-radius: var(--dlp-radius-pill);
	padding: 2px 11px;
}
.dlp-trial__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}
.dlp-trial__tag {
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--brand-blue);
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-blue) 18%, #FFFFFF);
	border-radius: var(--dlp-radius-pill);
	padding: 4px 12px;
	white-space: nowrap;
}
.dlp-trial__target {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--wp--preset--color--text-base);
}

/* --- 新セクション レスポンシブ --- */
@media (max-width: 768px) {
	.dlp-spill,
	.dlp-cover { padding: 20px 16px 18px; }
	.dlp-spill__head { font-size: 16px; gap: 8px; }
	.dlp-spill__matrix { grid-template-columns: 40px 1fr 1fr; gap: 6px; }
	.dlp-spill__colhead { font-size: 11.5px; }
	.dlp-spill__rowhead { font-size: 12px; writing-mode: vertical-rl; padding: 8px 2px; }
	.dlp-spill__cell { font-size: 12.5px; padding: 12px 10px; line-height: 1.6; }
	.dlp-spill__note,
	.dlp-cover__sub { font-size: 13px; }
	.dlp-cover__flows { flex-direction: column; gap: 10px; }
	.dlp-cover__pair { flex-basis: auto; }

	.dlp-targets__grid { grid-template-columns: 1fr; gap: 16px; }
	.dlp-target-card { padding: 24px 20px; }

	.dlp-ripple__bi { padding: 14px 16px; font-size: 13.5px; }

	.dlp-trial { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
	.dlp-trial__title { font-size: 18px; }
	.dlp-trial__spec { margin-bottom: 9px; }
	.dlp-trial__tag { font-size: 12.5px; padding: 4px 11px; }
	.dlp-trial__target { font-size: 13px; }
	.dlp-trial__note { font-size: 12.5px; }
	.dlp-tarea-card__effect { font-size: 13px; }
}

/* RIPPLE 連鎖図：768px以上は横フロー（base）、767px以下は番号＋ラベルの縦リスト。 */
@media (max-width: 767px) {
	.dlp-ripple__chain { flex-direction: column; align-items: stretch; gap: 8px; max-width: 400px; }
	.dlp-ripple__chain::before { display: none; }
	.dlp-ripple__step { flex-direction: row; align-items: center; text-align: left; gap: 16px; }
	.dlp-ripple__num { width: 52px; height: 52px; font-size: 21px; box-shadow: 0 0 0 4px var(--lp-gray-soft, #F5F7FA), 0 4px 12px rgba(74, 120, 209, 0.18); }
	.dlp-ripple__label { font-size: 15px; }
	.dlp-ripple__step--goal .dlp-ripple__num { transform: none; }
}
@media (min-width: 1100px) {
	.dlp-ripple__chain { flex-wrap: nowrap; }
	.dlp-ripple__step { min-width: 0; }
}

/* モバイル：セクション見出し・リード文の文字サイズを統一（大体揃える）。
   targets/ripple/work-home(close)/team はモバイル上書きが無く16〜18pxだったため、
   他セクションの基準（hero=14.5px）に合わせて全リードを14.5pxへ。roots見出しも19pxに統一。
   ※ファイル末尾に置き、既存の散在ルールにカスケードで勝たせる。 */
@media (max-width: 640px) {
	.dlp-roots__lead { font-size: 19px; }
	.dlp-hero__lede,
	.dlp-worries__lede,
	.dlp-workhome__close,
	.dlp-philosophy__lede,
	.dlp-training-areas__lede,
	.dlp-targets__lede,
	.dlp-ripple__lede,
	.dlp-formats__lede,
	.dlp-steps__lede,
	.dlp-final__lede,
	.dlp-experts__lede {
		font-size: 14.5px;
		line-height: 1.7;
	}
}

/* モバイル：行末の孤立（1〜数文字で終わる行）を抑制。
   balance＝リード/注記/小見出し（行長を均等化）、pretty＝本文・カード説明・リスト（最終行を埋める）。 */
@media (max-width: 640px) {
	.dlp-workhome__close,
	.dlp-workhome__welfare,
	.dlp-targets__lede,
	.dlp-ripple__lede,
	.dlp-ripple__close,
	.dlp-experts__lede,
	.dlp-spill__note,
	.dlp-cover__sub,
	.dlp-numbered-item__title,
	.dlp-expert-card__role { text-wrap: balance; }
	.dlp-workhome__welfare { margin-top: 22px; }
	li,
	.dlp-tarea-card__lead,
	.dlp-tarea-card__purpose { text-wrap: pretty; }
	/* モバイルで非表示にする要素（ヒーローのリード後半など） */
	.dlp-hide-sp { display: none; }
}

/* ============================================================
   モバイル・アコーディオン（カードの詳細を折りたたみ）
   JS有効（.js-on）かつ640px以下のみ。JS無効/デスクトップは全文表示。
   ============================================================ */
.dlp-acc__hint { display: none; }	/* ヒントはデスクトップ/JS無効では常に非表示 */
@media (max-width: 640px) {
	.js-on .dlp-acc { position: relative; }
	.js-on .dlp-acc .dlp-acc__head {
		cursor: pointer;
		padding-right: 30px;
		-webkit-tap-highlight-color: transparent;
	}
	/* 右上のシェブロン（開閉インジケーター） */
	.js-on .dlp-acc::after {
		content: "";
		position: absolute;
		right: 18px;
		top: 26px;
		width: 9px;
		height: 9px;
		border-right: 2px solid var(--wp--preset--color--brand-blue);
		border-bottom: 2px solid var(--wp--preset--color--brand-blue);
		transform: rotate(45deg);
		transition: transform .25s ease;
		pointer-events: none;
		opacity: .85;
	}
	.js-on .dlp-acc:not(.is-collapsed)::after {
		transform: translateY(3px) rotate(225deg);
	}
	/* 折りたたみ時は詳細を隠す */
	.js-on .dlp-acc.is-collapsed .dlp-acc__body { display: none; }
	/* 折りたたみヒント（タップで開く）は閉時のみ表示 */
	.js-on .dlp-acc .dlp-acc__hint {
		display: none;
		margin-top: 10px;
		font-size: 12px;
		font-weight: 700;
		color: var(--wp--preset--color--brand-blue);
		letter-spacing: .02em;
	}
	.js-on .dlp-acc.is-collapsed .dlp-acc__hint { display: block; }
}

/* ===== Retention LP — Hero illustration（2026-06-20） =====
   人物フラットイラスト hero.svg（1805x871・男女ペア＋波及）をヒーローに組込。
   デスクトップ＝全幅背景＋左スクリム＋テキスト左固定／モバイル＝縦積み・分離（重ねない）。
   イラスト自身が同心円リップル（波）を持つため、装飾の大波 .dlp-hero__waves はこのヒーローでは非表示。 */
.dlp-hero__waves { display: none !important; }

/* ヘッダーとヒーローの継ぎ目解消：top-region（header+heroの共通ラッパー）の背景を
   イラスト背景色 #F2F7FD に合わせる（従来は --lp-mint-pale=淡い緑。イラスト導入で
   ヘッダー(緑)とヒーロー(青)の色が食い違い境目が出ていた）。透明なheader/heroが
   この色を見せ、イラスト上端(#F2F7FD)と同色になり継ぎ目が消える。 */
.dlp-top-region { background: #F2F7FD; }

.dlp-hero { min-height: 620px; }

.dlp-hero__art {
	position: absolute;
	inset: 0;
	z-index: 0;                    /* body gradient より上・テキスト(.dlp-hero__inner=z2)より下 */
	display: block;
	margin: 0;
	pointer-events: none;
}
.dlp-hero__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 82% center;   /* 右寄りの主役(歩く二人)を見せ、淡い左余白をクロップ */
	display: block;
}
/* WebP背景は単色でなく横グラデのため、画像上端とページ背景(単色)の境界に継ぎ目が出る。
   画像の最上部をページ背景色からフェード(フェザー)させてハードな境界線を消す（幅非依存）。
   色はデスクトップ=#F2F7FD／モバイル(≤1100)で #ECF3FC に上書き。 */
.dlp-hero__art::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 22px;
	background: linear-gradient(to bottom, #F2F7FD, rgba(242, 247, 253, 0));
	pointer-events: none;
	z-index: 1;
}

/* 左スクリム＝左カラムのテキスト可読性を確保（イラスト背景色 #F2F7FD から透明へ） */
.dlp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg,
		#F2F7FD 0%,
		#F2F7FD 32%,
		rgba(242, 247, 253, 0.82) 48%,
		rgba(242, 247, 253, 0) 68%);
}

/* テキストを左カラムに固定（中央の人物に被りすぎない幅に） */
.dlp-hero__text { max-width: 560px; }

/* 見出しを2行に分割（1行目gradient／2行目.dlp-hero__title-l2）。2行目の右揃えは
   モバイル限定（≤1100px の縦積みブロックで text-align:right）。デスクトップは左のまま。 */
.dlp-hero__title .dlp-gradient { display: block; }
.dlp-hero__title-l2 { display: block; }

/* CTAは hero.php で .dlp-hero 直下に移動（DOM順＝テキスト→イラスト→CTA）。
   デスクトップ(≥1101px)＝オーバーレイの左カラムでテキストの下・イラストの上に重ねる。
   モバイル(≤1100px)＝イラストの後＝最後に表示（前原さん決定 2026-06-20）。 */
.dlp-hero__cta-group { position: relative; z-index: 2; margin-top: 44px; }  /* テキスト/画像とボタンの余白を確保 */

/* ===== 広いデスクトップ（≥1101px）：全幅オーバーレイ・テキスト左寄せ・見出しを列幅に合わせ調整 ===== */
@media (min-width: 1101px) {
	.dlp-hero__inner { justify-items: start !important; }
	.dlp-hero__title { font-size: 44px; line-height: 1.32; }
	.dlp-hero__lede { font-size: 18px; }
	/* イラストを背景として全体に敷きつつ、コンテンツは上寄せにしてヘッダーとの余白を詰める
	   （中央寄せだとヘッダー〜コンテンツ間が約145pxも空くため）。min-height は人物が
	   見切れない高さ(720px)を確保し、空く下側はイラストが満たす。 */
	.dlp-hero { min-height: 780px; padding-top: 40px; }   /* 画像全体（歩く二人の頭〜足元）を表示できる高さ。ヘッダーとの余白は下記のflex-start＋padding-topで詰める */
	/* WebP上端は横グラデ(左=淡#F2F7FD→右=青#E1EFFC)。ヘッダー(top-region)とフェザーを
	   同じ横グラデにして右側まで色を一致＝右上の継ぎ目を解消（単色#F2F7FDだと右だけ食い違う）。 */
	.dlp-top-region { background: linear-gradient(90deg, #F2F7FD 0%, #F0F6FD 50%, #E1EFFC 100%); }
	.dlp-hero__art::before {
		height: 30px;
		background: linear-gradient(90deg, #F2F7FD 0%, #F0F6FD 50%, #E1EFFC 100%);
		-webkit-mask-image: linear-gradient(to bottom, #000, transparent);
		        mask-image: linear-gradient(to bottom, #000, transparent);
	}
}

/* ===== タブレット以下（≤1100px）：縦積み・分離（テキスト上／イラスト下・重ねない） =====
   狭い幅では全幅オーバーレイだと人物とテキストが密になるため、分離レイアウトに切替。 */
@media (max-width: 1100px) {
	.dlp-hero { min-height: auto; padding-top: 20px; }   /* ヘッダーとの余白を詰める */
	.dlp-hero::before { display: none; }                 /* 重ねないのでスクリム不要 */
	/* 継ぎ目解消：hero_mobile.svg の上端色 #ECF3FC にページ背景を合わせる
	   （desktopは hero.svg の #F2F7FD のまま）。 */
	.dlp-top-region { background: #ECF3FC; }
	.dlp-hero__text { max-width: 100%; }
	.dlp-hero__title-l2 { text-align: right; }           /* 見出し2行目の右揃えはモバイル(縦積み)限定 */
	.dlp-hero__art {
		position: relative;           /* フェザー(::before)を画像内に位置づけるため */
		z-index: auto;
		margin: 0 calc(-1 * var(--dlp-section-pad-x)) 0;  /* 全幅バンド・リードとの余白を詰める */
	}
	.dlp-hero__art::before {          /* フェザー色をモバイル背景 #ECF3FC に合わせる */
		background: linear-gradient(to bottom, #ECF3FC, rgba(236, 243, 252, 0));
	}
	.dlp-hero__art img {
		height: auto;
		aspect-ratio: 8 / 5;          /* 約1.6。hero_mobile.svg(1.42:1)の上下の空きを軽く切り、
		                                 リードとの余白を詰める。 */
		object-fit: cover;
		object-position: 50% 70%;     /* 上の空きを多めに削り、足元(下)は残す＝頭は切らない */
	}
}

/* ============================================================
   実績紹介（Track Record）— 2026-06-28 復元（旧パターンを現行設計に合わせ再構築）
   ============================================================ */
.dlp-track-record__lede {
	text-align: center;
	font-size: 18px;
	color: var(--wp--preset--color--text-muted);
	margin: 0 auto 36px;
}

/* 見出しを外したロゴ帯の説明文を下側に置くパターン（上マージンで分離） */
.dlp-track-record__lede--bottom { margin: 32px auto 6px; }

.dlp-group-head {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #EBF4FC;
	padding: 8px 16px;
	margin-block: 8px;
	border-radius: 6px;
}

.dlp-group-head__stripe {
	display: inline-block;
	width: 4px;
	height: 22px;
	background: var(--wp--preset--color--brand-blue);
	border-radius: 2px;
}

.dlp-group-head__title {
	font-weight: 700;
	font-size: 18px;
	color: var(--wp--preset--color--brand-blue);
}

.dlp-group-head--gap { margin-top: 28px; }

.dlp-marquee {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
	padding-block: 10px;
}

.dlp-marquee__track {
	display: flex;
	gap: 16px;
	width: max-content;
	animation: dlp-marquee 40s linear infinite;
}

.dlp-marquee--reverse .dlp-marquee__track {
	animation-direction: reverse;
	animation-duration: 50s;
}

.dlp-marquee:hover .dlp-marquee__track { animation-play-state: paused; }

@keyframes dlp-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.dlp-logo-chip {
	flex: 0 0 auto;
	min-width: 220px;
	height: 70px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	border: 1px solid var(--wp--preset--color--border-soft);
	border-radius: 12px;
	color: var(--wp--preset--color--text-base);
	font-weight: 700;
	font-size: 16px;
	padding: 22px 28px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
	transition: transform 0.3s ease, box-shadow 0.35s ease;
}

.dlp-logo-chip:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(33, 38, 54, 0.10);
}

.dlp-foot-note {
	text-align: center;
	font-size: 13px;
	color: var(--wp--preset--color--text-light);
	margin: 18px 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.dlp-marquee__track { animation: none; }
}

@media (max-width: 640px) {
	.dlp-marquee__track { gap: 10px; }
	.dlp-logo-chip {
		min-width: 140px;
		height: auto;
		min-height: 50px;
		font-size: 12px;
		line-height: 1.35;
		padding: 8px 12px;
		border-radius: 10px;
	}
	/* 下部の2文をモバイルで各1行に収める（幅連動で縮小） */
	.dlp-track-record__lede { font-size: clamp(11px, 3.3vw, 14.5px); }
	.dlp-foot-note { font-size: clamp(9.5px, 2.8vw, 12px); }
}

@media (max-width: 400px) {
	.dlp-logo-chip { min-width: 124px; font-size: 11px; }
}

/* ============================================================
   インライン無料相談CTA（セクション間に配置）— 2026-06-28
   ============================================================ */
.dlp-inline-cta {
	padding: 38px var(--dlp-section-pad-x);
	background: linear-gradient(180deg, #F2F7FD 0%, #EAF1FB 100%);
	text-align: center;
}

.dlp-inline-cta__inner {
	max-width: var(--dlp-content-w);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.dlp-inline-cta__lead {
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

.dlp-inline-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 300px;
	background: var(--dlp-grad-cta);
	color: #FFFFFF;
	font-weight: 700;
	font-size: 19px;
	padding: 16px 40px;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: var(--dlp-shadow-button);
	transition: transform 0.25s ease, box-shadow 0.3s ease;
}

.dlp-inline-cta__btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--dlp-shadow-button-hover);
	color: #FFFFFF;
}

.dlp-inline-cta__arrow {
	font-family: var(--wp--preset--font-family--inter);
	transition: transform 0.25s ease;
}

.dlp-inline-cta__btn:hover .dlp-inline-cta__arrow { transform: translateX(5px); }

@media (max-width: 640px) {
	.dlp-inline-cta { padding: 28px var(--dlp-section-pad-x); }
	.dlp-inline-cta__lead { font-size: 14px; }
	.dlp-inline-cta__btn { width: 100%; min-width: 0; font-size: 16px; padding: 15px 24px; }
}

/* ============================================================
   ヒーローCTA 調整（下に配置・横幅拡大・サイズ拡大）— 2026-06-28 / 色は据え置き
   ============================================================ */
.dlp-hero__cta {
	min-width: 380px;
	font-size: 23px;
	padding: 22px 54px;
}

/* 特徴チップ（リード文とCTAボタンの間に置き、テキスト〜チップ〜ボタンを一続きに） */
.dlp-hero__features {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.dlp-hero__feature {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid var(--wp--preset--color--border-soft);
	border-radius: 999px;
	padding: 7px 16px 7px 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--text-base);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.dlp-hero__feature::before {
	content: "✓";
	color: var(--wp--preset--color--brand-blue);
	font-weight: 900;
}

/* デスクトップ（≥1101px）：イラストは全高表示（頭〜足元・継ぎ目なし）を保ちつつ、テキストの塊を
   上寄せ(flex-start)にしてヘッダーとの距離を詰める。padding-top はテキストを上げすぎない中庸値。 */
@media (min-width: 1101px) {
	.dlp-hero { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 64px; }
	.dlp-hero__cta-group { margin-top: 28px; max-width: 600px; }
	.dlp-hero__cta { width: 100%; }   /* ボタン横幅をテキスト列いっぱいに拡大 */
}

/* モバイル：全幅維持（min-width 解除）。長めの文言を1行に収めるため font/padding を調整 */
@media (max-width: 640px) {
	.dlp-hero__cta { min-width: 0; font-size: 15px; padding: 16px 18px; }
	.dlp-hero__features { display: none; }   /* モバイルは特徴チップを非表示 */
}