/* =========================================================================
   swell-bridge.css — SWELLの既存部品をカラダイアリーの面へ合わせる
   =========================================================================

   既存記事の本文・見出し・ブロックは変更しないという制約があるため、
   記事の中身ではなく「周辺UI」だけを作り替える。
   セレクタはすべて実際に出力されているクラス名を実測して採取した。
   詳細度で勝つために #body_wrap を前置している。
   ========================================================================= */

/* -------------------------------------------------------------------------
   幅の系
   SWELLの --container_size(1296px) / --article_size(944px) は
   :root で定義されており子テーマからは上書きできない。
   そこで変数ではなく、変数を参照しているプロパティを直接上書きする。
   さらに `.-sidebar-on .l-mainContent{width:calc(100% - 356px)}` が
   先に効くため、サイドバーを消したうえで幅を指定し直す。
   ------------------------------------------------------------------------- */

#body_wrap .l-container {
	max-width: var(--sks-content-max);
	padding-right: var(--sks-gutter);
	padding-left: var(--sks-gutter);
}

#body_wrap .l-article {
	max-width: var(--sks-content-max);
	padding: 0;
}

#body_wrap.-sidebar-on .l-mainContent,
#body_wrap .l-mainContent {
	width: 100%;
}

#body_wrap #sidebar,
#body_wrap .l-sidebar {
	display: none;
}

/* 記事本文の1カラム化。読み幅は base.css 側で .post_content > * に効かせる。 */
#body_wrap.single .l-mainContent__inner,
#body_wrap.page .l-mainContent__inner {
	max-width: var(--sks-content-max);
	margin-inline: auto;
}

/* =========================================================================
   ヘッダー — 一本線（2026-08-07 全面刷新）
   =========================================================================

   浮いた3つの面をやめ、線1本の静かなヘッダーにした。
   サイトの主役は「今日の一枚」なので、頭は主張しない。

   ■ 何を変えたか
   - 3つの面（ピル）と影・角丸・スクロールでの中央寄せを全廃
     （動きの担当だった assets/js/nav.js も読み込みをやめた）
   - サイト名は明朝・字間 .42em
   - ナビは細字・小字。現在地だけがアクセントの下線を持つ
   - 二軸の並び（.l-header__spNav）は出力をやめた。
     「身体操作／心理機能」を頭に固定で出すのは旧構成の階層であり、
     刷新後の主役は体の使い方（心理機能は従）。狭い画面での到達は
     メニューボタンが担う。

   ■ 固定ヘッダーであることは変えていない
   後続の内容が下へ潜るので、#content に --sks-nav-h の余白を入れて避ける
   （トップだけはFVが自分の上余白を持つので除外）。
   ------------------------------------------------------------------------- */

:root {
	/* ヘッダーが専有する高さ。
	   採用デザイン（karadaiary.css）の実測値に合わせる。
	   880px以下はナビ非表示で92px、881px以上はナビを含めて135px。 */
	--sks-nav-pad: 15px;
	--sks-nav-h: 92px;
}

@media (min-width: 881px) {
	:root {
		--sks-nav-pad: 20px;
		--sks-nav-h: 135px;
	}
}

#body_wrap #header,
#body_wrap .l-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 20;
	padding-block: var(--sks-nav-pad);
	color: var(--sks-ink);
	background: var(--sks-canvas);
	backdrop-filter: none;
	border: 0;
	border-bottom: 1px solid var(--sks-line);
	box-shadow: none;
}

/* 固定ヘッダーのぶんだけ内容を下げる。
   トップだけはFVがヘッダーの下から始まる作りなので除外する。 */
#body_wrap:not(.home) #content {
	padding-top: calc(var(--sks-nav-h) + var(--sks-space-4));
}

#body_wrap:not(.home) #breadcrumb,
#body_wrap:not(.home) .p-breadcrumb {
	margin-top: var(--sks-nav-h);
}

#body_wrap:not(.home) .p-breadcrumb + #content {
	padding-top: var(--sks-space-4);
}

/* 中身の並び。左＝サイト名／右＝ナビと操作。

   SWELLはヘッダーの型（-series-right）に応じて .l-header__logo へ
   order:2 を当てる（インラインCSSで実測）。そのままだとサイト名が右へ飛ぶので、
   並び順はこちらで明示する。インラインCSSは後に出るが、
   こちらは #body_wrap 付き（id）なので詳細度で勝つ。 */
#body_wrap .sks-hd__brand {
	order: 0;
	/* SWELLは .l-header__logo に高さの余裕を持たせている（実測72px）。
	   1本線のヘッダーでは中身の高さがそのままヘッダーの高さになるので、
	   余分を外して行の高さだけにする。 */
	min-height: 0;
	padding: 0;
	line-height: 1.4;
}

#body_wrap .sks-hd__right {
	order: 1;
}

#body_wrap .l-header__inner.sks-hd__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sks-space-3);
	width: min(100%, var(--sks-content-max));
	max-width: none;
	margin-inline: auto;
	padding-inline: var(--sks-gutter);
}

/* サイト名 */
#body_wrap .sks-hd__brand .c-headLogo,
#body_wrap .sks-hd__brand .c-headLogo__link {
	margin: 0;
	padding: 0;
	color: var(--sks-ink);
	font-family: var(--sks-font-display);
	font-weight: var(--sks-weight-display);
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0.42em;
	/* 字間は右側に付くので、その分だけ左へ寄せて光学的に中央へ戻す */
	text-indent: 0;
	white-space: nowrap;
}

@media (min-width: 960px) {
	#body_wrap .sks-hd__brand .c-headLogo,
	#body_wrap .sks-hd__brand .c-headLogo__link {
		font-size: 17px;
	}
}

/* 右側 */
#body_wrap .sks-hd__right {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 26px);
}

/* ナビ */
#body_wrap .sks-hd__nav {
	position: static;
	background: none;
	border: 0;
	box-shadow: none;
}

#body_wrap .sks-hd__nav .c-gnav {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.2vw, 30px);
	margin: 0;
	padding: 0;
	list-style: none;
}

#body_wrap .sks-hd__nav .c-gnav > li {
	margin: 0;
	padding: 0;
}

#body_wrap .c-gnav > li > a {
	display: inline-block;
	padding: 4px 0;
	color: var(--sks-muted);
	font-size: 12.5px;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-decoration: none;
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	transition: color var(--sks-dur) var(--sks-ease),
		border-color var(--sks-dur) var(--sks-ease);
}

#body_wrap .c-gnav > li > a:hover,
#body_wrap .c-gnav > li > a:focus-visible {
	color: var(--sks-ink);
}

/* 現在地。WordPressが付ける現在ページのクラスをそのまま使う。 */
#body_wrap .c-gnav > li.current-menu-item > a,
#body_wrap .c-gnav > li.current-menu-parent > a,
#body_wrap .c-gnav > li.current-menu-ancestor > a {
	color: var(--sks-ink);
	border-bottom-color: var(--sks-body-accent);
}

#body_wrap .c-gnav > li > a::after {
	content: none;
}

#body_wrap .c-gnav .sub-menu {
	background: var(--sks-card);
	border: 1px solid var(--sks-line);
	box-shadow: none;
}

/* 操作（検索・RSS・メニュー） */
#body_wrap .sks-hd__actions {
	display: flex;
	align-items: center;
	gap: 2px;
}

#body_wrap .sks-hd__iconBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var(--sks-muted);
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: color var(--sks-dur) var(--sks-ease);
}

#body_wrap .sks-hd__iconBtn:hover,
#body_wrap .sks-hd__iconBtn:focus-visible {
	color: var(--sks-ink);
}

#body_wrap .sks-hd__iconBtn svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
}

#body_wrap .sks-hd__iconDot {
	fill: currentColor;
	stroke: none;
}

/* メニューボタンの2本線。開いているときはXになる。 */
#body_wrap .sks-hd__bars {
	position: relative;
	display: block;
	width: 17px;
	height: 11px;
}

#body_wrap .sks-hd__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.4px;
	background: currentColor;
	transition: transform var(--sks-dur) var(--sks-ease),
		top var(--sks-dur) var(--sks-ease);
}

#body_wrap .sks-hd__bars span:first-child {
	top: 1px;
}

#body_wrap .sks-hd__bars span:last-child {
	top: 8px;
}

html[data-spmenu='opened'] #body_wrap .sks-hd__bars span:first-child {
	top: 4.5px;
	transform: rotate(45deg);
}

html[data-spmenu='opened'] #body_wrap .sks-hd__bars span:last-child {
	top: 4.5px;
	transform: rotate(-45deg);
}

/* 狭い画面ではナビを畳む（メニューボタンが受ける） */
@media (max-width: 959px) {
	#body_wrap .sks-hd__nav {
		display: none;
	}
}

/* 広い画面ではメニューボタンを出さない（ナビが全部見えているため） */
@media (min-width: 960px) {
	#body_wrap .sks-hd__menuBtn {
		display: none;
	}
}

/* スマホメニュー・モーダル */
#body_wrap #sp_menu,
#body_wrap .p-spMenu__inner,
#body_wrap .c-modal__inner,
#body_wrap .p-searchModal,
#body_wrap .p-indexModal {
	color: var(--sks-ink);
	background-color: var(--sks-canvas);
}

#body_wrap .p-spMenu__overlay,
#body_wrap .c-modal__overlay {
	background-color: var(--sks-veil);
}

/* SWELLのアイコンボタン（スマホメニューの閉じるボタンなど）。
   ヘッダーの3つの面の中のボタンは白抜きなので、そちらは対象から外す
   （同じ詳細度で後から当たると白が黒に戻ってしまう）。 */
#body_wrap .c-iconBtn:not(.sks-hd__iconBtn),
#body_wrap .c-iconBtn__icon:not(.sks-hd__iconBtn) {
	color: var(--sks-ink);
}

#body_wrap .c-spnav a {
	color: var(--sks-ink);
	border-color: var(--sks-line);
}

/* ウィジェットの見出し（スマホメニューの「MENU」など）
   -------------------------------------------------------------------------
   SWELLは既定で濃紺 rgb(4,56,76) の帯を敷く。
   暗い配色では文字が明るかったので読めていたが、
   背景を #fdfdfd にして文字を濃色にした時点で、濃紺の帯に濃色の文字が乗り
   1.43:1 まで落ちた（実測）。
   このサイトの語彙は「塗った帯」ではなく「線」なので、帯をやめて下線にする。
   background-image まで消すのは、SWELLが縞模様のグラデーションを
   background-image に入れているため（背景色だけ指定しても縞が残る）。 */
#body_wrap .c-widget__title {
	padding: 0 0 var(--sks-space-1);
	color: var(--sks-ink);
	font-size: 13px;
	letter-spacing: 0.12em;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-bottom: 1px solid var(--sks-line-strong);
	border-radius: 0;
}

#body_wrap .c-widget__title::before,
#body_wrap .c-widget__title::after {
	content: none;
}

/* -------------------------------------------------------------------------
   パンくず
   ------------------------------------------------------------------------- */

#body_wrap #breadcrumb,
#body_wrap .p-breadcrumb {
	background: transparent;
	border: 0;
}

#body_wrap .p-breadcrumb__list {
	max-width: var(--sks-content-max);
	margin-inline: auto;
	padding-right: var(--sks-gutter);
	padding-left: var(--sks-gutter);
}

#body_wrap .p-breadcrumb__item,
#body_wrap .p-breadcrumb__text {
	color: var(--sks-muted);
	font-size: 12px;
	letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
   記事一覧カード
   キットの指定: 大きな画像＋大きな記事タイトル・抜粋なし・
   一律の角丸カードグリッドにしない・大きな影を使わない。
   マークアップは parts/post_list/style_normal.php の子テーマ上書きで
   抜粋とメタを外しているため、ここでは面と字送りだけを作る。
   ------------------------------------------------------------------------- */

#body_wrap .p-postList {
	gap: var(--sks-space-6) var(--sks-space-4);
	margin: 0;
}

#body_wrap .p-postList__item {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* カード全体を1つのリンクで包まない。
   判例CASE-2026-001（カード型UIの主リンクの持たせ方）に対応するため、
   リンクはタイトルに持たせ、画像は装飾として扱う。
   マークアップ側で a を分割し、ここでは面の作りだけを担う。 */
#body_wrap .p-postList__link {
	display: block;
	color: inherit;
}

#body_wrap .p-postList__thumb {
	margin-bottom: var(--sks-space-2);
	overflow: hidden;
	background: var(--sks-surface);
	border-radius: 0;
}

#body_wrap .c-postThumb__figure::before {
	/* 16:9 を基本にする（SWELLの --card_posts_thumb_ratio に依存しない） */
	padding-top: 56.25%;
}

#body_wrap .c-postThumb__img {
	transition: transform 600ms var(--sks-ease), opacity var(--sks-dur) var(--sks-ease);
}

#body_wrap .p-postList__item:hover .c-postThumb__img {
	transform: scale(1.02);
}

/* サムネイル上のカテゴリーラベル。2軸のどちらかで色を変える。 */
#body_wrap .c-postThumb__cat {
	top: auto;
	bottom: 0;
	left: 0;
	/* SWELLは right:0 を当てているため、指定しないとサムネイル幅いっぱいの
	   帯になる。暗い配色では帯の色がキャンバスとほぼ同化していて気づけなかったが、
	   背景が #fdfdfd になった時点で「画像の下に太い色帯が走る」状態になった。
	   ラベルは文字の幅だけにする。 */
	right: auto;
	width: auto;
	padding: 6px 10px;
	color: var(--sks-canvas);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	background-color: var(--sks-ink);
	/* SWELLのインラインCSSが repeating-linear-gradient の縞模様を
	   background-image に入れているため、明示的に消す
	   （background-color だけ指定しても縞が残る）。 */
	background-image: none;
	border-radius: 0;
}

#body_wrap .c-postThumb__cat::before {
	content: none;
}

#body_wrap .p-postList__title {
	margin: 0;
	color: var(--sks-ink);
	font-size: clamp(17px, 4.6vw, 21px);
	line-height: 1.45;
	letter-spacing: var(--sks-track-heading);
	font-weight: 700;
}

#body_wrap .p-postList__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--sks-overlap-accent), var(--sks-overlap-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--sks-dur) var(--sks-ease);
}

#body_wrap .p-postList__title a:hover {
	background-size: 100% 1px;
}

/* 抜粋・メタは一覧では出さない（キットの指定）。
   マークアップ側で出力していないが、
   ショートコードやブロック経由の一覧では出る可能性があるため念のため伏せる。 */
#body_wrap .p-postList__excerpt {
	display: none;
}

/* -------------------------------------------------------------------------
   一覧のレイアウト
   キットの指定: 1カラムまたは変則2カラム／スマホは1カラム／
   同じ大きさのカード3列にしない／すべて同じ角丸にしない。

   SWELLは -type-card -pc-col3 -sp-col1 のクラスで
   `.-type-card .p-postList__item{width:50%}` を基底に、
   min-width:1320px で3列にしている（実測）。
   ここでは幅指定ごと置き換えて grid に変える。
   ------------------------------------------------------------------------- */

#body_wrap .p-postList.-type-card {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sks-space-6);
	padding: 0;
	list-style: none;
}

#body_wrap .p-postList.-type-card .p-postList__item {
	/* SWELLの width:50% / 33.3% を打ち消す */
	width: auto;
	padding: 0;
	margin: 0;
}

@media (min-width: 760px) {
	/* 変則2カラム。
	   3n+1 番目を全幅にして、残りを2列に流す。
	   同じ大きさのカードが機械的に並ぶ状態を避けるため、
	   リズムを 1・2・2 の繰り返しにする。 */
	#body_wrap .p-postList.-type-card {
		grid-template-columns: 1fr 1fr;
		gap: var(--sks-space-7) var(--sks-space-4);
	}

	#body_wrap .p-postList.-type-card > .p-postList__item:nth-child(3n + 1) {
		grid-column: 1 / -1;
	}

	/* 全幅になった項目だけ、画像を横長にしてタイトルを大きく見せる */
	#body_wrap .p-postList.-type-card > .p-postList__item:nth-child(3n + 1) .c-postThumb__figure::before {
		padding-top: 40%;
	}

	#body_wrap .p-postList.-type-card > .p-postList__item:nth-child(3n + 1) .p-postList__title {
		font-size: clamp(22px, 2.6vw, 30px);
	}
}

/* -------------------------------------------------------------------------
   カード（判例CASE-2026-001の構造）
   主リンクはタイトルの <a>。カード全体を <a> で包まない。
   面のタップは assets/js/card.js が補う。
   ------------------------------------------------------------------------- */

#body_wrap .sks-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sks-space-2);
}

#body_wrap .sks-card__media {
	position: relative;
	overflow: hidden;
	background: var(--sks-surface);
}

/* 面のタップが効くことを、カーソルで伝える。
   ポインタ環境だけに限定する（タッチでは意味がない）。 */
@media (hover: hover) and (pointer: fine) {
	#body_wrap .sks-card {
		cursor: pointer;
	}
}

/* 軸ごとに1本だけ線の色を変える。
   身体操作と心理機能を対等に扱うため、面積や字送りは変えず、
   識別のための線の色だけを差にする。 */
#body_wrap .sks-card[data-sks-axis='body'] .c-postThumb__cat {
	background: var(--sks-body-accent);
	color: var(--sks-canvas);
}

#body_wrap .sks-card[data-sks-axis='psyche'] .c-postThumb__cat {
	background: var(--sks-psyche-accent);
	color: var(--sks-canvas);
}

#body_wrap .sks-card__body {
	padding: 0;
}

#body_wrap .sks-card__title {
	margin: 0;
}

#body_wrap .p-postList__meta,
#body_wrap .p-postList__times {
	color: var(--sks-muted);
	font-size: 12px;
}

/* -------------------------------------------------------------------------
   ページネーション（無限スクロールは使わない）
   ------------------------------------------------------------------------- */

#body_wrap .c-pagination {
	margin-top: var(--sks-space-7);
	gap: 6px;
}

#body_wrap .c-pagination .page-numbers {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sks-muted);
	background: transparent;
	border: 1px solid var(--sks-line);
	border-radius: 0;
}

#body_wrap .c-pagination .page-numbers.current {
	color: var(--sks-canvas);
	background: var(--sks-ink);
	border-color: var(--sks-ink);
}

/* -------------------------------------------------------------------------
   記事詳細
   ------------------------------------------------------------------------- */

#body_wrap .p-articleHead,
#body_wrap .c-postTitle {
	margin-bottom: var(--sks-space-4);
}

#body_wrap .c-postTitle__ttl {
	font-size: clamp(24px, 6.4vw, 40px);
	line-height: 1.4;
}

/* タイトル横の日付バッジは、公開日・更新日と三重になるため出さない。
   どの日付を見せるかは p-articleMetas 側に一本化する。 */
#body_wrap .c-postTitle__date {
	display: none;
}

#body_wrap .p-articleMetas,
#body_wrap .p-articleMetas__termList,
#body_wrap .c-postTimes {
	color: var(--sks-muted);
	font-size: 12.5px;
	letter-spacing: 0.04em;
}

#body_wrap .c-categoryList__link {
	color: var(--sks-ink);
	background: transparent;
	border: 1px solid var(--sks-line-strong);
	border-radius: 0;
	padding: 3px 10px;
}

/* 著者名は目立たせない */
#body_wrap .p-authorBox {
	color: var(--sks-muted);
	background: var(--sks-surface);
	border: 1px solid var(--sks-line);
	border-radius: 0;
	box-shadow: none;
}

#body_wrap .p-authorBox__name {
	font-size: 14px;
	font-weight: 400;
}

/* -------------------------------------------------------------------------
   記事詳細のヒーロー（アイキャッチの上にタイトル）
   マークアップは parts/single/post_head.php の上書き。
   背景画像の明暗に関係なく文字が読めるよう、ベールを重ねる。
   ------------------------------------------------------------------------- */

/* 記事詳細のヒーローを画面幅いっぱいにする（津田さん承認 2026-07-30）

   FVと同じ症状があった。ヒーローは
   #content.l-container（max-width 1180px ＋ 左右padding）と
   main.l-article（max-width 1180px）の内側にあるため、
   アイキャッチが画面端に届いていなかった
   （実測: 375pxで345px＝左右15pxずつ／1440pxで1100px＝左右170pxずつの余白）。

   突き抜けに 100vw は使わない。縦スクロールバーを持つ環境では
   100vw が clientWidth を上回り、そのぶん横溢れが出るため。
   トップと同じ方式で、コンテナを外してヒーロー以外の各ブロックへ戻す。 */

#body_wrap.single #content {
	max-width: none;
	padding-right: 0;
	padding-left: 0;
}

#body_wrap.single #main_content.l-article,
#body_wrap.single .l-mainContent__inner {
	max-width: none;
	margin-inline: 0;
}

/* 外したコンテナを、ヒーロー以外の全ブロックへ戻す。
   single.php がこの階層に出すのは
   ヒーロー／シェアボタン／記事上下ウィジェット／本文／メタ／
   SNS CTA／関連記事（#after_article）／コメント。
   :not() で列挙せずに済ませることで、
   SWELLの更新でブロックが増えても取りこぼさない。 */
#body_wrap.single .l-mainContent__inner > *:not(.p-articleHead) {
	max-width: var(--sks-content-max);
	margin-inline: auto;
	padding-right: var(--sks-gutter);
	padding-left: var(--sks-gutter);
}

/* 記事詳細のアイキャッチ

   画像は加工・切り取り・文字の重ね合わせを行わず、自然比率のまま表示する。
   タイトルとメタ情報は画像の下へ通常フローで置く。 */

#body_wrap .sks-hero {
	--sks-hero-ratio: 1.7778;
	position: relative;
	display: block;
	margin-bottom: var(--sks-space-6);
	padding: 0 0 var(--sks-space-5);
	overflow: hidden;
	isolation: isolate;
	background: var(--sks-canvas);
}

/* アイキャッチが無い記事では面だけで組む。
   画像が無いので上の余白を自分で持つ。 */
#body_wrap .sks-hero--noimg {
	min-height: 0;
	max-height: none;
	padding-top: var(--sks-space-6);
	background: transparent;
}

#body_wrap .sks-hero__media {
	position: relative;
	inset: auto;
	z-index: 0;
}

#body_wrap .sks-hero__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
	filter: none;
	opacity: 1;
}

/* PCでは画像全体を見せたまま高さだけを画面内へ収める。
   余った左右は背景色の面とし、画像の拡大・切り取り・ぼかしは行わない。 */
@media (min-width: 960px) {
	#body_wrap .sks-hero__media {
		height: min(62vh, calc(100vw / var(--sks-hero-ratio) - 1px));
		background: var(--sks-canvas);
	}

	#body_wrap .sks-hero__img {
		height: 100%;
	}
}

/* マークアップは維持するが、画像を覆うベールは表示しない。 */
#body_wrap .sks-hero__veil {
	display: none;
}

/* ヒーローの文字。
   本文の読み幅（--sks-reading-max）＋左右gutter で組む。

   コンテンツ幅（1180px）で組むと、本文が読み幅760pxで中央寄せされる分だけ
   左端がずれる（実測: 1440pxでタイトル170px・本文340px）。
   読み幅で揃えることで、タイトルと本文が全幅で同じ縦線に乗る。
   トップのFVと同じ扱い（視覚は全幅・文字は本文と共通の左端）。 */
#body_wrap .sks-hero__body {
	position: relative;
	width: 100%;
	max-width: calc(var(--sks-reading-max) + var(--sks-gutter) * 2);
	margin-inline: auto;
	padding-right: var(--sks-gutter);
	padding-left: var(--sks-gutter);
}

/* 画像と文字を分離し、文字背面の半透明面も無効にする。 */
#body_wrap .sks-hero:not(.sks-hero--noimg) .sks-hero__body::before {
	content: none;
	display: none;
}

#body_wrap .sks-hero:not(.sks-hero--noimg) .sks-hero__body {
	margin-top: 0;
	padding-top: var(--sks-space-5);
}

#body_wrap .sks-hero__axis {
	margin: 0 0 var(--sks-space-2);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

#body_wrap .sks-hero__axis[data-sks-axis='body'] a {
	color: var(--sks-body-accent);
}

#body_wrap .sks-hero__axis[data-sks-axis='psyche'] a {
	color: var(--sks-psyche-accent);
}

#body_wrap .sks-hero__ttl {
	margin: 0;
	max-width: none;
	/* auto-phraseによる自然な語句区切りは維持しつつ、
	   狭い画面でも各行がタイトル領域を十分に使う大きさへ補正する。 */
	font-size: clamp(28px, calc(4.35vw + 12px), 44px);
	line-height: 1.38;
}

#body_wrap .sks-hero__metas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sks-space-2) var(--sks-space-3);
	margin-top: var(--sks-space-3);
}

/* 目次（SWELL側） */
#body_wrap .p-toc {
	color: var(--sks-ink);
	background: var(--sks-surface);
	border: 1px solid var(--sks-line);
	border-radius: 0;
}

#body_wrap .p-toc__ttl {
	color: var(--sks-ink);
}

#body_wrap .p-toc a {
	color: var(--sks-ink);
	text-decoration: none;
}

/* 目次（Table of Contents Plus 側。固定ページにのみ出る）
   ID詳細度（#toc_container）で書かないと勝てない。 */
#body_wrap #toc_container {
	color: var(--sks-ink);
	background: var(--sks-surface);
	border: 1px solid var(--sks-line);
	border-radius: 0;
}

#body_wrap #toc_container .toc_title,
#body_wrap #toc_container a {
	color: var(--sks-ink);
}

/* 関連記事・記事下 */
#body_wrap .l-articleBottom__section > h2,
#body_wrap #after_article h2 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--sks-muted);
}

#body_wrap .c-shareBtns__btn {
	color: var(--sks-ink);
	background: transparent;
	border: 1px solid var(--sks-line);
	border-radius: 0;
}

/* -------------------------------------------------------------------------
   カテゴリー・アーカイブの見出し
   ------------------------------------------------------------------------- */

#body_wrap .c-pageTitle {
	margin-bottom: var(--sks-space-3);
	font-size: clamp(22px, 5.6vw, 34px);
	border: 0;
}

#body_wrap .c-pageTitle__subTitle {
	display: block;
	margin-top: var(--sks-space-1);
	color: var(--sks-muted);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.1em;
}

#body_wrap .p-termHead,
#body_wrap .p-termContent {
	color: var(--sks-muted);
	background: transparent;
	border: 0;
}

/* -------------------------------------------------------------------------
   フッター
   ------------------------------------------------------------------------- */

#body_wrap #footer,
#body_wrap .l-footer {
	margin-top: var(--sks-space-8);
	color: var(--sks-muted);
	background-color: var(--sks-canvas);
	border-top: 1px solid var(--sks-line);
}

#body_wrap .l-footer__nav a {
	color: var(--sks-muted);
	font-size: 13px;
}

#body_wrap .l-footer__nav a:hover {
	color: var(--sks-ink);
}

#body_wrap .copyright {
	color: var(--sks-muted);
	font-size: 11.5px;
	letter-spacing: 0.06em;
}

#body_wrap #pagetop {
	color: var(--sks-canvas);
	background: var(--sks-ink);
	border-radius: 0;
}

/* -------------------------------------------------------------------------
   Contact Form 7
   SWELLはCF7を一切スタイルしていない（テーマ内のwpcf7ヒット0件）。
   スコープは .wpcf7 と page-id で取る。
   #wpcf7-f120-p121-o1 は「フォームID-投稿ID-出現順」で生成されるため使わない
   （固定ページを作り直した瞬間に壊れる）。
   ------------------------------------------------------------------------- */

#body_wrap .wpcf7 {
	max-width: var(--sks-reading-max);
	margin-inline: auto;
}

#body_wrap .wpcf7 p {
	margin-bottom: var(--sks-space-4);
}

#body_wrap .wpcf7 label {
	display: block;
	color: var(--sks-ink);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

#body_wrap .wpcf7-form-control-wrap {
	display: block;
	margin-top: var(--sks-space-1);
}

/* 検証エラーは色だけに頼らず、線と文字で示す */
#body_wrap .wpcf7-not-valid {
	border-color: var(--sks-body-accent);
}

#body_wrap .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: var(--sks-body-accent);
	font-size: 13px;
	font-weight: 700;
}

#body_wrap .wpcf7-response-output {
	margin: var(--sks-space-3) 0 0;
	padding: var(--sks-space-2) var(--sks-space-3);
	color: var(--sks-ink);
	font-size: 14px;
	background: var(--sks-surface);
	border: 1px solid var(--sks-line-strong);
	border-radius: 0;
}

#body_wrap .wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--sks-overlap-accent);
}

#body_wrap .wpcf7-form.invalid .wpcf7-response-output,
#body_wrap .wpcf7-form.unaccepted .wpcf7-response-output,
#body_wrap .wpcf7-form.spam .wpcf7-response-output,
#body_wrap .wpcf7-form.failed .wpcf7-response-output {
	border-color: var(--sks-body-accent);
}

#body_wrap .wpcf7-spinner {
	background-color: var(--sks-muted);
}

/* -------------------------------------------------------------------------
   PS Auto Sitemap（固定ページ102のみ）
   wp_enqueue_style を通さない生の <link> を出すため順序制御ができない。
   後から上書きするCSSで対処する。
   ------------------------------------------------------------------------- */

#body_wrap #sitemap_list,
#body_wrap #sitemap_list a {
	color: var(--sks-ink);
}

#body_wrap #sitemap_list ul,
#body_wrap #sitemap_list li {
	background: transparent;
	border-color: var(--sks-line);
}

/* -------------------------------------------------------------------------
   404・検索0件
   ------------------------------------------------------------------------- */

#body_wrap .c-ttl404 {
	font-size: clamp(22px, 5.6vw, 32px);
	color: var(--sks-ink);
}

/* -------------------------------------------------------------------------
   カテゴリーページ（category.php）と全記事一覧（page-all-posts.php）
   情報構造は2軸で揃え、視覚表現だけを変える。
   FVと同じ強度の演出は繰り返さない（線は静止させる）。
   ------------------------------------------------------------------------- */

#body_wrap .sks-termHero {
	position: relative;
	height: 26svh;
	min-height: 160px;
	max-height: 280px;
	overflow: hidden;
	border-bottom: 1px solid var(--sks-line);
}

#body_wrap .sks-termHero__svg {
	width: 100%;
	height: 100%;
}

#body_wrap .sks-termHero__svg path,
#body_wrap .sks-termHero__svg circle {
	fill: none;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/* 身体操作: わずかに暖かい光・連続する軌道・接地点 */
#body_wrap .sks-term[data-sks-axis='body'] .sks-termHero__svg path {
	stroke: color-mix(in srgb, var(--sks-body-accent) 52%, transparent);
}

#body_wrap .sks-term[data-sks-axis='body'] .sks-termHero__svg circle {
	fill: var(--sks-overlap-accent);
	stroke: none;
}

/* 心理機能: わずかに冷たい光・重なる円環・分岐 */
#body_wrap .sks-term[data-sks-axis='psyche'] .sks-termHero__svg path,
#body_wrap .sks-term[data-sks-axis='psyche'] .sks-termHero__svg circle {
	stroke: color-mix(in srgb, var(--sks-psyche-accent) 38%, transparent);
}

#body_wrap .sks-term__ttl {
	margin-top: var(--sks-space-6);
}

#body_wrap .sks-term[data-sks-axis='body'] .sks-term__ttl .c-pageTitle__subTitle {
	color: var(--sks-body-accent);
}

#body_wrap .sks-term[data-sks-axis='psyche'] .sks-term__ttl .c-pageTitle__subTitle {
	color: var(--sks-psyche-accent);
}

#body_wrap .sks-term__desc {
	max-width: var(--sks-reading-max);
	margin: 0 0 var(--sks-space-6);
	color: var(--sks-muted);
	font-size: 15px;
	line-height: 1.9;
}

#body_wrap .sks-term__section {
	margin-bottom: var(--sks-space-8);
}

#body_wrap .sks-sectionTtl__count {
	margin-left: 0.6em;
	color: var(--sks-muted);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.06em;
}

/* もう一方の軸への導線 */
#body_wrap .sks-crossGate {
	display: block;
	padding: var(--sks-space-4);
	border: 1px solid var(--sks-line);
	border-left-width: 2px;
	transition: border-color var(--sks-dur) var(--sks-ease),
		background-color var(--sks-dur) var(--sks-ease);
}

#body_wrap .sks-crossGate[data-sks-axis='body'] {
	border-left-color: var(--sks-body-accent);
}

#body_wrap .sks-crossGate[data-sks-axis='psyche'] {
	border-left-color: var(--sks-psyche-accent);
}

#body_wrap .sks-crossGate:hover {
	background-color: var(--sks-surface);
}

#body_wrap .sks-crossGate__label {
	display: block;
	font-size: clamp(19px, 5vw, 24px);
	font-weight: 700;
	letter-spacing: 0.06em;
}

#body_wrap .sks-crossGate__sub {
	display: block;
	margin-top: 4px;
	color: var(--sks-muted);
	font-size: 12.5px;
	letter-spacing: 0.1em;
}

#body_wrap .sks-crossGate__desc {
	display: block;
	margin-top: var(--sks-space-2);
	max-width: var(--sks-reading-max);
	font-size: 14.5px;
	line-height: 1.85;
}

/* 全記事一覧の軸フィルター */
#body_wrap .sks-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sks-space-1);
	margin-bottom: var(--sks-space-5);
}

#body_wrap .sks-filter__item {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0 var(--sks-space-3);
	color: var(--sks-muted);
	font-size: 14px;
	letter-spacing: 0.06em;
	border: 1px solid var(--sks-line);
	transition: color var(--sks-dur-fast) var(--sks-ease),
		border-color var(--sks-dur-fast) var(--sks-ease);
}

#body_wrap .sks-filter__item:hover {
	color: var(--sks-ink);
	border-color: var(--sks-line-strong);
}

#body_wrap .sks-filter__item.is-current {
	color: var(--sks-canvas);
	background: var(--sks-ink);
	border-color: var(--sks-ink);
}

#body_wrap .sks-filter__item[data-sks-axis='body'].is-current {
	background: var(--sks-body-accent);
	border-color: var(--sks-body-accent);
}

#body_wrap .sks-filter__item[data-sks-axis='psyche'].is-current {
	background: var(--sks-psyche-accent);
	border-color: var(--sks-psyche-accent);
}

#body_wrap .sks-empty {
	padding: var(--sks-space-5) 0;
	color: var(--sks-muted);
}

/* -------------------------------------------------------------------------
   サイト内検索のフォーム
   トップ（home.php）と検索結果（search.php）の両方で使うため共通側に置く。
   WordPress標準の検索をそのまま使う（検索プラグインは追加しない）。
   ------------------------------------------------------------------------- */

#body_wrap .sks-search__label {
	display: block;
	margin-bottom: var(--sks-space-1);
	color: var(--sks-muted);
	font-size: 13px;
	letter-spacing: 0.06em;
}

#body_wrap .sks-search__row {
	display: flex;
	gap: var(--sks-space-1);
	max-width: var(--sks-reading-max);
}

#body_wrap .sks-search__input {
	flex: 1 1 auto;
	min-width: 0;
}

#body_wrap .sks-search__submit {
	flex: 0 0 auto;
	min-width: 6em;
	min-height: 48px;
	padding-inline: var(--sks-space-3);
	color: var(--sks-canvas);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	background: var(--sks-ink);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color var(--sks-dur-fast) var(--sks-ease);
}

#body_wrap .sks-search__submit:hover {
	background: var(--sks-overlap-accent);
}

#body_wrap .sks-search__form--result {
	margin-bottom: var(--sks-space-6);
}

#body_wrap .sks-search__hints {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sks-space-1);
	margin: var(--sks-space-3) 0 0;
	padding: 0;
	list-style: none;
}

#body_wrap .sks-search__hints a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	color: var(--sks-muted);
	font-size: 13px;
	border: 1px solid var(--sks-line);
	transition: color var(--sks-dur-fast) var(--sks-ease),
		border-color var(--sks-dur-fast) var(--sks-ease);
}

#body_wrap .sks-search__hints a:hover {
	color: var(--sks-ink);
	border-color: var(--sks-line-strong);
}

/* 検索0件。行き止まりを作らない。 */
#body_wrap .sks-noresult__lead {
	margin: 0 0 var(--sks-space-6);
	max-width: var(--sks-reading-max);
	font-size: 16px;
}

#body_wrap .sks-noresult__gates {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sks-space-2);
	margin-bottom: var(--sks-space-5);
}

@media (min-width: 760px) {
	#body_wrap .sks-noresult__gates {
		grid-template-columns: 1fr 1fr;
		gap: var(--sks-space-3);
	}
}

#body_wrap .sks-noresult__all {
	margin: 0 0 var(--sks-space-7);
}

#body_wrap .sks-noresult__all a {
	display: inline-block;
	padding: var(--sks-space-2) var(--sks-space-4);
	color: var(--sks-ink);
	font-size: 14px;
	letter-spacing: 0.08em;
	border: 1px solid var(--sks-line-strong);
	transition: color var(--sks-dur-fast) var(--sks-ease),
		background-color var(--sks-dur-fast) var(--sks-ease);
}

#body_wrap .sks-noresult__all a:hover {
	color: var(--sks-canvas);
	background: var(--sks-ink);
}