@charset "UTF-8";
/* ==========================================================================
   Catalys — Design CSS（追加CSS 1ファイル）
   Claude Design "Top page UI mockups" の忠実な再現
   参照: uploads/DESIGN.md（トークン・A11y）/ CLAUDE.md（日本語の折返し・面パネル）

   目次
     01. トークン
     02. キーフレーム
     03. ベース / SWELL の打ち消し
     04. レイアウト（セクション・インナー）
     05. タイポグラフィ部品
     06. ボタン / リンク
     07. カード / グリッド / 定義行 / STEP
     08. リスト系（ニュース・ナレッジ・メンバー）
     09. 特殊パーツ（ヒーロー・ドーナツ・マーキー・事業図・プレースホルダ）
     10. ヘッダー / ドロワー / フッター / モーダル
     11. ページ個別
     12. レスポンシブ（〜959px = SPデザイン）
     13. reduced-motion
     14. ブロックエディタ内
   ========================================================================== */


/* ==========================================================================
   01. トークン
   ========================================================================== */
:root {
	/* ブランド */
	--ctl-brand-logo: #009FE8;
	--ctl-brand-ui: #0070A3;
	--ctl-brand-ui-dark: #005B85;
	--ctl-navy: #0F2A3F;
	--ctl-navy-hover: #183C57;

	/* 面 */
	--ctl-surface-0: #FFFFFF;
	--ctl-surface-1: #F4F7FA;
	--ctl-surface-2: #E8EEF4;
	--ctl-surface-tint: #E8F1F8;
	--ctl-surface-inverse: #0A1D2B;
	--ctl-surface-deep: #06121B;
	--ctl-surface-raised: #16344B;

	/* テキスト */
	--ctl-text: #131C24;
	--ctl-text-body: #40566A;
	--ctl-muted: #5A6B7B;
	--ctl-on-dark: #FFFFFF;
	--ctl-on-dark-muted: rgba(255, 255, 255, .70);

	/* 罫 */
	--ctl-border: #DDE4EA;
	--ctl-border-strong: #CBD6E0;
	--ctl-border-soft: #EDF2F6;
	--ctl-border-dark: rgba(255, 255, 255, .16);

	/* 透過 */
	--ctl-tint: rgba(0, 159, 232, .08);
	--ctl-tint-strong: rgba(0, 159, 232, .14);
	--ctl-ring: 0 0 0 3px rgba(0, 159, 232, .35);
	--ctl-overlay: rgba(15, 42, 63, .55);

	/* フォント */
	--ctl-font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	--ctl-font-en: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ctl-font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--ctl-font-mono: ui-monospace, Menlo, Consolas, monospace;

	/* レイアウト
	   McKinsey の実測に合わせ、本文は min(1224px, 85%) を中央寄せ。
	   ヘッダーはそれより一段広い min(1348px, 90%)。 */
	--ctl-content: 1224px;
	--ctl-content-pct: 85%;
	--ctl-head: 1348px;
	--ctl-head-pct: 90%;
	--ctl-pad-y: 96px;
	--ctl-pad-y-s: 88px;
}


/* ==========================================================================
   02. キーフレーム
   ========================================================================== */
@keyframes ctlFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ctlRiseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ctlScrollHint { 0% { transform: translateY(-110%); } 55%, 100% { transform: translateY(110%); } }
@keyframes ctlMarqueeX { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes ctlSepFlow { from { left: -200px; } to { left: 100%; } }
/* SP の STEP は罫が縦になるので、光も上から下へ流す */
@keyframes ctlSepFlowY { from { top: -120px; } to { top: 100%; } }
@keyframes ctlScrollBar { 0% { background-position: 0 -60%; } 55%, 100% { background-position: 0 160%; } }


/* ==========================================================================
   03. ベース / SWELL の打ち消し
   ========================================================================== */
:root .ctl-body {
	background: var(--ctl-surface-0);
	font-family: var(--ctl-font-jp);
	color: var(--ctl-text);
	-webkit-font-smoothing: antialiased;
	/* CLAUDE.md 必須ルール: 熟語・単語の途中で改行しない */
	word-break: auto-phrase;
	line-break: strict;
}

/* 部品側（ナビ・ドロワー等）の色指定が勝つよう、:where() で詳細度を 0 にしておく */
:root .ctl-body :where(a:not(.wp-block-button__link, .swell-block-button__link)) { color: var(--ctl-brand-ui); text-decoration: none; }
:root .ctl-body :where(a:hover) { color: var(--ctl-brand-ui-dark); }

:root .ctl-body :focus-visible { outline: none; box-shadow: var(--ctl-ring); border-radius: 4px; }

/* コンテンツを全幅で使う（SWELL のコンテナ幅制約を解除） */
:root .ctl-body #content.l-container,
:root .ctl-body #content.l-content {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}
:root .ctl-body #main_content,
:root .ctl-body .l-mainContent {
	margin: 0;
	padding: 0;
	max-width: none;
	width: 100%;
	background: transparent;
	box-shadow: none;
	border: 0;
}
:root .ctl-body .l-mainContent__inner { padding: 0; }
:root .ctl-body .p-articleThumb,
:root .ctl-body .c-postTitle,
:root .ctl-body .l-articleBottom,
:root .ctl-body .p-breadcrumb { display: none; }

/* SWELL の .post_content 装飾（見出しの罫線・擬似要素・リスト記号など）を止める */
:root :is(.ctl-content, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6) {
	padding: 0;
	background: none;
	border: 0;
	text-align: inherit;
}
:root :is(.ctl-content, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6)::before,
:root :is(.ctl-content, .editor-styles-wrapper) :is(h1, h2, h3, h4, h5, h6)::after {
	content: none;
	display: none;
}
:root :is(.ctl-content, .editor-styles-wrapper) :is(ul, ol) { padding: 0; margin: 0; list-style: none; }
:root :is(.ctl-content, .editor-styles-wrapper) :is(ul, ol) > li::before,
:root :is(.ctl-content, .editor-styles-wrapper) :is(ul, ol) > li::marker { content: none; }
:root :is(.ctl-content, .editor-styles-wrapper) a { text-decoration: none; }
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-image { margin: 0; }

/* .post_content の既定マージンを無効化（セクション側で余白を持つ） */
:root .ctl-content { margin: 0; padding: 0; }
:root .ctl-content > * { margin: 0; }
:root .ctl-content > .ctl-section + .ctl-section { margin-top: 0; }
/* WordPress の flow レイアウトが付ける 24px を打ち消す。
   詳細度は .ctl-mt-* と同じ (0,1,0) に留め、後段の指定が勝つようにする。 */
:root .ctl-content :where(.ctl-section,
:root .ctl-inner,
:root .ctl-hero__body,
:root .ctl-hero__panel) > * { margin-top: 0; }

/* カード全体をクリック可能にする（マークアップはコアブロックのまま） */
:root .ctl-stretch { position: relative; }
/* 見出しは位置の基準にしない。
   SWELL が .post_content の見出しに position:relative を当てるため、
   そのままだと記事タイトルのリンクのクリック領域が見出しの中だけに縮み、
   代わりにカテゴリーのリンクがカード全体を覆ってしまう。 */
:root .ctl-stretch :where(h2, h3, h4) { position: static; }

/* カテゴリーのチップは、カード全体ではなく自分の範囲だけをクリック領域にする。
   カードの他の場所を押したときは記事へ飛ぶ。 */
:root .ctl-stretch .ctl-tag a::after { content: none; }
:root .ctl-stretch .ctl-tag a { position: relative; z-index: 2; }
:root .ctl-stretch a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

:root :is(.ctl-content, .editor-styles-wrapper) img { max-width: 100%; height: auto; }
:root :is(.ctl-content, .editor-styles-wrapper) figure { margin: 0; }
:root :is(.ctl-content, .editor-styles-wrapper) p:empty:not([class]) { display: none; }


/* ==========================================================================
   04. レイアウト（セクション・インナー）
   ========================================================================== */
:root .ctl-section {
	position: relative;
	z-index: 0;
	overflow: hidden;
	padding: var(--ctl-pad-y) 0 calc(var(--ctl-pad-y) + 8px);
	background: var(--ctl-surface-tint);
}

/* 面のバリエーション */
:root .ctl-section.-s0 { background: var(--ctl-surface-0); }
:root .ctl-section.-s1 { background: var(--ctl-surface-1); }
/* セクションの中にセクションを入れてしまったときは、内側を「ただの入れ物」
   として扱う。パターンはセクションごと挿入するので、既存セクションの中に
   落とすとこうなる。放っておくと区切り線が二重に出て、余白も二重になる。 */
/* -pad-96 などと詳細度が並ぶので :root:root で一段上げる */
:root:root .ctl-section .ctl-section {
	padding-top: 0;
	padding-bottom: 0;
	background: transparent;
}
:root:root .ctl-section .ctl-section > .ctl-sep { display: none; }
/* 内側の .ctl-inner で幅がさらに狭まらないようにする */
:root .ctl-inner .ctl-inner { width: 100%; }
:root .ctl-section.-s2 { background: var(--ctl-surface-2); }
:root .ctl-section.-tint { background: var(--ctl-surface-tint); }
:root .ctl-section.-inverse { background: var(--ctl-surface-inverse); }
:root .ctl-section.-deep { background: var(--ctl-surface-deep); }

/* パディングのバリエーション（元デザインの上下パディングをそのまま持つ） */
:root .ctl-section.-pad-64 { padding: 64px 0 68px; }
:root .ctl-section.-pad-80 { padding: 80px 0 88px; }
:root .ctl-section.-pad-88 { padding: 88px 0 96px; }
:root .ctl-section.-pad-96 { padding: 96px 0 104px; }
:root .ctl-section.-pad-104 { padding: 104px 0 112px; }
:root .ctl-section.-pad-120 { padding: 120px 0; }
:root .ctl-section.-pad-s { padding: var(--ctl-pad-y-s) 0 var(--ctl-pad-y); }
:root .ctl-section.-pad-xs { padding: 80px 0 88px; }
:root .ctl-section.-pad-flush { padding: 0; }

:root .ctl-inner {
	position: relative;
	z-index: 2;
	width: min(var(--ctl-content), var(--ctl-content-pct));
	margin-inline: auto;
	box-sizing: border-box;
}
:root .ctl-inner.-narrow { width: min(880px, var(--ctl-content-pct)); }
:root .ctl-inner.-center { text-align: center; }

/* 面いっぱいの装飾画像（core/image に .ctl-bgimg を付ける） */
:root .ctl-bgimg {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	pointer-events: none;
}
:root .ctl-bgimg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left bottom;
	opacity: .85;
	display: block;
}
:root .ctl-bgimg.-center img { object-position: center 40%; opacity: .3; }

/* TOP のミッション背景（雲）。JS がスクロール量に応じて
   opacity 0.02 → 1 / translateX -760px → 0 を書き込む。 */
:root .ctl-bgimg.-cloud {
	inset: auto;
	left: 0;
	top: -10%;
	width: 160%;
	height: 120%;
	opacity: .02;
	will-change: transform, opacity;
}
:root .ctl-bgimg.-cloud img { opacity: 1; }

/* メディア未登録のプレースホルダ画像（src を外した状態）は alt を出さない */
:root :is(.ctl-content, .editor-styles-wrapper) img[data-ctl-src] { color: transparent; font-size: 0; min-height: 1px; }
:root .ctl-artcard__thumb img[data-ctl-src] { display: block; height: 100%; }

/* 装飾キャンバス置き場 */
:root .ctl-ripple { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
:root .ctl-net { position: absolute; z-index: 0; pointer-events: none; width: 560px; height: 280px; }


/* ==========================================================================
   05. タイポグラフィ部品
   ========================================================================== */
:root .ctl-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}
:root .ctl-eyebrow::before {
	content: "";
	display: block;
	flex: none;
	width: 26px;
	height: 1px;
	background: var(--ctl-brand-ui);
}
:root .ctl-eyebrow__label,
:root .ctl-eyebrow > strong,
:root .ctl-eyebrow > span {
	font-family: var(--ctl-font-en);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: .22em;
	line-height: 1.2;
	color: var(--ctl-brand-ui);
}
:root .ctl-eyebrow.-center { justify-content: center; }
:root .ctl-eyebrow.-center::after {
	content: "";
	display: block;
	flex: none;
	width: 26px;
	height: 1px;
	background: var(--ctl-brand-ui);
}
:root .ctl-eyebrow.-on-dark::before,
:root .ctl-eyebrow.-on-dark::after { background: var(--ctl-brand-logo); }
:root .ctl-eyebrow.-on-dark :is(.ctl-eyebrow__label, strong, span) { color: var(--ctl-brand-logo); }
:root .ctl-eyebrow.-tight :is(.ctl-eyebrow__label, strong, span) { letter-spacing: .18em; }

:root .ctl-h2 {
	margin: 22px 0 0;
	font-family: var(--ctl-font-jp);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.4;
	letter-spacing: .04em;
	color: var(--ctl-navy);
}
:root .ctl-h2.-mincho {
	font-family: var(--ctl-font-mincho);
	font-weight: 600;
	font-size: 38px;
	letter-spacing: .05em;
	white-space: nowrap;
}
:root .ctl-h2.-nowrap { white-space: nowrap; }
/* 英語ページの見出しは折り返す。日本語は短い一行に収まる前提で nowrap に
   してあるが、英語は同じ内容でも3〜4倍の長さになり本文に重なるため。 */
:root[lang="en"] .ctl-h2.-mincho,
:root[lang="en"] .ctl-h2.-nowrap { white-space: normal; }
:root[lang="en"] .ctl-h2.-mincho { font-size: 32px; line-height: 1.45; }
/* 英語のヒーロー見出しは、日本語の8文字と違って一行に収まらないので折り返す。
   :root:root と同じ強さに [lang] を足して、78px の指定より後ろで勝たせる。 */
:root:root[lang="en"] .ctl-hero__title { white-space: normal; font-size: 56px; }
@media (max-width: 959.98px) {
	:root:root[lang="en"] .ctl-hero__title { font-size: 34px; }
}
@media (max-width: 599.98px) {
	:root:root[lang="en"] .ctl-hero__title { font-size: 27px; }
}
:root .ctl-h2.-on-dark { color: var(--ctl-on-dark); }
:root .ctl-h2.-sm { font-size: 26px; }
:root .ctl-h2.-concept { margin-top: 28px; font-size: 30px; line-height: 1.65; }
:root .ctl-h2.-concept sup { font-size: 15px; vertical-align: super; }

:root .ctl-h3 {
	margin: 0;
	font-family: var(--ctl-font-jp);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.6;
	letter-spacing: .02em;
	color: var(--ctl-navy);
}

:root .ctl-lead {
	margin: 0;
	font-size: 13.5px;
	line-height: 2.05;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}
:root .ctl-lead.-lg { font-size: 14px; line-height: 2.1; color: var(--ctl-text-body); }
:root .ctl-lead.-on-dark { color: var(--ctl-on-dark-muted); }
:root .ctl-lead.-concept { max-width: 530px; font-size: 15px; line-height: 2.15; color: #33475A; }
:root .ctl-lead strong { font-weight: 700; color: var(--ctl-text); }
:root .ctl-lead.-on-dark strong { color: var(--ctl-on-dark); }

:root .ctl-mincho {
	margin: 0;
	font-family: var(--ctl-font-mincho);
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.9;
	letter-spacing: .03em;
	color: #16394F;
}
:root .ctl-mincho + .ctl-mincho { margin-top: 22px; }

:root .ctl-note {
	margin: 0;
	font-size: 10.5px;
	letter-spacing: .04em;
	line-height: 1.8;
	color: #5F7386;
}
:root .ctl-note.-on-dark { color: rgba(255, 255, 255, .55); }

:root:root .ctl-mt-8 { margin-top: 8px !important; }
:root:root .ctl-mt-12 { margin-top: 12px !important; }
:root:root .ctl-mt-16 { margin-top: 16px !important; }
:root:root .ctl-mt-20 { margin-top: 20px !important; }
:root:root .ctl-mt-24 { margin-top: 24px !important; }
:root:root .ctl-mt-28 { margin-top: 28px !important; }
:root:root .ctl-mt-32 { margin-top: 32px !important; }
:root:root .ctl-mt-40 { margin-top: 40px !important; }
:root:root .ctl-mt-44 { margin-top: 44px !important; }
:root:root .ctl-mt-52 { margin-top: 52px !important; }
:root:root .ctl-mt-56 { margin-top: 56px !important; }


/* ==========================================================================
   06. ボタン / リンク
   ========================================================================== */
:root .ctl-btns { display: flex; gap: 18px; margin: 0; }
:root .ctl-btns.-center { justify-content: center; }
:root .ctl-btns.-end { justify-content: flex-end; }
:root .ctl-btns.-stack { flex-direction: column; }

:root .ctl-btns .wp-block-button__link,
:root .ctl-btn {
	display: inline-block;
	box-sizing: border-box;
	background: var(--ctl-navy);
	color: var(--ctl-on-dark);
	font-family: var(--ctl-font-jp);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .04em;
	padding: 15px 24px;
	border-radius: 8px;
	border: 1px solid transparent;
	text-align: center;
	transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out;
}
:root .ctl-btns .wp-block-button__link:hover,
:root .ctl-btn:hover {
	background: var(--ctl-navy-hover);
	color: var(--ctl-on-dark);
}

/* 幅 280px の CTA ボタン */
:root .ctl-btns.-w280 .wp-block-button__link { width: 280px; padding-inline: 0; }

/* セカンダリ（白地・青字・罫線） */
:root .ctl-btns .is-style-outline .wp-block-button__link,
:root .ctl-btn.-ghost {
	background: var(--ctl-surface-0);
	color: var(--ctl-brand-ui);
	font-weight: 500;
	border: 1px solid var(--ctl-border);
	padding: 14px 24px;
}
:root .ctl-btns .is-style-outline .wp-block-button__link:hover,
:root .ctl-btn.-ghost:hover {
	background: var(--ctl-tint);
	color: var(--ctl-brand-ui-dark);
	border-color: var(--ctl-border);
}

/* 暗い面のプライマリ */
:root .ctl-btns.-on-dark .wp-block-button__link,
:root .ctl-btn.-on-dark {
	background: var(--ctl-brand-logo);
	color: var(--ctl-navy);
}
:root .ctl-btns.-on-dark .wp-block-button__link:hover,
:root .ctl-btn.-on-dark:hover { background: #33B4EC; color: var(--ctl-navy); }

/* 罫線付きの矢印リンク（段落ブロック + その中のリンク） */
:root .ctl-arrowlink { display: flex; justify-content: flex-end; margin: 0; }
:root .ctl-arrowlink.-left { justify-content: flex-start; }
:root .ctl-arrowlink a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	width: 250px;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--ctl-navy);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ctl-navy);
	transition: color .18s ease-out, border-color .18s ease-out;
}
:root .ctl-arrowlink a::after { content: "→"; font-family: var(--ctl-font-en); }
:root .ctl-arrowlink a:hover { color: var(--ctl-brand-ui-dark); border-bottom-color: var(--ctl-brand-ui-dark); }
:root .ctl-arrowlink.-w220 a { width: 220px; }

/* 下線だけの控えめなリンク */
:root .ctl-morelink { margin: 0; flex: none; }
:root .ctl-morelink.-right { display: flex; justify-content: flex-end; }
:root .ctl-morelink a {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(0, 112, 163, .4);
	font-size: 13px;
	font-weight: 500;
	color: var(--ctl-brand-ui);
	transition: color .18s ease-out, border-color .18s ease-out;
}
:root .ctl-morelink a:hover { color: var(--ctl-brand-ui-dark); border-bottom-color: var(--ctl-brand-ui-dark); }

/* 丸ボタン付きのピル型リンク */
:root .ctl-pill { margin: 0; }
:root .ctl-pill a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, .55);
	border-radius: 999px;
	padding: 8px 10px 8px 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--ctl-navy);
	transition: background-color .18s ease-out;
}
:root .ctl-pill a:hover { background: var(--ctl-tint); color: var(--ctl-navy); }
:root .ctl-pill a::after {
	content: "▶";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ctl-navy);
	color: var(--ctl-on-dark);
	font-size: 10px;
	line-height: 1;
}

:root .ctl-tag {
	display: inline-block;
	background: var(--ctl-tint);
	color: var(--ctl-brand-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .02em;
	padding: 3px 8px;
	border-radius: 6px;
}
/* カテゴリーが複数付いているときの入れ物。タグ同士の間隔をそろえる */
:root .ctl-tags {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}
:root .ctl-date {
	font-family: var(--ctl-font-en);
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .05em;
	color: var(--ctl-muted);
}


/* ==========================================================================
   07. カード / グリッド / 定義行 / STEP
   ========================================================================== */
:root .ctl-grid { display: grid; gap: 16px; margin: 0; }
:root .ctl-grid.-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root .ctl-grid.-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root .ctl-grid.-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:root .ctl-grid.-gap-10 { gap: 10px; }
:root .ctl-grid.-gap-14 { gap: 14px; }
:root .ctl-grid.-gap-24 { gap: 24px; }

:root .ctl-card {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 0;
	overflow: hidden;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 30px 28px;
	color: var(--ctl-text);
	margin: 0;
}
:root .ctl-card.-round { border-radius: 12px; padding: 26px; }
:root .ctl-card.-shadow { transition: box-shadow .2s ease-out; }
:root .ctl-card.-shadow:hover { box-shadow: 0 6px 18px rgba(15, 42, 63, .1); }
:root .ctl-card__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .01em;
	color: var(--ctl-navy);
}
:root .ctl-card.-round .ctl-card__title { font-size: 16.5px; line-height: 1.5; }
:root .ctl-card__text {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.95;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}
:root .ctl-card.-round .ctl-card__text { margin-top: 12px; font-size: 12.5px; line-height: 1.9; }
:root .ctl-card.-round .ctl-card__text + .ctl-card__text { margin-top: 8px; }
:root .ctl-card__text strong { font-weight: 700; color: var(--ctl-brand-ui); }
:root .ctl-card__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--ctl-border-soft);
}
:root .ctl-card__row {
	display: flex;
	gap: 14px;
	font-size: 11.5px;
	line-height: 1.7;
	color: var(--ctl-text-body);
	margin: 0;
}
:root .ctl-card__row > strong { width: 64px; flex: none; font-weight: 700; color: var(--ctl-muted); }
:root .ctl-card__grow { flex: 1; }

/* 承継カードの背景装飾（元デザインの幾何モチーフを CSS で再現） */
:root .ctl-card.-deco-loop::after,
:root .ctl-card.-deco-arrow::after,
:root .ctl-card.-deco-target::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}
:root .ctl-card.-deco-loop::after {
	right: -26px;
	bottom: -30px;
	width: 200px;
	height: 110px;
	transform: rotate(-10deg);
	background:
		radial-gradient(circle at 46px 54px, transparent 34px, rgba(90, 107, 123, .13) 34px 45px, transparent 46px),
		radial-gradient(circle at 120px 54px, transparent 34px, rgba(90, 107, 123, .13) 34px 45px, transparent 46px);
}
:root .ctl-card.-deco-arrow::after {
	right: -14px;
	bottom: -24px;
	width: 190px;
	height: 170px;
	transform: rotate(-6deg);
	background:
		linear-gradient(rgba(90, 107, 123, .14), rgba(90, 107, 123, .14)) 96px 0 / 7px 150px no-repeat,
		linear-gradient(135deg, transparent 46%, rgba(90, 107, 123, .15) 46% 60%, transparent 60%) 0 92px / 60px 60px no-repeat;
}
:root .ctl-card.-deco-target::after {
	right: -30px;
	bottom: -34px;
	width: 190px;
	height: 190px;
	border-radius: 50%;
	background:
		radial-gradient(circle,
			transparent 0 27px,
			rgba(90, 107, 123, .16) 27px 36px,
			transparent 36px 56px,
			rgba(90, 107, 123, .13) 56px 65px,
			transparent 65px 86px,
			rgba(90, 107, 123, .11) 86px 95px,
			transparent 95px);
}

/* 暗い面のカードは塗りではなくヘアラインで仕切る（DESIGN.md 2-3） */
:root .ctl-section.-inverse .ctl-card,
:root .ctl-section.-deep .ctl-card {
	background: transparent;
	border-color: var(--ctl-border-dark);
	color: var(--ctl-on-dark);
}
:root .ctl-section.-inverse .ctl-card__title { color: var(--ctl-on-dark); }
:root .ctl-section.-inverse .ctl-card__text { color: var(--ctl-on-dark-muted); }

/* 2カラム（左見出し / 右本文） */
:root .ctl-split {
	display: grid;
	grid-template-columns: 520px minmax(0, 1fr);
	gap: 96px;
	margin: 0;
	align-items: start;
}
:root .ctl-split.-c340 { grid-template-columns: 340px minmax(0, 1fr); }
:root .ctl-split.-c560 { grid-template-columns: 560px minmax(0, 1fr); }
:root .ctl-split.-c480 { grid-template-columns: 480px minmax(0, 1fr); }
:root .ctl-split.-even { grid-template-columns: minmax(0, 1fr) 380px; }
:root .ctl-split__head,
:root .ctl-split__body { margin: 0; min-width: 0; }
:root .ctl-split__body.-pt6 { padding-top: 6px; }

/* 定義行（会社概要など） */
:root .ctl-rows {
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 12px 40px;
	margin: 0;
}
:root .ctl-row {
	display: flex;
	gap: 48px;
	padding: 22px 0;
	border-bottom: 1px solid var(--ctl-border-soft);
	margin: 0;
}
:root .ctl-rows > .ctl-row:last-child { border-bottom: 0; }
:root .ctl-row__key {
	width: 160px;
	flex: none;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.9;
	letter-spacing: .04em;
	color: var(--ctl-navy);
	margin: 0;
}
:root .ctl-row__val {
	flex: 1;
	font-size: 13.5px;
	line-height: 1.9;
	letter-spacing: .01em;
	color: var(--ctl-text-body);
	margin: 0;
}

/* 罫線で区切る強み一覧 */
:root .ctl-strengths { border-top: 1px solid var(--ctl-border-strong); margin: 0; }
:root .ctl-strength {
	display: flex;
	gap: 40px;
	padding: 26px 4px;
	border-bottom: 1px solid var(--ctl-border-strong);
	margin: 0;
}
:root .ctl-strength__title {
	width: 280px;
	flex: none;
	margin: 0;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--ctl-navy);
}
:root .ctl-strength__text {
	flex: 1;
	margin: 0;
	font-size: 13px;
	line-height: 2;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}

/* STEP レール */
:root .ctl-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
:root .ctl-steps.-c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
:root .ctl-step { padding-right: 32px; margin: 0; }
:root .ctl-step__bar { display: flex; align-items: center; gap: 12px; }
:root .ctl-step__bar::before {
	content: "";
	display: block;
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ctl-brand-ui);
}
:root .ctl-step__bar > span {
	position: relative;
	flex: 1;
	height: 1px;
	background: var(--ctl-border-strong);
	overflow: hidden;
}
/* 罫線の上を光が左から右へ流れる */
:root .ctl-step__bar > span::after {
	content: "";
	position: absolute;
	left: -60px;
	top: 0;
	width: 60px;
	height: 100%;
	background: linear-gradient(90deg, rgba(0, 112, 163, 0), var(--ctl-brand-ui), rgba(0, 112, 163, 0));
	animation: ctlSepFlow 2.8s linear infinite;
}
:root .ctl-step:nth-child(2) .ctl-step__bar > span::after { animation-delay: .7s; }
:root .ctl-step:nth-child(3) .ctl-step__bar > span::after { animation-delay: 1.4s; }
:root .ctl-step:nth-child(4) .ctl-step__bar > span::after { animation-delay: 2.1s; }
:root .ctl-step:nth-child(5) .ctl-step__bar > span::after { animation-delay: 2.8s; }
:root .ctl-step__no {
	margin: 16px 0 0;
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--ctl-brand-ui);
}
:root .ctl-step__title {
	margin: 8px 0 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ctl-navy);
}
:root .ctl-step__text {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.9;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}

/* 支援メニューカード —— 横並び型（下層ページ） */
:root .ctl-service {
	display: flex;
	gap: 22px;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 26px 28px;
	color: var(--ctl-text);
	transition: border-color .2s ease-out, box-shadow .2s ease-out;
	margin: 0;
}
:root .ctl-service:hover {
	border-color: rgba(0, 112, 163, .5);
	box-shadow: 0 6px 18px rgba(15, 42, 63, .08);
	color: var(--ctl-text);
}
:root .ctl-service__no {
	display: block;
	flex: none;
	padding-top: 3px;
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .14em;
	color: var(--ctl-brand-ui);
	margin: 0;
}
:root .ctl-service__body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
:root .ctl-service__title {
	display: block;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--ctl-navy);
}
:root .ctl-service__text {
	display: block;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.9;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}
:root .ctl-service__arrow {
	display: block;
	align-self: flex-end;
	flex: none;
	font-family: var(--ctl-font-en);
	font-size: 13px;
	color: var(--ctl-brand-ui);
	margin: 0;
}

/* 支援メニューカード —— 縦積み型（TOP の 4×2 グリッド） */
:root .ctl-service.-stack {
	flex-direction: column;
	gap: 14px;
	border-radius: 12px;
	padding: 22px;
}
:root .ctl-service.-stack .ctl-service__no { padding-top: 0; font-size: 11.5px; letter-spacing: .16em; }
:root .ctl-service.-stack .ctl-service__title {
	font-size: 15.5px;
	line-height: 1.6;
	min-height: 50px;
	color: var(--ctl-text);
}
:root .ctl-service.-stack .ctl-service__arrow { align-self: flex-end; }

/* 帯状の告知（無料診断など） */
:root .ctl-banner {
	display: flex;
	align-items: center;
	gap: 24px;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 28px 32px;
	margin: 0;
}
:root .ctl-banner__body { flex: 1; }
:root .ctl-banner__title {
	margin: 0;
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--ctl-navy);
}
:root .ctl-banner__text {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.9;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}


/* ==========================================================================
   08. リスト系（ニュース・ナレッジ・メンバー）
   ========================================================================== */
:root .ctl-secthead {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin: 0;
}
:root .ctl-secthead__main { margin: 0; flex: 1; min-width: 0; }

/* ニュース */
:root .ctl-newslist { border-bottom: 1px solid var(--ctl-border-strong); margin: 0; }
:root .ctl-newsitem {
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 24px 12px;
	border-top: 1px solid var(--ctl-border-strong);
	color: var(--ctl-text);
	transition: background-color .2s ease-out;
	margin: 0;
}
:root .ctl-newsitem:hover { background: rgba(0, 159, 232, .06); color: var(--ctl-text); }
:root .ctl-newsitem__date { flex: none; width: 88px; font-size: 12.5px; }
:root .ctl-newsitem__cat {
	flex: none;
	width: 96px;
	text-align: center;
	font-size: 11px;
	padding: 4px 10px;
	box-sizing: border-box;
	/* カテゴリー名が長くても行が増えないようにする（CMS で自由に付けられるため） */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
:root .ctl-newsitem__title { flex: 1; font-size: 14.5px; line-height: 1.7; letter-spacing: .01em; }
:root .ctl-newsitem__arrow { flex: none; font-family: var(--ctl-font-en); font-size: 13px; color: var(--ctl-brand-ui); }

/* ナレッジ（サムネ左・本文右の横並びカード） */
:root .ctl-artlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
:root .ctl-artcard {
	display: flex;
	gap: 18px;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 12px;
	padding: 20px;
	color: var(--ctl-text);
	transition: border-color .2s ease-out, box-shadow .2s ease-out;
	margin: 0;
}
:root .ctl-artcard:hover {
	border-color: rgba(0, 112, 163, .5);
	box-shadow: 0 6px 18px rgba(15, 42, 63, .08);
	color: var(--ctl-text);
}
:root .ctl-artcard__thumb {
	position: relative;
	width: 110px;
	height: 74px;
	flex: none;
	border-radius: 8px;
	overflow: hidden;
	background: #DCE9F4;
	margin: 0;
}
:root .ctl-artcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root .ctl-artcard__body { flex: 1; display: flex; flex-direction: column; gap: 10px; }
:root .ctl-artcard__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
/* カテゴリーが複数付いているときは、1つの箱にカンマでまとめず、箱を分けて並べる。
   クエリーループの「投稿タグ」ブロックは、既定だと1つの箱に「A, B」と入ってしまう。 */
:root .ctl-artcard__meta .wp-block-post-terms {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	background: transparent;
	padding: 0;
	border-radius: 0;
}
:root .ctl-artcard__meta .wp-block-post-terms a {
	display: inline-block;
	background: var(--ctl-tint);
	color: var(--ctl-brand-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .02em;
	padding: 3px 8px;
	border-radius: 6px;
}
/* 箱を分けたので、あいだのカンマは消す */
:root .ctl-artcard__meta .wp-block-post-terms__separator { display: none; }
:root .ctl-artcard__title {
	flex: 1;
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .01em;
}
:root .ctl-artcard__arrow {
	align-self: flex-end;
	font-family: var(--ctl-font-en);
	font-size: 12px;
	color: var(--ctl-brand-ui);
	margin: 0;
}

/* メンバー（横スクロールのレール） */
:root .ctl-memberrail {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding-bottom: 6px;
	scrollbar-width: none;
	margin: 0;
}
:root .ctl-memberrail::-webkit-scrollbar { display: none; }
/* クエリーループでは <li> がフレックスアイテムになるので、幅は li 側に持たせる */
:root .ctl-memberrail > li { flex: 0 0 188px; width: 188px; }
:root .ctl-member { width: 188px; flex: none; cursor: pointer; margin: 0; }
:root .ctl-member__photo {
	position: relative;
	aspect-ratio: 1 / 1.08;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 12px;
	overflow: hidden;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ctl-font-mono);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: .14em;
	color: #8A99A8;
}
:root .ctl-member__photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: repeating-linear-gradient(-45deg, rgba(15, 42, 63, .03) 0 10px, transparent 10px 20px);
}
:root .ctl-member__photo { isolation: isolate; }
:root .ctl-member__photo img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
:root .ctl-member__name {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--ctl-text);
	white-space: nowrap;
}
:root .ctl-member__role {
	margin: 4px 0 0;
	font-family: var(--ctl-font-en);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: .1em;
	color: var(--ctl-brand-ui);
}
:root .ctl-member__summary { margin: 10px 0 0; font-size: 11.5px; line-height: 1.8; color: var(--ctl-muted); }
:root .ctl-member__bio { display: none; }

/* メンバー一覧ページ用のグリッド */
:root .ctl-membergrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	overflow: visible;
	margin: 0;
}
:root .ctl-membergrid .ctl-member { width: auto; flex: auto; }
:root .ctl-membergrid .ctl-member__name { white-space: normal; }
/* 英語の氏名はレールの幅（SP 106px）に収まらないので折り返す */
:root[lang="en"] .ctl-memberrail .ctl-member__name { white-space: normal; }


/* ==========================================================================
   09. 特殊パーツ
   ========================================================================== */

/* --- TOP ヒーロー ------------------------------------------------------ */
:root .ctl-hero {
	position: relative;
	z-index: 0;
	overflow: hidden;
	/* ヘッダー行（padding 30px + ロゴ 44px + padding 30px）の高さを確保する。
	   元デザインではヘッダーがヒーロー内の通常フローに積まれており、
	   ヒーロー全体は 104px + ステージ 700px = 804px になる。 */
	padding: 104px 0 0;
	/* ファーストビューの高さ。ログイン中は管理バー分を引く。 */
	--ctl-hero-fold: 100vh;
	/* タイトル上の余白。画面が低いときは自動で詰めて、
	   導線リンク（ご相談はこちら）までをファーストビューに入れる。
	   617px = ヘッダー帯104 + 本文上余白60 + タイトル以下429 + 下のゆとり24。
	   画面が十分に高ければ元デザインどおり 172px になる。 */
	--ctl-hero-top: clamp(40px, calc(var(--ctl-hero-fold) - 617px), 172px);
	background: radial-gradient(120% 135% at 68% 40%, #FEFEFF 0%, #EDF4FA 30%, #D2E3F1 58%, #A6C6DD 88%, #8FB4CF 100%);
}
/* ログイン中は管理バー（32px）の分だけ見える高さが減る */
:root .admin-bar .ctl-hero { --ctl-hero-fold: calc(100vh - 32px); }

:root .ctl-hero__stage {
	position: relative;
	width: 100%;
	/* 60(本文上余白) + 429(タイトル以下) + 39(下の余白) = 528 */
	height: calc(528px + var(--ctl-hero-top));
	box-sizing: border-box;
	overflow: hidden;
}
/* エフェクトは元デザインと同じ式で置く。
   left: max(560px, 100% - 880px) — 左端は常に 560px より右なので、
   コピー（左端 96px からの 700px）に乗り上げてこない。
   画面が 1440px より狭いときは右端が切れるが、
   ロゴ形に集まる部分（キャンバスの 24.66～73.5%）は残る。 */
:root .ctl-hero__fx {
	position: absolute;
	left: max(560px, calc(100% - 880px));
	right: auto;
	/* 元デザインの top:50% + margin-top:-270px と同じ。
	   margin は他のリセットに消されるので calc で持たせる。 */
	top: calc(50% - 270px);
	width: 880px;
	height: 540px;
	pointer-events: none;
	z-index: 0;
}
:root .ctl-hero__fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
:root .ctl-hero__fx img {
	position: absolute;
	left: 24.66%;
	top: 34.81%;
	width: 48.86%;
	height: 31.85%;
	object-fit: contain;
	opacity: 0;
	margin: 0;
}
:root .ctl-hero__body {
	position: relative;
	z-index: 1;
	padding-block: 60px 0;
	padding-left: max(calc((100% - var(--ctl-content-pct)) / 2), calc((100% - var(--ctl-content)) / 2));
	padding-right: 0;
	max-width: 700px;
	box-sizing: content-box;
}
:root:root .ctl-hero__title {
	margin: var(--ctl-hero-top) 0 0 !important;
	font-family: var(--ctl-font-mincho);
	font-weight: 600;
	font-size: 78px;
	line-height: 1.3;
	letter-spacing: .045em;
	color: var(--ctl-navy);
	white-space: nowrap;
	animation: ctlRiseIn .9s cubic-bezier(.16, .84, .44, 1) .25s both;
}
:root .ctl-hero__sub {
	margin: 26px 0 0;
	font-family: var(--ctl-font-mincho);
	font-weight: 500;
	font-size: 27px;
	line-height: normal;
	letter-spacing: .05em;
	color: #33475A;
	animation: ctlFadeIn .9s ease-out .85s both;
}
:root .ctl-hero__panel {
	max-width: 400px;
	margin-top: 40px;
	animation: ctlRiseIn .9s ease-out 1.35s both;
}
:root .ctl-hero__text {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 2;
	letter-spacing: .02em;
	color: #33475A;
}
:root .ctl-hero__links { display: flex; flex-direction: column; margin: 0; }
:root .ctl-herolink { margin: 0; border-top: 1px solid rgba(15, 42, 63, .3); }
:root .ctl-herolink:last-child { border-bottom: 1px solid rgba(15, 42, 63, .3); }
:root .ctl-herolink a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 2px;
	font-size: 13.5px;
	line-height: normal;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--ctl-navy);
}
:root .ctl-herolink a:hover { color: var(--ctl-brand-ui-dark); }
:root .ctl-herolink a::after { content: "→"; font-family: var(--ctl-font-en); color: var(--ctl-brand-ui); }
:root .ctl-hero__scroll {
	position: absolute;
	right: 56px;
	bottom: 36px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0;
}
:root .ctl-hero__scroll span {
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .28em;
	color: #33475A;
	writing-mode: vertical-rl;
}
:root .ctl-hero__scroll::after {
	content: "";
	display: block;
	width: 2px;
	height: 76px;
	background-color: rgba(15, 42, 63, .22);
	background-image: linear-gradient(var(--ctl-navy), var(--ctl-navy));
	background-repeat: no-repeat;
	background-size: 2px 45%;
	animation: ctlScrollBar 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* --- 下層ページのヒーロー --------------------------------------------- */
:root .ctl-pagehero {
	position: relative;
	z-index: 0;
	overflow: hidden;
	padding: 72px 0 60px;
	background: radial-gradient(130% 180% at 76% 10%, #F6FAFD 0%, #E0ECF6 35%, #C7DCEE 68%, #A7C7E0 100%);
}
:root .ctl-pagehero__inner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	width: min(var(--ctl-content), var(--ctl-content-pct));
	margin-inline: auto;
	box-sizing: border-box;
}
:root .ctl-pagehero .ctl-eyebrow :is(.ctl-eyebrow__label, strong, span) { font-size: 15px; }
:root .ctl-pagehero__title {
	margin: 20px 0 0;
	font-family: var(--ctl-font-jp);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.4;
	letter-spacing: .04em;
	color: var(--ctl-navy);
	white-space: nowrap;
}
:root .ctl-pagehero__lead {
	margin: 20px 0 0;
	max-width: 640px;
	font-size: 14.5px;
	line-height: 2;
	letter-spacing: .01em;
	color: var(--ctl-text-body);
}
:root .ctl-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding-top: 6px;
	font-family: var(--ctl-font-en);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--ctl-muted);
	margin: 0;
}
:root .ctl-crumbs a { color: var(--ctl-muted); }
:root .ctl-crumbs a:hover { color: var(--ctl-brand-ui); }
:root .ctl-crumbs strong { font-family: var(--ctl-font-jp); font-weight: 400; color: var(--ctl-navy); }

/* --- 実績（カウントアップ + ドーナツ） --------------------------------- */
:root .ctl-stats {
	display: grid;
	grid-template-columns: 1fr 1fr 1.25fr;
	gap: 44px;
	margin: 0;
}
:root .ctl-stat { border-left: 1px solid #A9BCCC; padding-left: 36px; margin: 0; }
:root .ctl-stat__eyebrow {
	margin: 0;
	font-family: var(--ctl-font-en);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .22em;
	color: var(--ctl-muted);
}
:root .ctl-stat__head { display: flex; align-items: flex-start; gap: 18px; margin-top: 12px; }
:root .ctl-stat__num {
	margin: 0;
	font-family: var(--ctl-font-jp);
	font-weight: 700;
	font-size: 52px;
	letter-spacing: .01em;
	color: var(--ctl-navy);
	line-height: 1;
}
:root .ctl-stat__num strong { font-size: 28px; font-weight: 700; margin-left: 4px; }
:root .ctl-stat__body { margin: 0; }
:root .ctl-stat__gov { margin: 12px 0 0; }
:root .ctl-stat__label {
	margin: 14px 0 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--ctl-muted);
}
:root .ctl-donut {
	flex: none;
	position: relative;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	margin: 0;
}
:root .ctl-donut::after {
	content: "";
	position: absolute;
	inset: 27px;
	border-radius: 50%;
	background: var(--ctl-surface-tint);
}
:root .ctl-donut.-pj { background: conic-gradient(#0B5C87 0 50%, #1D96D0 50% 70%, #74C3E8 70% 85%, #CBE6F5 85% 100%); }
:root .ctl-donut.-co { background: conic-gradient(#0B5C87 0 10%, #1D96D0 10% 60%, #74C3E8 60% 75%, #CBE6F5 75% 100%); }

:root .ctl-legend { display: flex; flex-direction: column; gap: 5px; margin: 16px 0 0; }
:root .ctl-legend > * {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 10.5px;
	line-height: 1.7;
	color: var(--ctl-text-body);
	margin: 0;
}
:root .ctl-legend > *::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--ctl-border-strong); }
:root .ctl-legend > *:nth-child(1)::before { background: #0B5C87; }
:root .ctl-legend > *:nth-child(2)::before { background: #1D96D0; }
:root .ctl-legend > *:nth-child(3)::before { background: #74C3E8; }
:root .ctl-legend > *:nth-child(4)::before { background: #CBE6F5; }
:root .ctl-legend.-plain > *::before { display: none; }

/* --- マーキー ---------------------------------------------------------- */
:root .ctl-marquee { position: relative; display: flex; overflow: hidden; width: 100%; margin: 44px 0 0; }
:root .ctl-marquee__track {
	display: flex;
	gap: 14px;
	padding-right: 14px;
	flex: none;
	animation: ctlMarqueeX 32s linear infinite;
}
/* 2行にするときは .ctl-marquee をもう1つ下に置く。
   2行目の追加CSSクラスに -rev を足すと、逆向き（右へ）に流れて動きが単調にならない。
   速さは .ctl-marquee__track の animation の秒数で決まる（大きいほどゆっくり）。 */
:root .ctl-marquee + .ctl-marquee { margin-top: 10px; }
/* 最後の行の下は、次のセクションの雲（上に 10% はみ出してくる）と
   くっつくので、少し空ける。行が1段でも2段でも同じように効く。 */
:root .ctl-marquee:not(:has(+ .ctl-marquee)) { margin-bottom: 28px; }
:root .ctl-marquee.-rev .ctl-marquee__track { animation-direction: reverse; }
:root .ctl-marquee::before,
:root .ctl-marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
}
:root .ctl-marquee::before { left: 0; background: linear-gradient(90deg, var(--ctl-surface-tint), rgba(232, 241, 248, 0)); }
:root .ctl-marquee::after { right: 0; background: linear-gradient(270deg, var(--ctl-surface-tint), rgba(232, 241, 248, 0)); }

/* --- プレースホルダ（斜線ハッチのボックス） --------------------------- */
:root .ctl-ph {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 12px;
	overflow: hidden;
	font-family: var(--ctl-font-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .12em;
	color: #8A99A8;
	margin: 0;
	text-align: center;
}
:root .ctl-ph::before {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(-45deg, rgba(15, 42, 63, .03) 0 8px, transparent 8px 16px);
}
:root .ctl-ph > * { position: relative; margin: 0; }
:root .ctl-ph { isolation: isolate; }
:root .ctl-ph::before { z-index: -1; }
/* ロゴ画像を入れたあとは、プレースホルダの斜線を出さず白地にする。
   画像は枠に収まるまで縮めるだけで、縦横比は変えない。
   （flex の中に置いた画像は横だけ潰されることがあるので flex: none を明示し、
     念のため object-fit: contain も掛けておく） */
:root .ctl-ph:has(img)::before { display: none; }
:root .ctl-ph:has(img) { padding: 7px 12px; }
/* 経産省ロゴの枠は「横長のロゴが入る前提」で 150x52 にしてある。
   実際のロゴが正方形寄り（経産省の和文ロゴは約3:2）だと、
   その枠に収めると極端に小さくなるので、画像が入ったら枠の側を伸ばす。 */
:root .ctl-ph.-gov:has(img) {
	/* 幅だけ固定して、高さはロゴの形に合わせて伸ばす。
	   （幅も高さも中身任せにすると、中の max-width:100% と循環して潰れる） */
	width: 150px;
	height: auto;
	min-height: 52px;
	padding: 8px 12px;
}
:root .ctl-ph.-gov:has(img) img { max-height: none; }
:root .ctl-ph .wp-block-image { flex: none; max-width: 100%; max-height: 100%; margin: 0; line-height: 0; }
:root .ctl-ph img {
	flex: none;
	/* ブロック側でサイズをいじってしまっても、枠に合わせて縮めるだけにする */
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

:root .ctl-ph.-logo { width: 208px; height: 64px; flex: none; }
:root .ctl-ph.-gov { width: 150px; height: 52px; border-radius: 8px; font-size: 10px; letter-spacing: .1em; }
:root .ctl-ph.-map { min-height: 300px; border-radius: 2px; width: 100%; font-size: 11px; letter-spacing: .14em; }

/* --- 事業内容の循環ダイアグラム（PCは横並び） ------------------------- */
:root .ctl-bizdiagram {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
}
:root .ctl-bizchip {
	writing-mode: vertical-rl;
	background: rgba(255, 255, 255, .7);
	color: var(--ctl-navy);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	padding: 16px 11px;
	border-radius: 8px;
	flex: none;
	margin: 0;
}
:root .ctl-bizarrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 78px;
	flex: none;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--ctl-text-body);
	text-align: center;
	margin: 0;
}
:root .ctl-bizarrow::after {
	font-size: 17px;
	font-weight: 700;
	color: var(--ctl-brand-ui);
	line-height: 1;
}
:root .ctl-bizarrow.-left::after { content: "←"; }
:root .ctl-bizarrow.-right::after { content: "→"; }

:root .ctl-bizcircle {
	width: 316px;
	height: 316px;
	box-sizing: border-box;
	flex: none;
	border-radius: 50%;
	border: 1px solid rgba(15, 42, 63, .4);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 46px;
	text-align: center;
	margin: 0;
	background: radial-gradient(42% 42% at 50% 64%, rgba(0, 159, 232, .15) 0%, rgba(0, 159, 232, .05) 55%, rgba(0, 159, 232, 0) 100%);
}
:root .ctl-bizcircle.-succession {
	background: radial-gradient(42% 42% at 50% 64%, rgba(194, 85, 60, .14) 0%, rgba(194, 85, 60, .05) 55%, rgba(194, 85, 60, 0) 100%);
}
:root .ctl-bizcircle__title {
	margin: 0;
	font-family: var(--ctl-font-jp);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .04em;
	color: var(--ctl-navy);
}
:root .ctl-bizcircle__text {
	margin: 12px 0 0;
	font-size: 11.5px;
	line-height: 1.85;
	letter-spacing: .01em;
	color: var(--ctl-text-body);
}
:root .ctl-bizcircle .ctl-pill { margin-top: 18px; }

:root .ctl-bizloop {
	position: relative;
	width: 216px;
	height: 216px;
	flex: none;
	margin: 0 -36px;
	z-index: 1;
}
:root .ctl-bizloop::before,
:root .ctl-bizloop::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
:root .ctl-bizloop::before {
	background: conic-gradient(from 275deg, rgba(111, 191, 232, 0) 0deg, #6FBFE8 45deg, #2C84B3 170deg, transparent 170deg 360deg);
}
:root .ctl-bizloop::after {
	background: conic-gradient(from 95deg, rgba(224, 168, 150, 0) 0deg, #E0A896 45deg, #CB6F58 170deg, transparent 170deg 360deg);
}
:root .ctl-bizloop__note-a,
:root .ctl-bizloop__note-b {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 186px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.55;
	text-align: center;
	margin: 0;
	z-index: 2;
}
:root .ctl-bizloop__note-a { top: 20px; color: #2C84B3; }
:root .ctl-bizloop__note-b { bottom: 20px; color: #CB6F58; }
:root .ctl-bizloop__cap-r,
:root .ctl-bizloop__cap-l { position: absolute; z-index: 2; }
:root .ctl-bizloop__cap-r {
	right: -4px;
	top: calc(50% - 10px);
	border-top: 9px solid #2C84B3;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}
:root .ctl-bizloop__cap-l {
	left: -4px;
	top: calc(50% + 1px);
	border-bottom: 9px solid #CB6F58;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}

/* --- お問い合わせCTA --------------------------------------------------- */
:root .ctl-cta {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background: var(--ctl-surface-tint);
	padding: 120px 0;
	text-align: center;
}
:root .ctl-cta .ctl-h2 { margin-top: 28px; font-size: 34px; }
:root .ctl-cta .ctl-lead { margin: 24px auto 0; max-width: 600px; font-size: 14.5px; line-height: 2.1; }
:root .ctl-cta .ctl-btns { margin-top: 44px; }

/* --- フォーム（Snow Monkey Forms を design に寄せる） ------------------ */
:root .ctl-form {
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 40px 44px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Snow Monkey Forms を Claude Design のフォームと同じ見た目にする。
   もとの静的HTML（.ctl-field 系）と同じ値を .smf-* に当てている。
   会社名と氏名は .ctl-half を付けた item だけ2カラムにする。
   -------------------------------------------------------------------------- */
:root .ctl-form .snow-monkey-form { margin: 0; }
:root .ctl-form .smf-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 18px;
}
:root .ctl-form .smf-item {
	grid-column: 1 / -1;
	margin: 0;
	display: block;
}
:root .ctl-form .smf-item.ctl-half { grid-column: span 1; }

/* ラベル */
:root .ctl-form .smf-item__col--label {
	display: block;
	width: auto;
	padding: 0;
	/* SWELL の .post_content div > :first-child { margin-top:0 !important } に
	   勝てないので、ラベルとコントロールの間隔は下マージンで持たせる */
	margin-bottom: 8px;
}
:root .ctl-form .smf-item__label { margin: 0; }
:root .ctl-form .smf-item__label__text {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.6;
	color: var(--ctl-navy);
}
:root .ctl-req { color: #C2553C; }

/* コントロール */
:root .ctl-form .smf-item__col--controls { display: block; width: auto; padding: 0; }
:root .ctl-form .smf-item__controls { margin: 0; }
:root .ctl-form :is(.smf-text-control, .smf-textarea-control, .smf-select-control, .smf-tel-control, .smf-url-control) { display: block; }
:root .ctl-form :is(
	.smf-text-control__control,
	.smf-textarea-control__control,
	.smf-select-control__control,
	.smf-tel-control__control,
	.smf-url-control__control
) {
	width: 100%;
	box-sizing: border-box;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border-strong);
	border-radius: 8px;
	padding: 12px 14px;
	font-family: var(--ctl-font-jp);
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--ctl-text);
	transition: border-color .18s ease-out, box-shadow .18s ease-out;
}
:root .ctl-form :is(
	.smf-text-control__control,
	.smf-textarea-control__control,
	.smf-select-control__control
):focus {
	outline: none;
	border-color: var(--ctl-brand-ui);
	box-shadow: var(--ctl-ring);
}
:root .ctl-form .smf-textarea-control__control { resize: vertical; min-height: 150px; }
:root .ctl-form ::placeholder { color: #9AA9B6; opacity: 1; }

/* セレクトの矢印
   Snow Monkey Forms は .smf-select-control__toggle を inset:0 の透明な重ねにして、
   その ::before を矢印として描いている。要素自体に border を付けると
   矢印が2重になり、inset:0 の left に引っ張られて左にはみ出す。
   ここでは色と位置だけをデザインに合わせる。 */
:root .ctl-form .smf-select-control { position: relative; }
:root .ctl-form .smf-select-control__control { appearance: none; padding-right: 38px; cursor: pointer; }
:root .ctl-form .smf-select-control__toggle { color: var(--ctl-muted); }
:root .ctl-form .smf-select-control__toggle::before {
	right: 15px;
	border-width: 0 1.5px 1.5px 0;
}

/* チェックボックス（プライバシーポリシー同意） */
:root .ctl-form .smf-checkboxes-control__control { display: flex; flex-direction: column; gap: 8px; }
:root .ctl-form .smf-label { margin: 0; }
:root .ctl-form .smf-label > label { display: inline-block; cursor: pointer; }
:root .ctl-form .smf-checkbox-control { display: inline-flex; align-items: center; gap: 10px; }
:root .ctl-form .smf-checkbox-control__control {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: none;
	accent-color: var(--ctl-brand-ui);
}
:root .ctl-form .smf-checkbox-control__label {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--ctl-text-body);
}

/* 送信ボタン */
:root .ctl-form .smf-action {
	/* .smf-action は .smf-form の外（フォーム直下）にあるので、
	   グリッドの gap が効かない。最後の項目との間隔はここで持たせる。 */
	margin-top: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
}
:root .ctl-form .smf-button-control { display: inline-block; }
:root .ctl-form :is(.smf-button-control__control, .smf-action button) {
	background: var(--ctl-navy);
	color: var(--ctl-on-dark);
	font-family: var(--ctl-font-jp);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 16px 48px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color .18s ease-out;
}
:root .ctl-form :is(.smf-button-control__control, .smf-action button):hover { background: var(--ctl-navy-hover); }
:root .ctl-form .smf-button-control__control[data-action="back"] {
	background: var(--ctl-surface-0);
	color: var(--ctl-navy);
	border: 1px solid var(--ctl-border-strong);
}
:root .ctl-form .smf-button-control__control[data-action="back"]:hover {
	background: var(--ctl-surface-1);
	border-color: var(--ctl-brand-ui);
}

/* 送信中のインジケータ */
:root .ctl-form .smf-sending {
	display: none;
	width: 14px;
	height: 14px;
	margin-left: 10px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: var(--ctl-on-dark);
	border-radius: 50%;
	vertical-align: -2px;
	animation: ctlSpin .7s linear infinite;
}
:root .ctl-form [data-sending="true"] .smf-sending { display: inline-block; }
@keyframes ctlSpin { to { transform: rotate(360deg); } }

/* エラー表示 */
:root .ctl-form :is(.smf-error-messages, .smf-error-message) {
	margin-top: 6px;
	padding: 0;
	list-style: none;
	font-size: 12px;
	line-height: 1.7;
	color: #C2553C;
}
:root .ctl-form :is(
	[aria-invalid="true"],
	.smf-text-control__control[aria-invalid="true"],
	.smf-textarea-control__control[aria-invalid="true"],
	.smf-select-control__control[aria-invalid="true"]
) { border-color: #C2553C; }

/* サイドバー型（資料ダウンロード）は一回り小さく、常に1カラム */
:root .ctl-form.-side .snow-monkey-form { margin-top: 22px; }
:root .ctl-form.-side .smf-form { grid-template-columns: minmax(0, 1fr); gap: 16px; }
:root .ctl-form.-side .smf-item.ctl-half { grid-column: 1 / -1; }
:root .ctl-form.-side .smf-item__col--label { margin-bottom: 7px; }
:root .ctl-form.-side .smf-item__label__text { font-size: 12px; }
:root .ctl-form.-side :is(
	.smf-text-control__control,
	.smf-textarea-control__control,
	.smf-select-control__control
) { padding: 11px 13px; font-size: 13px; }
:root .ctl-form.-side .smf-action { display: block; margin-top: 24px; }
:root .ctl-form.-side .smf-button-control { display: block; width: 100%; }
:root .ctl-form.-side .smf-button-control__control { width: 100%; padding: 14px 0; font-size: 13.5px; }
:root .ctl-form.-side .ctl-form__note { margin-top: 12px; }

/* 確認画面・完了画面 */
:root .ctl-form .smf-complete-content {
	/* .smf-form は入力欄用の2カラムグリッドなので、
	   完了メッセージは全幅に伸ばしてから中央に置く */
	grid-column: 1 / -1;
	font-size: 14px;
	line-height: 2;
	color: var(--ctl-text-body);
	text-align: center;
}
:root .ctl-form .smf-complete-content p { margin: 0; }
:root .ctl-form [data-screen="confirm"] .smf-item__controls { color: var(--ctl-text); font-size: 13.5px; line-height: 1.8; }

@media (max-width: 959.98px) {
	:root .ctl-form .smf-form { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	:root .ctl-form .smf-item.ctl-half { grid-column: 1 / -1; }
	:root .ctl-form .smf-action { display: block; }
	:root .ctl-form .smf-button-control { display: block; width: 100%; }
	:root .ctl-form :is(.smf-button-control__control, .smf-action button) { width: 100%; padding: 14px 0; font-size: 13.5px; }
}


/* ==========================================================================
   10. ヘッダー / ドロワー / フッター / モーダル
   ========================================================================== */

/* --- ヘッダー ---------------------------------------------------------- */
:root .ctl-body .ctl-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--ctl-surface-0);
	border-bottom: 1px solid #E4EBF1;
	box-shadow: none;
	height: auto;
	min-height: 0;
	transition: background-color .2s ease-out, border-color .2s ease-out;
}
:root .ctl-body .ctl-header::before,
:root .ctl-body .ctl-header::after { content: none; }

/* TOP はヒーローに重ねたうえで、スクロールしても上に残す */
:root .ctl-body .ctl-header--overlay {
	position: fixed;
	inset: 0 0 auto;
	background: transparent;
	border-bottom: 0;
}
/* 少しでもスクロールしたら地の色を敷いて可読性を確保する */
:root .ctl-body .ctl-header--overlay.is-stuck {
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid #E4EBF1;
}
:root .ctl-header--overlay.is-stuck .ctl-header__inner { padding-block: 20px; }
:root .ctl-header--overlay.is-stuck .ctl-logo__img { height: 38px; }

:root .ctl-header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	width: min(var(--ctl-head), var(--ctl-head-pct));
	margin-inline: auto;
	padding: 20px 0;
	box-sizing: border-box;
}
:root .ctl-header--overlay .ctl-header__inner { padding-block: 30px; }

:root .ctl-logo { display: block; flex: none; line-height: 0; }
:root .ctl-logo__img { height: 38px; width: auto; display: block; }
:root .ctl-header--overlay .ctl-logo__img { height: 44px; }
:root .ctl-logo__text {
	font-family: var(--ctl-font-en);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: .06em;
	color: var(--ctl-navy);
	line-height: 1.2;
}
:root .ctl-logo__text.is-white { color: var(--ctl-on-dark); }

:root .ctl-gnav { display: flex; align-items: center; gap: 28px; }
:root .ctl-gnav__list {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
:root .ctl-gnav__item { position: relative; margin: 0; padding: 8px 0; }
:root .ctl-gnav__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: .16em;
	color: #2E4356;
	transition: color .18s ease-out;
}
:root .ctl-gnav__link:hover { color: var(--ctl-brand-ui-dark); }
:root .ctl-gnav__item.is-current > .ctl-gnav__link {
	color: var(--ctl-navy);
	border-bottom: 1px solid var(--ctl-navy);
	padding-bottom: 3px;
}
:root .ctl-gnav__caret { font-size: 9px; }

:root .ctl-gnav__dropdown {
	position: absolute;
	left: -18px;
	top: 100%;
	padding-top: 12px;
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease-out, visibility .18s ease-out;
}
:root .ctl-gnav__item.is-open > .ctl-gnav__dropdown { opacity: 1; visibility: visible; }
:root .ctl-gnav__panel {
	display: flex;
	flex-direction: column;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	box-shadow: 0 12px 32px rgba(15, 42, 63, .14);
	padding: 10px;
	min-width: 220px;
}
:root .ctl-gnav__panel a {
	display: block;
	padding: 11px 14px;
	border-radius: 8px;
	font-family: var(--ctl-font-jp);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--ctl-text);
	white-space: nowrap;
	transition: background-color .18s ease-out, color .18s ease-out;
}
:root .ctl-gnav__panel a:hover { background: var(--ctl-tint); color: var(--ctl-brand-ui); }
/* 言語切替（JA / EN）。両方を出し、いま見ている言語を塗りつぶして示す。
   現在の言語は <span>（押せない）、もう一方は <a> で出している。 */
:root .ctl-langswitch {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--ctl-border-strong);
	border-radius: 999px;
	overflow: hidden;
	line-height: 1;
}
:root .ctl-langswitch__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 26px;
	padding: 0 9px;
	font-family: var(--ctl-font-en);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--ctl-muted);
	transition: background-color .2s ease-out, color .2s ease-out;
}
:root a.ctl-langswitch__item:hover { background: var(--ctl-tint); color: var(--ctl-brand-ui); }
:root .ctl-langswitch__item.is-current {
	background: var(--ctl-navy);
	color: var(--ctl-on-dark);
	cursor: default;
}
/* SPドロワーの中。PCのヘッダーナビはSPで非表示になるため、こちらにも出す */
:root .ctl-drawer__lang { display: flex; justify-content: center; margin: 4px 0 18px; }
/* ドロワーの行は「日本語ラベル＋英字ラベル」の2段組み。英語ページでは
   日本語の段を出さず、英字だけにする。 */
:root[lang="en"] .ctl-drawer__ja { display: none; }

:root .ctl-gnav__cta {
	display: inline-block;
	background: var(--ctl-navy);
	color: var(--ctl-on-dark);
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: .16em;
	padding: 11px 20px;
	border-radius: 8px;
	transition: background-color .18s ease-out;
}
:root .ctl-gnav__cta:hover { background: var(--ctl-navy-hover); color: var(--ctl-on-dark); }

/* TOP（ヒーロー重ね）のヘッダーは、デザインどおり CONTACT を下線テキストにする */
:root .ctl-header--overlay .ctl-gnav__cta {
	background: none;
	color: var(--ctl-navy);
	border-bottom: 1px solid var(--ctl-navy);
	border-radius: 0;
	padding: 0 0 3px;
	transition: color .18s ease-out, border-color .18s ease-out;
}
:root .ctl-header--overlay .ctl-gnav__cta:hover {
	background: none;
	color: var(--ctl-brand-ui-dark);
	border-bottom-color: var(--ctl-brand-ui-dark);
}

:root .ctl-burger {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 8px 4px;
	background: transparent;
	border: none;
	cursor: pointer;
}
:root .ctl-burger span { display: block; width: 20px; height: 2px; background: var(--ctl-navy); }
:root .ctl-burger span:last-child { width: 14px; }

/* --- SP ドロワー ------------------------------------------------------- */
:root .ctl-drawer {
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: var(--ctl-navy);
	display: flex;
	flex-direction: column;
	padding: 16px 24px 28px;
	overflow: auto;
	animation: ctlFadeIn .25s ease-out both;
}
:root .ctl-drawer[hidden] { display: none; }
html.ctl-drawer-open { overflow: hidden; }

:root .ctl-drawer__head { display: flex; justify-content: space-between; align-items: center; }
:root .ctl-drawer__logo { line-height: 0; }
:root .ctl-drawer__logo .ctl-logo__img { height: 24px; }
:root .ctl-drawer__close {
	background: transparent;
	border: none;
	font-size: 22px;
	line-height: 1;
	color: rgba(255, 255, 255, .85);
	cursor: pointer;
	padding: 6px;
}
:root .ctl-drawer__nav { display: flex; flex-direction: column; margin-top: 20px; }
:root .ctl-drawer__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 15px 2px;
	border-bottom: 1px solid var(--ctl-border-dark);
	color: var(--ctl-on-dark);
}
:root .ctl-drawer__group > .ctl-drawer__row { border-bottom: 0; padding-bottom: 6px; }
:root .ctl-drawer__group { padding-bottom: 10px; border-bottom: 1px solid var(--ctl-border-dark); }
:root .ctl-drawer__ja { font-size: 14.5px; font-weight: 700; letter-spacing: .04em; color: var(--ctl-on-dark); }
:root .ctl-drawer__en {
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 9.5px;
	letter-spacing: .2em;
	color: var(--ctl-brand-logo);
}
:root .ctl-drawer__sub { display: flex; flex-direction: column; padding: 8px 0 4px 14px; gap: 2px; }
:root .ctl-drawer__sub a { padding: 7px 0; color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 500; }
:root .ctl-drawer__sub a:hover { color: var(--ctl-brand-logo); }
:root .ctl-drawer__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
:root .ctl-drawer__btn {
	display: block;
	text-align: center;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 14px 0;
}
:root .ctl-drawer__btn.-primary { background: var(--ctl-brand-logo); color: var(--ctl-navy); }
:root .ctl-drawer__btn.-ghost {
	border: 1px solid rgba(255, 255, 255, .3);
	color: var(--ctl-on-dark);
	font-weight: 500;
	font-size: 12.5px;
	padding: 13px 0;
}

/* --- フッター ---------------------------------------------------------- */
:root .ctl-body .l-footer { background: transparent; }
:root .ctl-footer {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background: linear-gradient(180deg, #152634 0%, #0C1B27 100%);
	padding: 48px 0 26px;
}
:root .ctl-footer__inner {
	display: flex;
	justify-content: space-between;
	gap: 64px;
	width: min(var(--ctl-content), var(--ctl-content-pct));
	margin-inline: auto;
	box-sizing: border-box;
}
:root .ctl-footer__logo { display: block; line-height: 0; }
:root .ctl-footer__logo .ctl-logo__img { height: 34px; }
:root .ctl-footer__address {
	margin: 24px 0 0;
	font-size: 12.5px;
	line-height: 2.1;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .6);
}
:root .ctl-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(170px, auto));
	gap: 16px 56px;
	align-content: start;
	padding-top: 6px;
}
:root .ctl-footer__nav a { color: rgba(255, 255, 255, .8); transition: color .18s ease-out; }
:root .ctl-footer__nav a:hover { color: var(--ctl-brand-logo); }
:root .ctl-footer__nav a.is-en {
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .14em;
}
:root .ctl-footer__nav a.is-ja { font-size: 12.5px; font-weight: 500; letter-spacing: .04em; }
/* BUSINESS のまとまり。英字の見出しの下に、日本語の2ページをぶら下げる。
   2行ぶんの高さを取るので、右の列との行のずれが出ない。 */
:root .ctl-footer__group {
	display: flex;
	flex-direction: column;
	gap: 9px;
	grid-row: span 2;
}
:root .ctl-footer__grouplabel {
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .8);
}
:root .ctl-footer__group a.is-ja { padding-left: 12px; position: relative; }
:root .ctl-footer__group a.is-ja::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 6px;
	height: 1px;
	background: rgba(255, 255, 255, .45);
}
:root .ctl-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: min(var(--ctl-content), var(--ctl-content-pct));
	margin: 34px auto 0;
	padding: 16px 0 0;
	box-sizing: border-box;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
:root .ctl-footer__bottom a { font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, .75); }
:root .ctl-footer__bottom a:hover { color: var(--ctl-brand-logo); }
:root .ctl-footer__bottom span {
	font-family: var(--ctl-font-en);
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .5);
}

/* --- メンバーモーダル -------------------------------------------------- */
:root .ctl-modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; }
:root .ctl-modal[hidden] { display: none; }
html.ctl-modal-open { overflow: hidden; }
:root .ctl-modal__backdrop { position: absolute; inset: 0; background: var(--ctl-overlay); }
:root .ctl-modal__panel {
	position: relative;
	background: var(--ctl-surface-0);
	border-radius: 12px;
	padding: 32px;
	width: 460px;
	max-width: calc(100% - 40px);
	max-height: calc(100% - 80px);
	overflow: auto;
	box-shadow: 0 24px 60px rgba(6, 18, 27, .3);
}
:root .ctl-modal__head { display: flex; align-items: flex-start; gap: 18px; }
/* 顔写真。カードと同じ縦横比（1 : 1.08）で、名前の左に置く */
:root .ctl-modal__photo {
	flex: none;
	width: 120px;
	aspect-ratio: 1 / 1.08;
	background: var(--ctl-surface-1);
	border: 1px solid var(--ctl-border);
	border-radius: 10px;
	overflow: hidden;
}
:root .ctl-modal__photo[hidden] { display: none; }
:root .ctl-modal__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root .ctl-modal__who { flex: 1; min-width: 0; align-self: center; }
:root .ctl-modal__name { font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--ctl-text); }
:root .ctl-modal__role {
	margin-top: 5px;
	font-family: var(--ctl-font-en);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: .12em;
	color: var(--ctl-brand-ui);
}
:root .ctl-modal__close {
	background: transparent;
	border: none;
	font-size: 18px;
	line-height: 1;
	color: var(--ctl-muted);
	cursor: pointer;
	padding: 4px;
}
:root .ctl-modal__bio {
	margin-top: 16px;
	font-size: 13px;
	line-height: 1.95;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}
:root .ctl-modal__bio p { margin: 0 0 12px; }
:root .ctl-modal__bio p:last-child { margin-bottom: 0; }


/* ==========================================================================
   11. ページ個別
   ========================================================================== */

/* TOP: 事業内容セクションは中央寄せの図が主役 */
:root .ctl-section.-bizflow .ctl-inner { display: flex; flex-direction: column; align-items: center; }
:root .ctl-section.-bizflow .ctl-eyebrow,
:root .ctl-section.-bizflow .ctl-h2 { align-self: flex-start; }

/* コルチゾールマネジメント（暗い面） */
:root .ctl-section.-inverse .ctl-h2,
:root .ctl-section.-deep .ctl-h2 { color: var(--ctl-on-dark); }
:root .ctl-section.-inverse .ctl-lead,
:root .ctl-section.-deep .ctl-lead { color: var(--ctl-on-dark-muted); }
:root .ctl-section.-inverse a:not(.ctl-btn):not(.wp-block-button__link),
:root .ctl-section.-deep a:not(.ctl-btn):not(.wp-block-button__link) { color: var(--ctl-brand-logo); }
:root .ctl-section.-inverse .ctl-ph,
:root .ctl-section.-deep .ctl-ph {
	background: rgba(255, 255, 255, .04);
	border-color: var(--ctl-border-dark);
	color: rgba(255, 255, 255, .5);
}
:root .ctl-section.-inverse .ctl-ph::before,
:root .ctl-section.-deep .ctl-ph::before {
	background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .04) 0 8px, transparent 8px 16px);
}

/* ダウンロード / お問い合わせ */
:root .ctl-section.-form .ctl-inner { width: min(1024px, var(--ctl-content-pct)); }


/* 2カラムは画面幅に応じて左カラムを詰める。
   広い画面では本文を右寄りに置き、狭くなったら本文の幅を優先する。 */
@media (max-width: 1399.98px) {
	:root .ctl-split { grid-template-columns: 420px minmax(0, 1fr); gap: 80px; }
	:root .ctl-split.-c480 { grid-template-columns: 400px minmax(0, 1fr); }
	:root .ctl-split.-c560 { grid-template-columns: 460px minmax(0, 1fr); }
}
@media (max-width: 1179.98px) {
	:root .ctl-split { grid-template-columns: 340px minmax(0, 1fr); gap: 64px; }
	:root .ctl-split.-c340,
	:root .ctl-split.-c480,
	:root .ctl-split.-c560 { grid-template-columns: 320px minmax(0, 1fr); }
}


/* ==========================================================================
   12. レスポンシブ（〜959px = SPデザイン）
   ========================================================================== */
@media (max-width: 959.98px) {
	:root {
		--ctl-pad-y: 56px;
		--ctl-pad-y-s: 56px;
	}

	/* SPは元デザインどおり左右 24px（ヘッダーは 20px） */
	:root .ctl-inner,
	:root .ctl-pagehero__inner,
	:root .ctl-footer__inner,
	:root .ctl-footer__bottom { width: calc(100% - 48px); }
	:root .ctl-header__inner { width: 100%; }

	:root .ctl-section { padding: 56px 0 60px; }
	:root .ctl-section.-pad-64 { padding: 48px 0 52px; }
	:root .ctl-section.-pad-80,
:root .ctl-section.-pad-88 { padding: 52px 0 56px; }
	:root .ctl-section.-pad-96,
:root .ctl-section.-pad-104,
:root .ctl-section.-pad-120 { padding: 56px 0 60px; }
	:root .ctl-section.-pad-s,
:root .ctl-section.-pad-xs { padding: 52px 0 56px; }
	:root .ctl-section.-pad-flush { padding: 0; }

	/* --- ヘッダー ------------------------------------------------------ */
	:root .ctl-header__inner,
:root .ctl-header--overlay .ctl-header__inner { padding: 16px 20px; }
	:root .ctl-logo__img,
:root .ctl-header--overlay .ctl-logo__img { height: 28px; }
	:root .ctl-logo__text { font-size: 18px; }
	:root .ctl-gnav { display: none; }
	:root .ctl-burger { display: flex; }

	/* --- タイポ -------------------------------------------------------- */
	:root .ctl-eyebrow { gap: 12px; }
	:root .ctl-eyebrow::before,
:root .ctl-eyebrow.-center::after { width: 22px; }
	:root .ctl-eyebrow :is(.ctl-eyebrow__label, strong, span) { font-size: 14px; }
	:root .ctl-h2 { margin-top: 14px; font-size: 22px; }
	:root .ctl-h2.-mincho { font-size: 26px; margin-top: 16px; }
		/* 英語は PC 用に 32px を指定しているが、SP では日本語と同じ大きさに戻す */
	:root[lang="en"] .ctl-h2.-mincho { font-size: 24px; }
	:root .ctl-h2.-sm { font-size: 20px; }
	:root .ctl-h3 { font-size: 15px; }
	:root .ctl-lead { font-size: 12px; line-height: 1.95; }
	:root .ctl-lead.-lg { font-size: 12.5px; line-height: 2; }
	:root .ctl-lead br { display: none; }
	:root .ctl-mincho { font-size: 12.5px; line-height: 1.95; letter-spacing: .02em; }
	:root .ctl-mincho + .ctl-mincho { margin-top: 14px; }
	:root .ctl-mincho br { display: none; }
	:root .ctl-mincho.-keepbr br { display: inline; }
	:root .ctl-note { font-size: 9.5px; }

	/* --- TOP ヒーロー -------------------------------------------------- */
	/* SPのヘッダー行は padding 16px + ロゴ 28px + padding 16px = 60px */
	:root .ctl-hero { padding-top: 60px; }
	:root .ctl-hero__stage { height: auto; display: flex; flex-direction: column; }
	:root .ctl-hero__body { order: 1; padding: 110px 24px 0; max-width: none; }
	:root .ctl-hero__body { padding-left: 24px; padding-right: 24px; }
	:root .ctl-hero__fx {
		order: 2;
		position: relative;
		right: auto;
		left: auto;
		top: auto;
		transform: none;
		aspect-ratio: auto;
		margin: 24px auto 0;
		width: 100%;
		max-width: 390px;
		height: 239px;
	}
	:root:root .ctl-hero__title { margin-top: 0 !important; font-size: 40px; }
	:root .ctl-hero__sub { margin-top: 14px; font-size: 15px; }
	:root .ctl-hero__panel { max-width: none; margin-top: 32px; }
	:root .ctl-hero__text { margin-bottom: 14px; font-size: 12px; line-height: 1.95; }
	:root .ctl-herolink a { padding: 13px 2px; font-size: 13px; }
	:root .ctl-hero__scroll { display: none; }

	/* SPのミッション背景は元デザインどおり静止させる */
	:root .ctl-bgimg.-cloud {
		inset: 0;
		width: 100%;
		height: 100%;
		opacity: .85;
	}

	/* --- 下層ヒーロー --------------------------------------------------- */
	:root .ctl-pagehero { padding: 36px 0 32px; }
	:root .ctl-pagehero__inner { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
	:root .ctl-pagehero .ctl-eyebrow :is(.ctl-eyebrow__label, strong, span) { font-size: 12px; }
	:root .ctl-pagehero__title { font-size: 24px; margin-top: 12px; white-space: normal; }
	:root .ctl-pagehero__lead { font-size: 12.5px; line-height: 1.95; margin-top: 12px; }
	:root .ctl-crumbs { padding-top: 0; font-size: 10px; }

	/* --- グリッド / カード --------------------------------------------- */
	:root .ctl-grid.-c2,
:root .ctl-grid.-c3,
:root .ctl-grid.-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	:root .ctl-grid.-sp1 { grid-template-columns: minmax(0, 1fr); }
	:root .ctl-card,
:root .ctl-card.-round { border-radius: 10px; padding: 18px; }
	:root .ctl-card__title,
:root .ctl-card.-round .ctl-card__title { font-size: 14px; }
	:root .ctl-card__text,
:root .ctl-card.-round .ctl-card__text { margin-top: 8px; font-size: 11.5px; line-height: 1.85; }
	:root .ctl-card.-deco-loop::after,
:root .ctl-card.-deco-arrow::after,
:root .ctl-card.-deco-target::after { display: none; }

	:root .ctl-split,
	:root .ctl-split.-c340,
	:root .ctl-split.-c480,
	:root .ctl-split.-c560,
	:root .ctl-split.-even { grid-template-columns: minmax(0, 1fr); gap: 24px; }

	/* --- 定義行 --------------------------------------------------------- */
	:root .ctl-rows { padding: 4px 18px; border-radius: 10px; }
	:root .ctl-row { flex-direction: column; gap: 6px; padding: 16px 0; }
	:root .ctl-row__key { width: auto; font-size: 12px; }
	:root .ctl-row__val { font-size: 12.5px; line-height: 1.85; }

	/* --- 強み ----------------------------------------------------------- */
	:root .ctl-strength { flex-direction: column; gap: 8px; padding: 20px 2px; }
	:root .ctl-strength__title { width: auto; font-size: 14.5px; }
	:root .ctl-strength__text { font-size: 12px; line-height: 1.9; }

	/* --- STEP ----------------------------------------------------------- */
	/* 縦積みになるので、レールも縦にする。●を左に置き、次の●まで縦線でつなぐ。
	   PC では ●＋横罫が各ステップの上にあるが、SP ではそれを90度倒した形。 */
	:root .ctl-steps,
:root .ctl-steps.-c5 { grid-template-columns: minmax(0, 1fr); gap: 0; }
	:root .ctl-step {
		position: relative;
		padding: 0 0 24px 28px;
	}
	:root .ctl-step:last-child { padding-bottom: 0; }
	:root .ctl-step__bar {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 10px;
	}
	:root .ctl-step__bar::before {
		position: absolute;
		left: 0;
		top: 5px;
	}
	/* ●と●をつなぐ縦線。次のステップの●の頭まで伸ばす */
	:root .ctl-step__bar > span {
		position: absolute;
		left: 4.5px;
		top: 20px;
		bottom: -5px;
		width: 1px;
		height: auto;
		flex: none;
	}
	:root .ctl-step:last-child .ctl-step__bar > span { display: none; }
	/* 光は上から下へ流れる */
	:root .ctl-step__bar > span::after {
		left: 0;
		top: -120px;
		width: 100%;
		height: 120px;
		background: linear-gradient(180deg, rgba(0, 112, 163, 0), var(--ctl-brand-ui), rgba(0, 112, 163, 0));
		animation: ctlSepFlowY 2.8s linear infinite;
	}
	:root .ctl-step__no { margin-top: 0; }
	:root .ctl-step__title { font-size: 14.5px; }
	:root .ctl-step__text { font-size: 11.5px; }
	/* --- 支援メニュー --------------------------------------------------- */
	:root .ctl-service,
:root .ctl-service.-stack { flex-direction: column; gap: 8px; border-radius: 10px; padding: 14px; }
	:root .ctl-service__no,
:root .ctl-service.-stack .ctl-service__no { padding-top: 0; font-size: 9.5px; letter-spacing: .16em; }
	:root .ctl-service__title,
:root .ctl-service.-stack .ctl-service__title { font-size: 12.5px; line-height: 1.55; min-height: 38px; }
	:root .ctl-service__text { font-size: 11px; line-height: 1.8; }
	:root .ctl-service__arrow { font-size: 11px; }

	/* --- バナー --------------------------------------------------------- */
	:root .ctl-banner { flex-direction: column; align-items: stretch; gap: 16px; border-radius: 10px; padding: 20px; }
	:root .ctl-banner__title { font-size: 14.5px; }
	:root .ctl-banner__text { font-size: 12px; }

	/* --- ニュース ------------------------------------------------------- */
	:root .ctl-newsitem { flex-wrap: wrap; gap: 10px; padding: 16px 4px; }
	:root .ctl-newsitem__date { width: auto; font-size: 11px; }
	:root .ctl-newsitem__cat { width: auto; font-size: 9.5px; padding: 3px 8px; }
	:root .ctl-newsitem__title { flex: 1 0 100%; margin-top: -2px; font-size: 12.5px; }
	:root .ctl-newsitem__arrow { display: none; }

	/* --- ナレッジ ------------------------------------------------------- */
	:root .ctl-artlist { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	:root .ctl-artcard { gap: 12px; border-radius: 10px; padding: 12px; }
	:root .ctl-artcard__thumb { width: 84px; height: 58px; border-radius: 6px; }
	:root .ctl-artcard__body { gap: 6px; }
	:root .ctl-artcard__meta { gap: 5px 8px; }
	:root .ctl-artcard__meta .wp-block-post-terms { gap: 5px; }
	:root .ctl-artcard__meta .wp-block-post-terms a { font-size: 9px; padding: 2px 6px; }
	:root .ctl-tag { font-size: 9px; padding: 2px 6px; }
	:root .ctl-date { font-size: 9.5px; }
	:root .ctl-artcard__title { font-size: 11.5px; line-height: 1.65; }
	:root .ctl-artcard__arrow { display: none; }

	/* --- メンバー ------------------------------------------------------- */
	:root .ctl-memberrail { gap: 10px; }
	:root .ctl-memberrail > li { flex: 0 0 106px; width: 106px; }
	:root .ctl-member { width: 106px; }
	:root .ctl-member__photo { aspect-ratio: 1 / 1.1; border-radius: 8px; font-size: 7.5px; }
		:root .ctl-modal__head { gap: 14px; }
	:root .ctl-modal__photo { width: 90px; border-radius: 8px; }
	:root .ctl-member__name { margin-top: 8px; font-size: 11.5px; }
	:root .ctl-member__role { font-size: 9px; }
	:root .ctl-member__summary { display: none; }
	:root .ctl-membergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	:root .ctl-membergrid .ctl-member { width: auto; }

	/* --- 実績 ----------------------------------------------------------- */
	:root .ctl-stats { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	:root .ctl-stat { padding-left: 18px; }
	:root .ctl-stat__eyebrow { font-size: 10px; }
	:root .ctl-stat__head { justify-content: space-between; gap: 14px; margin-top: 8px; }
	:root .ctl-stat__num { font-size: 38px; }
	:root .ctl-stat__num small { font-size: 20px; margin-left: 3px; }
	:root .ctl-stat__label { margin-top: 10px; font-size: 11.5px; }
	:root .ctl-donut { width: 84px; height: 84px; }
	:root .ctl-donut::after { inset: 22px; }
	:root .ctl-legend { gap: 4px; margin-top: 12px; }
	:root .ctl-legend > * { gap: 7px; font-size: 9.5px; }
	:root .ctl-legend > *::before { width: 8px; height: 8px; }
	:root .ctl-ph.-gov { width: 130px; height: 44px; font-size: 9px; }
	:root .ctl-ph.-logo { width: 148px; height: 48px; border-radius: 8px; font-size: 8.5px; }
	:root .ctl-ph.-map { min-height: 220px; border-radius: 10px; }

	/* --- マーキー ------------------------------------------------------- */
	:root .ctl-marquee { margin-top: 36px; }
		:root .ctl-marquee + .ctl-marquee { margin-top: 8px; }
		:root .ctl-marquee:not(:has(+ .ctl-marquee)) { margin-bottom: 20px; }
	:root .ctl-marquee__track { gap: 10px; padding-right: 10px; }
	:root .ctl-marquee::before,
:root .ctl-marquee::after { width: 56px; }

	/* --- 事業図（SPは縦積み） ------------------------------------------ */
	:root .ctl-bizdiagram { flex-direction: column; gap: 0; }
	:root .ctl-bizchip { writing-mode: horizontal-tb; font-size: 12px; letter-spacing: .12em; padding: 9px 20px; }
	:root .ctl-bizarrow { width: auto; margin-top: 10px; font-size: 10.5px; }
	:root .ctl-bizarrow.-left,
:root .ctl-bizarrow.-right { flex-direction: column-reverse; }
	:root .ctl-bizarrow.-left::after { content: "↑"; font-size: 14px; }
	:root .ctl-bizarrow.-right { flex-direction: column; }
	:root .ctl-bizarrow.-right::after { content: "↓"; font-size: 14px; }
	:root .ctl-section.-bizflow .ctl-inner { align-items: stretch; }
	:root .ctl-bizcircle { width: 300px; height: 300px; padding: 0 38px; margin-top: 14px; }
	:root .ctl-bizcircle.-succession { margin-top: 0; }
	:root .ctl-bizcircle__title { font-size: 16.5px; }
	:root .ctl-bizcircle__text { margin-top: 10px; font-size: 11px; line-height: 1.8; }
	:root .ctl-bizcircle .ctl-pill { margin-top: 14px; }
	:root .ctl-bizcircle .ctl-pill a { font-size: 11px; padding: 7px 8px 7px 16px; gap: 8px; }
	:root .ctl-bizcircle .ctl-pill a::after { width: 20px; height: 20px; font-size: 9px; }
	:root .ctl-bizloop { width: 200px; height: 200px; margin: -8px auto; }
	:root .ctl-bizloop__note-a,
:root .ctl-bizloop__note-b {
		top: 50%;
		bottom: auto;
		left: auto;
		transform: translateY(-50%);
		width: 80px;
		font-size: 9.5px;
		line-height: 1.6;
	}
	:root .ctl-bizloop__note-a { right: 10px; left: auto; }
	:root .ctl-bizloop__note-b { left: 10px; right: auto; }

	/* --- CTA ------------------------------------------------------------ */
	:root .ctl-cta { padding: 56px 0 60px; }
	:root .ctl-cta .ctl-h2 { font-size: 20px; margin-top: 16px; }
	:root .ctl-cta .ctl-lead { font-size: 12px; line-height: 2; margin-top: 16px; }
	:root .ctl-cta .ctl-btns { margin-top: 28px; }
	:root .ctl-btns { flex-direction: column; gap: 10px; }
	:root .ctl-btns .wp-block-button { width: 100%; }
	:root .ctl-btns .wp-block-button__link,
:root .ctl-btns.-w280 .wp-block-button__link { display: block; width: 100%; padding-inline: 0; }
	:root .ctl-btn { display: block; width: 100%; }
	:root .ctl-arrowlink a,
:root .ctl-arrowlink.-w220 a { width: 200px; padding-bottom: 9px; font-size: 12.5px; }
	:root .ctl-morelink a { font-size: 11.5px; }

	/* --- フォーム ------------------------------------------------------- */
	:root .ctl-form { padding: 24px 20px; border-radius: 10px; }

	/* --- フッター ------------------------------------------------------- */
	:root .ctl-footer { padding: 40px 0 22px; }
	:root .ctl-footer__inner { flex-direction: column; gap: 28px; }
	:root .ctl-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; padding-top: 0; }
		:root .ctl-footer__group { gap: 8px; }
	:root .ctl-footer__bottom { margin-top: 24px; }
}

@media (max-width: 599.98px) {
	:root:root .ctl-hero__title { font-size: 32px; }
	:root .ctl-hero__sub { font-size: 13px; }
	:root .ctl-h2.-mincho { white-space: normal; }
	:root .ctl-grid.-c3,
:root .ctl-grid.-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	:root .ctl-bizcircle { width: min(300px, 100%); height: auto; aspect-ratio: 1 / 1; }
}


/* ==========================================================================
   13. reduced-motion（DESIGN.md 7章）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	:root .ctl-body *,
:root .ctl-body *::before,
:root .ctl-body *::after {
		animation: none !important;
		transition: none !important;
	}
}


/* ==========================================================================
   14. ブロックエディタ内
   ========================================================================== */
.editor-styles-wrapper {
	background: var(--ctl-surface-tint) !important;
	font-family: var(--ctl-font-jp) !important;
	color: var(--ctl-text) !important;
	word-break: auto-phrase;
	line-break: strict;
}
/* SWELL のエディタCSSが本文へ別の書体・色を当ててくるので打ち消す */
.editor-styles-wrapper .ctl-hero,
.editor-styles-wrapper .ctl-pagehero,
.editor-styles-wrapper .ctl-section,
.editor-styles-wrapper .ctl-cta {
	font-family: var(--ctl-font-jp) !important;
	color: var(--ctl-text) !important;
}
/* レイアウトの上書きは 18節にまとめてある */


/* ==========================================================================
   15. 下層ページ固有のコンポーネント
   （セレクタは :root 前置済み。SWELL の .post_content 指定に勝たせるため）
   ========================================================================== */

/* --- セクションのパディング追加分 -------------------------------------- */
:root .ctl-section.-pad-72 { padding: 72px 0 104px; }
:root .ctl-section.-pad-110 { padding: 110px 0; }

/* --- 下層ページヘッダー ------------------------------------------------- */
:root .ctl-pagehero__main { flex: 1; min-width: 0; margin: 0; }

/* --- 見出しの追加バリエーション ---------------------------------------- */
:root .ctl-h2.-mincho.-lg { margin-top: 26px; font-size: 36px; line-height: 1.6; }
:root .ctl-h2.-mincho.-msg { font-size: 32px; line-height: 1.7; }
:root .ctl-lead.-w820 { max-width: 820px; }
:root .ctl-split__body.-pt8 { padding-top: 8px; }
:root .ctl-hint { margin: 0; align-self: center; font-size: 12px; letter-spacing: .02em; color: var(--ctl-muted); }

/* --- STEP の追加バリエーション ----------------------------------------- */
:root .ctl-steps.-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root .ctl-steps.-c3 .ctl-step { padding-right: 40px; }
:root .ctl-steps.-c5 .ctl-step { padding-right: 26px; }
:root .ctl-step__title.-lg { font-size: 18px; }
:root .ctl-step__title.-sm { font-size: 15px; }
:root .ctl-step__text.-sm { font-size: 11.5px; line-height: 1.85; }
:root .ctl-arrowlink.-w280 a { width: 280px; }

/* --- 定義行の中に「名称 ＋ ロゴ」を縦に並べる（所属団体など） ----------- */
/* .ctl-row の中で .ctl-row__val の代わりに置く。
   1団体 ＝ .ctl-org（左に名称、右にロゴ）。行ごとに高さが揃うので、
   ロゴの大きさがばらついても名称と横位置がずれない。 */
:root .ctl-orgs {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	margin: 0;
}
:root .ctl-org {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0;
}
:root .ctl-org__name {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.9;
	letter-spacing: .01em;
	color: var(--ctl-text-body);
}
/* ロゴの枠。高さを固定し、横幅は右端まで使う。
   中の画像は縦横比を保ったまま枠に収まる（object-fit: contain）ので、
   ロゴごとに縦横比が違っても行の高さも右端の位置もそろう。 */
:root .ctl-org__logo {
	flex: none;
	width: 320px;
	height: 64px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	line-height: 0;
}
:root .ctl-org__logo img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: right center;
}
/* ロゴ未登録のときのプレースホルダ（画像ブロックに ctl-ph -orglogo） */
:root .ctl-ph.-orglogo { width: 320px; height: 64px; border-radius: 6px; font-size: 9px; letter-spacing: .1em; }
/* 定義行の中に定義行を入れ子にしたときは、内側の罫と余白を出さない
   （パターンをそのまま既存の行の中に入れると罫が二重になるため） */
:root .ctl-row .ctl-row { border-bottom: 0; padding: 0; }


/* --- アクセス（地図 + 住所カード） ------------------------------------- */
:root .ctl-access {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 24px;
	align-items: stretch;
	margin: 0;
}
:root .ctl-infocard {
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 30px 32px;
	margin: 0;
}
:root .ctl-infocard__name { margin: 0; font-size: 15px; font-weight: 700; color: var(--ctl-navy); }
:root .ctl-infocard__addr {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 2;
	letter-spacing: .01em;
	color: var(--ctl-text-body);
}
:root .ctl-infocard__sub { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--ctl-border-soft); }
:root .ctl-infocard__subttl {
	margin: 0;
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .18em;
	color: var(--ctl-muted);
}
:root .ctl-infocard__subtext { margin: 10px 0 0; font-size: 12.5px; line-height: 2; color: var(--ctl-text-body); }

/* --- 地図（Googleマップの埋め込み） ------------------------------------- */
/* カスタムHTMLブロックに <div class="ctl-map"><iframe …></iframe></div> を貼る。
   iframe 側の width / height 属性は無視して、枠いっぱいに広げる。
   .ctl-access の中に置くと、右の住所カードと同じ高さになる。 */
:root .ctl-map {
	position: relative;
	height: 100%;
	min-height: 300px;
	background: #DCE9F4;
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	overflow: hidden;
	margin: 0;
}
:root .ctl-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 300px;
	border: 0;
}

/* --- 3分割のパネル（コンセプトの効果） --------------------------------- */
:root .ctl-panel {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	overflow: hidden;
	margin: 0;
}
:root .ctl-panel__col { padding: 34px 32px; border-left: 1px solid var(--ctl-border-soft); margin: 0; }
:root .ctl-panel__col:first-child { border-left: 0; }
:root .ctl-panel__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--ctl-navy); }
:root .ctl-panel__text {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.95;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}
/* --- プロジェクト事例のカード（画像＋タイトル＋説明の3列） --------------- */
/* グリッドではなく flex で組んである。グリッドだと最後の行が左に寄ったまま
   になるが、flex + justify-content: center なら、8件のときの3行目（2件）が
   自動で中央にそろう。1列あたりの幅は件数によらず一定。
   列数は --pj-cols で決まる（PC 3列 / SP 1列）。 */
:root .ctl-pjgrid {
	--pj-cols: 3;
	--pj-gap: 28px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 44px var(--pj-gap);
	margin: 0;
}
:root .ctl-pjcard {
	flex: 0 1 calc((100% - (var(--pj-cols) - 1) * var(--pj-gap)) / var(--pj-cols));
	max-width: calc((100% - (var(--pj-cols) - 1) * var(--pj-gap)) / var(--pj-cols));
	margin: 0;
}

:root .ctl-pjcard__thumb {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	overflow: hidden;
	background: #DCE9F4;
	margin: 0;
	line-height: 0;
}
:root .ctl-pjcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

:root .ctl-pjcard .ctl-tag { display: inline-block; margin: 16px 0 0; }
:root .ctl-pjcard__title {
	margin: 16px 0 0;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.65;
	letter-spacing: .01em;
	color: var(--ctl-navy);
}
/* 業種タグを入れたときは、タイトルの上の余白を詰める */
:root .ctl-pjcard .ctl-tag + .ctl-pjcard__title { margin-top: 10px; }
:root .ctl-pjcard__text {
	margin: 11px 0 0;
	font-size: 12.5px;
	line-height: 1.95;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}

/* --- 事業承継ポートフォリオ（参画企業のカード） ------------------------ */
/* .ctl-grid.-c3 の中に .ctl-pfcard を並べる。カードの高さは行ごとにそろい、
   「Webサイト」の行はカードの下端に固定される。
   社名を出せない企業は、カードに -tba を足すと伏せた見た目になる。 */
:root .ctl-pfcard {
	display: flex;
	flex-direction: column;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 8px;
	padding: 26px 24px 22px;
	margin: 0;
	transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
:root .ctl-pfcard:hover {
	border-color: rgba(0, 112, 163, .4);
	box-shadow: 0 6px 18px rgba(15, 42, 63, .07);
}

/* ロゴ。高さだけそろえ、横幅は成り行き（縦横比は変えない） */
:root .ctl-pfcard__logo {
	display: flex;
	align-items: center;
	height: 44px;
	margin: 0;
	line-height: 0;
}
:root .ctl-pfcard__logo img {
	width: auto !important;
	height: auto !important;
	max-width: 170px;
	max-height: 44px;
	object-fit: contain;
}
/* 社名非公開のとき、およびロゴ画像をまだメディアに上げていないときは、
   ロゴの代わりにグレーの帯を出す（src の無い img は枠だけ残して消す） */
:root .ctl-pfcard__logo img[data-ctl-src] { display: none; }
:root .ctl-pfcard__logo.-blank,
:root .ctl-pfcard__logo:has(img[data-ctl-src]) { gap: 10px; }
:root .ctl-pfcard__logo.-blank::before,
:root .ctl-pfcard__logo.-blank::after,
:root .ctl-pfcard__logo:has(img[data-ctl-src])::before,
:root .ctl-pfcard__logo:has(img[data-ctl-src])::after {
	content: "";
	background: var(--ctl-surface-2);
	border-radius: 4px;
}
:root .ctl-pfcard__logo.-blank::before,
:root .ctl-pfcard__logo:has(img[data-ctl-src])::before { width: 24px; height: 24px; }
:root .ctl-pfcard__logo.-blank::after,
:root .ctl-pfcard__logo:has(img[data-ctl-src])::after { width: 104px; height: 13px; border-radius: 3px; }

:root .ctl-pfcard .ctl-tag { align-self: flex-start; margin: 22px 0 0; }
:root .ctl-pfcard__name {
	margin: 12px 0 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .02em;
	color: var(--ctl-navy);
}
:root .ctl-pfcard__lead {
	margin: 7px 0 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: .01em;
	color: var(--ctl-brand-ui);
}
:root .ctl-pfcard__text {
	margin: 15px 0 0;
	font-size: 12.5px;
	line-height: 1.95;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}
/* 「Webサイト」の行。カードの下端でそろえる */
:root .ctl-pfcard__foot {
	margin: 22px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--ctl-border-soft);
	font-size: 12px;
	/* リンクの矢印で行の高さが変わり、罫の位置がカード間でずれるのを防ぐ */
	line-height: 1.7;
	color: var(--ctl-muted);
}
:root .ctl-pfcard > .ctl-pfcard__foot { margin-top: auto; }
:root .ctl-pfcard__foot a { font-weight: 500; color: var(--ctl-brand-ui); }
/* 詳細はページ上では出さず、カードを押したときモーダルで見せる */
:root .ctl-pfcard__detail { display: none; }
/* 詳細を持つカードだけを押せるようにする。要約は3行でそろえ、
   カードの高さが中身の長さでばらつかないようにする。 */
:root .ctl-pfcard:has(.ctl-pfcard__detail) { cursor: pointer; }
:root .ctl-pfcard:has(.ctl-pfcard__detail) .ctl-pfcard__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
/* クリックで詳細が開くことを示す手がかり。メンバーカードと同じ文言にそろえる */
:root .ctl-pfcard:has(.ctl-pfcard__detail)::after {
	content: "詳しく見る ＋";
	display: inline-block;
	margin-top: 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--ctl-brand-ui);
	transition: color .2s ease-out;
}
:root .ctl-pfcard:has(.ctl-pfcard__detail):hover::after {
	color: var(--ctl-brand-ui-dark);
	text-decoration: underline;
}
:root[lang="en"] .ctl-pfcard:has(.ctl-pfcard__detail)::after { content: "View details ＋"; }
/* 「Webサイト」の行を下端に固定していたぶん、手がかりの行が最後になる */
:root .ctl-pfcard:has(.ctl-pfcard__detail) > .ctl-pfcard__foot { margin-top: auto; }

/* モーダル側。ロゴは社名非公開のカードには無いので、あるときだけ出す */
:root .ctl-pfmodal__logo {
	display: flex;
	align-items: center;
	height: 40px;
	flex: 0 0 auto;
}
:root .ctl-pfmodal__logo[hidden] { display: none; }
:root .ctl-pfmodal__logo img {
	width: auto;
	height: auto;
	max-width: 150px;
	max-height: 40px;
	object-fit: contain;
}
:root .ctl-pfmodal__tag {
	display: inline-block;
	margin-bottom: 8px;
	padding: 4px 10px;
	background: var(--ctl-tint);
	border-radius: 3px;
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--ctl-brand-ui);
}
:root .ctl-pfmodal__tag[hidden] { display: none; }
:root .ctl-modal.-pf .ctl-modal__role[hidden] { display: none; }
/* 詳細を「項目｜内容」の表で出す。会社概要と同じ .ctl-rows を使うが、
   パネルが狭いので外枠を外し、見出し列を詰める。 */
:root .ctl-modal.-pf .ctl-modal__panel { width: 560px; }
:root .ctl-modal__bio .ctl-rows {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}
:root .ctl-modal__bio .ctl-row { gap: 16px; padding: 11px 0; }
:root .ctl-modal__bio .ctl-row__key { width: 104px; font-size: 12px; line-height: 1.8; }
:root .ctl-modal__bio .ctl-row__val { font-size: 12.5px; line-height: 1.8; color: var(--ctl-text-body); }
@media (max-width: 959.98px) {
	/* SP は項目と内容が縦に積まれるので、間を詰める */
	:root .ctl-modal__bio .ctl-row { gap: 5px; padding: 10px 0; }
	:root .ctl-modal.-pf .ctl-modal__panel { padding: 24px 20px; }
}
/* 矢印は本文と同じフォントで出す。別フォントにすると行の高さが変わり、
   リンクの無いカードと罫の位置がずれる */
:root .ctl-pfcard__foot a::after { content: " ↗"; }

/* 社名非公開のカード（追加CSSクラスに -tba を足す） */
:root .ctl-pfcard.-tba { background: var(--ctl-surface-1); }
:root .ctl-pfcard.-tba .ctl-pfcard__name,
:root .ctl-pfcard.-tba .ctl-pfcard__lead { color: var(--ctl-muted); }
/* 社名のうしろを太字にすると CONFIDENTIAL バッジになる */
:root .ctl-pfcard.-tba .ctl-pfcard__name strong {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 7px;
	border: 1px solid var(--ctl-border-strong);
	border-radius: 4px;
	font-family: var(--ctl-font-en);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.6;
	vertical-align: 2px;
	color: var(--ctl-muted);
}

/* --- 立場の比較（事業承継投資） ---------------------------------------- */
:root .ctl-compare {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--ctl-border-strong);
	margin: 0;
}
:root .ctl-compare__col { padding: 34px 48px 34px 4px; border-right: 1px solid var(--ctl-border-strong); margin: 0; }
:root .ctl-compare__col.-active { padding: 34px 4px 34px 48px; border-right: 0; }
:root .ctl-compare__label {
	margin: 0;
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--ctl-muted);
}
:root .ctl-compare__label.-on { color: var(--ctl-brand-ui); font-family: var(--ctl-font-jp); letter-spacing: .1em; }
:root .ctl-compare__title {
	margin: 16px 0 0;
	font-family: var(--ctl-font-mincho);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.6;
	letter-spacing: .03em;
	color: var(--ctl-text-body);
}
:root .ctl-compare__title.-on { color: var(--ctl-navy); }
:root .ctl-compare__text {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.95;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}
:root .ctl-compare__arrows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root .ctl-compare__arrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-self: center;
}
:root .ctl-compare__arrow::before {
	content: "";
	display: block;
	width: 1px;
	height: 52px;
	background: var(--ctl-border-strong);
}
:root .ctl-compare__arrow::after {
	content: "";
	display: block;
	border-top: 6px solid var(--ctl-border-strong);
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}
:root .ctl-compare__arrow.-on::before { width: 2px; background: var(--ctl-brand-ui); }
:root .ctl-compare__arrow.-on::after { border-top-color: var(--ctl-brand-ui); }

/* --- 事業図の小サイズ / 淡色バリエーション ----------------------------- */
:root .ctl-bizdiagram.-sm { gap: 10px; }
:root .ctl-bizdiagram.-sm .ctl-bizchip { font-size: 11.5px; padding: 14px 10px; border-radius: 2px; }
:root .ctl-bizdiagram.-sm .ctl-bizarrow { width: 64px; font-size: 10.5px; }
:root .ctl-bizdiagram.-sm .ctl-bizarrow::after { font-size: 15px; }
:root .ctl-bizdiagram.-sm .ctl-bizcircle { width: 280px; height: 280px; padding: 0 40px; }
:root .ctl-bizdiagram.-sm .ctl-bizcircle__title { font-size: 16px; }
:root .ctl-bizdiagram.-sm .ctl-bizcircle__text { margin-top: 10px; font-size: 10.5px; line-height: 1.8; }
:root .ctl-bizdiagram.-sm .ctl-pill { margin-top: 14px; }
:root .ctl-bizdiagram.-sm .ctl-pill a { font-size: 11px; padding: 7px 8px 7px 16px; gap: 8px; }
:root .ctl-bizdiagram.-sm .ctl-pill a::after { width: 20px; height: 20px; font-size: 9px; }
:root .ctl-bizdiagram.-sm .ctl-bizloop { width: 190px; height: 190px; margin: 0 -30px; }
:root .ctl-bizdiagram.-sm .ctl-bizloop__note-a,
:root .ctl-bizdiagram.-sm .ctl-bizloop__note-b { width: 160px; font-size: 11px; line-height: 1.5; }
:root .ctl-bizdiagram.-sm .ctl-bizloop__note-a { top: 16px; }
:root .ctl-bizdiagram.-sm .ctl-bizloop__note-b { bottom: 16px; }

:root .ctl-bizchip.-muted,
:root .ctl-bizarrow.-muted,
:root .ctl-bizcircle.-muted { opacity: .45; }
:root .ctl-bizcircle.-current { border: 1.5px solid var(--ctl-brand-ui); }
:root .ctl-bizcircle__flag { display: none; }

/* --- お約束（番号 + 見出し + 本文の行） -------------------------------- */
:root .ctl-promises { border-bottom: 1px solid var(--ctl-border-strong); margin: 0; }
:root .ctl-promise {
	display: flex;
	gap: 36px;
	padding: 32px 12px;
	border-top: 1px solid var(--ctl-border-strong);
	margin: 0;
}
:root .ctl-promise__no {
	flex: none;
	padding-top: 4px;
	margin: 0;
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .14em;
	color: var(--ctl-brand-ui);
}
:root .ctl-promise__title {
	width: 280px;
	flex: none;
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--ctl-navy);
}
:root .ctl-promise__text {
	flex: 1;
	margin: 0;
	font-size: 13.5px;
	line-height: 2;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}

/* --- メンバー一覧ページのカード ---------------------------------------- */
:root .ctl-membergrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 20px; }
:root .ctl-member__photo.-square { border-radius: 2px; transition: border-color .2s ease-out, box-shadow .2s ease-out; }
:root .ctl-member:hover .ctl-member__photo.-square {
	border-color: rgba(0, 112, 163, .5);
	box-shadow: 0 6px 18px rgba(15, 42, 63, .12);
}
:root .ctl-membergrid .ctl-member__name { margin-top: 10px; }
:root .ctl-membergrid .ctl-member__role { margin-top: 3px; font-size: 10.5px; letter-spacing: .03em; }
:root .ctl-membergrid .ctl-member__summary { margin-top: 8px; font-size: 11px; line-height: 1.8; }

/* --- カテゴリーチップ --------------------------------------------------- */
:root .ctl-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
:root .ctl-chip { margin: 0; }
:root .ctl-chip a {
	display: inline-block;
	background: var(--ctl-surface-0);
	color: var(--ctl-text-body);
	border: 1px solid var(--ctl-border-strong);
	border-radius: 999px;
	padding: 9px 20px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .04em;
	transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out;
}
:root .ctl-chip a:hover { border-color: var(--ctl-brand-ui); color: var(--ctl-brand-ui); }
:root .ctl-chip.-on a {
	background: var(--ctl-navy);
	color: var(--ctl-on-dark);
	border-color: var(--ctl-navy);
	font-weight: 700;
}

/* --- ナレッジ一覧（5列の縦カード） ------------------------------------- */
:root .ctl-artgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; }
:root .ctl-artcard.-stack { flex-direction: column; gap: 0; border-radius: 2px; padding: 0; overflow: hidden; }
:root .ctl-artcard.-stack .ctl-artcard__thumb { width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 0; }
:root .ctl-artcard.-stack .ctl-artcard__body { padding: 14px 16px 16px; gap: 10px; }
:root .ctl-artcard.-stack .ctl-artcard__title { font-size: 12.5px; line-height: 1.7; }
:root .ctl-artcard.-stack .ctl-artcard__arrow { font-size: 11px; }

/* --- フォームまわり ----------------------------------------------------- */
:root .ctl-formlayout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 24px;
	align-items: start;
	margin: 0;
}
:root .ctl-formlayout.-dl { grid-template-columns: minmax(0, 1fr) 400px; }

:root .ctl-form__title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ctl-navy); }
:root .ctl-form__text { margin: 10px 0 0; font-size: 12px; line-height: 1.85; color: var(--ctl-muted); }
:root .ctl-form__note { margin: 0; font-size: 10.5px; line-height: 1.8; color: #8A99A8; }
:root .ctl-form.-side { padding: 32px 34px; }
:root .ctl-form.-side .ctl-fields { margin-top: 22px; }

:root .ctl-fields { display: flex; flex-direction: column; gap: 22px; }
:root .ctl-fields.-sm { gap: 16px; }
:root .ctl-field__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
:root .ctl-field__label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--ctl-navy);
}
:root .ctl-fields.-sm .ctl-field__label { font-size: 12px; }
:root .ctl-field__control {
	margin-top: 8px;
	width: 100%;
	box-sizing: border-box;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border-strong);
	border-radius: 8px;
	padding: 12px 14px;
	font-family: var(--ctl-font-jp);
	font-size: 13.5px;
	line-height: 1.8;
	color: var(--ctl-text);
}
:root .ctl-fields.-sm .ctl-field__control { margin-top: 7px; padding: 11px 13px; font-size: 13px; }
:root .ctl-field__control:focus { outline: none; border-color: var(--ctl-brand-ui); box-shadow: var(--ctl-ring); }
:root textarea.ctl-field__control { resize: vertical; }
:root .ctl-req { color: #C2553C; }
:root .ctl-agree { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 12.5px; color: var(--ctl-text-body); }
:root .ctl-agree input { width: 16px; height: 16px; accent-color: var(--ctl-brand-ui); }
:root .ctl-submit {
	background: var(--ctl-navy);
	color: var(--ctl-on-dark);
	font-family: var(--ctl-font-jp);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 16px 48px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color .18s ease-out;
}
:root .ctl-submit:hover { background: var(--ctl-navy-hover); }
:root .ctl-submit.-block { width: 100%; padding: 14px 0; font-size: 13.5px; }

:root .ctl-formside { display: flex; flex-direction: column; gap: 16px; margin: 0; }
:root .ctl-sidecard {
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 26px 28px;
	margin: 0;
}
:root .ctl-sidecard__title { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ctl-navy); }
:root .ctl-sidecard__text { margin: 10px 0 0; font-size: 12.5px; line-height: 1.9; color: var(--ctl-muted); }
:root .ctl-sidecard.-navy { background: var(--ctl-navy); border-color: var(--ctl-navy); }
:root .ctl-sidecard__label {
	margin: 0;
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--ctl-brand-logo);
}
:root .ctl-sidecard__addr { margin: 12px 0 0; font-size: 12.5px; line-height: 2; color: rgba(255, 255, 255, .75); }

/* --- 資料ダウンロードのカード ------------------------------------------ */
:root .ctl-doclist { display: flex; flex-direction: column; gap: 16px; margin: 0; }
/* 表紙画像（資料のアイキャッチ）。未設定のときは .ctl-ph.-cover が出る */
:root .ctl-doc__cover {
	width: 132px;
	height: 96px;
	flex: none;
	margin: 0;
	border: 1px solid #E4EBF1;
	border-radius: 8px;
	overflow: hidden;
	background: #F4F8FB;
}
:root .ctl-doc__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

:root .ctl-doc {
	display: flex;
	gap: 24px;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 24px 26px;
	margin: 0;
}
:root .ctl-doc__body { flex: 1; margin: 0; min-width: 0; }
:root .ctl-doc__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ctl-navy);
}
:root .ctl-doc__badge {
	background: var(--ctl-tint);
	color: var(--ctl-brand-ui);
	font-family: var(--ctl-font-en);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: .08em;
	padding: 3px 8px;
	border-radius: 6px;
}
:root .ctl-doc__text {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.9;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}
:root .ctl-ph.-cover {
	width: 132px;
	height: 96px;
	flex: none;
	background: #F4F8FB;
	border-color: #E4EBF1;
	border-radius: 8px;
	font-size: 9px;
	letter-spacing: .12em;
}


/* ==========================================================================
   16. 下層ページ固有のレスポンシブ（〜959px）
   ========================================================================== */
@media (max-width: 959.98px) {
	:root .ctl-section.-pad-72,
	:root .ctl-section.-pad-110 { padding: 48px 0 56px; }

	:root .ctl-h2.-mincho.-lg { font-size: 24px; margin-top: 16px; }
	:root .ctl-h2.-mincho.-msg { font-size: 22px; line-height: 1.7; }
	:root .ctl-lead.-w820 { max-width: none; }
	:root .ctl-hint { font-size: 10.5px; }

	:root .ctl-steps.-c3 { grid-template-columns: minmax(0, 1fr); gap: 0; }
	:root .ctl-steps.-c3 .ctl-step,
	:root .ctl-steps.-c5 .ctl-step { padding: 0 0 24px 28px; }
	:root .ctl-steps.-c3 .ctl-step:last-child,
	:root .ctl-steps.-c5 .ctl-step:last-child { padding-bottom: 0; }
	:root .ctl-step__title.-lg { font-size: 16px; }
	:root .ctl-step__title.-sm { font-size: 14px; }
	:root .ctl-arrowlink.-w280 a { width: 220px; }

		/* --- 所属団体（SPは名称の下にロゴ） -------------------------------- */
	:root .ctl-orgs { gap: 16px; }
	:root .ctl-org { flex-direction: column; align-items: flex-start; gap: 7px; }
	:root .ctl-org__name { font-size: 12.5px; line-height: 1.85; }
	:root .ctl-org__logo { width: 100%; height: 40px; justify-content: flex-start; }
	:root .ctl-org__logo img { object-position: left center; }
	:root .ctl-ph.-orglogo { width: 200px; height: 40px; }
	:root .ctl-org__logo img { object-position: left center; }
	:root .ctl-ph.-orglogo { width: 150px; height: 34px; }
	
	/* --- プロジェクト事例（SPは1列） ----------------------------------- */
	:root .ctl-pjgrid { --pj-cols: 1; --pj-gap: 0px; gap: 28px; }
	:root .ctl-pjcard__thumb { border-radius: 8px; }
	:root .ctl-pjcard__title { margin-top: 12px; font-size: 15px; }
	:root .ctl-pjcard .ctl-tag { margin-top: 12px; }
	:root .ctl-pjcard__text { margin-top: 9px; font-size: 11.5px; line-height: 1.9; }

		/* --- 事業承継ポートフォリオ（SPは1列） ------------------------------ */
	:root .ctl-grid:has(.ctl-pfcard) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	:root .ctl-pfcard { padding: 20px 18px 18px; }
	:root .ctl-pfcard__logo { height: 36px; }
	:root .ctl-pfcard__logo img { max-width: 140px; max-height: 36px; }
	:root .ctl-pfcard__logo.-blank::before,
	:root .ctl-pfcard__logo:has(img[data-ctl-src])::before { width: 20px; height: 20px; }
	:root .ctl-pfcard__logo.-blank::after,
	:root .ctl-pfcard__logo:has(img[data-ctl-src])::after { width: 88px; height: 11px; }
	:root .ctl-pfcard .ctl-tag { margin-top: 16px; }
	:root .ctl-pfcard__name { font-size: 14.5px; }
	:root .ctl-pfcard__lead { font-size: 12px; }
	:root .ctl-pfcard__text { margin-top: 12px; font-size: 11.5px; line-height: 1.9; }
	:root .ctl-pfcard__foot { margin-top: 18px; padding-top: 12px; font-size: 11px; }

	:root .ctl-access { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	
	/* 地図 */
	:root .ctl-map { min-height: 220px; }
	:root .ctl-map iframe { min-height: 220px; }
	
	:root .ctl-infocard { border-radius: 10px; padding: 20px; }
	:root .ctl-infocard__name { font-size: 14px; }
	:root .ctl-infocard__addr { font-size: 12px; line-height: 1.9; }
	:root .ctl-infocard__subtext { font-size: 11.5px; line-height: 1.9; }

	:root .ctl-panel { grid-template-columns: minmax(0, 1fr); border-radius: 10px; }
	:root .ctl-panel__col { padding: 20px; border-left: 0; border-top: 1px solid var(--ctl-border-soft); }
	:root .ctl-panel__col:first-child { border-top: 0; }
	:root .ctl-panel__title { font-size: 15px; }
	:root .ctl-panel__text { font-size: 11.5px; line-height: 1.85; }

	:root .ctl-compare { grid-template-columns: minmax(0, 1fr); }
	:root .ctl-compare__col,
	:root .ctl-compare__col.-active {
		padding: 20px 2px;
		border-right: 0;
		border-bottom: 1px solid var(--ctl-border-strong);
	}
	:root .ctl-compare__title { font-size: 17px; margin-top: 10px; }
	:root .ctl-compare__text { font-size: 12px; line-height: 1.9; }
	:root .ctl-compare__arrows { grid-template-columns: minmax(0, 1fr); }
	:root .ctl-compare__arrows .ctl-compare__arrow:first-child { display: none; }

	:root .ctl-bizdiagram.-sm .ctl-bizcircle { width: 260px; height: 260px; padding: 0 30px; }
	:root .ctl-bizdiagram.-sm .ctl-bizloop { width: 170px; height: 170px; margin: -8px auto; }
	:root .ctl-bizdiagram.-sm .ctl-bizloop__note-a,
	:root .ctl-bizdiagram.-sm .ctl-bizloop__note-b { width: 72px; font-size: 9px; }
	:root .ctl-bizdiagram.-sm .ctl-bizloop__note-a { top: 50%; }
	:root .ctl-bizdiagram.-sm .ctl-bizloop__note-b { bottom: auto; top: 50%; }

	:root .ctl-promise { flex-wrap: wrap; gap: 8px 16px; padding: 20px 2px; }
	:root .ctl-promise__no { padding-top: 0; font-size: 11px; }
	:root .ctl-promise__title { width: auto; flex: 1; font-size: 14.5px; }
	:root .ctl-promise__text { flex: 1 0 100%; font-size: 12px; line-height: 1.9; }

	:root .ctl-membergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
	:root .ctl-membergrid .ctl-member__summary { display: block; font-size: 10.5px; }

	:root .ctl-chips { gap: 8px; }
	:root .ctl-chip a { padding: 7px 14px; font-size: 11px; }

	:root .ctl-artgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	:root .ctl-artcard.-stack { border-radius: 10px; }
	:root .ctl-artcard.-stack .ctl-artcard__body { padding: 12px 12px 14px; gap: 8px; }
	:root .ctl-artcard.-stack .ctl-artcard__title { font-size: 11.5px; }

	:root .ctl-formlayout,
	:root .ctl-formlayout.-dl { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	:root .ctl-field__row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	:root .ctl-form.-side { padding: 24px 20px; border-radius: 10px; }
	:root .ctl-submit { width: 100%; padding: 15px 0; font-size: 13.5px; }
	:root .ctl-sidecard { border-radius: 10px; padding: 20px; }
	:root .ctl-sidecard__title { font-size: 13.5px; }
	:root .ctl-sidecard__text { font-size: 11.5px; line-height: 1.85; }
	:root .ctl-sidecard__addr { font-size: 11.5px; }

	:root .ctl-doc { flex-direction: column; gap: 14px; border-radius: 10px; padding: 18px; }
	:root .ctl-ph.-cover { width: 110px; height: 80px; }
	:root .ctl-doc__cover { width: 110px; height: 80px; }
	:root .ctl-doc__title { font-size: 14px; }
	:root .ctl-doc__text { font-size: 11.5px; line-height: 1.85; }
}

@media (max-width: 599.98px) {
	:root .ctl-membergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	:root .ctl-artgrid { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   17. クエリーループ（ニュース / ナレッジ / メンバーの自動一覧）
   ========================================================================== */

/* post-template は <ul><li> を出す。li は見えない入れ物として扱う。 */
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 100%;
}
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-template > li {
	margin: 0;
	padding: 0;
	list-style: none;
}
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-template > li::before,
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-template > li::marker { content: none; }

/* グリッド系はカードが li いっぱいに広がるようにする */
:root .ctl-artgrid > li,
:root .ctl-artlist > li,
:root .ctl-membergrid > li,
:root .ctl-memberrail > li { display: flex; }
:root .ctl-artgrid > li > *,
:root .ctl-artlist > li > *,
:root .ctl-membergrid > li > *,
:root .ctl-memberrail > li > * { width: 100%; }

/* クエリーループ本体のラッパーは余白を持たない */
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-query { margin: 0; }

/* 各ブロックの既定ラッパーを部品の見た目に合わせる */
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-date,
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-terms,
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-title,
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-excerpt { margin: 0; }
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-date time { color: inherit; }
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-terms a,
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-title a { color: inherit; text-decoration: none; }
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-terms a:hover { color: inherit; }
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-excerpt__excerpt { margin: 0; }
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-excerpt__more-text { display: none; }
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-featured-image { margin: 0; }
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-post-featured-image a { display: block; height: 100%; }
/* アイキャッチはフレーム（.ctl-member__photo / .ctl-artcard__thumb）の内側いっぱいに敷く。
   未設定でもフレームだけは残るように、グループでラップしてある。 */
:root :is(.ctl-content, .editor-styles-wrapper) :is(.ctl-member__photo, .ctl-artcard__thumb) > .wp-block-post-featured-image {
	width: 100%;
	height: 100%;
}
:root :is(.ctl-content, .editor-styles-wrapper) :is(.ctl-member__photo, .ctl-artcard__thumb) > .wp-block-post-featured-image:empty { display: none; }

/* 記事が1件も無いときの表示 */
:root :is(.ctl-content, .editor-styles-wrapper) .wp-block-query-no-results { margin: 0; }

/* ページャー */
:root .ctl-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 48px 0 0;
	font-family: var(--ctl-font-en);
	font-size: 13px;
}
:root .ctl-pagination .wp-block-query-pagination-numbers { display: flex; gap: 8px; }
:root .ctl-pagination a,
:root .ctl-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--ctl-border-strong);
	border-radius: 999px;
	color: var(--ctl-text-body);
	background: var(--ctl-surface-0);
	transition: border-color .18s ease-out, color .18s ease-out;
}
:root .ctl-pagination a:hover { border-color: var(--ctl-brand-ui); color: var(--ctl-brand-ui); }
:root .ctl-pagination .page-numbers.current {
	background: var(--ctl-navy);
	border-color: var(--ctl-navy);
	color: var(--ctl-on-dark);
}

/* メンバーは人数に応じて列数が変わる（増減しても崩れない） */
:root .ctl-membergrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 32px 20px;
}
:root .ctl-memberrail { display: flex; }

/* アイキャッチが未設定でもカードの形が崩れないようにする */
:root .ctl-artcard__thumb:empty,
:root .ctl-member__photo:empty { display: block; }
:root .ctl-member__photo img { border-radius: inherit; }

@media (max-width: 959.98px) {
	:root .ctl-membergrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px 10px; }
	:root .ctl-pagination { margin-top: 32px; font-size: 12px; }
}


/* ==========================================================================
   18. ブロックエディタの表示を実物に寄せる
   （@media は編集キャンバスの幅で判定されるため、
     PC レイアウトを明示的に固定して編集しやすくする）
   ========================================================================== */
.editor-styles-wrapper .ctl-inner,
.editor-styles-wrapper .ctl-pagehero__inner {
	width: min(var(--ctl-content), var(--ctl-content-pct)) !important;
	margin-inline: auto !important;
}

/* エディタ内のブロック幅制限（既定 840px）を外す。
   詳細度は低く保ち、コンポーネント側の max-width は生かす。 */
.editor-styles-wrapper :where(.wp-block) { max-width: none; }

/* セクションの上下パディングは実物と同じにする */

/* --- 以下、キャンバスが狭くても PC の組みで見せる --------------------- */
.editor-styles-wrapper .ctl-grid.-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.editor-styles-wrapper .ctl-grid.-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.editor-styles-wrapper .ctl-grid.-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* ポートフォリオの「詳細」は公開ページでは隠れているので、編集画面では出す。
   どこが隠れる部分なのか分かるよう、点線の枠と見出しを付ける。 */
.editor-styles-wrapper .ctl-pfcard__detail {
	display: block !important;
	margin-top: 14px;
	padding: 12px 14px;
	border: 1px dashed var(--ctl-border-strong);
	border-radius: 6px;
	background: var(--ctl-surface-1);
}
.editor-styles-wrapper .ctl-pfcard__detail::before {
	content: "詳細（ページには出ません。カードを押すと開きます）";
	display: block;
	margin-bottom: 8px;
	font-size: 10.5px;
	letter-spacing: .04em;
	color: var(--ctl-muted);
}
/* 要約は公開ページで3行に切っているが、編集中は全文見えるようにする */
.editor-styles-wrapper .ctl-pfcard:has(.ctl-pfcard__detail) .ctl-pfcard__text {
	display: block !important;
	-webkit-line-clamp: none !important;
	line-clamp: none !important;
	overflow: visible !important;
}
/* 編集中はカードを押しても何も起きないので、手がかりは出さない */
.editor-styles-wrapper .ctl-pfcard:has(.ctl-pfcard__detail)::after { content: none !important; }
/* 編集画面のカードは幅が狭いので、項目と内容を縦に積む。
   （.editor-styles-wrapper .ctl-row の横並び指定より詳細度を上げて打ち消す） */
.editor-styles-wrapper .ctl-pfcard__detail .ctl-rows {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}
.editor-styles-wrapper .ctl-pfcard__detail .ctl-row {
	flex-direction: column !important;
	gap: 4px !important;
	padding: 10px 0 !important;
}
.editor-styles-wrapper .ctl-pfcard__detail .ctl-row__key { width: auto !important; font-size: 11.5px !important; }
.editor-styles-wrapper .ctl-pfcard__detail .ctl-row__val { font-size: 12px !important; }
.editor-styles-wrapper .ctl-steps { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.editor-styles-wrapper .ctl-steps.-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.editor-styles-wrapper .ctl-steps.-c5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.editor-styles-wrapper .ctl-step { padding-right: 32px !important; }
.editor-styles-wrapper .ctl-steps.-c5 .ctl-step { padding-right: 26px !important; }
.editor-styles-wrapper .ctl-steps.-c3 .ctl-step { padding-right: 40px !important; }
.editor-styles-wrapper .ctl-split { grid-template-columns: 520px minmax(0, 1fr) !important; gap: 96px !important; }
.editor-styles-wrapper .ctl-split.-c340 { grid-template-columns: 340px minmax(0, 1fr) !important; }
.editor-styles-wrapper .ctl-split.-c480 { grid-template-columns: 480px minmax(0, 1fr) !important; }
.editor-styles-wrapper .ctl-split.-c560 { grid-template-columns: 560px minmax(0, 1fr) !important; }
.editor-styles-wrapper .ctl-stats { grid-template-columns: 1fr 1fr 1.25fr !important; gap: 44px !important; }
.editor-styles-wrapper .ctl-artgrid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.editor-styles-wrapper .ctl-artlist { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.editor-styles-wrapper .ctl-access { grid-template-columns: minmax(0, 1fr) 380px !important; }
/* 地図はカスタムHTMLブロックなので、編集画面ではプレビュー用の枠に包まれる。
   その枠ごと左カラムいっぱいに広げないと、実ページより細く見える。 */
.editor-styles-wrapper .ctl-access > .wp-block-html,
.editor-styles-wrapper .ctl-access > .wp-block-html > * { width: 100% !important; min-width: 0 !important; }
.editor-styles-wrapper .ctl-access .components-sandbox,
.editor-styles-wrapper .ctl-access iframe { width: 100% !important; min-height: 300px !important; }
.editor-styles-wrapper .ctl-map { width: 100% !important; }
.editor-styles-wrapper .ctl-panel { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.editor-styles-wrapper .ctl-compare { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.editor-styles-wrapper .ctl-formlayout { grid-template-columns: minmax(0, 1fr) 340px !important; }
.editor-styles-wrapper .ctl-formlayout.-dl { grid-template-columns: minmax(0, 1fr) 400px !important; }
.editor-styles-wrapper .ctl-field__row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.editor-styles-wrapper .ctl-artcard { flex-direction: row !important; }
.editor-styles-wrapper .ctl-artcard.-stack { flex-direction: column !important; }
.editor-styles-wrapper .ctl-service { flex-direction: row !important; }
.editor-styles-wrapper .ctl-service.-stack { flex-direction: column !important; }
.editor-styles-wrapper .ctl-row { flex-direction: row !important; gap: 48px !important; }
.editor-styles-wrapper .ctl-row__key { width: 160px !important; }
.editor-styles-wrapper .ctl-strength { flex-direction: row !important; gap: 40px !important; }
.editor-styles-wrapper .ctl-strength__title { width: 280px !important; }
.editor-styles-wrapper .ctl-promise { flex-wrap: nowrap !important; gap: 24px !important; }
.editor-styles-wrapper .ctl-promise__title { width: 280px !important; flex: none !important; }
.editor-styles-wrapper .ctl-promise__text { flex: 1 !important; }
.editor-styles-wrapper .ctl-newsitem { flex-wrap: nowrap !important; gap: 26px !important; }
.editor-styles-wrapper .ctl-newsitem__title { flex: 1 1 auto !important; margin-top: 0 !important; }
.editor-styles-wrapper .ctl-btns { flex-direction: row !important; }
.editor-styles-wrapper .ctl-bizdiagram { flex-direction: row !important; }
.editor-styles-wrapper .ctl-bizchip { writing-mode: vertical-rl !important; }
.editor-styles-wrapper .ctl-footer__nav { grid-template-columns: repeat(2, minmax(170px, auto)) !important; }

/* ヒーローは実物と同じ寸法で表示する（HTMLブロックの中身だけは
   エディタがコード表示になるため、そこだけ見え方が異なる） */
.editor-styles-wrapper .ctl-hero__fx { overflow: hidden !important; }

/* 背景画像は絶対配置のままだとエディタで選択できないので、その場に置く。
   （実サイトでは全面に敷かれる。ここだけは意図的に見え方を変えている） */
.editor-styles-wrapper .ctl-bgimg { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; opacity: 1 !important; transform: none !important; }
.editor-styles-wrapper .ctl-bgimg img { height: auto !important; opacity: .5 !important; }

/* 入場演出はエディタでは効かせない */
.editor-styles-wrapper .ctl-section *,
.editor-styles-wrapper .ctl-cta * { opacity: 1 !important; transform: none !important; }


/* --- SWELL がエディタに出す装飾を打ち消す ----------------------------- */
/* 見出しの背景・余白・罫線・擬似要素（.editor-styles-wrapper h2 などが付ける） */
.editor-styles-wrapper .ctl-hero :is(h1, h2, h3, h4, h5, h6),
.editor-styles-wrapper .ctl-pagehero :is(h1, h2, h3, h4, h5, h6),
.editor-styles-wrapper .ctl-section :is(h1, h2, h3, h4, h5, h6),
.editor-styles-wrapper .ctl-cta :is(h1, h2, h3, h4, h5, h6) {
	background: none !important;
	padding: 0 !important;
	border: 0 !important;
	position: static !important;
	text-align: inherit !important;
}
.editor-styles-wrapper .ctl-hero :is(h1, h2, h3, h4, h5, h6)::before,
.editor-styles-wrapper .ctl-hero :is(h1, h2, h3, h4, h5, h6)::after,
.editor-styles-wrapper .ctl-pagehero :is(h1, h2, h3, h4, h5, h6)::before,
.editor-styles-wrapper .ctl-pagehero :is(h1, h2, h3, h4, h5, h6)::after,
.editor-styles-wrapper .ctl-section :is(h1, h2, h3, h4, h5, h6)::before,
.editor-styles-wrapper .ctl-section :is(h1, h2, h3, h4, h5, h6)::after,
.editor-styles-wrapper .ctl-cta :is(h1, h2, h3, h4, h5, h6)::before,
.editor-styles-wrapper .ctl-cta :is(h1, h2, h3, h4, h5, h6)::after {
	content: none !important;
	display: none !important;
}

/* 文字色は Catalys 側の指定を優先させる
   （SWELL の h2[data-type="core/heading"] が白を上書きしてくるため） */
.editor-styles-wrapper .ctl-h2,
.editor-styles-wrapper .ctl-h3,
.editor-styles-wrapper .ctl-hero__title,
.editor-styles-wrapper .ctl-pagehero__title,
.editor-styles-wrapper .ctl-card__title,
.editor-styles-wrapper .ctl-step__title,
.editor-styles-wrapper .ctl-panel__title,
.editor-styles-wrapper .ctl-promise__title,
.editor-styles-wrapper .ctl-strength__title,
.editor-styles-wrapper .ctl-bizcircle__title,
.editor-styles-wrapper .ctl-banner__title,
.editor-styles-wrapper .ctl-infocard__name,
.editor-styles-wrapper .ctl-sidecard__title,
.editor-styles-wrapper .ctl-form__title { color: var(--ctl-navy) !important; }

.editor-styles-wrapper .ctl-service__title,
.editor-styles-wrapper .ctl-artcard__title,
.editor-styles-wrapper .ctl-newsitem__title,
.editor-styles-wrapper .ctl-member__name { color: var(--ctl-text) !important; }

.editor-styles-wrapper .ctl-compare__title { color: var(--ctl-text-body) !important; }
.editor-styles-wrapper .ctl-compare__title.-on { color: var(--ctl-navy) !important; }
.editor-styles-wrapper .ctl-h2.-on-dark,
.editor-styles-wrapper .ctl-section.-inverse .ctl-h2,
.editor-styles-wrapper .ctl-section.-deep .ctl-h2 { color: var(--ctl-on-dark) !important; }
.editor-styles-wrapper .ctl-sidecard.-navy .ctl-sidecard__title { color: var(--ctl-on-dark) !important; }

/* 見出しの上下マージンも実物に合わせる */
.editor-styles-wrapper .ctl-h2 { margin: 22px 0 0 !important; }
.editor-styles-wrapper .ctl-h3,
.editor-styles-wrapper .ctl-card__title,
.editor-styles-wrapper .ctl-panel__title,
.editor-styles-wrapper .ctl-promise__title,
.editor-styles-wrapper .ctl-strength__title,
.editor-styles-wrapper .ctl-bizcircle__title,
.editor-styles-wrapper .ctl-banner__title,
.editor-styles-wrapper .ctl-infocard__name,
.editor-styles-wrapper .ctl-sidecard__title,
.editor-styles-wrapper .ctl-service__title,
.editor-styles-wrapper .ctl-artcard__title,
.editor-styles-wrapper .ctl-newsitem__title,
.editor-styles-wrapper .ctl-form__title,
.editor-styles-wrapper .ctl-member__name { margin: 0 !important; }
.editor-styles-wrapper .ctl-step__title { margin: 8px 0 0 !important; }
.editor-styles-wrapper .ctl-compare__title { margin: 16px 0 0 !important; }
.editor-styles-wrapper .ctl-pagehero__title { margin: 20px 0 0 !important; }

/* ブロック間の既定マージン（SWELL の --swl-block-margin）を消す。
   余白は各コンポーネントが持っているので、実物と同じ詰まり方になる。 */
.editor-styles-wrapper :where(.wp-block) { margin-block: 0; }
.editor-styles-wrapper :where(.ctl-section, .ctl-cta, .ctl-hero, .ctl-pagehero) { margin-block: 0; }

/* SWELL の h1〜h6[data-type="core/heading"] がサイズを上書きしてくるので、
   実サイトと同じ値を明示する。見出しクラスを増やしたらここにも追加すること。 */
.editor-styles-wrapper .ctl-hero__title { font-size: 78px !important; }
.editor-styles-wrapper .ctl-pagehero__title { font-size: 40px !important; }
.editor-styles-wrapper .ctl-h2 { font-size: 30px !important; }
.editor-styles-wrapper .ctl-h2.-mincho { font-size: 38px !important; }
.editor-styles-wrapper .ctl-h2.-mincho.-lg { font-size: 36px !important; }
.editor-styles-wrapper .ctl-h2.-mincho.-msg { font-size: 32px !important; }
.editor-styles-wrapper .ctl-h2.-concept { font-size: 30px !important; }
.editor-styles-wrapper .ctl-h2.-sm { font-size: 26px !important; }
.editor-styles-wrapper .ctl-h3 { font-size: 17px !important; }
.editor-styles-wrapper .ctl-card__title { font-size: 17px !important; }
.editor-styles-wrapper .ctl-card.-round .ctl-card__title { font-size: 16.5px !important; }
.editor-styles-wrapper .ctl-service__title { font-size: 16px !important; }
.editor-styles-wrapper .ctl-service.-stack .ctl-service__title { font-size: 15.5px !important; }
.editor-styles-wrapper .ctl-step__title { font-size: 16px !important; }
.editor-styles-wrapper .ctl-step__title.-sm { font-size: 15px !important; }
.editor-styles-wrapper .ctl-step__title.-lg { font-size: 18px !important; }
.editor-styles-wrapper .ctl-panel__title { font-size: 18px !important; }
.editor-styles-wrapper .ctl-promise__title { font-size: 17px !important; }
.editor-styles-wrapper .ctl-strength__title { font-size: 16.5px !important; }
.editor-styles-wrapper .ctl-bizcircle__title { font-size: 18px !important; }
.editor-styles-wrapper .ctl-banner__title { font-size: 16.5px !important; }
.editor-styles-wrapper .ctl-infocard__name { font-size: 15px !important; }
.editor-styles-wrapper .ctl-sidecard__title { font-size: 14.5px !important; }
.editor-styles-wrapper .ctl-compare__title { font-size: 21px !important; }
.editor-styles-wrapper .ctl-form__title { font-size: 16px !important; }
.editor-styles-wrapper .ctl-member__name { font-size: 14px !important; }
.editor-styles-wrapper .ctl-artcard__title { font-size: 13.5px !important; }
.editor-styles-wrapper .ctl-artcard.-stack .ctl-artcard__title { font-size: 12.5px !important; }
.editor-styles-wrapper .ctl-newsitem__title { font-size: 14.5px !important; }

/* 万一エディタが group に旧マークアップの内側 div を入れた場合の保険。
   display:contents で無かったことにして、グリッド/フレックスを成立させる。 */
.editor-styles-wrapper .ctl-inner > .wp-block-group__inner-container,
.editor-styles-wrapper .ctl-grid > .wp-block-group__inner-container,
.editor-styles-wrapper .ctl-split > .wp-block-group__inner-container,
.editor-styles-wrapper .ctl-steps > .wp-block-group__inner-container,
.editor-styles-wrapper .ctl-stats > .wp-block-group__inner-container,
.editor-styles-wrapper .ctl-pagehero__inner > .wp-block-group__inner-container,
.editor-styles-wrapper .ctl-secthead > .wp-block-group__inner-container,
.editor-styles-wrapper .ctl-compare > .wp-block-group__inner-container,
.editor-styles-wrapper .ctl-formlayout > .wp-block-group__inner-container,
.editor-styles-wrapper .ctl-bizdiagram > .wp-block-group__inner-container,
.editor-styles-wrapper .ctl-artgrid > .wp-block-group__inner-container,
.editor-styles-wrapper .ctl-artlist > .wp-block-group__inner-container,
.editor-styles-wrapper .ctl-access > .wp-block-group__inner-container,
.editor-styles-wrapper .ctl-membergrid > .wp-block-group__inner-container,
.editor-styles-wrapper .ctl-memberrail > .wp-block-group__inner-container { display: contents; }

/* WordPress のエディタCSSが全ブロックに margin-inline:auto を当てるため、
   フレックス/グリッドの子要素が伸びずに内容幅まで縮んでしまう。
   Catalys のセクション内では左右マージンを 0 に戻す。 */
.editor-styles-wrapper :is(.ctl-hero, .ctl-pagehero, .ctl-section, .ctl-cta) .wp-block {
	margin-left: 0;
	margin-right: 0;
}


/* ==========================================================================
   19. 記事ページ（ニュース / ナレッジ）
   Claude Design : news-article(-sp) / knowledge-article(-sp)

   本文まわりのタイポグラフィ（H2〜H4・リスト・引用・表）は
   .ctl-article__body の中だけに効く。ここまでに作った固定ページには影響しない。
   編集画面には本文ラッパーが無いので、編集キャンバスの body に付く
   post-type-catalys_news / post-type-catalys_knowledge を同じ指定に含めている。
   ========================================================================== */

/* --- 記事本体の枠 ------------------------------------------------------ */
:root .ctl-article__section {
	background: var(--ctl-surface-0);
	padding: 72px 0 96px;
}
:root .ctl-article {
	width: min(760px, var(--ctl-content-pct));
	margin-inline: auto;
}

/* 日付 + カテゴリー */
:root .ctl-article__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}
:root .ctl-article__meta .ctl-date { font-size: 13px; }
:root .ctl-article__meta .ctl-tag { font-size: 11px; padding: 4px 12px; }

/* 記事タイトル */
:root .ctl-article__title {
	margin: 20px 0 0;
	font-family: var(--ctl-font-jp);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .03em;
	color: var(--ctl-navy);
}

/* タイトル下の罫（左端 64px だけブランドカラー）— ニュース */
:root .ctl-article__rule {
	position: relative;
	margin-top: 32px;
	height: 1px;
	background: var(--ctl-border-strong);
}
:root .ctl-article__rule::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 64px;
	height: 3px;
	background: var(--ctl-brand-logo);
}

/* アイキャッチ（ナレッジ） */
:root .ctl-article__hero {
	margin: 36px 0 0;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	border-radius: 2px;
	background: #DCE9F4;
}
:root .ctl-article__hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 本文ブロック */
:root .ctl-article__body { margin-top: 44px; }

/* 一覧へ戻る */
:root .ctl-article__back { margin-top: 64px; display: flex; justify-content: center; }
:root .ctl-article.-knowledge .ctl-article__back { margin-top: 48px; }
:root .ctl-backlink {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--ctl-border-strong);
	border-radius: 999px;
	padding: 13px 32px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--ctl-navy);
	transition: border-color .2s ease-out, color .2s ease-out;
}
:root .ctl-backlink:hover { border-color: var(--ctl-brand-ui); color: var(--ctl-brand-ui); }
:root .ctl-backlink__arrow { font-family: var(--ctl-font-en); }

/* ぱんくずの現在地（記事タイトル）が長くても折り返さない */
:root .ctl-crumbs strong.-clip {
	max-width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- 執筆者ボックス（ナレッジ） ---------------------------------------- */
:root .ctl-author {
	margin-top: 56px;
	display: flex;
	align-items: center;
	gap: 20px;
	background: #F2F7FB;
	border-radius: 2px;
	padding: 24px 28px;
}
:root .ctl-author__avatar {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #DCE9F4;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ctl-font-en);
	font-weight: 700;
	font-size: 15px;
	color: var(--ctl-brand-ui);
}
:root .ctl-author__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
:root .ctl-author__label {
	font-family: var(--ctl-font-en);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: .16em;
	color: var(--ctl-muted);
}
:root .ctl-author__name { font-size: 14.5px; font-weight: 700; color: var(--ctl-navy); }
:root .ctl-author__role {
	margin-left: 10px;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--ctl-muted);
}

/* --- 関連記事 ---------------------------------------------------------- */
:root .ctl-related { padding: 64px 0 88px; }
:root .ctl-related__title {
	margin: 16px 0 0;
	font-family: var(--ctl-font-jp);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--ctl-navy);
}
:root .ctl-related__list { margin-top: 28px; }
:root .ctl-related__list .ctl-newsitem { padding: 22px 12px; }
:root .ctl-related__list .ctl-newsitem__date { font-size: 12.5px; }
:root .ctl-related__grid { margin-top: 28px; }
:root .ctl-artgrid.-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }


/* ==========================================================================
   19-b. 記事本文のタイポグラフィ
   デザインの H2 / H3 / H4・リスト・引用・図版・表をそのまま再現する。
   ========================================================================== */

/* 段落 */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) p {
	margin: 0 0 1.8em;
	font-size: 15px;
	line-height: 2.15;
	letter-spacing: .02em;
	color: #2E3A44;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) p:last-child { margin-bottom: 0; }
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) strong { color: var(--ctl-navy); font-weight: 700; }
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) a:not(.wp-block-button__link):not(.swell-block-button__link) { color: var(--ctl-brand-ui); }
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) a:hover { color: var(--ctl-brand-ui-dark); }

/* H2 : 下罫 + 左端 64px のブランドカラー */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h2 {
	position: relative;
	margin: 56px 0 24px;
	padding: 0 0 14px;
	border: 0;
	border-bottom: 1px solid var(--ctl-border-strong);
	background: none;
	font-family: var(--ctl-font-jp);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .03em;
	color: var(--ctl-navy);
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h2::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 64px;
	height: 3px;
	border: 0;
	background: var(--ctl-brand-logo);
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h2::after { content: none; }

/* H3 : 左の 3px ライン */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h3 {
	position: static;
	margin: 40px 0 16px;
	padding: 0 0 0 14px;
	border: 0;
	border-left: 3px solid var(--ctl-brand-logo);
	background: none;
	font-family: var(--ctl-font-jp);
	font-size: 18.5px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .03em;
	color: var(--ctl-navy);
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h3::before,
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h3::after { content: none; }

/* H4 : 先頭に 9px の四角（デザインの span を ::before で再現） */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h4 {
	position: relative;
	margin: 32px 0 12px;
	padding: 0 0 0 18px;
	border: 0;
	background: none;
	font-family: var(--ctl-font-jp);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .03em;
	color: var(--ctl-navy);
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h4::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -4.5px;
	width: 9px;
	height: 9px;
	box-sizing: border-box;
	border: 2px solid var(--ctl-brand-logo);
	border-radius: 2px;
	background: none;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h4::after { content: none; }

/* H5 / H6 : デザインには無いので H4 の系統で控えめに */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(h5, h6) {
	position: static;
	margin: 28px 0 10px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--ctl-font-jp);
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .03em;
	color: var(--ctl-navy);
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h5 { font-size: 14.5px; }
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h6 { font-size: 13.5px; color: var(--ctl-text-body); }
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(h5, h6)::before,
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(h5, h6)::after { content: none; }

/* 箇条書き : 角丸の小さな四角 */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) ul {
	margin: 0 0 28.8px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) ul > li {
	position: relative;
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: .02em;
	color: #2E3A44;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) ul > li::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: .75em;
	width: 8px;
	height: 8px;
	background: var(--ctl-brand-ui);
	border-radius: 2px;
}

/* 番号付きリスト : 01, 02 … */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) ol {
	margin: 0 0 28.8px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	counter-reset: ctlolc;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) ol > li {
	position: relative;
	padding-left: 34px;
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: .02em;
	color: #2E3A44;
	counter-increment: ctlolc;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) ol > li::before {
	content: counter(ctlolc, decimal-leading-zero);
	display: block;
	position: absolute;
	left: 0;
	top: .15em;
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	font-family: var(--ctl-font-en);
	font-weight: 700;
	font-size: 13px;
	color: var(--ctl-brand-ui);
}

/* ネストしたリスト */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) li > :is(ul, ol) { margin: 10px 0 0; }

/* 引用 */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) blockquote {
	margin: 32px 0;
	padding: 26px 32px;
	background: #F2F7FB;
	border: 0;
	border-left: 2px solid var(--ctl-brand-ui);
	border-radius: 2px;
	font-size: 14.5px;
	line-height: 2.1;
	letter-spacing: .02em;
	color: var(--ctl-text-body);
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) blockquote::before,
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) blockquote::after { content: none; }
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) blockquote p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) blockquote cite {
	display: block;
	margin-top: 10px;
	font-family: var(--ctl-font-en);
	font-style: normal;
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .06em;
	color: var(--ctl-muted);
}

/* 図版 */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) figure { margin: 40px 0; }
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) figure img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 2px;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) figcaption {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.8;
	letter-spacing: .03em;
	color: var(--ctl-muted);
	text-align: left;
}

/* 表 : 横スクロールできる箱に入れる（SPで崩れないように） */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .wp-block-table {
	margin: 32px 0;
	overflow-x: auto;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 13.5px;
	line-height: 1.8;
	letter-spacing: .02em;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) thead th {
	background: var(--ctl-navy);
	color: var(--ctl-on-dark);
	font-weight: 700;
	text-align: left;
	padding: 12px 18px;
	border: 1px solid var(--ctl-navy);
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) tbody th {
	background: #F2F7FB;
	color: var(--ctl-navy);
	font-weight: 700;
	text-align: left;
	padding: 12px 18px;
	border: 1px solid var(--ctl-border);
	width: 180px;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) td {
	padding: 12px 18px;
	border: 1px solid var(--ctl-border);
	color: #2E3A44;
}

/* 区切り線 */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--ctl-border-strong);
}


/* --- SP（〜959px）: *-sp のデザイン ------------------------------------ */
@media (max-width: 959.98px) {

	:root .ctl-article__section { padding: 40px 0 56px; }
	:root .ctl-article { width: calc(100% - 48px); }

	:root .ctl-article__meta { gap: 10px; }
	:root .ctl-article__meta .ctl-date { font-size: 11px; }
	:root .ctl-article__meta .ctl-tag { font-size: 9.5px; padding: 3px 8px; }

	:root .ctl-article__title { margin-top: 14px; font-size: 21px; line-height: 1.75; letter-spacing: .02em; }
	:root .ctl-article__rule { margin-top: 22px; }
	:root .ctl-article__rule::before { width: 48px; }
	:root .ctl-article__hero { margin-top: 24px; aspect-ratio: 16 / 9; }
	:root .ctl-article__body { margin-top: 30px; }

	:root .ctl-article__back { margin-top: 44px; }
	:root .ctl-article.-knowledge .ctl-article__back { margin-top: 36px; }
	:root .ctl-backlink { gap: 8px; padding: 11px 26px; font-size: 12px; letter-spacing: .05em; }

	:root .ctl-crumbs strong.-clip { max-width: 180px; }

	:root .ctl-author { margin-top: 40px; gap: 14px; padding: 16px 18px; }
	:root .ctl-author__avatar { width: 44px; height: 44px; font-size: 13px; }
	:root .ctl-author__label { font-size: 9.5px; }
	:root .ctl-author__name { font-size: 12.5px; }
	:root .ctl-author__role { margin-left: 8px; font-size: 10.5px; }

	:root .ctl-related { padding: 40px 0 56px; }
	:root .ctl-related__title { margin-top: 12px; font-size: 20px; letter-spacing: .03em; }
	:root .ctl-related__list { margin-top: 18px; }
	:root .ctl-related__list .ctl-newsitem { padding: 16px 4px; }
	:root .ctl-related__grid { margin-top: 18px; }

	/* 関連ナレッジは SP では横並びカード */
	:root .ctl-artgrid.-c3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	:root .ctl-related__grid .ctl-artcard.-stack {
		flex-direction: row;
		gap: 14px;
		padding: 12px;
		border-radius: 2px;
	}
	:root .ctl-related__grid .ctl-artcard.-stack .ctl-artcard__thumb {
		flex: none;
		width: 104px;
		height: auto;
		aspect-ratio: 16 / 11;
		border-radius: 2px;
	}
	:root .ctl-related__grid .ctl-artcard.-stack .ctl-artcard__body { padding: 0; gap: 6px; }
	:root .ctl-related__grid .ctl-artcard.-stack .ctl-artcard__title { font-size: 11.5px; line-height: 1.65; }
	:root .ctl-related__grid .ctl-artcard.-stack .ctl-artcard__arrow { display: none; }

	/* 本文 */
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) p {
		margin-bottom: 1.7em;
		font-size: 13.5px;
		line-height: 2.05;
		letter-spacing: .01em;
	}
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h2 {
		margin: 40px 0 18px;
		padding-bottom: 11px;
		font-size: 18px;
		line-height: 1.65;
		letter-spacing: .02em;
	}
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h2::before { width: 48px; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h3 {
		margin: 30px 0 12px;
		padding-left: 12px;
		font-size: 15.5px;
		letter-spacing: .02em;
	}
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h4 {
		margin: 26px 0 10px;
		padding-left: 16px;
		font-size: 14px;
		letter-spacing: .02em;
	}
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h4::before {
		width: 8px;
		height: 8px;
		margin-top: -4px;
	}
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h5 { font-size: 13.5px; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) h6 { font-size: 12.5px; }

	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(ul, ol) {
		margin-bottom: 27.2px;
		gap: 8px;
	}
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) ul > li {
		padding-left: 17px;
		font-size: 13.5px;
		line-height: 1.85;
		letter-spacing: .01em;
	}
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) ul > li::before {
		top: .72em;
		width: 7px;
		height: 7px;
	}
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) ol > li {
		padding-left: 28px;
		font-size: 13.5px;
		line-height: 1.85;
		letter-spacing: .01em;
	}
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) ol > li::before { font-size: 11.5px; }

	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) blockquote {
		margin: 24px 0;
		padding: 18px 20px;
		font-size: 13px;
		line-height: 2;
		letter-spacing: .01em;
	}
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) blockquote cite { margin-top: 8px; font-size: 10.5px; }

	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) figure { margin: 28px 0; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) figcaption { margin-top: 8px; font-size: 11px; letter-spacing: .02em; }

	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .wp-block-table { margin: 24px 0; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) table { font-size: 12px; line-height: 1.75; letter-spacing: .01em; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(thead th, tbody th, td) { padding: 10px 12px; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) tbody th { width: 96px; }
}


/* ==========================================================================
   19-c. 記事本文（編集画面）
   編集キャンバスは実サイトより狭いので、そのままだと SP の組みで表示される。
   ここで PC の値に固定して、編集画面でも実物と同じ見え方にする。
   （@media より後ろに書いてあるので !important は不要。
     SWELL が !important で上書きしてくる引用とリストだけ !important を付ける）
   ========================================================================== */
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) p {
	margin-bottom: 1.8em;
	font-size: 15px;
	line-height: 2.15;
	letter-spacing: .02em;
}
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) h2 {
	margin: 56px 0 24px;
	padding-bottom: 14px;
	font-size: 23px;
	line-height: 1.6;
	letter-spacing: .03em;
}
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) h2::before { width: 64px; }
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) h3 {
	margin: 40px 0 16px;
	padding-left: 14px;
	font-size: 18.5px;
	letter-spacing: .03em;
}
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) h4 {
	margin: 32px 0 12px;
	padding-left: 18px;
	font-size: 16px;
	letter-spacing: .03em;
}
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) h4::before {
	width: 9px;
	height: 9px;
	margin-top: -4.5px;
}
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) h5 { font-size: 14.5px; }
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) h6 { font-size: 13.5px; }

:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) :is(ul, ol) {
	margin-bottom: 28.8px;
	gap: 10px;
	padding-left: 0 !important;
}
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) ul > li {
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: .02em;
}
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) ul > li::before {
	top: .75em;
	width: 8px;
	height: 8px;
}
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) ol > li {
	padding-left: 34px;
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: .02em;
}
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) ol > li::before { font-size: 13px; }

:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) blockquote {
	margin: 32px 0;
	padding: 26px 32px !important;
	border-left: 2px solid var(--ctl-brand-ui) !important;
	font-size: 14.5px;
	line-height: 2.1;
	letter-spacing: .02em;
}
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) blockquote cite { margin-top: 10px; font-size: 11.5px; }

:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) figure { margin: 40px 0; }
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) figcaption { margin-top: 10px; font-size: 12px; letter-spacing: .03em; }

:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) .wp-block-table { margin: 32px 0; }
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) table { font-size: 13.5px; line-height: 1.8; letter-spacing: .02em; }
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) :is(thead th, tbody th, td) { padding: 12px 18px; }
:root .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge) tbody th { width: 180px; }


/* ==========================================================================
   20. カテゴリーで絞り込んだ一覧
   見た目は一覧ページと同じ。
   固定ページの本文は SWELL の .post_content の中にあって
   行間 1.8 が効いているので、テンプレート側でも同じ値にする。
   ========================================================================== */
:root .ctl-tpl {
	/* 固定ページ本文（SWELL の .post_content）と同じ土台にする。
	   SP では vw 基準の値になるため、変数をそのまま使う。 */
	font-size: var(--swl-fz--content, 16px);
	line-height: 1.8;
}

/* カードの中は 1.5。固定ページ側（グループブロック）と同じ値に揃える。 */
:root .ctl-artcard,
:root .ctl-newsitem,
:root .ctl-member { line-height: 1.5; }

/* ページャーの「…」はボタンに見せない */
:root .ctl-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	min-width: 0;
	padding: 0 2px;
	color: var(--ctl-muted);
}


/* --------------------------------------------------------------------------
   17節の汎用リセット（.wp-block-post-title などの margin: 0）が
   メンバーカードの余白まで消していたので、ここでデザインの値に戻す。
   絞り込み一覧（.ctl-tpl）と一覧ページで同じ見た目になる。
   ※ ctl-member__name を戻す
   -------------------------------------------------------------------------- */
:root .ctl-memberrail .ctl-member__name { margin: 12px 0 0; }
:root .ctl-memberrail .ctl-member__role { margin: 4px 0 0; }
:root .ctl-memberrail .ctl-member__summary { margin: 10px 0 0; }
:root .ctl-membergrid .ctl-member__name { margin: 10px 0 0; }
:root .ctl-membergrid .ctl-member__role { margin: 3px 0 0; }
:root .ctl-membergrid .ctl-member__summary { margin: 8px 0 0; }
/* 抜粋は5行でそろえる。文字数は投稿側の抜粋（最大100文字）で決まるが、
   人によって長さが違ってもカードの高さが不揃いにならないようにする。 */
:root .ctl-membergrid .ctl-member__summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
}
/* クリックで詳細が開くことを示す手がかり。カードは JS 側で role="button" に
   してあるので、ここでは見た目だけを足す（マークアップは変えない）。 */
:root .ctl-membergrid .ctl-member::after {
	content: "詳しく見る ＋";
	display: inline-block;
	margin-top: 10px;
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--ctl-brand-ui);
	transition: color .2s ease-out;
}
:root .ctl-membergrid .ctl-member:hover::after {
	color: var(--ctl-brand-ui-dark);
	text-decoration: underline;
}
/* 英語ページ（<html lang="en"）では英語にする */
:root[lang="en"] .ctl-membergrid .ctl-member::after { content: "View profile ＋"; }


/* 氏名の行送りは、固定ページ側（SWELL の h3）と同じ 1.4 に揃える */
:root .ctl-member__name { line-height: 1.4; }

@media (max-width: 959.98px) {
	
	/* --- メンバーカード（SPは4行でそろえる） ---------------------------- */
	:root .ctl-membergrid .ctl-member__summary { -webkit-line-clamp: 4; line-clamp: 4; }
	:root .ctl-membergrid .ctl-member::after { margin-top: 8px; font-size: 9.5px; }
	:root .ctl-memberrail .ctl-member__name,
	:root .ctl-membergrid .ctl-member__name { margin-top: 8px; }
}


/* ==========================================================================
   21. 採用セクション
   Claude Design : recruit / mission-value / ceo-message / projects /
                   career-stories / career-story-article（+ -sp）
                   CareersNav / CareersNavSP
   ========================================================================== */

/* --- 既存部品に足りない派生 -------------------------------------------- */

/* 採用の各セクション見出しのアイブロウは 17px（他ページは 13px） */
:root .ctl-eyebrow.-lg :is(.ctl-eyebrow__label, strong, span) { font-size: 17px; }

/* 左 380px の2カラム（MESSAGE / MISSION） */
:root .ctl-split.-c380 { grid-template-columns: 380px minmax(0, 1fr); gap: 64px; }

:root:root .ctl-mt-48 { margin-top: 48px !important; }

/* 長いラベルの CTA ボタン */
:root .ctl-btns.-wide .wp-block-button__link { padding-inline: 40px; }


/* --- 採用トップ : MESSAGE ---------------------------------------------- */
:root .ctl-rcmsg { background: var(--ctl-surface-tint); padding: 88px 0 96px; }
:root .ctl-rcmsg__text {
	margin: 0;
	font-size: 14px;
	line-height: 2.1;
	letter-spacing: .01em;
	color: var(--ctl-text-body);
}
:root .ctl-rcmsg__text + .ctl-rcmsg__text { margin-top: 18px; }
:root .ctl-rcmsg .ctl-split__body { padding-top: 6px; }

/* --- 採用トップ : CONTENTS --------------------------------------------- */
:root .ctl-rccontents { background: var(--ctl-surface-0); padding: 88px 0 96px; }
:root .ctl-rcgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; }
:root .ctl-rccard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 24px 18px;
	color: var(--ctl-text);
	transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
:root .ctl-rccard:hover {
	border-color: rgba(0, 112, 163, .5);
	box-shadow: 0 6px 18px rgba(15, 42, 63, .08);
	color: var(--ctl-text);
}
:root .ctl-rccard__en {
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: .14em;
	color: var(--ctl-brand-ui);
}
:root .ctl-rccard__ja {
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--ctl-navy);
	white-space: nowrap;
}
:root .ctl-rccard__text { flex: 1; font-size: 13px; line-height: 1.85; color: var(--ctl-muted); }
:root .ctl-rccard__arrow {
	font-family: var(--ctl-font-en);
	font-size: 13.5px;
	color: var(--ctl-brand-ui);
	align-self: flex-end;
}

/* --- 採用トップ : VALUES / POSITIONS ----------------------------------- */
:root .ctl-rcvalues,
:root .ctl-rcjobs { background: var(--ctl-surface-tint); padding: 96px 0 104px; }

:root .ctl-rcvalue {
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 30px 28px;
	margin: 0;
}
:root .ctl-rcvalue__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--ctl-navy); }
:root .ctl-rcvalue__text {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.95;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}

:root .ctl-rcjob {
	display: flex;
	flex-direction: column;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 30px 28px;
	margin: 0;
}
:root .ctl-rcjob__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--ctl-navy); }
:root .ctl-rcjob__text {
	margin: 14px 0 0;
	flex: 1;
	font-size: 12.5px;
	line-height: 1.95;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}
:root .ctl-rcjob__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--ctl-border-soft);
}
:root .ctl-rcjob__row { display: flex; gap: 14px; font-size: 11.5px; color: var(--ctl-text-body); }
:root .ctl-rcjob__key { width: 64px; flex: none; font-weight: 700; color: var(--ctl-muted); }
/* 英語は項目名が長く 64px だと2行になるので、見出し列を広げる */
:root[lang="en"] .ctl-rcjob__key { width: 92px; }


/* --- CareersNav（採用の下層ページ共通ナビ） ---------------------------- */
:root .ctl-careersnav {
	position: relative;
	z-index: 0;
	background: var(--ctl-navy);
	padding: 64px 0 72px;
}
:root .ctl-careersnav__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
}
:root .ctl-careersnav__main { min-width: 0; }
:root .ctl-careersnav .ctl-eyebrow :is(.ctl-eyebrow__label, strong, span) { font-size: 15px; }
:root .ctl-careersnav__title {
	margin: 18px 0 0;
	font-family: var(--ctl-font-jp);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .04em;
	color: var(--ctl-on-dark);
}
:root .ctl-careersnav__back {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	padding: 11px 26px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .05em;
	color: var(--ctl-on-dark);
	transition: border-color .2s ease-out, color .2s ease-out;
}
:root .ctl-careersnav__back:hover { border-color: var(--ctl-brand-logo); color: var(--ctl-brand-logo); }
:root .ctl-careersnav__back.-sp { display: none; }
:root .ctl-careersnav__arrow { font-family: var(--ctl-font-en); }

:root .ctl-careersnav__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 32px;
}
:root .ctl-careersnav__item {
	display: flex;
	flex-direction: column;
	gap: 9px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 2px;
	padding: 20px;
	color: var(--ctl-on-dark);
	transition: border-color .2s ease-out, background-color .2s ease-out;
}
:root .ctl-careersnav__item:hover {
	border-color: var(--ctl-brand-logo);
	background: rgba(0, 159, 232, .1);
	color: var(--ctl-on-dark);
}
:root .ctl-careersnav__en {
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .14em;
	color: var(--ctl-brand-logo);
}
:root .ctl-careersnav__ja { flex: 1; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
:root .ctl-careersnav__go {
	font-family: var(--ctl-font-en);
	font-size: 12px;
	color: var(--ctl-brand-logo);
	align-self: flex-end;
}

:root .ctl-careersnav__cta { display: flex; justify-content: center; margin-top: 48px; }
:root .ctl-careersnav__btn {
	display: inline-block;
	background: var(--ctl-surface-0);
	color: var(--ctl-navy);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 15px 40px;
	border-radius: 8px;
	transition: background-color .18s ease-out;
}
:root .ctl-careersnav__btn:hover { background: #D8ECF8; color: var(--ctl-navy); }


/* --- ミッション・バリュー ---------------------------------------------- */
:root .ctl-mvmission { background: var(--ctl-surface-tint); padding: 80px 0 88px; }
:root .ctl-bgimg.-mv { inset: 0; }
:root .ctl-bgimg.-mv img { object-position: center bottom; opacity: .9; }
:root .ctl-mvmission__text {
	margin: 0;
	font-family: var(--ctl-font-mincho);
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.9;
	letter-spacing: .03em;
	color: #16394F;
}
:root .ctl-mvmission__text + .ctl-mvmission__text { margin-top: 22px; }
:root .ctl-mvmission .ctl-split__body { padding-top: 6px; }

:root .ctl-mvvalues {
	background: var(--ctl-surface-0);
	padding: 64px 0 72px;
}
/* 背景はメディアの forest-light-blue.png（.ctl-bgimg）。
   その上に白のオーバーレイを重ねて本文を読みやすくする。 */
:root .ctl-bgimg.-forest { inset: 0; }
:root .ctl-bgimg.-forest img { object-position: center; opacity: 1; }
:root .ctl-mvvalues::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .84));
	pointer-events: none;
}
:root .ctl-mvvalues > .ctl-inner { position: relative; z-index: 2; }
:root .ctl-mvvalues__lead { margin: 16px 0 0; font-size: 13.5px; line-height: 2; color: var(--ctl-text-body); }

:root .ctl-mvlist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 36px 88px;
	max-width: 1100px;
	margin-top: 40px;
	/* 1〜2番目を左列、3〜5番目を右列に流し込む（元デザインと同じ割り） */
	grid-auto-flow: column;
	grid-template-rows: repeat(3, auto);
}
:root .ctl-mvvalue { margin: 0; }
:root .ctl-mvvalue:nth-child(1) { grid-row: 1; grid-column: 1; }
:root .ctl-mvvalue:nth-child(2) { grid-row: 2; grid-column: 1; }
:root .ctl-mvvalue:nth-child(3) { grid-row: 1; grid-column: 2; }
:root .ctl-mvvalue:nth-child(4) { grid-row: 2; grid-column: 2; }
:root .ctl-mvvalue:nth-child(5) { grid-row: 3; grid-column: 2; }

:root .ctl-mvvalue__head { display: flex; align-items: baseline; gap: 14px; }
:root .ctl-mvvalue__no {
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-weight: 700;
	font-size: 20px;
	color: var(--ctl-brand-ui);
}
:root .ctl-mvvalue__title {
	font-family: var(--ctl-font-mincho);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: .05em;
	color: var(--ctl-brand-ui);
	white-space: nowrap;
}
:root .ctl-mvvalue__lines { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
:root .ctl-mvvalue__line {
	display: flex;
	gap: 13px;
	font-family: var(--ctl-font-mincho);
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1.75;
	letter-spacing: .02em;
	color: #1A242C;
}
:root .ctl-mvvalue__mark {
	flex: none;
	width: 10px;
	height: 2px;
	margin-top: 11px;
	background: var(--ctl-brand-ui);
}


/* --- 代表メッセージ ----------------------------------------------------- */
:root .ctl-ceosec { background: var(--ctl-surface-tint); padding: 88px 0 104px; }
:root .ctl-ceogrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
	margin: 0;
}
:root .ctl-ceo {
	display: flex;
	flex-direction: column;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 40px 44px 44px;
	margin: 0;
}
:root .ctl-ceo__photo {
	margin: 0;
	aspect-ratio: 16 / 11;
	background: #DCE9F4;
	border-radius: 2px;
	overflow: hidden;
}
:root .ctl-ceo__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root .ctl-ceo__who { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; }
:root .ctl-ceo__role { font-size: 11.5px; letter-spacing: .04em; color: var(--ctl-muted); }
:root .ctl-ceo__name {
	font-family: var(--ctl-font-mincho);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--ctl-navy);
}
:root .ctl-ceo__title {
	margin: 20px 0 0;
	font-family: var(--ctl-font-mincho);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.85;
	letter-spacing: .06em;
	color: var(--ctl-navy);
}
:root .ctl-ceo__body { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
:root .ctl-ceo__text {
	margin: 0;
	font-size: 13.5px;
	line-height: 2.2;
	letter-spacing: .01em;
	color: #2E3A44;
}


/* --- プロジェクト事例 --------------------------------------------------- */
:root .ctl-casesec { background: var(--ctl-surface-tint); padding: 88px 0 104px; }
:root .ctl-caselist { display: flex; flex-direction: column; gap: 24px; margin: 0; }
:root .ctl-case {
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 40px 44px;
	margin: 0;
}
:root .ctl-case__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
:root .ctl-case__no {
	font-family: var(--ctl-font-en);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .08em;
	color: var(--ctl-brand-ui);
}
:root .ctl-case__ind {
	border: 1px solid var(--ctl-border-strong);
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 11px;
	font-weight: 500;
	color: var(--ctl-text-body);
}
:root .ctl-case__svc {
	background: var(--ctl-tint);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 11px;
	font-weight: 500;
	color: var(--ctl-brand-ui);
}
:root .ctl-case__title {
	margin: 20px 0 0;
	font-family: var(--ctl-font-jp);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.75;
	letter-spacing: .03em;
	color: var(--ctl-navy);
}
:root .ctl-case__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
:root .ctl-case__col { padding-right: 28px; }
:root .ctl-case__col + .ctl-case__col { padding-left: 28px; border-left: 1px solid var(--ctl-border-soft); }
:root .ctl-case__col:last-child { padding-right: 0; }
:root .ctl-case__label { display: flex; align-items: baseline; gap: 9px; }
:root .ctl-case__en {
	font-family: var(--ctl-font-en);
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .14em;
	color: var(--ctl-brand-ui);
}
:root .ctl-case__ja { font-size: 12.5px; font-weight: 700; color: var(--ctl-navy); }
:root .ctl-case__text {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 2;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}


/* --- キャリアストーリー 一覧 -------------------------------------------- */
/* カードは 顔写真 / 氏名・職種・入社年 / 経歴（前職→現職）の3段だけ。
   記事タイトルと抜粋は一覧には出さない。PCは3列グリッド。
   .ctl-story__name / __who / __path / __from / __to は記事ページの
   ヘッダーとも共通なので、カード側だけの値は .ctl-story を前に付ける。 */
:root .ctl-storysec { background: var(--ctl-surface-tint); padding: 88px 0 104px; }
:root .ctl-storylist {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
}
/* ショートコードの出力が <p> で包まれてもグリッドが崩れないように */
:root .ctl-storylist > p { display: contents; }
:root .ctl-story {
	display: flex;
	flex-direction: column;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 22px 22px 24px;
	color: var(--ctl-text);
	transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
:root .ctl-story:hover {
	border-color: rgba(0, 112, 163, .5);
	box-shadow: 0 6px 18px rgba(15, 42, 63, .08);
	color: var(--ctl-text);
}
:root .ctl-story__photo {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	background: #DCE9F4;
	border-radius: 2px;
	overflow: hidden;
}
:root .ctl-story__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 氏名 / 職種 / 入社年 */
:root .ctl-story__who { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
:root .ctl-story > .ctl-story__who {
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	margin-top: 16px;
}
:root .ctl-story__name {
	font-family: var(--ctl-font-en);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .06em;
	color: var(--ctl-navy);
}
:root .ctl-story .ctl-story__name { font-size: 17px; }
:root .ctl-story__role { font-size: 11.5px; font-weight: 500; color: var(--ctl-muted); }
:root .ctl-story__joined { display: block; font-size: 11px; color: var(--ctl-muted); }

/* 経歴（前職 → 現職）。カードの下端でそろえる */
:root .ctl-story__path { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
:root .ctl-story > .ctl-story__path {
	gap: 6px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--ctl-border);
}
:root .ctl-story__from {
	background: #F2F7FB;
	border: 1px solid var(--ctl-border);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 10.5px;
	font-weight: 500;
	color: var(--ctl-text-body);
}
:root .ctl-story__to-arrow { font-family: var(--ctl-font-en); font-size: 11px; color: var(--ctl-brand-ui); }
:root .ctl-story__to {
	background: var(--ctl-navy);
	border: 1px solid var(--ctl-navy);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--ctl-on-dark);
}
:root .ctl-story .ctl-story__from,
:root .ctl-story .ctl-story__to { padding: 4px 11px; font-size: 10px; }
:root .ctl-storynote { margin: 28px 0 0; font-size: 11.5px; color: var(--ctl-muted); }


/* --- キャリアストーリー 記事 -------------------------------------------- */
:root .ctl-article.-story { width: min(840px, var(--ctl-content-pct)); }
:root .ctl-story__hero {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 44px;
	align-items: end;
}
:root .ctl-story__heroimg {
	margin: 0;
	aspect-ratio: 4 / 5;
	background: #DCE9F4;
	border-radius: 2px;
	overflow: hidden;
}
:root .ctl-story__heroimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root .ctl-story__heroinfo { padding-bottom: 6px; }
:root .ctl-story__tags { display: flex; align-items: center; gap: 10px; }
:root .ctl-story__tags .ctl-tag { font-size: 11px; padding: 4px 12px; }
:root .ctl-story__tags .ctl-date { font-size: 12px; }
:root .ctl-story__heroinfo .ctl-story__who { margin-top: 16px; gap: 14px; }
:root .ctl-story__heroinfo .ctl-story__name { font-size: 30px; }
:root .ctl-story__detail { font-size: 12px; color: var(--ctl-muted); }
:root .ctl-story__title {
	margin: 18px 0 0;
	font-family: var(--ctl-font-jp);
	font-size: 27px;
	font-weight: 700;
	line-height: 1.75;
	letter-spacing: .03em;
	color: var(--ctl-navy);
}
:root .ctl-story__heroinfo .ctl-story__path { margin-top: 22px; gap: 9px; }
:root .ctl-story__heroinfo .ctl-story__from,
:root .ctl-story__heroinfo .ctl-story__to { padding: 6px 14px; font-size: 11px; }

/* 記事本文はニュース・ナレッジと同じ組みで、サイズだけ元デザインに合わせる */
:root .ctl-article.-story .ctl-article__body { margin-top: 56px; }
:root .ctl-article.-story .ctl-article__body p {
	font-size: 14.5px;
	margin-bottom: 1.6em;
}
:root .ctl-article.-story .ctl-article__body h2 {
	margin-top: 56px;
	font-size: 22px;
}
:root .ctl-article.-story .ctl-article__body > h2:first-child { margin-top: 0; }
:root .ctl-article.-story .ctl-storynote { margin: 40px 0 0; }


/* --- SP（〜959px）: *-sp のデザイン ------------------------------------ */
@media (max-width: 959.98px) {

	:root .ctl-eyebrow.-lg :is(.ctl-eyebrow__label, strong, span) { font-size: 14px; }
	:root .ctl-split.-c380 { grid-template-columns: minmax(0, 1fr); gap: 18px; }

	/* 採用トップ */
	:root .ctl-rcmsg,
	:root .ctl-rccontents,
	:root .ctl-rcvalues,
	:root .ctl-rcjobs { padding: 52px 0 56px; }
	:root .ctl-rcmsg .ctl-split__body { padding-top: 0; }
	:root .ctl-rcmsg__text { font-size: 12px; line-height: 2; }
	:root .ctl-rcmsg__text + .ctl-rcmsg__text { margin-top: 12px; }

	:root .ctl-rcgrid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	:root .ctl-rccard {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 16px 18px;
		flex-wrap: wrap;
	}
	:root .ctl-rccard__en { flex: 1 0 100%; font-size: 9px; }
	:root .ctl-rccard__ja { flex: 1; font-size: 13.5px; }
	:root .ctl-rccard__text { display: none; }
	:root .ctl-rccard__arrow { align-self: center; flex: none; font-size: 12px; }

	/* 求める人物像は SP では罫線区切りのリスト */
	:root .ctl-rcvalues .ctl-grid.-c3 {
		display: block;
		margin-top: 24px;
		border-top: 1px solid var(--ctl-border-strong);
	}
	:root .ctl-rcvalue {
		background: none;
		border: 0;
		border-bottom: 1px solid var(--ctl-border-strong);
		border-radius: 0;
		padding: 20px 2px;
	}
	:root .ctl-rcvalue__title { font-size: 14.5px; }
	:root .ctl-rcvalue__text { margin-top: 8px; font-size: 11.5px; line-height: 1.9; }

	:root .ctl-rcjobs .ctl-grid.-c3 { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 24px; }
	:root .ctl-rcjob { padding: 20px; }
	:root .ctl-rcjob__title { font-size: 15px; }
	:root .ctl-rcjob__text { margin-top: 8px; font-size: 11.5px; line-height: 1.9; }
	:root .ctl-rcjob__meta { gap: 5px; margin-top: 14px; padding-top: 12px; }
	:root .ctl-rcjob__row { gap: 12px; font-size: 11px; }
	:root .ctl-rcjob__key { width: 56px; }
		:root[lang="en"] .ctl-rcjob__key { width: 76px; }
	:root .ctl-btns.-wide .wp-block-button__link { width: 100%; padding-inline: 0; }

	/* CareersNav */
	:root .ctl-careersnav { padding: 44px 0 48px; }
	:root .ctl-careersnav__head { display: block; }
	:root .ctl-careersnav .ctl-eyebrow :is(.ctl-eyebrow__label, strong, span) { font-size: 12.5px; }
	:root .ctl-careersnav__title { margin-top: 14px; font-size: 19px; }
	:root .ctl-careersnav__back { display: none; }
	:root .ctl-careersnav__back.-sp {
		display: block;
		border-radius: 8px;
		padding: 13px 0;
		font-size: 12.5px;
		letter-spacing: .04em;
		text-align: center;
		border-color: rgba(255, 255, 255, .3);
	}
	:root .ctl-careersnav__list {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin-top: 16px;
	}
	:root .ctl-careersnav__item {
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .14);
		border-radius: 0;
		padding: 15px 2px;
	}
	:root .ctl-careersnav__item:hover { background: none; color: var(--ctl-brand-logo); }
	:root .ctl-careersnav__ja { flex: none; order: 1; font-size: 13.5px; letter-spacing: .03em; }
	:root .ctl-careersnav__en { order: 2; font-size: 9.5px; letter-spacing: .18em; }
	:root .ctl-careersnav__go { display: none; }
	:root .ctl-careersnav__cta { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
	:root .ctl-careersnav__btn { padding: 14px 0; font-size: 13px; letter-spacing: .03em; text-align: center; }

	/* ミッション・バリュー */
	:root .ctl-mvmission { padding: 52px 0 56px; }
	:root .ctl-mvmission .ctl-split__body { padding-top: 0; }
	:root .ctl-mvmission__text { font-size: 12.5px; line-height: 1.95; letter-spacing: .02em; }
	:root .ctl-mvmission__text + .ctl-mvmission__text { margin-top: 14px; }
	/* PC で入れている改行は SP では詰める（安定ではなく〜の3行だけ残す） */
	:root .ctl-mvmission__text br { display: none; }
	:root .ctl-mvmission__text:nth-of-type(4) br { display: inline; }

	:root .ctl-mvvalues { padding: 44px 0 52px; }
	:root .ctl-mvvalues__lead { margin-top: 10px; font-size: 11.5px; line-height: 1.95; }
	:root .ctl-mvlist {
		display: flex;
		flex-direction: column;
		gap: 28px;
		margin-top: 30px;
	}
	:root .ctl-mvvalue__head { gap: 10px; }
	:root .ctl-mvvalue__no { font-size: 16px; }
	:root .ctl-mvvalue__title { font-size: 17px; letter-spacing: .04em; }
	:root .ctl-mvvalue__lines { gap: 5px; margin-top: 10px; }
	:root .ctl-mvvalue__line { gap: 10px; font-size: 12px; line-height: 1.8; letter-spacing: .01em; }
	:root .ctl-mvvalue__mark { width: 8px; margin-top: 9px; }

	/* 代表メッセージ */
	:root .ctl-ceosec { padding: 40px 0 56px; }
	:root .ctl-ceogrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	:root .ctl-ceo { padding: 20px 20px 24px; }
	:root .ctl-ceo__who { margin-top: 16px; gap: 10px; }
	:root .ctl-ceo__role { font-size: 10.5px; }
	:root .ctl-ceo__name { font-size: 16px; }
	:root .ctl-ceo__title { margin-top: 14px; font-size: 19px; line-height: 1.8; letter-spacing: .05em; }
	:root .ctl-ceo__body { gap: 12px; margin-top: 16px; }
	:root .ctl-ceo__text { font-size: 12px; line-height: 2.05; }

	/* プロジェクト事例 */
	:root .ctl-casesec { padding: 40px 0 56px; }
	:root .ctl-caselist { gap: 12px; }
	:root .ctl-case { padding: 20px 20px 24px; }
	:root .ctl-case__meta { gap: 8px; }
	:root .ctl-case__no { font-size: 12px; }
	:root .ctl-case__ind { padding: 4px 10px; font-size: 9.5px; }
	:root .ctl-case__svc { padding: 5px 10px; font-size: 9.5px; }
	:root .ctl-case__title { margin-top: 12px; font-size: 15px; letter-spacing: .02em; }
	:root .ctl-case__cols { display: block; margin-top: 16px; }
	:root .ctl-case__col { padding: 0; }
	:root .ctl-case__col + .ctl-case__col {
		margin-top: 12px;
		padding: 12px 0 0;
		border-left: 0;
		border-top: 1px solid var(--ctl-border-soft);
	}
	:root .ctl-case__en { font-size: 9.5px; }
	:root .ctl-case__ja { font-size: 11.5px; }
	:root .ctl-case__text { margin-top: 6px; font-size: 11.5px; line-height: 1.95; }

	/* キャリアストーリー 一覧（SPは1列。写真を左、情報を右） */
	:root .ctl-storysec { padding: 40px 0 56px; }
	:root .ctl-storylist { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	:root .ctl-story {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		column-gap: 14px;
		align-items: start;
		padding: 16px;
	}
	:root .ctl-story__photo { width: 84px; }
	:root .ctl-story > .ctl-story__who { margin-top: 0; gap: 4px; }
	:root .ctl-story .ctl-story__name { font-size: 15px; }
	:root .ctl-story__role { font-size: 10.5px; }
	:root .ctl-story__joined { font-size: 10px; }
	:root .ctl-story > .ctl-story__path {
		grid-column: 1 / -1;
		margin-top: 14px;
		padding-top: 12px;
		gap: 5px;
	}
	:root .ctl-story .ctl-story__from,
	:root .ctl-story .ctl-story__to { padding: 4px 10px; font-size: 9.5px; }
	:root .ctl-storynote { margin-top: 20px; font-size: 10.5px; }

	/* キャリアストーリー 記事 */
	:root .ctl-article.-story { width: calc(100% - 48px); }
	:root .ctl-story__hero { display: block; }
	:root .ctl-story__heroimg { aspect-ratio: 4 / 3; }
	:root .ctl-story__heroinfo { padding-bottom: 0; }
	:root .ctl-story__tags { margin-top: 18px; }
	:root .ctl-story__tags .ctl-tag { font-size: 9.5px; padding: 3px 8px; }
	:root .ctl-story__tags .ctl-date { font-size: 11px; }
	:root .ctl-story__heroinfo .ctl-story__who { flex-direction: row; align-items: baseline; margin-top: 12px; gap: 10px; }
	:root .ctl-story__heroinfo .ctl-story__name { font-size: 24px; }
	:root .ctl-story__detail { font-size: 10.5px; }
	:root .ctl-story__title { margin-top: 12px; font-size: 19px; letter-spacing: .02em; }
	:root .ctl-story__heroinfo .ctl-story__path { margin-top: 16px; gap: 7px; }
	:root .ctl-story__heroinfo .ctl-story__from,
	:root .ctl-story__heroinfo .ctl-story__to { padding: 5px 11px; font-size: 10px; }

	:root .ctl-article.-story .ctl-article__body { margin-top: 36px; }
	:root .ctl-article.-story .ctl-article__body p { font-size: 13px; }
	:root .ctl-article.-story .ctl-article__body h2 { margin-top: 40px; font-size: 17px; }
	:root .ctl-article.-story .ctl-storynote { margin-top: 28px; }
}


/* ==========================================================================
   22. そのほかのご支援メニュー（支援メニューLP）
   経営コンサルティングページの誘導ブロックと、LP個別ページの土台。
   カードは inc/lp.php の [catalys_lp_menu] が出力する。
   ========================================================================== */

/* タイトルだけを縦に並べる。行の区切りは罫線のみで、面は増やさない。 */
:root .ctl-lplist {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--ctl-border-strong);
}
:root .ctl-lprow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--ctl-border-strong);
	padding: 17px 4px;
	color: var(--ctl-navy);
	transition: color .2s ease-out, border-color .2s ease-out;
}
:root .ctl-lprow:hover {
	color: var(--ctl-brand-ui);
	border-bottom-color: var(--ctl-brand-ui);
}
:root .ctl-lprow__title {
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .02em;
}
:root .ctl-lprow__arrow {
	flex: none;
	font-family: var(--ctl-font-en);
	font-size: 13px;
	color: var(--ctl-brand-ui);
}

/* LPが1件も無いときに編集者だけに出る案内 */
:root .ctl-lpempty {
	margin: 0;
	border: 1px dashed var(--ctl-border-strong);
	border-radius: 2px;
	padding: 24px 26px;
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--ctl-muted);
	background: var(--ctl-surface-0);
}

/* --- LP個別ページ ------------------------------------------------------- */
/* 本文はセクションを積むので、ページ側の余白は持たせない */
:root .ctl-lpbody { margin: 0; }
:root .ctl-lpbody > .ctl-section:first-child { padding-top: 72px; }


@media (max-width: 959.98px) {
	:root .ctl-lprow { gap: 12px; padding: 14px 2px; }
	:root .ctl-lprow__title { font-size: 13.5px; }
	:root .ctl-lprow__arrow { font-size: 12px; }
	:root .ctl-lpempty { padding: 18px 20px; font-size: 11.5px; }
	:root .ctl-lpbody > .ctl-section:first-child { padding-top: 44px; }
}


/* ==========================================================================
   23. 支援メニューの詳細ページ
   Claude Design : consulting-ai / -ma / -newbiz / -hcm / -midplan /
                   -diagnosis / -hands-on / -value（+ -sp）
                   ConsultingMenuNav / ConsultingMenuNavSP
   本文は投稿タイプ「支援メニュー」のブロックで組む。
   担当プロフェッショナル・関連ナレッジ・メニューナビは自動生成。
   ========================================================================== */

/* --- 追加の面パディングと余白 ------------------------------------------ */
:root .ctl-section.-pad-64-72 { padding: 64px 0 72px; }
:root .ctl-section.-pad-56-72 { padding: 56px 0 72px; }
:root:root .ctl-mt-36 { margin-top: 36px !important; }

/* 24px の小見出し（セクション内の第2階層） */
:root .ctl-h2.-xs { font-size: 24px; }

/* 罫線の丸ピルリンク（一覧へ / TOPへ戻る） */
:root .ctl-outlink { display: flex; margin: 0; }
:root .ctl-outlink.-right { justify-content: flex-end; }
:root .ctl-outlink a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--ctl-border-strong);
	border-radius: 999px;
	padding: 11px 26px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .05em;
	color: var(--ctl-navy);
	transition: border-color .2s ease-out, color .2s ease-out;
}
:root .ctl-outlink a:hover { border-color: var(--ctl-brand-ui); color: var(--ctl-brand-ui); }

/* 見出しと右のリンクを同じ行に置く */
:root .ctl-sechead {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	margin: 0;
}
:root .ctl-sechead__main { min-width: 0; }
:root .ctl-sechead .ctl-h2 { margin-top: 18px; }
:root .ctl-sechead .ctl-eyebrow :is(.ctl-eyebrow__label, strong, span) { font-size: 15px; }

/* --- OVERVIEW : こんな課題に -------------------------------------------- */
:root .ctl-issues {
	border-top: 1px solid var(--ctl-border-strong);
	max-width: 980px;
	margin: 0;
}
:root .ctl-issue {
	position: relative;
	margin: 0;
	padding: 20px 6px 20px 34px;
	border-bottom: 1px solid var(--ctl-border-strong);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: .01em;
	color: var(--ctl-text-body);
}
:root .ctl-issue::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 33px;
	width: 12px;
	height: 2px;
	background: var(--ctl-brand-ui);
}
:root .ctl-issuenote { margin: 20px 0 0; font-size: 12.5px; color: var(--ctl-muted); }

/* --- SCOPE / WHY CATALYS : 320px の定義行 ------------------------------- */
:root .ctl-strengths.-w320 .ctl-strength__title { width: 320px; }

/* --- OUTCOME : 期待できる効果 ------------------------------------------- */
:root .ctl-outcome {
	display: flex;
	flex-direction: column;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 28px 26px 30px;
	margin: 0;
}
:root .ctl-outcome::before {
	content: "";
	display: block;
	flex: none;
	width: 26px;
	height: 3px;
	background: var(--ctl-brand-ui);
}
:root .ctl-outcome__title {
	margin: 18px 0 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.65;
	color: var(--ctl-navy);
}
:root .ctl-outcome__text {
	margin: 12px 0 0;
	flex: 1;
	font-size: 12.5px;
	line-height: 1.95;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}

/* --- FLOW : 3列 + 期間ピル ---------------------------------------------- */
:root .ctl-steps.-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root .ctl-steps.-c3 .ctl-step { padding-right: 36px; }
:root .ctl-steps.-c3 .ctl-step__title { margin-top: 10px; }
:root .ctl-step__dur {
	display: inline-flex;
	align-items: center;
	margin-left: 12px;
	border: 1px solid var(--ctl-border-strong);
	border-radius: 999px;
	padding: 3px 10px;
	font-family: var(--ctl-font-en);
	font-weight: 500;
	font-size: 10.5px;
	letter-spacing: .04em;
	color: var(--ctl-text-body);
}

/* --- PROFESSIONAL : 担当プロフェッショナル ------------------------------ */
:root .ctl-pros {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
}
:root .ctl-pro {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 16px;
	color: var(--ctl-text);
	transition: border-color .2s ease-out;
}
:root .ctl-pro:hover { border-color: rgba(0, 112, 163, .5); color: var(--ctl-text); }
:root .ctl-pro__photo {
	position: relative;
	width: 64px;
	height: 70px;
	flex: none;
	background: var(--ctl-surface-1);
	border: 1px solid var(--ctl-border-soft);
	border-radius: 2px;
	overflow: hidden;
}
:root .ctl-pro__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root .ctl-pro__body { flex: 1; min-width: 0; }
:root .ctl-pro__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
:root .ctl-pro__name { font-size: 13.5px; font-weight: 700; letter-spacing: .03em; color: var(--ctl-text); }
:root .ctl-pro__role { font-size: 10px; font-weight: 500; letter-spacing: .03em; color: var(--ctl-brand-ui); }
:root .ctl-pro__text {
	display: block;
	margin: 6px 0 0;
	font-size: 10.5px;
	line-height: 1.75;
	letter-spacing: .01em;
	color: var(--ctl-muted);
}

/* --- KNOWLEDGE : 関連するナレッジ --------------------------------------- */
:root .ctl-klist { border-bottom: 1px solid var(--ctl-border-strong); margin: 0; }
:root .ctl-krow {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 16px 10px;
	border-top: 1px solid var(--ctl-border-strong);
	color: var(--ctl-text);
	transition: background-color .2s ease-out;
}
:root .ctl-krow:hover { background: rgba(0, 159, 232, .06); color: var(--ctl-text); }
:root .ctl-krow__date {
	font-family: var(--ctl-font-en);
	font-weight: 500;
	font-size: 11.5px;
	letter-spacing: .05em;
	color: var(--ctl-muted);
	width: 76px;
	flex: none;
}
:root .ctl-krow__cat {
	background: rgba(0, 159, 232, .08);
	color: var(--ctl-brand-ui);
	font-size: 10.5px;
	font-weight: 500;
	padding: 3px 10px;
	border-radius: 6px;
	flex: none;
}
:root .ctl-krow__title { flex: 1; font-size: 13px; letter-spacing: .01em; }
:root .ctl-krow__arrow { flex: none; font-family: var(--ctl-font-en); font-size: 12px; color: var(--ctl-brand-ui); }

/* --- ConsultingMenuNav（詳細ページ共通の他メニュー） -------------------- */
:root .ctl-cnav {
	position: relative;
	z-index: 0;
	background: var(--ctl-surface-0);
	border-top: 1px solid var(--ctl-border-soft);
	padding: 64px 0 72px;
}
:root .ctl-cnav__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 28px;
}
:root .ctl-cnav__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--ctl-surface-0);
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
	padding: 18px;
	color: var(--ctl-text);
	transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
:root .ctl-cnav__item:hover {
	border-color: rgba(0, 112, 163, .5);
	box-shadow: 0 6px 18px rgba(15, 42, 63, .08);
	color: var(--ctl-text);
}
:root .ctl-cnav__no {
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .14em;
	color: var(--ctl-brand-ui);
}
:root .ctl-cnav__title {
	flex: 1;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .02em;
	color: var(--ctl-navy);
}
:root .ctl-cnav__arrow {
	font-family: var(--ctl-font-en);
	font-size: 12px;
	color: var(--ctl-brand-ui);
	align-self: flex-end;
}
:root .ctl-cnav__back { display: none; }


@media (max-width: 959.98px) {
	:root .ctl-section.-pad-64-72 { padding: 44px 0 48px; }
	:root .ctl-section.-pad-56-72 { padding: 44px 0 52px; }
	:root .ctl-h2.-xs { font-size: 19px; }
	/* 詳細ページの本文の見出しは、SPデザインどおり20px */
	:root .ctl-lpbody .ctl-h2 { font-size: 20px; }

	:root .ctl-outlink a { width: 100%; justify-content: center; padding: 12px 0; font-size: 12px; letter-spacing: .04em; }
	:root .ctl-outlink.-right { justify-content: stretch; }

	/* 見出しの右のリンクは、SPでは見出しの下に回して全幅にする */
	:root .ctl-sechead { display: block; }
	:root .ctl-sechead .ctl-h2 { margin-top: 14px; }
	:root .ctl-sechead .ctl-eyebrow :is(.ctl-eyebrow__label, strong, span) { font-size: 12.5px; }
	:root .ctl-sechead .ctl-outlink { margin-top: 16px; }

	:root .ctl-issues { margin-top: 18px; }
	:root .ctl-issue { padding: 14px 2px 14px 24px; font-size: 12.5px; }
	:root .ctl-issue::before { left: 2px; top: 25px; width: 10px; }
	:root .ctl-issuenote { margin-top: 14px; font-size: 11.5px; }

	:root .ctl-strengths.-w320 .ctl-strength__title { width: auto; }

	:root .ctl-outcome { padding: 18px; }
	:root .ctl-outcome::before { width: 22px; }
	:root .ctl-outcome__title { margin-top: 12px; font-size: 13.5px; }
	:root .ctl-outcome__text { margin-top: 7px; font-size: 11px; line-height: 1.9; }

	:root .ctl-steps.-c3 { grid-template-columns: minmax(0, 1fr); }
	:root .ctl-steps.-c3 .ctl-step { padding-right: 0; }
	:root .ctl-step__dur { margin-left: 10px; padding: 2px 9px; font-size: 9.5px; }

	:root .ctl-pros { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	:root .ctl-pro { gap: 12px; padding: 14px; }
	:root .ctl-pro__photo { width: 52px; height: 58px; }
	:root .ctl-pro__name { font-size: 12.5px; }
	:root .ctl-pro__role { font-size: 9.5px; }
	:root .ctl-pro__text { margin-top: 5px; font-size: 10px; }

	:root .ctl-krow { display: block; padding: 14px 2px; }
	:root .ctl-krow__date { display: inline-block; width: auto; font-size: 10.5px; }
	:root .ctl-krow__cat { display: inline-block; margin-left: 10px; font-size: 9px; padding: 2px 8px; }
	:root .ctl-krow__title { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.7; }
	:root .ctl-krow__arrow { display: none; }

	:root .ctl-cnav { padding: 44px 0 48px; }
	:root .ctl-cnav .ctl-sechead .ctl-outlink { display: none; }
	:root .ctl-cnav__list {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin-top: 14px;
		border-bottom: 1px solid var(--ctl-border-soft);
	}
	:root .ctl-cnav__item {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		border: 0;
		border-top: 1px solid var(--ctl-border-soft);
		border-radius: 0;
		padding: 14px 2px;
	}
	:root .ctl-cnav__item:hover { box-shadow: none; color: var(--ctl-brand-ui); }
	:root .ctl-cnav__no { flex: none; font-size: 10px; letter-spacing: .12em; }
	:root .ctl-cnav__title { font-size: 13px; }
	:root .ctl-cnav__arrow { align-self: center; flex: none; }
	:root .ctl-cnav__back { display: flex; margin-top: 22px; }
}

/* ==========================================================================
   24. 記事の図表ボックスと強調表現
   図表  … グループブロックに「ctl-fig」を付け、中にテーブルブロックを入れる
   合計行 … テーブルの「フッターセクション」に入れると自動で強調される
   強調  … ツールバーの「ハイライト」（背景 / 文字色）を使う
   ========================================================================== */

/* --- 図表ボックス -------------------------------------------------------- */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig {
	background: var(--ctl-tint-strong);
	border: 1px solid var(--ctl-brand-logo);
	border-radius: 8px;
	padding: 22px;
	margin: 32px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig__title {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .08em;
	color: var(--ctl-brand-ui);
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig__note {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.8;
	color: var(--ctl-brand-ui);
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig .wp-block-table {
	margin: 0;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig table {
	min-width: 400px;
	font-size: 13px;
	line-height: 1.75;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig :is(thead th, tbody th) {
	background: var(--ctl-brand-logo);
	color: var(--ctl-on-dark);
	border: 0;
	width: auto;
	padding: 9px 14px;
	font-size: 12.5px;
	font-weight: 700;
	text-align: left;
	word-break: break-word;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig td {
	padding: 9px 14px;
	border: 0;
	border-bottom: 1px solid #B3E5FC;
	font-size: 13px;
	vertical-align: top;
	word-break: break-word;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig tbody tr:last-child td { border-bottom: 0; }
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig :is(th, td):first-child {
	white-space: nowrap;
	word-break: keep-all;
	overflow-wrap: normal;
}
/* 図表の中の任意の1行を強調する。
   強調したい行のどれかのセルで「強調（背景）」ボタンを押すと、行全体が強調になる。 */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig tbody tr:has(mark) td {
	background: var(--ctl-surface-0);
	color: var(--ctl-brand-ui);
	font-weight: 700;
}
/* 行全体が強調になるので、セルの中のマーカーの帯は消す */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig tbody tr:has(mark) mark {
	background: transparent !important;
	color: inherit !important;
	padding: 0;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig tfoot td {
	background: var(--ctl-surface-0);
	border-top: 2px solid var(--ctl-brand-logo);
	border-bottom: 0;
	color: var(--ctl-brand-ui);
	font-weight: 700;
	font-size: 13.5px;
	white-space: normal;
}

/* --- 図表の中のカード（横並び / ステップ） -------------------------------- */
/* 原稿HTML の .flex-grid / .flex-card にあたるもの。カラムブロックに付ける。

   ctl-cards ……… 並列の項目。白いカードが横に並ぶ
   ctl-cards -step … 順番のある項目。サイトの「STEP」と同じ ● と罫のレールになり、
                     STEP 01 / 02 … の番号は自動で振られる
                     （ctl-cards-step とハイフンでつなげて書いてもよい）

   どちらも、各カラムの1つ目の段落がラベル（見出し）の扱いになる。 */

/* 共通。SWELL の blocks.css が .wp-block-columns に !important で gap を
   入れているので、こちらも !important で上書きする */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards, .ctl-cards-step) { margin: 0; }
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards, .ctl-cards-step) .wp-block-column p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.9;
	letter-spacing: .01em;
	color: var(--ctl-text);
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards, .ctl-cards-step) .wp-block-column p + p { margin-top: 8px; }

/* --- 並列のカード -------------------------------------------------------- */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-cards:not(.-step) { gap: 18px !important; }
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-cards:not(.-step) .wp-block-column {
	background: var(--ctl-surface-0);
	border: 1px solid #B3E5FC;
	border-radius: 8px;
	padding: 16px 18px 18px;
}
/* ラベル。本文の H4 と同じ小さな四角を頭に置き、下に細い罫を敷く */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-cards:not(.-step) .wp-block-column p:first-of-type {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 12px;
	padding-bottom: 11px;
	border-bottom: 1px solid #B3E5FC;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.55;
	color: var(--ctl-navy);
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-cards:not(.-step) .wp-block-column p:first-of-type::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	margin-top: .42em;
	background: var(--ctl-brand-logo);
}

/* --- ステップ ------------------------------------------------------------ */
/* 箱で囲まず、サイトの STEP セクションと同じ「● ＋ 罫」のレールにする。
   カラムの背景でレールを描き、::before に自動の番号を出す。 */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards.-step, .ctl-cards-step) {
	counter-reset: ctl-step;
	gap: 26px 0 !important;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards.-step, .ctl-cards-step) .wp-block-column {
	counter-increment: ctl-step;
	position: relative;
	/* 罫だけ背景で描く。丸は下の ::after（実要素）で描く。
	   radial-gradient の丸は縁にアンチエイリアスがかからず、拡大するとギザつく。 */
	background: linear-gradient(var(--ctl-brand-logo), var(--ctl-brand-logo)) 16px 4px / calc(100% - 44px) 1px no-repeat;
	border: 0;
	border-radius: 0;
	padding: 25px 28px 0 0;
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards.-step, .ctl-cards-step) .wp-block-column::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ctl-brand-ui);
}
/* STEP 01 / STEP 02 … は自動で振られるので、原稿に番号を書かなくてよい */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards.-step, .ctl-cards-step) .wp-block-column::before {
	content: "STEP " counter(ctl-step, decimal-leading-zero);
	display: block;
	margin-bottom: 7px;
	font-family: var(--ctl-font-en);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--ctl-brand-ui);
}
/* ラベル ＝ その段階の呼び名（「今すぐ」「1〜3か月」など） */
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards.-step, .ctl-cards-step) .wp-block-column p:first-of-type {
	margin: 0 0 9px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ctl-navy);
}
:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards.-step, .ctl-cards-step) .wp-block-column p:not(:first-of-type) {
	font-size: 12px;
	line-height: 1.9;
	color: var(--ctl-muted);
}


/* カラムブロックが縦積みになる幅（WordPress 標準の 781px）では、レールを縦にする。
   ●を左に置き、次の●まで縦線でつなぐ（サイトの STEP セクションの SP と同じ形）。 */
@media (max-width: 781.98px) {
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards.-step, .ctl-cards-step) { gap: 0 !important; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards.-step, .ctl-cards-step) .wp-block-column {
		background: linear-gradient(var(--ctl-brand-logo), var(--ctl-brand-logo)) 4px 13px / 1px calc(100% - 13px) no-repeat;
		padding: 0 0 22px 26px;
	}
	/* 最後のステップの下には線を引かない（丸は ::after なので残る） */
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards.-step, .ctl-cards-step) .wp-block-column:last-child {
		background-image: none;
		padding-bottom: 0;
	}
}

/* --- 強調表現 ------------------------------------------------------------ */
/* 記事・固定ページ・支援メニューの本文と、編集画面のプレビュー全部に効かせる。
   投稿タイプで絞ると、編集画面で mark がブラウザ既定の黄色になってしまう。 */

/* 強調（背景）。標準の「ハイライト」で背景を選んだ場合も同じ見た目に揃う */
:root :is(.ctl-content, .editor-styles-wrapper) mark {
	background: var(--ctl-tint-strong) !important;
	color: inherit;
	padding: 2px 6px;
	border-radius: 3px;
	font-weight: 700;
}
/* 強調（青文字）。標準の「ハイライト」で文字色を選んだ場合も同じ扱い */
:root :is(.ctl-content, .editor-styles-wrapper) mark:is(.ctl-hl-text, .has-inline-color) {
	background: transparent !important;
	color: var(--ctl-brand-ui) !important;
	padding: 0;
	font-weight: 700;
}
/* 標準のハイライトで文字色を選んだときは、選んだ色をそのまま活かす */
:root :is(.ctl-content, .editor-styles-wrapper) mark.has-inline-color[style*="color"] {
	color: inherit !important;
}

/* 段落まるごとの強調。段落ブロックの「追加CSSクラス」に ctl-hl-block と入れる */
:root:root :is(.ctl-content, .editor-styles-wrapper) .ctl-hl-block {
	background: var(--ctl-tint);
	border-left: 4px solid var(--ctl-brand-logo);
	border-radius: 0 4px 4px 0;
	padding: 18px 22px;
	margin: 28px 0;
	font-weight: 700;
	line-height: 1.95;
	color: var(--ctl-navy);
}
:root:root :is(.ctl-content, .editor-styles-wrapper) .ctl-hl-block mark {
	background: transparent !important;
	padding: 0;
}


@media (max-width: 959.98px) {
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig {
		padding: 16px 12px;
		margin: 24px 0;
	}
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig__title {
		font-size: 11px;
		letter-spacing: .04em;
		margin-bottom: 10px;
	}
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig table { min-width: 340px; font-size: 12px; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig :is(thead th, tbody th) { padding: 8px 10px; font-size: 11.5px; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig td { padding: 8px 10px; font-size: 12px; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig tfoot td { font-size: 12.5px; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig__note { font-size: 11px; }
		:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-cards { gap: 22px !important; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards, .ctl-cards-step) .wp-block-column p { font-size: 12px; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-cards:not(.-step) { gap: 14px !important; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-cards:not(.-step) .wp-block-column { padding: 14px 16px 16px; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-cards:not(.-step) .wp-block-column p:first-of-type { font-size: 12.5px; margin-bottom: 10px; padding-bottom: 9px; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards.-step, .ctl-cards-step) .wp-block-column p:first-of-type { font-size: 14px; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(.ctl-cards.-step, .ctl-cards-step) .wp-block-column p:not(:first-of-type) { font-size: 11.5px; }
	:root:root :is(.ctl-content, .editor-styles-wrapper) .ctl-hl-block { padding: 14px 16px; margin: 22px 0; line-height: 1.9; }
}
	
/* --- 他所で作った HTML の埋め込み（.ctl-embed） ------------------------- */
/* カスタムHTMLブロックに <div class="ctl-embed">…</div> で貼る。
   JS が中身を iframe（srcdoc）へ移すので、記事本文のタイポグラフィが
   中に効かず、逆に埋め込み側の CSS もページ側へ漏れない。
   JS が動かない環境では、そのまま素の HTML として出る。 */
:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-embed {
	margin: 32px 0;
}
:root .ctl-embed > iframe {
	display: block;
	width: 100%;
	min-height: 80px;
	border: 0;
	overflow: hidden;
}


/* ==========================================================================
   25. 記事末尾の定型ブロック
   注釈 / 参考ソース … グループブロックに「ctl-fn」
   弊社について      … グループブロックに「ctl-about」
   連載インデックス  … グループブロックに「ctl-series」

   「パターン」→「カタリス」から挿入できる（inc/patterns.php で登録）。

   すでに本文に書いてあるものを後から変換できるよう、
   中の段落・リストにはクラスを要求しない。グループのクラス1つで成立する。
     ・太字の段落      → 見出し（【注釈】【参考ソース】）
     ・太字でない段落  → 注釈の行
     ・リスト          → 参考ソース / 連載の回数
   明示クラス（ctl-fn__label など）を付けた場合も同じ見た目になる。

   セレクタが :root:root 始まりなのは、19-b節の本文タイポグラフィ
   （… .ctl-article__body p ＝ 詳細度 0,3,1）に負けないようにするため。
   ========================================================================== */

/* --- 注釈・参考ソース --------------------------------------------------- */
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-fn {
	margin: 64px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--ctl-border-strong);
}

/* 見出し（太字の段落 ＝【注釈】【参考ソース】） */
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-fn :is(.ctl-fn__label, p:has(strong)) {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.7;
	color: var(--ctl-navy);
}
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-fn :is(.ctl-fn__label, p:has(strong)) strong { font-weight: inherit; color: inherit; }
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-fn > * + :is(.ctl-fn__label, p:has(strong)) { margin-top: 24px; }

/* （注1）… の行。本文より一段小さく、行間も詰める */
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-fn :is(.ctl-fn__item, p:not(:has(strong))) {
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.85;
	letter-spacing: .01em;
	color: var(--ctl-text-body);
	word-break: break-word;
	overflow-wrap: anywhere;
}
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-fn p a { color: var(--ctl-brand-ui); }

/* 参考ソース : イタリック体のリスト。本文の■マーカーは出さない */
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-fn :is(.ctl-fn__sources, ul) {
	margin: 0;
	padding-left: 1.2em;
	gap: 5px;
	list-style: none;
}
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-fn :is(.ctl-fn__sources, ul) > li {
	position: relative;
	padding-left: 0;
	font-size: 11.5px;
	font-style: italic;
	line-height: 1.8;
	letter-spacing: .01em;
	color: var(--ctl-muted);
	word-break: break-word;
	overflow-wrap: anywhere;
}
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-fn :is(.ctl-fn__sources, ul) > li::before {
	content: "—";
	left: -1.2em;
	top: 0;
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
	font-style: normal;
	color: var(--ctl-border-strong);
}

/* --- 弊社について ------------------------------------------------------- */
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-about {
	margin: 40px 0 0;
	padding: 24px 28px;
	background: #F2F7FB;
	border-left: 2px solid var(--ctl-brand-ui);
	border-radius: 2px;
}
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-about p {
	margin: 0;
	font-size: 13px;
	line-height: 2;
	letter-spacing: .01em;
	color: var(--ctl-text-body);
}
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-about p + p { margin-top: 12px; }
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-about a {
	font-weight: 700;
	color: var(--ctl-brand-ui);
	word-break: break-all;
}

/* --- 連載インデックス --------------------------------------------------- */
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-series {
	margin: 24px 0 0;
	padding: 20px 24px;
	border: 1px solid var(--ctl-border);
	border-radius: 2px;
}
/* 見出し（グループの中の最初の段落） */
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-series .ctl-series__label,
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-series p:first-child {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.7;
	color: var(--ctl-muted);
}
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-series :is(.ctl-series__list, ul) {
	margin: 0;
	padding-left: 0;
	gap: 7px;
	list-style: none;
}
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-series :is(.ctl-series__list, ul) > li {
	padding-left: 14px;
	font-size: 12.5px;
	line-height: 1.8;
	letter-spacing: .01em;
	color: var(--ctl-text-body);
}
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-series :is(.ctl-series__list, ul) > li::before {
	top: .72em;
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background: var(--ctl-border-strong);
}
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-series a { color: var(--ctl-brand-ui); }
/* 現在読んでいる回。行を太字にすると、■がブランドカラーになる。
   （追加CSSクラス .-on でも同じ。リスト項目にはクラス欄が無いので太字で判定する） */
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-series :is(.ctl-series__list, ul) > li:is(.-on, :has(strong)) {
	font-weight: 700;
	color: var(--ctl-navy);
}
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-series :is(.ctl-series__list, ul) > li:is(.-on, :has(strong))::before {
	background: var(--ctl-brand-logo);
}
:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-series li strong { font-weight: inherit; color: inherit; }

/* --- 保険 : 強調（mark）が .ctl-content の外でも効くようにする ---------- */
:root .ctl-article__body mark {
	background: var(--ctl-tint-strong);
	color: inherit;
	padding: 2px 6px;
	border-radius: 3px;
	font-weight: 700;
}
:root .ctl-article__body mark:is(.ctl-hl-text, .has-inline-color) {
	background: transparent;
	color: var(--ctl-brand-ui);
	padding: 0;
}
:root .ctl-article__body mark.has-inline-color[style*="color"] { color: inherit; }

@media (max-width: 959.98px) {
	:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-fn { margin-top: 44px; padding-top: 20px; }
	:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-fn :is(.ctl-fn__label, p:has(strong)) { font-size: 12px; }
	:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-fn :is(.ctl-fn__item, p:not(:has(strong))) { font-size: 11px; line-height: 1.8; }
	:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-fn :is(.ctl-fn__sources, ul) > li { font-size: 10.5px; }
	:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-about { margin-top: 32px; padding: 18px 20px; }
	:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-about p { font-size: 12px; line-height: 1.95; }
	:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-series { padding: 16px 18px; }
	:root:root :is(.ctl-article__body, .ctl-content, .editor-styles-wrapper) .ctl-series :is(.ctl-series__list, ul) > li { font-size: 11.5px; }
}



/* ==========================================================================
   25. 写真枠の中身の高さを、縦横比から決める（Android で写真が崩れる件の対策）

   写真の枠（.ctl-member__photo など）は、高さを aspect-ratio から決めている。
   その内側で height: 100% を使うと、「親の高さが未指定」と判定して 100% を
   auto として扱う端末がある（Android の Chrome / WebView の一部）。そうなると
   画像は元の縦横比のまま残り、枠からはみ出して、カードごとに写真の高さが
   ばらつく。メンバー一覧で報告された症状がこれにあたる。

   SWELL の遅延読み込みが img に付ける aspect-ratio も、同じように height: 100%
   を打ち消す。プロジェクト事例のサムネイルは、PC でも実際に 14px はみ出して
   下が切れていた。

   そこで、枠の中身（アイキャッチの figure・リンク・img）は高さを % で指定せず、
   aspect-ratio: inherit で枠と同じ縦横比を受け継がせる。幅だけが基準になるので、
   端末や遅延読み込みの影響を受けない。
   px で高さを決めている枠（.ctl-doc__cover / .ctl-pro__photo / 横並びの
   .ctl-artcard__thumb）は、もともとこの問題が起きないので対象にしない。
   ========================================================================== */

:root:root :is(
	.ctl-member__photo,
	.ctl-modal__photo,
	.ctl-pjcard__thumb,
	.ctl-ceo__photo,
	.ctl-story__photo,
	.ctl-story__heroimg
) :is(img, a, figure, .wp-block-image, .wp-block-post-featured-image),
:root:root .ctl-artcard.-stack .ctl-artcard__thumb :is(img, a, figure, .wp-block-image, .wp-block-post-featured-image) {
	display: block;
	width: 100%;
	/* SWELL の遅延読み込みが img に style="height: 226px" のような実寸を直接
	   書き込むため、ここだけ !important で打ち消す必要がある。 */
	height: auto !important;
	max-width: none;
	margin: 0;
	aspect-ratio: inherit;
	object-fit: cover;
}

/* --- そのほかのご支援メニュー : 準備中の行 ------------------------------ */
/* [catalys_lp_menu] に掲載中のメニューが1件も無いときに出る。リンクでは
   ないので、ホバーで色を変えない。 */
:root .ctl-lprow.-soon { color: var(--ctl-muted); cursor: default; }
:root .ctl-lprow.-soon:hover { color: var(--ctl-muted); border-bottom-color: var(--ctl-border-strong); }
:root .ctl-lprow.-soon .ctl-lprow__title { font-weight: 500; }



/* ==========================================================================
   26. SP で表の列が潰れないようにする

   記事本文の表は .wp-block-table を横スクロールできる箱に入れてあるが、
   table の最低幅が 340px しかないため、SP ではほぼ画面幅に収まってしまう。
   その結果、列数が多い表では1列あたりが 50px 程度まで潰れ、
   「BMW×Figure」のような欧文が1文字ずつ改行されて読めなくなっていた。

   列数に応じて最低幅を広げ、入りきらない分は横スクロールで見せる。
   2列の表はこれまでどおり画面内に収まる（スクロールは出ない）。
   ========================================================================== */

@media (max-width: 599.98px) {

	/* 3列以上の表は、潰さずに横スクロールさせる */
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) table:has(tr > *:nth-child(3)) { min-width: 520px; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) table:has(tr > *:nth-child(4)) { min-width: 640px; }
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) table:has(tr > *:nth-child(5)) { min-width: 760px; }

	/* 欧文が1文字ずつ折り返されないようにする。
	   どうしても収まらない単語だけ overflow-wrap で折る。 */
	:root:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) :is(th, td) {
		word-break: normal;
		overflow-wrap: break-word;
	}

	/* 横に続きがあることを知らせる。3列以上の表を持つ図表にだけ出す。 */
	:root :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig:has(tr > *:nth-child(3))::after {
		content: "← 横にスクロールできます →";
		display: block;
		margin-top: 10px;
		font-size: 10.5px;
		letter-spacing: .04em;
		text-align: right;
		color: var(--ctl-muted);
	}
	:root[lang="en"] :is(.ctl-article__body, .editor-styles-wrapper:is(.post-type-catalys_news, .post-type-catalys_knowledge)) .ctl-fig:has(tr > *:nth-child(3))::after {
		content: "← Scroll to see the whole table →";
	}
}



/* ==========================================================================
   27. aspect-ratio が使えない端末むけの写真枠（保険）

   25章は aspect-ratio が使えることが前提。もし端末側が aspect-ratio 自体に
   対応していないと、枠の高さが決まらず、写真は元の縦横比のまま出る。
   この場合、25章を入れても見た目は何も変わらない。

   そこで、padding で縦横比を作る昔ながらの方法を用意しておく。
   padding の % は「幅」に対しての割合なので、aspect-ratio なしでも高さが
   決まる。@supports で囲ってあるので、対応している端末では一切読まれない。
   ========================================================================== */

@supports not (aspect-ratio: 1 / 1) {

	:root:root :is(
		.ctl-member__photo,
		.ctl-modal__photo,
		.ctl-pjcard__thumb,
		.ctl-ceo__photo,
		.ctl-story__photo,
		.ctl-story__heroimg
	),
	:root:root .ctl-artcard.-stack .ctl-artcard__thumb {
		display: block;
		position: relative;
		height: 0;
		overflow: hidden;
	}

	/* 枠ごとの縦横比（padding-bottom = 高さ ÷ 幅） */
	:root:root :is(.ctl-member__photo, .ctl-modal__photo) { padding-bottom: 108%; }
	:root:root :is(.ctl-pjcard__thumb, .ctl-artcard.-stack .ctl-artcard__thumb) { padding-bottom: 62.5%; }
	:root:root .ctl-ceo__photo { padding-bottom: 68.75%; }
	:root:root .ctl-story__photo { padding-bottom: 100%; }
	:root:root .ctl-story__heroimg { padding-bottom: 125%; }

	/* 中身は枠いっぱいに敷く */
	:root:root :is(
		.ctl-member__photo,
		.ctl-modal__photo,
		.ctl-pjcard__thumb,
		.ctl-ceo__photo,
		.ctl-story__photo,
		.ctl-story__heroimg
	) > :is(img, a, figure, .wp-block-image, .wp-block-post-featured-image),
	:root:root .ctl-artcard.-stack .ctl-artcard__thumb > :is(img, a, figure, .wp-block-image, .wp-block-post-featured-image) {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		display: block;
	}
	:root:root :is(
		.ctl-member__photo,
		.ctl-modal__photo,
		.ctl-pjcard__thumb,
		.ctl-ceo__photo,
		.ctl-story__photo,
		.ctl-story__heroimg
	) img,
	:root:root .ctl-artcard.-stack .ctl-artcard__thumb img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100% !important;
		max-width: none;
		object-fit: cover;
		display: block;
	}

	@media (max-width: 599.98px) {
		:root:root .ctl-member__photo { padding-bottom: 110%; }
	}
}



/* ==========================================================================
   28. カードがグリッドの列幅をはみ出す件（メンバー一覧で発生）

   クエリーループの1件ぶんの入れ物 <li class="wp-block-post"> は display: flex。
   その中のカード（.ctl-member など）は flex アイテムになるため、
   min-width が初期値の auto のままだと「中身を詰め込める最小の幅」まで
   広がろうとし、グリッドの列幅（SP で 159px）を超えて出てしまう。

   そのため、経歴文などに長い語が入っている人のカードだけが太くなり、
   写真も一緒に引き伸ばされて、他の人と高さ・幅が揃わなくなっていた。
   stg の実機で測ったところ、池内さん 188px・吉川さん 199px と、
   列幅 159px を 30〜40px 超えていた。25章の写真の指定とは別の原因。

   flex アイテムに min-width: 0 を入れて、列幅を超えないようにする。
   ========================================================================== */

:root:root li.wp-block-post,
:root:root li.wp-block-post > * {
	min-width: 0;
}



/* ==========================================================================
   29. スクロール演出のちらつきを止める

   演出の対象は catalys-fx.js が DOMContentLoaded で opacity:0 にしている。
   ところが、そこに至るまでに画面は一度描画されてしまう。そのため iPhone では
   「写真が出る → 消える → もう一度フェードイン」という見え方になっていた。

   inc/setup.php が、描画の始まる前に html へ .ctl-fx を付ける。
   ここで演出対象を最初から隠しておき、catalys-fx.js が対象を掴んだ直後に
   .ctl-fx が外れる。これで、出たものが消えることなく、フェードインだけになる。

   演出を切っている端末（動きを減らす設定）では隠す必要がないので、
   そのときは隠さない。
   ========================================================================== */

:root.ctl-fx :is(.ctl-section .ctl-inner, .ctl-section:not(:has(.ctl-inner))) > *:not(canvas) {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	:root.ctl-fx :is(.ctl-section .ctl-inner, .ctl-section:not(:has(.ctl-inner))) > *:not(canvas) {
		opacity: 1;
	}
}



/* ==========================================================================
   30. TOP の支援メニュー8枚は「押せないカード」にする

   8枚とも同じ経営コンサルティングのページに飛ぶだけで、飛んだ先でもう一度
   同じ操作をしないと中身が見られなかった。そこで TOP では、8枚は
   「こういうメニューがあります」という見出しの並びとして見せ、詳細への
   導線は下のボタン1つにまとめる。

   押せないことが見た目で分かるように、白地＋罫線（＝押せるカードの見た目）を
   やめて、淡い面だけのチップにする。触っても何も起きない。
   カード自体も小さくして、下のボタンのほうが目立つようにする。
   ========================================================================== */

/* --- 押せないカード ------------------------------------------------------ */
:root .ctl-service.-static {
	background: var(--ctl-tint);
	border-color: transparent;
	box-shadow: none;
	cursor: default;
	transition: none;
}
/* 触っても変化させない */
:root .ctl-service.-static:hover {
	background: var(--ctl-tint);
	border-color: transparent;
	box-shadow: none;
	color: var(--ctl-text);
}

/* --- 小さくする（TOP の4列） -------------------------------------------- */
:root .ctl-service.-stack.-static {
	gap: 6px;
	border-radius: 8px;
	padding: 13px 14px 14px;
}
:root .ctl-service.-stack.-static .ctl-service__no {
	font-size: 10px;
	letter-spacing: .14em;
}
:root .ctl-service.-stack.-static .ctl-service__title {
	font-size: 12.5px;
	line-height: 1.55;
	min-height: 0;
	font-weight: 500;
	color: var(--ctl-navy);
}

/* --- 詳細への誘導ボタン（大きめ） --------------------------------------- */
:root .ctl-btn.-lg {
	font-size: 15px;
	padding: 20px 48px;
	border-radius: 10px;
	min-width: 340px;
}

/* 案内文を中央に寄せる */
:root .ctl-note.-center { text-align: center; }

@media (max-width: 599.98px) {
	:root .ctl-service.-stack.-static { gap: 4px; padding: 10px 11px 11px; border-radius: 7px; }
	:root .ctl-service.-stack.-static .ctl-service__no { font-size: 9px; }
	:root .ctl-service.-stack.-static .ctl-service__title { font-size: 11.5px; line-height: 1.5; }
	:root .ctl-btn.-lg { font-size: 14px; padding: 17px 24px; min-width: 0; width: 100%; }
}



/* ==========================================================================
   31. 25章の補足 — 枠が縦に引き伸ばされる場所で写真の下に隙間が出る件

   25章で、枠の中身の高さを aspect-ratio から決めるようにした。ところが
   記事末尾の「関連記事」のように、カードの高さを揃えるために枠じたいが
   縦に引き伸ばされる場所がある。この場合、枠は引き伸ばされた高さのまま、
   写真は縦横比ぶんの高さしかないので、写真の下に隙間ができてしまう。
   （stg の記事ページ・SP で、104×100 の枠に 104×72 の写真が入っていた）

   min-height: 100% を足して、枠が縦横比より高いときだけ写真も伸ばす。
   枠の高さが aspect-ratio で決まっている場所では 100% が解決できないので、
   この指定は無視され、25章のとおり縦横比で決まる。つまり、25章が直した
   端末差の問題を蒸し返すことなく、隙間のある場所だけを直せる。
   ========================================================================== */

:root:root :is(
	.ctl-member__photo,
	.ctl-modal__photo,
	.ctl-pjcard__thumb,
	.ctl-ceo__photo,
	.ctl-story__photo,
	.ctl-story__heroimg
) img,
:root:root .ctl-artcard.-stack .ctl-artcard__thumb img {
	min-height: 100%;
}



/* ==========================================================================
   32. 中身が無い「担当プロフェッショナル」「関連するナレッジ」は出さない

   支援メニューの詳細ページ末尾には、担当者と関連記事の欄がある。どちらも
   投稿から自動で引いてくるので、該当がないと見出しだけが残ってしまう。
   英語版では英語のナレッジ記事がまだ無く、「Related insights」の見出しの
   下が空になっていた。

   中身が1件も入らなかったときは、そのセクションごと出さない。
   記事や担当者が登録されれば、自動でまた出る。
   ========================================================================== */

:root .ctl-section:has(.ctl-klist):not(:has(.ctl-klist > *)),
:root .ctl-section:has(.ctl-pros):not(:has(.ctl-pros > *)) {
	display: none;
}