@charset "UTF-8";
/*
    Template: swell
    Theme Name: HETERODOXXY CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ（Sil-port デザイン踏襲・heterodoxxy.site 用）
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =====================================================
   目次
   01. デザイントークン（変数）
   02. ベース（フォント・リンク・文字組み）
   03. ヘッダー（トップページ透過・ナビ下線アニメ）
   04. メインビジュアル
   05. セクションタイトル（英字大見出し + 日本語ノート）
   06. トップページ用セクション
   07. スクロール連動フェード（.-observe）
   08. 無限ループスライダー（.p-infiniteLoop）
   09. MOREボタン（.c-moreBtn）
   10. 投稿リスト
   11. 記事内見出し（h2/h3/h4）
   12. ボタン・引用・マーカー
   13. サブページ・フッター・その他
   ===================================================== */


/* =====================================================
   01. デザイントークン
   カスタマイザーで同等の設定を行う場合はこのブロックを
   削除しても構いません（CSS側の指定が優先されます）
   ===================================================== */
:root {
	--swl-font_family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--swl-font_family-en-ja: "Roboto", "Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--swl-font_weight: 500;
	--swl-letter_spacing: 0.1em;

	--color_main: #000000;
	--color_text: #000000;
	--color_link: #1176d4;
	--color_htag: #000000;
	--color_bg: #ffffff;
	--color_main_thin: rgba(0, 0, 0, 0.05);
	--color_main_dark: rgba(0, 0, 0, 1);

	--color_header_bg: #fdfdfd;
	--color_header_text: #333;
	--color_footer_bg: #fdfdfd;
	--color_footer_text: #333;

	--container_size: 1400px;
	--article_size: 1200px;

	/* ボタンは全て角丸なし */
	--swl-radius--2: 0px;
	--swl-radius--4: 0px;
	--mv_btn_radius: 0px;
}

.is-style-btn_normal,
.is-style-btn_solid,
.is-style-btn_shiny,
.is-style-btn_line {
	--the-btn-radius: 0px;
}


/* =====================================================
   02. ベース
   ===================================================== */
* {
	font-feature-settings: "palt";
}

body {
	letter-spacing: var(--swl-letter_spacing, 0.1em);
}

a {
	text-decoration: none;
}


/* =====================================================
   03. ヘッダー
   トップページのみコンテンツに重ねて表示（透過）
   ===================================================== */
/* SWELLはbodyクラスを#body_wrapに付与するため、この書き方にする */
#body_wrap.top {
	padding-top: 0 !important;
}

.top .l-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: none;
	box-shadow: none !important;
	transition: all 0.5s;
	z-index: 100;
}

.top .l-header .l-container {
	max-width: 100%;
}

/* 追従ヘッダー（スクロール後）：すりガラス */
.l-fixHeader .l-fixHeader__inner {
	background: rgba(253, 253, 253, 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* テキストロゴ：英字フォントで引き締める・ブランドマークのドット付き */
.c-headLogo.-txt .c-headLogo__link {
	font-family: var(--swl-font_family-en-ja);
	font-weight: 700;
	letter-spacing: 0.02em;
	font-size: 31px !important;
}

.c-headLogo.-txt .c-headLogo__link::after {
	content: ".";
	color: #9a9a9a;
}

@media not all and (min-width: 960px) {
	.c-headLogo.-txt .c-headLogo__link {
		font-size: 25px !important;
	}
}

/* グローバルナビ：ホバーで下線が伸びる */
.c-gnav a::after {
	background: var(--color_main);
	width: 100%;
	height: 2px;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
}

.c-gnav > li:hover > a::after,
.c-gnav > .-current > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

.c-gnav .sub-menu {
	color: #333;
	background: #fff;
}

/* スマホ用メニューボタンを右端へ */
@media screen and (max-width: 959px) {
	.l-header__logo {
		margin-right: auto;
	}

	.l-header__inner {
		justify-content: flex-end;
	}
}

/* スマホ開閉メニュー：ライト基調 */
.p-spMenu {
	color: #333;
}

.p-spMenu__inner::before {
	background: #fdfdfd;
	opacity: 1;
}

.p-spMenu__overlay {
	background: #000;
	opacity: 0.6;
}

.p-spHeadMenu .menu-item.-current {
	border-bottom-color: var(--color_main);
}


/* =====================================================
   04. メインビジュアル
   カスタマイザーのメインビジュアル（画像 or 白背景）を
   ミニマルな大タイポグラフィに寄せる
   ===================================================== */
.p-mainVisual .c-filterLayer::before {
	background-color: #ffffff;
	opacity: 0;
	content: "";
}

.p-mainVisual__slideTitle {
	font-family: var(--swl-font_family-en-ja);
	font-size: clamp(2.4rem, 7vw, 5.5rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.p-mainVisual__slideText {
	font-size: clamp(0.85rem, 1.8vw, 1.05rem);
	letter-spacing: 0.2em;
	margin-top: 1.25em;
}

.p-mainVisual__scroll {
	color: inherit;
	opacity: 0.75;
}

.p-mainVisual__scrollLabel {
	font-family: var(--swl-font_family-en-ja);
	letter-spacing: 0.25em;
}


/* =====================================================
   04b. ヒーローセクション（トップページ先頭のカスタムHTML用）
   ===================================================== */
.hetero-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 0 4vw;
}

/* 全画面写真型ヒーロー（POV型）：写真を敷いて文字を重ねる */
.hetero-hero.-full {
	justify-content: flex-end;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0;
	overflow: hidden;
}

.hetero-hero__bg {
	position: absolute;
	inset: -6% 0;
	z-index: 0;
}

.hetero-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

/* 文字の可読性を保つ薄い白スクリム（ライト基調は維持） */
.hetero-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(253, 253, 253, 0.82) 0%, rgba(253, 253, 253, 0.25) 34%, rgba(253, 253, 253, 0) 55%);
}

/* ヘッダー部分の可読性用（上側の薄い白グラデ） */
.hetero-hero__bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(253, 253, 253, 0.65) 0%, rgba(253, 253, 253, 0) 20%);
}

/* 全画面型では Scroll サインを右側へ（サブコピーと重ねない） */
.hetero-hero.-full .hetero-hero__scroll {
	left: auto;
	right: 6vw;
}

.hetero-hero.-full .hetero-hero__text {
	position: relative;
	z-index: 3;
	padding: 0 6vw 11vh;
}

/* ヴィネット（周辺減光）とフィルムグレイン */
.hetero-hero.-full::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: radial-gradient(120% 100% at 50% 45%, transparent 62%, rgba(17, 17, 17, 0.07) 100%);
}

.hetero-hero.-full::after {
	content: "";
	position: absolute;
	inset: -100px;
	z-index: 2;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
	opacity: 0.05;
}

.js-pov.is-loaded .hetero-hero.-full::after {
	animation: hetero-grain 1.2s steps(6) infinite;
}

@keyframes hetero-grain {
	0% { transform: translate(0, 0); }
	20% { transform: translate(-30px, 20px); }
	40% { transform: translate(20px, -35px); }
	60% { transform: translate(-25px, -15px); }
	80% { transform: translate(35px, 25px); }
	100% { transform: translate(0, 0); }
}

.hetero-hero.-full .hetero-hero__scroll {
	z-index: 3;
}

.hetero-hero.-full .hetero-hero__title {
	font-size: clamp(3.6rem, 10.5vw, 9.2rem);
	letter-spacing: -0.035em;
}

/* 英字の紹介文（ロゴの上に置くアイブロウ） */
.hetero-hero__eyebrow {
	margin: 0 0 1.6rem;
	font-family: var(--swl-font_family-en-ja);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #2e2e2e;
	text-shadow: 0 0 14px rgba(253, 253, 253, 0.85), 0 0 4px rgba(253, 253, 253, 0.6);
}

.hetero-hero__title .__dot {
	opacity: 0.35;
}

.hetero-hero.-full .hetero-hero__scroll {
	z-index: 1;
}

.hetero-hero__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4vw;
	width: 100%;
}

.hetero-hero__art {
	flex: 0 1 min(46vw, 620px);
	max-width: 620px;
}

.hetero-hero__art svg {
	display: block;
	width: 100%;
	height: auto;
}

/* 写真ヒーロー：縦をおさえたエディトリアル風トリミング */
.hetero-hero__art.-photo {
	flex: 0 1 min(44vw, 580px);
	max-width: 580px;
}

.hetero-hero__art.-photo img {
	display: block;
	width: 100%;
	height: min(72vh, 640px);
	object-fit: cover;
}

@media not all and (min-width: 960px) {
	.hetero-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}

	.hetero-hero__art {
		flex: none;
		width: 78vw;
		max-width: 440px;
		margin: 0 auto;
	}

	.hetero-hero__art.-photo {
		width: 84vw;
		max-width: 480px;
		margin-top: 2rem;
	}

	.hetero-hero__art.-photo img {
		height: min(46vh, 420px);
	}
}

.hetero-hero__title {
	font-family: var(--swl-font_family-en-ja);
	font-size: clamp(2.8rem, 8vw, 6.5rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0;
}

.hetero-hero__sub {
	display: block;
	font-family: var(--swl-font_family);
	font-size: clamp(0.9rem, 2vw, 1.1rem);
	font-weight: 500;
	letter-spacing: 0.3em;
	margin-top: 2.5rem;
}

.hetero-hero__scroll {
	position: absolute;
	bottom: 0;
	left: 6vw;
	font-family: var(--swl-font_family-en-ja);
	font-size: 11px;
	letter-spacing: 0.3em;
	writing-mode: vertical-rl;
	padding-bottom: 90px;
}

.hetero-hero__scroll::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 1px;
	height: 80px;
	background: #000;
	transform-origin: top;
	animation: hetero-scrollline 2.2s ease-in-out infinite;
}

@keyframes hetero-scrollline {
	0% { transform: scaleY(0); transform-origin: top; }
	45% { transform: scaleY(1); transform-origin: top; }
	55% { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* トップページの保険スタイル:
   タイトルエリアとサイドバーを出さず、1カラムの全幅レイアウトにする。
   SWELLのメインビジュアル・記事スライダーも使わない（ページ内ヒーローに一本化） */
.top .l-topTitleArea,
.top .c-pageTitle,
.top .p-mainVisual,
.top .p-postSlider,
.top #sidebar {
	display: none;
}

/* ヘッダーバー（キャッチフレーズの帯）は使わない */
.l-header__bar {
	display: none;
}

.top .l-mainContent {
	width: 100% !important;
	max-width: 100%;
}

.top #content {
	padding-bottom: 0;
	margin-bottom: 0;
}


/* =====================================================
   05. セクションタイトル
   見出しブロックのスタイル「セクション用」+ 追加CSSクラス「-en」
   例: <h2>About<br><small class="mininote">サイトについて</small></h2>
   ===================================================== */
.post_content .is-style-section_ttl.-en,
#hetero_reveal .is-style-section_ttl.-en {
	font-family: var(--swl-font_family-en-ja);
	font-size: clamp(3.2rem, 9vw, 5rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1.2;
	margin: 0 0 0.5em;
	background: none;
	border: none;
	padding: 0;
	text-align: left;
	color: var(--color_htag, #111);
}

.post_content .is-style-section_ttl.-en .__dot,
#hetero_reveal .is-style-section_ttl.-en .__dot {
	color: #b5b5b5;
}

#hetero_reveal .is-style-section_ttl.-en .mininote,
#hetero_reveal .is-style-section_ttl.-en small,
.post_content .is-style-section_ttl.-en .mininote,
.post_content .is-style-section_ttl.-en small {
	display: block;
	font-family: var(--swl-font_family);
	font-size: 0.35em;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	padding-top: 0.5em;
}

/* =====================================================
   04c-0. オープニングベール（FOUC防止の白レイヤー）
   すぐにフェードアウトし、その下でヒーローが組み上がる
   ===================================================== */
.hetero-loader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: #fdfdfd;
	pointer-events: none;
	animation: hetero-fadeout 0.5s ease 0.15s forwards;
}

@keyframes hetero-fadeout {
	to { opacity: 0; visibility: hidden; }
}

/* --- トップページ: Silent Tear（波紋 → 極細線 → 無音の裂け） --- */
.hetero-loader.-tear {
	background: transparent;
	animation: none;
}

.hetero-loader.-tear .__half {
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	background: #fdfdfd;
	overflow: hidden;
}

.hetero-loader.-tear .__half.-top { top: 0; }
.hetero-loader.-tear .__half.-btm { top: 50%; }

.hetero-loader.-tear .__half.-top::after,
.hetero-loader.-tear .__half.-btm::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(17, 17, 17, 0.12);
}

.hetero-loader.-tear .__half.-top::after { bottom: 0; }
.hetero-loader.-tear .__half.-btm::before { top: 0; }

.hetero-loader.-tear .__wm {
	position: absolute;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--swl-font_family-en-ja);
	font-size: clamp(9rem, 16vw, 19rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.5px #e2e2e2;
	opacity: 0;
	animation: tear-wm-in 0.9s ease 0.25s forwards;
}

.hetero-loader.-tear .__wm b {
	font-weight: 700;
	-webkit-text-stroke: 0;
	color: #dadada;
}

.hetero-loader.-tear .__half.-top .__wm { top: 0; }
.hetero-loader.-tear .__half.-btm .__wm { top: -50vh; }

/* 波紋（裂け目の中心から広がる） */
.hetero-loader.-tear::before,
.hetero-loader.-tear::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border: 1px solid rgba(17, 17, 17, 0.35);
	border-radius: 50%;
	opacity: 0;
}

.hetero-loader.-tear::before { animation: tear-ripple 1.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.15s forwards; }
.hetero-loader.-tear::after { animation: tear-ripple 1.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.38s forwards; }

/* 極細線（亀裂） */
.hetero-loader.-tear .__seam {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 42vw;
	height: 1px;
	background: #111;
	transform: translate(-50%, -50%) scaleX(0);
	animation: tear-seam 0.6s cubic-bezier(0.65, 0, 0.35, 1) 1.35s forwards, hetero-fadeout 0.3s linear 2.05s forwards;
}

/* 裂け */
.hetero-loader.-tear .__half.-top { animation: tear-top 1.05s cubic-bezier(0.77, 0, 0.18, 1) 2.05s forwards; }
.hetero-loader.-tear .__half.-btm { animation: tear-btm 1.05s cubic-bezier(0.77, 0, 0.18, 1) 2.05s forwards; }

@keyframes tear-wm-in { to { opacity: 1; } }
@keyframes tear-ripple {
	0% { opacity: 0.8; transform: scale(1); }
	100% { opacity: 0; transform: scale(85); }
}
@keyframes tear-seam { to { transform: translate(-50%, -50%) scaleX(1); } }
@keyframes tear-top { to { transform: translateY(-101%); } }
@keyframes tear-btm { to { transform: translateY(101%); } }

@media (prefers-reduced-motion: reduce) {
	.hetero-loader {
		animation-delay: 0s;
		animation-duration: 0.1s;
	}

	.hetero-loader.-tear {
		display: none;
	}
}


/* =====================================================
   04c. オープニング演出（ページを開いた時）
   JSが html に is-loaded を付けた瞬間に発火する
   ===================================================== */
/* ヘッダー：ロゴ→ナビ項目の順に降りてくる */
.js-pov .top .c-headLogo__link,
.js-pov .top .c-gnav > li {
	opacity: 0;
	transform: translateY(-10px);
}

.js-pov.is-loaded .top .c-headLogo__link {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s ease 3.2s, transform 0.6s ease 3.2s;
}

.js-pov.is-loaded .top .c-gnav > li {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.js-pov.is-loaded .top .c-gnav > li:nth-child(1) { transition-delay: 3.3s; }
.js-pov.is-loaded .top .c-gnav > li:nth-child(2) { transition-delay: 3.4s; }
.js-pov.is-loaded .top .c-gnav > li:nth-child(3) { transition-delay: 3.5s; }
.js-pov.is-loaded .top .c-gnav > li:nth-child(4) { transition-delay: 3.6s; }
.js-pov.is-loaded .top .c-gnav > li:nth-child(n+5) { transition-delay: 3.7s; }

/* 紹介文（英字）→ ロゴ → 日本語キャッチの順に積み上がる */
.js-pov .hetero-hero__eyebrow,
.js-pov .hetero-hero__title {
	opacity: 0;
	transform: translateY(36px);
}

.js-pov .hetero-hero__title .hetero-hero__sub {
	opacity: 0;
	transform: translateY(14px);
}

.js-pov.is-loaded .hetero-hero__eyebrow {
	opacity: 1;
	transform: none;
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 2.5s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 2.5s;
}

.js-pov.is-loaded .hetero-hero__title {
	opacity: 1;
	transform: none;
	transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) 2.75s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 2.75s;
}

.js-pov.is-loaded .hetero-hero__title .hetero-hero__sub {
	opacity: 1;
	transform: none;
	transition: opacity 0.9s ease 3.1s, transform 0.9s ease 3.1s;
}

.js-pov .hetero-hero__art {
	clip-path: inset(0 0 100% 0);
}

.js-pov.is-loaded .hetero-hero__art {
	clip-path: inset(0 0 0% 0);
	transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.18, 1) 0.45s;
}

.js-pov .hetero-hero__art img,
.js-pov .hetero-hero__bg img {
	transform: scale(1.08);
}

.js-pov.is-loaded .hetero-hero__art img,
.js-pov.is-loaded .hetero-hero__bg img {
	transform: scale(1);
	transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}

/* ケンバーンズ：登場後も写真がゆっくり呼吸し続ける（映像的） */
.js-pov.is-loaded .hetero-hero__bg img {
	animation: hetero-kenburns 18s ease-in-out 3.4s infinite alternate;
}

@keyframes hetero-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.065) translateY(-1.4%); }
}

.js-pov .hetero-hero__bg {
	opacity: 0;
}

.js-pov.is-loaded .hetero-hero__bg {
	opacity: 1;
	transition: opacity 1.2s ease 0.1s;
}

.js-pov .hetero-hero__scroll {
	opacity: 0;
}

.js-pov.is-loaded .hetero-hero__scroll {
	opacity: 1;
	transition: opacity 0.8s ease 3.85s;
}

/* =====================================================
   04d. Aboutセクションのチャート描画アニメーション
   Aboutが視界に入ると、株価チャート風の線が右肩上がりに描かれる
   ===================================================== */
.hetero-chartAnim {
	padding: 1rem 0;
}

.hetero-chartAnim svg {
	display: block;
	width: 100%;
	height: auto;
}

.hetero-chartAnim .__grid line {
	stroke: #e7e7e7;
	stroke-width: 2;
}

.hetero-chartAnim .__trend {
	fill: none;
	stroke: #b5b5b5;
	stroke-width: 2;
	stroke-dasharray: 2 14;
	stroke-linecap: round;
}

.hetero-chartAnim .__line {
	fill: none;
	stroke: #111;
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hetero-chartAnim .__dots circle {
	fill: #111;
}

.hetero-chartAnim .__dots circle.-o {
	fill: #fff;
	stroke: #111;
	stroke-width: 3;
}

/* 初期状態（JS有効時のみ隠す）と描画 */
.js-pov .hetero-chartAnim .__line {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.js-pov .hetero-chartAnim .__trend {
	opacity: 0;
}

.js-pov .hetero-chartAnim .__dots circle {
	opacity: 0;
	transform: scale(0.4);
	transform-origin: center;
	transform-box: fill-box;
}

.js-pov .__about.-inview .hetero-chartAnim .__line {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 2s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}

.js-pov .__about.-inview .hetero-chartAnim .__dots circle {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.js-pov .__about.-inview .hetero-chartAnim .__dots circle:nth-child(1) { transition-delay: 0.25s; }
.js-pov .__about.-inview .hetero-chartAnim .__dots circle:nth-child(2) { transition-delay: 0.55s; }
.js-pov .__about.-inview .hetero-chartAnim .__dots circle:nth-child(3) { transition-delay: 0.85s; }
.js-pov .__about.-inview .hetero-chartAnim .__dots circle:nth-child(4) { transition-delay: 1.2s; }
.js-pov .__about.-inview .hetero-chartAnim .__dots circle:nth-child(5) { transition-delay: 1.55s; }
.js-pov .__about.-inview .hetero-chartAnim .__dots circle:nth-child(6) { transition-delay: 2s; }

.js-pov .__about.-inview .hetero-chartAnim .__trend {
	opacity: 1;
	transition: opacity 0.8s ease 2.1s;
}

@media (prefers-reduced-motion: reduce) {
	.js-pov .hetero-chartAnim .__line {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		transition: none;
	}

	.js-pov .hetero-chartAnim .__trend,
	.js-pov .hetero-chartAnim .__dots circle {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* スムーススクロール（Lenis）との共存 */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* カード画像のホバーズーム */
.p-postList__thumb {
	overflow: hidden;
	position: relative;
}

/* チルト時の光沢（カーソル位置を --sx/--sy で追う） */
.p-postList__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(500px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, 0.5), transparent 40%);
	transition: opacity 0.3s;
}

html.has-fine .p-postList__link:hover .p-postList__thumb::after {
	opacity: 1;
}

/* アイキャッチ写真は動かさない（SWELL標準のホバーズームも無効化）。光と影だけで反応する */
.p-postList__link:hover .c-postThumb__img,
.p-postList__link:hover .p-postList__thumb img,
.c-postThumb__figure:hover .c-postThumb__img {
	transform: none !important;
}


/* JSが有効な場合のみ、左からのクリップパス表示アニメ */
.js-pov .l-section .is-style-section_ttl.-en {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.5s cubic-bezier(1, 0, 0.3, 1) 0.5s;
}

.js-pov .l-section.-inview .is-style-section_ttl.-en {
	clip-path: inset(0 0 0 0);
}


/* =====================================================
   06. トップページ用セクション
   フルワイドブロックに追加CSSクラス「l-section」を付ける
   ===================================================== */
.l-section {
	padding: 5rem 0;
}

@media (min-width: 960px) {
	.l-section {
		padding: 7rem 0;
	}
}

/* Aboutセクション：テキスト列とチャート列を上下センターで揃える */
.__about .wp-block-columns {
	align-items: center;
}

/* About と Category の間隔を詰める */
.top .l-section.__about {
	padding-bottom: 3.5rem;
}

.top .l-section.__category {
	padding-top: 3.5rem;
}

/* =====================================================
   06b. テキストマーキー（アウトライン文字が流れ続ける帯）
   使い方: HTMLブロックで .hetero-ticker を挿入
   ===================================================== */
.hetero-ticker {
	overflow: hidden;
	width: 100vw;
	margin: 1rem calc(50% - 50vw);
	padding: 2rem 0;
}

.hetero-ticker__track {
	display: flex;
	width: max-content;
	animation: pov-marquee 42s linear infinite;
}

.hetero-ticker__item {
	white-space: nowrap;
	font-family: var(--swl-font_family-en-ja);
	font-weight: 700;
	font-size: clamp(3.2rem, 7vw, 6.2rem);
	letter-spacing: 0.02em;
	line-height: 1.2;
	padding-right: 4rem;
	color: transparent;
	-webkit-text-stroke: 1.5px #d4d4d4;
}

.hetero-ticker__item .__solid {
	color: #111;
	-webkit-text-stroke: 0;
}

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

/* =====================================================
   06c. セクション背面演出
   対象セクションは position:relative、本文は z-index:1、
   背面レイヤー（.-bg ticker / .hetero-secbg）は z-index:0
   ===================================================== */
.l-section.__about,
.l-section.__blog,
.l-section.__contact {
	position: relative;
}

/* WordPress はグループ内に inner-container を挟むため、両方の構造に対応する */
.l-section.__about,
.l-section.__blog,
.l-section.__contact,
.l-section.__category,
.l-section.__pickup {
	position: relative;
}

.l-section.__about > *,
.l-section.__blog > *,
.l-section.__contact > *,
.l-section.__category > *,
.l-section.__pickup > *,
.l-section.__about .wp-block-group__inner-container > *,
.l-section.__blog .wp-block-group__inner-container > *,
.l-section.__contact .wp-block-group__inner-container > *,
.l-section.__category .wp-block-group__inner-container > *,
.l-section.__pickup .wp-block-group__inner-container > * {
	position: relative;
	z-index: 1;
}

/* --- 01. About: 帯を背面に投影 --- */
.l-section.__about > .hetero-ticker.-bg,
.l-section.__about .wp-block-group__inner-container > .hetero-ticker.-bg {
	position: absolute;
	top: 50%;
	left: calc(50% - 50vw);
	transform: translateY(-50%);
	width: 100vw;
	margin: 0;
	padding: 0;
	z-index: 0;
	pointer-events: none;
}

.hetero-ticker.-bg .hetero-ticker__track {
	animation-duration: 46s;
}

.hetero-ticker.-bg .hetero-ticker__item {
	font-size: clamp(9rem, 15vw, 17rem);
	line-height: 1;
	-webkit-text-stroke: 1px #e3e3e3;
}

.hetero-ticker.-bg .hetero-ticker__item .__solid {
	color: #dadada;
	-webkit-text-stroke: 0;
}

/* --- 背面レイヤー共通（ビューポート全幅） --- */
.l-section > .hetero-secbg,
.l-section .wp-block-group__inner-container > .hetero-secbg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	z-index: 0;
	pointer-events: none;
}

/* --- 02. Blog: 方眼紙とカーソル --- */
.hetero-secbg.-grid .paper {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(#f1f1f1 1px, transparent 1px),
		linear-gradient(90deg, #f1f1f1 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(130% 110% at 50% 45%, #000 30%, transparent 82%);
	mask-image: radial-gradient(130% 110% at 50% 45%, #000 30%, transparent 82%);
}

.hetero-secbg.-grid .cross-v,
.hetero-secbg.-grid .cross-h {
	position: absolute;
	background: #dcdcdc;
}

.hetero-secbg.-grid .cross-v {
	top: 0;
	bottom: 0;
	width: 1px;
	animation: grid-wander-x 26s ease-in-out infinite alternate;
}

.hetero-secbg.-grid .cross-h {
	left: 0;
	right: 0;
	height: 1px;
	animation: grid-wander-y 26s ease-in-out infinite alternate;
}

.hetero-secbg.-grid .cross-dot {
	position: absolute;
	width: 9px;
	height: 9px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background: #b5b5b5;
	animation: grid-wander-x 26s ease-in-out infinite alternate, grid-wander-y 26s ease-in-out infinite alternate;
}

@keyframes grid-wander-x {
	0% { left: 18%; }
	38% { left: 72%; }
	70% { left: 45%; }
	100% { left: 84%; }
}

@keyframes grid-wander-y {
	0% { top: 68%; }
	38% { top: 22%; }
	70% { top: 55%; }
	100% { top: 30%; }
}

/* --- 04. Contact: 周回するドット --- */
.hetero-secbg.-orbit .orbit-ring {
	position: absolute;
	width: clamp(260px, 30vw, 440px);
	height: clamp(260px, 30vw, 440px);
	right: 6%;
	top: 50%;
	margin-top: calc(clamp(260px, 30vw, 440px) / -2);
	border: 1px solid #e4e4e4;
	border-radius: 50%;
}

.hetero-secbg.-orbit .orbit-ring.-inner {
	width: clamp(170px, 19vw, 280px);
	height: clamp(170px, 19vw, 280px);
	right: calc(6% + clamp(45px, 5.5vw, 80px));
	margin-top: calc(clamp(170px, 19vw, 280px) / -2);
	border-style: dashed;
	border-color: #ececec;
}

.hetero-secbg.-orbit .orbit-spin {
	position: absolute;
	inset: 0;
	animation: orbit-turn 52s linear infinite;
}

.hetero-secbg.-orbit .orbit-dot {
	position: absolute;
	top: -5px;
	left: 50%;
	width: 11px;
	height: 11px;
	margin-left: -5px;
	border-radius: 50%;
	background: #111;
}

.hetero-secbg.-orbit .still-dot {
	position: absolute;
	border-radius: 50%;
	background: #d6d6d6;
}

.hetero-secbg.-orbit .still-dot.-a { width: 8px; height: 8px; left: 12%; bottom: 18%; }
.hetero-secbg.-orbit .still-dot.-b { width: 6px; height: 6px; left: 34%; top: 14%; }

@keyframes orbit-turn {
	to { transform: rotate(360deg); }
}

/* --- 06. Category: 影と円盤 --- */
.hetero-secbg.-depth .soft {
	position: absolute;
	border-radius: 50%;
}

.hetero-secbg.-depth .soft.-a {
	width: 42vw;
	height: 42vw;
	max-width: 620px;
	max-height: 620px;
	right: -4%;
	top: -6%;
	background: radial-gradient(circle, rgba(17, 17, 17, 0.055) 0%, rgba(17, 17, 17, 0) 68%);
	animation: depth-drift-a 36s ease-in-out infinite alternate;
}

.hetero-secbg.-depth .soft.-b {
	width: 28vw;
	height: 28vw;
	max-width: 420px;
	max-height: 420px;
	left: -3%;
	bottom: -8%;
	background: radial-gradient(circle, rgba(17, 17, 17, 0.045) 0%, rgba(17, 17, 17, 0) 66%);
	animation: depth-drift-b 44s ease-in-out infinite alternate;
}

.hetero-secbg.-depth .edge-ring {
	position: absolute;
	width: clamp(280px, 32vw, 480px);
	height: clamp(280px, 32vw, 480px);
	border: 1px solid #e6e6e6;
	border-radius: 50%;
	right: 12%;
	bottom: 2%;
}

.hetero-secbg.-depth .edge-dot {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #cfcfcf;
	left: 46%;
	top: 72%;
	animation: depth-drift-b 44s ease-in-out infinite alternate;
}

@keyframes depth-drift-a {
	to { transform: translate(-5%, 8%); }
}

@keyframes depth-drift-b {
	to { transform: translate(7%, -7%); }
}

/* --- 03. Pickup: 巨大アウトライン S.（呼吸） --- */
.hetero-secbg.-ghost .ghost-s {
	position: absolute;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--swl-font_family-en-ja);
	font-size: clamp(24rem, 34vw, 46rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1px #e6e6e6;
	animation: ghost-breathe 18s ease-in-out infinite alternate;
}

.hetero-secbg.-ghost .ghost-s .ghost-dot {
	position: absolute;
	right: -0.08em;
	bottom: 0.02em;
	width: 0.11em;
	height: 0.11em;
	border-radius: 50%;
	background: #ececec;
}

@keyframes ghost-breathe {
	from { transform: translateY(-50%) translateX(0) scale(1); }
	to { transform: translateY(-50%) translateX(-2.5%) scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
	.hetero-secbg.-grid .cross-v,
	.hetero-secbg.-grid .cross-h,
	.hetero-secbg.-grid .cross-dot,
	.hetero-secbg.-orbit .orbit-spin,
	.hetero-secbg.-depth .soft,
	.hetero-secbg.-depth .edge-dot,
	.hetero-secbg.-ghost .ghost-s {
		animation: none;
	}

	.hetero-secbg.-grid .cross-v,
	.hetero-secbg.-grid .cross-dot { left: 70%; }

	.hetero-secbg.-grid .cross-h,
	.hetero-secbg.-grid .cross-dot { top: 30%; }
}

.top #content {
	padding-top: 0;
}


/* =====================================================
   07. スクロール連動フェード
   任意のブロックに追加CSSクラス「-observe」を付ける
   ===================================================== */
.js-pov .-observe {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.js-pov .-observe.-inview {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.js-pov .-observe,
	.js-pov .l-section .is-style-section_ttl.-en,
	.js-pov .top .l-header,
	.js-pov .top .c-headLogo__link,
	.js-pov .top .c-gnav > li,
	.js-pov .hetero-hero__text,
	.js-pov .hetero-hero__eyebrow,
	.js-pov .hetero-hero__title,
	.js-pov .hetero-hero__title .hetero-hero__sub,
	.js-pov .hetero-hero__art,
	.js-pov .hetero-hero__art img,
	.js-pov .hetero-hero__bg,
	.js-pov .hetero-hero__bg img,
	.js-pov .hetero-hero.-full::after,
	.js-pov .hetero-hero__scroll {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
		animation: none;
	}

	.js-pov .hetero-hero.-full::after {
		opacity: 0.05;
	}
}


/* =====================================================
   08. 無限ループスライダー
   投稿リストブロックに追加CSSクラス「p-infiniteLoop」
   逆方向に流す場合は「p-infiniteLoop -reverse」
   ===================================================== */
.p-infiniteLoop {
	overflow: hidden;
	margin-bottom: 0;
}

/* 記事コンテンツ内では画面幅いっぱいに広げる（サイドバー非表示ページ用） */
.post_content .p-infiniteLoop {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.p-infiniteLoop .p-postList {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: max-content;
	will-change: transform;
}

/* SWELL側の列指定（-pc-col3 等）より優先させるため !important を付ける */
.p-infiniteLoop .p-postList > * {
	flex: 0 0 auto;
	width: 60vw !important;
	padding: 0.5em;
	box-sizing: border-box;
	margin: 0;
}

@media (min-width: 600px) {
	.p-infiniteLoop .p-postList > * {
		width: 25vw !important;
	}
}

.p-infiniteLoop.-loop-ready .p-postList {
	animation: pov-marquee var(--loop-duration, 40s) linear infinite;
}

.p-infiniteLoop.-reverse.-loop-ready .p-postList {
	animation-direction: reverse;
}

.p-infiniteLoop:hover .p-postList {
	animation-play-state: paused;
}

@keyframes pov-marquee {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.p-infiniteLoop.-loop-ready .p-postList {
		animation: none;
	}
}


/* =====================================================
   09. MOREボタン
   ボタンブロックに追加CSSクラス「c-moreBtn」
   ===================================================== */
.c-moreBtn {
	position: relative;
	display: block;
	width: 80px;
	min-width: 80px;
	margin-left: auto;
}

.c-moreBtn.-center {
	margin-left: auto;
	margin-right: auto;
}

.c-moreBtn a.swell-block-button__link {
	background: transparent;
	box-shadow: 0 0 0 1px #000;
	color: #000;
	padding: 0;
	border-radius: 999px;
	display: grid;
	place-content: center;
	width: 80px;
	height: 80px;
	transition: background 0.3s, color 0.3s;
}

.c-moreBtn a.swell-block-button__link::after {
	content: none;
}

.c-moreBtn a.swell-block-button__link::before {
	content: "";
	display: inline-block;
	width: 2em;
	aspect-ratio: 1 / 1;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h16M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h16M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
}

.c-moreBtn a.swell-block-button__link:hover {
	background: #000;
	color: #fff;
}

/* ラベル（円の左側に配置、ホバーで下線が入れ替わる） */
.c-moreBtn a.swell-block-button__link span {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-120%, -70%);
	font-family: var(--swl-font_family-en-ja);
	letter-spacing: 0.1em;
	white-space: nowrap;
	padding: 0 0.25em 0.25em;
}

.c-moreBtn a.swell-block-button__link span::before,
.c-moreBtn a.swell-block-button__link span::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: #000;
}

.c-moreBtn a.swell-block-button__link span::before {
	transform: scaleX(1);
	transform-origin: left;
	transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s;
}

.c-moreBtn a.swell-block-button__link span::after {
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}

@media (hover: hover) and (pointer: fine) {
	.c-moreBtn a.swell-block-button__link:hover span::before {
		transform: scaleX(0);
		transform-origin: right;
		transition-delay: 0s;
	}

	.c-moreBtn a.swell-block-button__link:hover span::after {
		transform: scaleX(1);
		transform-origin: left;
		transition-delay: 0.2s;
	}
}


/* =====================================================
   10. 投稿リスト
   ===================================================== */
/* サムネイルの浮遊感のある影 */
.p-postList__thumb,
.p-pickupBanners__item .c-bannerLink {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 4px 4px -4px rgba(0, 0, 0, 0.1);
}

/* カテゴリーバッジ：黒地 + 斜めストライプ */
.c-postThumb__cat {
	background-color: #000000;
	color: #fff;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(255, 255, 255, 0.1),
		rgba(255, 255, 255, 0.1) 6px,
		transparent 6px,
		transparent 12px
	);
}

/* リスト型・大型カードの本文末尾に READ MORE */
.-type-list2 .p-postList__body::after,
.-type-big .p-postList__body::after {
	content: "READ MORE »";
}

/* アイキャッチ未設定時のプレースホルダー（ショートコード出力用） */
.c-postThumb__img.-noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: #f2f2f2;
}


/* =====================================================
   11. 記事内見出し
   ===================================================== */
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	border-top: solid 2px var(--color_htag);
	border-bottom: solid 2px var(--color_htag);
	padding: 1em 0.75em;
	background: none;
	color: var(--color_htag);
}

.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	position: relative;
	padding: 0 0.5em 0.5em;
	border: none;
}

.post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: repeating-linear-gradient(
		90deg,
		var(--color_htag) 0%,
		var(--color_htag) 29.3%,
		rgba(150, 150, 150, 0.2) 29.3%,
		rgba(150, 150, 150, 0.2) 100%
	);
}

.post_content h4:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	padding: 0 0 0 16px;
	border-left: solid 2px var(--color_htag);
}


/* =====================================================
   12. ボタン・引用・マーカー
   ===================================================== */
.post_content blockquote {
	padding: 1.5em 3em;
}

.post_content blockquote::before,
.post_content blockquote::after {
	content: "\00201c";
	display: inline-block;
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 6em;
	color: rgba(200, 200, 200, 0.4);
}

.post_content blockquote::before {
	top: 4px;
	left: 8px;
}

.post_content blockquote::after {
	transform: rotate(180deg);
	bottom: 4px;
	right: 8px;
}


/* =====================================================
   12b. Aboutページ用コンポーネント（年表・ステートメント・プロフィール）
   ===================================================== */
.hetero-lead {
	font-size: 1.08rem;
	line-height: 2.2;
}

/* 固定ページのセクションはトップより余白を絞る */
.page:not(.top) .l-section {
	padding: 4.5rem 0;
}

/* 年表 */
.hetero-timeline {
	margin: 2.5em 0 0;
}

/* 年表のスクロール連動アニメーション */
.js-pov .hetero-timeline__item {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-pov .hetero-timeline__item.-inview {
	opacity: 1;
	transform: none;
}

/* ステートメントの字間が締まりながら現れる演出 */
.js-pov .hetero-statement .__jp {
	opacity: 0;
	letter-spacing: 0.3em;
	transition: opacity 1.1s ease 0.1s, letter-spacing 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.js-pov .hetero-statement.-inview .__jp {
	opacity: 1;
	letter-spacing: 0.08em;
}

.js-pov .hetero-statement .__en {
	opacity: 0;
	transition: opacity 0.9s ease 0.9s;
}

.js-pov .hetero-statement.-inview .__en {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.js-pov .hetero-timeline__item,
	.js-pov .hetero-statement .__jp,
	.js-pov .hetero-statement .__en {
		opacity: 1;
		transform: none;
		letter-spacing: inherit;
		transition: none;
	}
}

.hetero-timeline__item {
	position: relative;
	padding: 0 0 3.5em 130px;
}

.hetero-timeline__item::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 96px;
	height: calc(100% - 10px);
	border-left: 1px dashed var(--color_border, #ddd);
}

.hetero-timeline__item:last-child::before {
	content: none;
}

.hetero-timeline__item::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 92px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #111;
	box-sizing: border-box;
}

.hetero-timeline__item.-now::after {
	background: #111;
}

.hetero-timeline__age {
	position: absolute;
	top: 0;
	left: 0;
	width: 76px;
	text-align: right;
	font-family: var(--swl-font_family-en-ja);
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.hetero-timeline__title {
	margin: 0 0 0.8em;
	font-size: 1.1rem;
	font-weight: 700;
}

.hetero-timeline__item p {
	margin: 0 0 1em;
	line-height: 2;
}

@media not all and (min-width: 600px) {
	.hetero-timeline__item {
		padding-left: 96px;
	}

	.hetero-timeline__age {
		width: 56px;
		font-size: 0.9rem;
	}

	.hetero-timeline__item::before {
		left: 72px;
	}

	.hetero-timeline__item::after {
		left: 68px;
	}
}

/* ステートメント（信条の大書き） */
.hetero-statement {
	margin: 4.5rem 0;
	padding: 4.5rem 1rem;
	text-align: center;
	border-top: solid 1px var(--color_border, #e5e5e5);
	border-bottom: solid 1px var(--color_border, #e5e5e5);
}

.hetero-statement .__jp {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2.3rem);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.9;
}

.hetero-statement .__en {
	margin: 1.5em 0 0;
	font-family: var(--swl-font_family-en-ja);
	font-size: 0.78rem;
	letter-spacing: 0.35em;
	color: #9a9a9a;
	text-transform: uppercase;
}

/* プロフィール表 */
.hetero-profile dl {
	display: grid;
	grid-template-columns: 9em 1fr;
	gap: 1em 2em;
	margin: 0;
}

.hetero-profile dt {
	font-weight: 700;
	letter-spacing: 0.1em;
}

.hetero-profile dd {
	margin: 0;
	line-height: 1.9;
}

@media not all and (min-width: 600px) {
	.hetero-profile dl {
		grid-template-columns: 7em 1fr;
		gap: 0.9em 1em;
	}
}

/* YouTube チャンネルカード（About） */
.hetero-yt__card {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	padding: 1.7rem 2rem;
	border: 1px solid #111;
	background: #fff;
	color: #111;
	text-decoration: none;
	transition: background-color 0.35s ease, color 0.35s ease;
}

.hetero-yt__card:hover {
	background: #111;
	color: #fdfdfd;
}

.hetero-yt__play {
	flex: 0 0 auto;
	width: 62px;
	height: 62px;
}

.hetero-yt__play svg {
	display: block;
	width: 100%;
	height: 100%;
}

.hetero-yt__play circle {
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
}

.hetero-yt__play path {
	fill: currentColor;
	transition: transform 0.35s ease;
}

.hetero-yt__card:hover .hetero-yt__play path {
	transform: translateX(3px);
}

.hetero-yt__meta {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	min-width: 0;
}

.hetero-yt__label {
	font-family: var(--swl-font_family-en-ja);
	font-size: 0.68rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #9a9a9a;
}

.hetero-yt__card:hover .hetero-yt__label {
	color: #8a8a8a;
}

.hetero-yt__name {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.4;
}

.hetero-yt__handle {
	font-family: var(--swl-font_family-en-ja);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	color: #9a9a9a;
}

.hetero-yt__card:hover .hetero-yt__handle {
	color: #b5b5b5;
}

.hetero-yt__cta {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	white-space: nowrap;
}

.hetero-yt__cta .__arrow {
	display: inline-block;
	margin-left: 0.6em;
	transition: transform 0.35s ease;
}

.hetero-yt__card:hover .hetero-yt__cta .__arrow {
	transform: translateX(5px);
}

@media not all and (min-width: 600px) {
	.hetero-yt__card {
		flex-wrap: wrap;
		gap: 1rem 1.2rem;
		padding: 1.4rem 1.4rem;
	}

	.hetero-yt__play {
		width: 50px;
		height: 50px;
	}

	.hetero-yt__cta {
		margin-left: 0;
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hetero-yt__card,
	.hetero-yt__play path,
	.hetero-yt__cta .__arrow {
		transition: none;
	}
}


/* =====================================================
   ドキュメント記事（.hetero-doc）— KAIRI ガイド準拠の配色
   ===================================================== */
.hetero-doc {
	--k-navy: #0d3f7d;
	--k-blue: #1e7ac4;
	--k-sky: #35a3e0;
	--k-mist: #eef5fc;
	--k-line: #d3e3f3;
	--k-amber: #d9862a;
	--k-amber-bg: #fdf4e8;
}

/* セクション見出し：濃紺→青のグラデーションバー */
.post_content .hetero-doc h2 {
	margin: 3.2em 0 1.4em;
	padding: 0.7em 1.1em;
	background: linear-gradient(100deg, var(--k-navy), var(--k-blue) 62%, var(--k-sky));
	color: #fff;
	font-size: 1.24rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.6;
	border: none;
	border-radius: 3px;
}

.post_content .hetero-doc h2::before,
.post_content .hetero-doc h2::after {
	content: none;
}

/* 小見出し：紺文字＋左のアクセントバー */
.post_content .hetero-doc h3 {
	margin: 2.6em 0 1em;
	padding: 0 0 0.5em 0.85em;
	border: none;
	border-left: 4px solid var(--k-sky);
	border-bottom: 1px solid var(--k-line);
	background: transparent;
	color: var(--k-navy);
	font-size: 1.1rem;
	letter-spacing: 0.03em;
}

.post_content .hetero-doc a {
	color: var(--k-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.post_content .hetero-doc strong {
	color: var(--k-navy);
}

/* コラム体（-column）：見出しはバーではなく紺文字＋下線 */
.post_content .hetero-doc.-column h2 {
	margin: 3em 0 1.2em;
	padding: 0 0 0.5em;
	background: none;
	border-radius: 0;
	border-bottom: 2px solid var(--k-sky);
	color: var(--k-navy);
	font-size: 1.3rem;
}

.post_content .hetero-doc.-column h3 {
	border-left-width: 3px;
	border-bottom: none;
	padding-bottom: 0;
}

/* 対話形式（初心者向けシリーズ） */
.hetero-doc .kdoc-talk {
	margin: 1.6em 0;
}

.hetero-doc .kdoc-talk .__row {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	margin-bottom: 1.3rem;
}

.hetero-doc .kdoc-talk .__row.-me {
	flex-direction: row-reverse;
}

.hetero-doc .kdoc-talk .__who {
	flex: 0 0 auto;
	width: 48px;
	text-align: center;
}

.hetero-doc .kdoc-talk .__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-family: var(--swl-font_family-en-ja);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--k-navy);
}

.hetero-doc .kdoc-talk .-me .__icon {
	background: #7b8794;
}

.hetero-doc .kdoc-talk .__name {
	display: block;
	margin-top: 0.35em;
	font-size: 0.66rem;
	line-height: 1.4;
	color: #8496a8;
}

.hetero-doc .kdoc-talk .__bubble {
	position: relative;
	max-width: 80%;
	padding: 0.95rem 1.2rem;
	background: var(--k-mist);
	border: 1px solid var(--k-line);
	border-radius: 4px;
	font-size: 0.95rem;
	line-height: 1.95;
}

.hetero-doc .kdoc-talk .-me .__bubble {
	background: #f4f6f8;
	border-color: #e2e6ea;
}

.hetero-doc .kdoc-talk .__bubble::before {
	content: "";
	position: absolute;
	top: 16px;
	left: -7px;
	width: 12px;
	height: 12px;
	background: inherit;
	border-left: 1px solid var(--k-line);
	border-bottom: 1px solid var(--k-line);
	transform: rotate(45deg);
}

.hetero-doc .kdoc-talk .-me .__bubble::before {
	left: auto;
	right: -7px;
	border-left: none;
	border-bottom: none;
	border-right: 1px solid #e2e6ea;
	border-top: 1px solid #e2e6ea;
}

.hetero-doc .kdoc-talk .__bubble p {
	margin: 0 0 0.7em;
}

.hetero-doc .kdoc-talk .__bubble p:last-child {
	margin-bottom: 0;
}

.hetero-doc .kdoc-talk .__bubble strong {
	color: var(--k-navy);
}

@media not all and (min-width: 600px) {
	.hetero-doc .kdoc-talk .__bubble {
		max-width: 100%;
		font-size: 0.9rem;
		padding: 0.85rem 1rem;
	}

	.hetero-doc .kdoc-talk .__who,
	.hetero-doc .kdoc-talk .__icon {
		width: 40px;
	}

	.hetero-doc .kdoc-talk .__icon {
		height: 40px;
		font-size: 0.68rem;
	}
}

/* 結論ファーストのブロック（検索意図への回答を最初に置く） */
.hetero-doc .kdoc-answer {
	margin: 0 0 2.4em;
	padding: 1.5rem 1.7rem;
	background: var(--k-mist);
	border: 1px solid var(--k-line);
	border-left: 6px solid var(--k-navy);
}

.hetero-doc .kdoc-answer .__ttl {
	display: inline-block;
	margin-bottom: 0.7em;
	padding: 0.25em 0.9em;
	background: var(--k-navy);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
}

.hetero-doc .kdoc-answer p {
	margin: 0;
	font-size: 1rem;
	line-height: 2.05;
	color: #1c2b3a;
}

/* 読了時間 */
.post_content .hetero-readtime {
	display: flex;
	align-items: baseline;
	gap: 0.9em;
	margin: 0 0 2em;
	padding-bottom: 0.9em;
	border-bottom: 1px solid #e6e6e6;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	color: #8a8a8a;
}

.post_content .hetero-readtime .__label {
	font-family: var(--swl-font_family-en-ja);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.68rem;
}

.post_content .hetero-readtime .__val {
	font-weight: 700;
	color: #111;
}

.post_content .hetero-readtime .__chars {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

/* 次に読む */
.hetero-next {
	margin: 4em 0 0;
	padding-top: 2em;
	border-top: 1px solid #e6e6e6;
}

.hetero-next__head {
	margin: 0 0 1.2em;
	padding: 0;
	border: none;
	background: none;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #9a9a9a;
}

.hetero-next__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.2rem;
}

.hetero-next__card {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 0.9rem;
	border: 1px solid #e6e6e6;
	background: #fff;
	color: #111;
	text-decoration: none;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.hetero-next__card:hover {
	border-color: #111;
	transform: translateY(-2px);
}

.hetero-next__card .__thumb {
	flex: 0 0 96px;
	height: 66px;
	overflow: hidden;
	background: #f4f4f4;
}

.hetero-next__card .__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hetero-next__card .__img.-noimg {
	background: repeating-linear-gradient(45deg, #f4f4f4, #f4f4f4 6px, #ececec 6px, #ececec 12px);
}

.hetero-next__card .__body {
	min-width: 0;
}

.hetero-next__card .__label {
	display: block;
	margin-bottom: 0.35em;
	font-family: var(--swl-font_family-en-ja);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	color: #9a9a9a;
}

.hetero-next__card .__ttl {
	display: block;
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.02em;
}

@media not all and (min-width: 600px) {
	.hetero-next__grid {
		grid-template-columns: 1fr;
	}

	.post_content .hetero-readtime .__chars {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hetero-next__card {
		transition: none;
	}
}


/* シミュレーター：手取りからの目安ブロック */
.hetero-sim__guide {
	padding: 1.6rem 1.8rem;
	background: #fff;
	border-bottom: 1px solid var(--k-line);
}

.hetero-sim__guide .__ttl {
	display: inline-block;
	margin-bottom: 1.1rem;
	padding: 0.28em 0.95em;
	background: var(--k-navy);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
}

.hetero-sim__advice {
	margin: 1.2rem 0 1rem;
	padding: 1.1rem 1.3rem;
	background: var(--k-mist);
	border-left: 4px solid var(--k-navy);
}

.hetero-sim__advice.-warn {
	background: #fdf4e8;
	border-left-color: var(--k-amber);
}

.hetero-sim__advice .__stage {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--k-navy);
}

.hetero-sim__advice.-warn .__stage {
	color: #a8621a;
}

.hetero-sim__advice .__amt {
	display: block;
	margin-top: 0.5em;
	font-size: 0.92rem;
	color: #405062;
}

.hetero-sim__advice .__amt b {
	font-family: var(--swl-font_family-en-ja);
	font-size: 1.5rem;
	color: var(--k-navy);
	font-variant-numeric: tabular-nums;
}

.hetero-sim__advice .__calc {
	display: block;
	margin-top: 0.35em;
	font-size: 0.8rem;
	color: #6b7c8d;
}

.hetero-sim__advice .__why {
	display: block;
	margin-top: 0.7em;
	font-size: 0.83rem;
	line-height: 1.9;
	color: #405062;
}

.hetero-sim__apply {
	display: block;
	width: 100%;
	padding: 0.85em 1em;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #fff;
	background: var(--k-navy);
	border: none;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.hetero-sim__apply:hover {
	background: var(--k-blue);
}

.hetero-sim__apply:disabled {
	background: #b9c4cf;
	cursor: not-allowed;
}

@media not all and (min-width: 600px) {
	.hetero-sim__guide {
		padding: 1.2rem 1.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hetero-sim__apply {
		transition: none;
	}
}

/* リボ払いシミュレーター固有 */
.hetero-sim__field select {
	flex: 1;
	min-width: 0;
	padding: 0.5em 0.7em;
	font: inherit;
	font-size: 0.88rem;
	color: #111;
	background: #fff;
	border: 1px solid var(--k-line);
	border-radius: 0;
}

.hetero-sim__first {
	margin-top: 1.4rem;
	padding: 1rem 1.1rem;
	background: var(--k-mist);
	border-left: 3px solid var(--k-navy);
}

.hetero-sim__first .__t {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--k-navy);
	margin-bottom: 0.6em;
}

.hetero-sim__first .__b {
	display: flex;
	height: 16px;
	overflow: hidden;
	border-radius: 2px;
	background: #fff;
}

.hetero-sim__first .__b i.-p { background: var(--k-sky); }
.hetero-sim__first .__b i.-g { background: var(--k-amber); }

.hetero-sim__first .__d {
	display: block;
	margin-top: 0.6em;
	font-size: 0.8rem;
	color: #5d6f81;
}

.hetero-sim__alert {
	margin-top: 1.2rem;
	padding: 1rem 1.2rem;
	background: #fdf4e8;
	border-left: 4px solid var(--k-amber);
	font-size: 0.86rem;
	line-height: 1.9;
	color: #8a5416;
}

/* 積立シミュレーター */
.hetero-sim {
	margin: 2.4em 0;
	border: 1px solid var(--k-line);
	background: #fff;
}

.hetero-sim__inputs {
	padding: 1.6rem 1.8rem;
	background: var(--k-mist);
	border-bottom: 1px solid var(--k-line);
}

.hetero-sim__field {
	display: block;
	margin-bottom: 1.1rem;
}

.hetero-sim__field:last-child {
	margin-bottom: 0;
}

.hetero-sim__field .__label {
	display: block;
	margin-bottom: 0.4em;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--k-navy);
}

.hetero-sim__field .__row {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.hetero-sim__field input[type="range"] {
	flex: 1;
	min-width: 0;
	accent-color: var(--k-blue);
	height: 4px;
}

.hetero-sim__field output {
	flex: 0 0 auto;
	min-width: 6.5em;
	text-align: right;
	font-family: var(--swl-font_family-en-ja);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--k-navy);
	font-variant-numeric: tabular-nums;
}

.hetero-sim__result {
	padding: 1.6rem 1.8rem;
}

.hetero-sim__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.9rem;
}

.hetero-sim__card {
	padding: 1rem 0.9rem;
	background: #fff;
	border: 1px solid var(--k-line);
	border-top: 3px solid var(--k-sky);
	text-align: center;
}

.hetero-sim__card.-gain {
	border-top-color: var(--k-amber);
}

.hetero-sim__card.-total {
	border-top-color: var(--k-navy);
	background: var(--k-mist);
}

.hetero-sim__card .__k {
	display: block;
	font-size: 0.72rem;
	line-height: 1.6;
	color: #5d6f81;
}

.hetero-sim__card strong {
	display: block;
	margin-top: 0.4em;
	font-family: var(--swl-font_family-en-ja);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--k-navy);
	font-variant-numeric: tabular-nums;
}

.hetero-sim__card.-gain strong {
	color: #b56a16;
}

.hetero-sim__barwrap {
	margin-top: 1.4rem;
}

.hetero-sim__bar {
	display: flex;
	height: 20px;
	overflow: hidden;
	border-radius: 2px;
	background: var(--k-mist);
}

.hetero-sim__bar .__p {
	background: var(--k-sky);
	transition: width 0.25s ease;
}

.hetero-sim__bar .__g {
	background: var(--k-amber);
	transition: width 0.25s ease;
}

.hetero-sim__legend {
	display: flex;
	gap: 1.4rem;
	margin-top: 0.6em;
	font-size: 0.76rem;
	color: #5d6f81;
}

.hetero-sim__legend i {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-right: 0.4em;
	vertical-align: -0.05em;
}

.hetero-sim__legend i.-p {
	background: var(--k-sky);
}

.hetero-sim__legend i.-g {
	background: var(--k-amber);
}

.hetero-sim__note {
	margin: 1.2em 0 0;
	font-size: 0.83rem;
	line-height: 1.9;
	color: #5d6f81;
}

@media not all and (min-width: 600px) {
	.hetero-sim__cards {
		grid-template-columns: 1fr;
	}

	.hetero-sim__inputs,
	.hetero-sim__result {
		padding: 1.2rem 1.1rem;
	}

	.hetero-sim__field output {
		min-width: 5.6em;
		font-size: 0.88rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hetero-sim__bar .__p,
	.hetero-sim__bar .__g {
		transition: none;
	}
}

/* 図解 */
.post_content .hetero-doc .kdoc-fig {
	margin: 2.6em 0;
	padding: 1.6rem 1.6rem 1.3rem;
	background: #fff;
	border: 1px solid var(--k-line);
}

.hetero-doc .kdoc-fig__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.hetero-doc .kdoc-fig svg {
	display: block;
	width: 100%;
	height: auto;
	font-family: var(--swl-font_family-en-ja), sans-serif;
}

.hetero-doc .kdoc-fig figcaption {
	margin: 1.1em 0 0;
	padding-top: 0.9em;
	border-top: 1px solid var(--k-line);
	font-size: 0.79rem;
	line-height: 1.85;
	color: #5d6f81;
	text-align: center;
}

.hetero-doc .kdoc-fig .__ttl {
	display: block;
	margin-bottom: 1.1em;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--k-blue);
}

/* 引用のように置く一文 */
.hetero-doc .kdoc-pull {
	margin: 2.4em 0;
	padding: 0.2em 0 0.2em 1.4rem;
	border-left: 4px solid var(--k-sky);
	color: var(--k-navy);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 2;
	letter-spacing: 0.03em;
}

/* 冒頭の要点バナー */
.hetero-doc .kdoc-hero {
	margin: 0 0 2.4em;
	padding: 2rem 2.2rem;
	background: linear-gradient(118deg, #0b3568, var(--k-navy) 45%, var(--k-blue));
	color: #fff;
	border-radius: 4px;
}

.hetero-doc .kdoc-hero .__eyebrow {
	display: block;
	font-family: var(--swl-font_family-en-ja);
	font-size: 0.68rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #a9cdf0;
	margin-bottom: 1em;
}

.hetero-doc .kdoc-hero .__lead {
	margin: 0;
	font-size: 1.16rem;
	font-weight: 700;
	line-height: 1.9;
	letter-spacing: 0.03em;
}

.hetero-doc .kdoc-hero .__sub {
	margin: 1em 0 0;
	font-size: 0.9rem;
	line-height: 1.95;
	color: #d4e6f8;
}

/* 数字で見るブロック */
.hetero-doc .kdoc-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin: 2.4em 0;
}

.hetero-doc .kdoc-stat {
	padding: 1.4rem 1rem;
	background: var(--k-mist);
	border-top: 3px solid var(--k-blue);
	text-align: center;
}

.hetero-doc .kdoc-stat .__num {
	display: block;
	font-family: var(--swl-font_family-en-ja);
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--k-navy);
	letter-spacing: -0.01em;
}

.hetero-doc .kdoc-stat .__num small {
	font-size: 0.9rem;
	margin-left: 0.15em;
}

.hetero-doc .kdoc-stat .__label {
	display: block;
	margin-top: 0.7em;
	font-size: 0.76rem;
	line-height: 1.7;
	letter-spacing: 0.06em;
	color: #4a5b6e;
}

.hetero-doc .kdoc-stat.-alert {
	border-top-color: var(--k-amber);
	background: var(--k-amber-bg);
}

.hetero-doc .kdoc-stat.-alert .__num {
	color: #b56a16;
}

/* 注記ボックス（青）／警告ボックス（オレンジ） */
.hetero-doc .kdoc-note,
.hetero-doc .kdoc-warn {
	margin: 2em 0;
	padding: 1.3rem 1.6rem;
	background: var(--k-mist);
	border-left: 4px solid var(--k-blue);
	font-size: 0.92rem;
	line-height: 2;
}

.hetero-doc .kdoc-warn {
	background: var(--k-amber-bg);
	border-left-color: var(--k-amber);
}

.hetero-doc .kdoc-note .__ttl,
.hetero-doc .kdoc-warn .__ttl {
	display: block;
	margin-bottom: 0.4em;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--k-navy);
}

.hetero-doc .kdoc-warn .__ttl {
	color: #a8621a;
}

/* 3層の分析カード */
.hetero-doc .kdoc-layers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
	margin: 2.4em 0;
}

.hetero-doc .kdoc-layer {
	padding: 1.5rem 1.4rem;
	background: #fff;
	border: 1px solid var(--k-line);
	border-top: 3px solid var(--k-navy);
}

.hetero-doc .kdoc-layer:nth-child(2) {
	border-top-color: var(--k-blue);
}

.hetero-doc .kdoc-layer:nth-child(3) {
	border-top-color: var(--k-sky);
}

.hetero-doc .kdoc-layer .__no {
	font-family: var(--swl-font_family-en-ja);
	font-size: 0.72rem;
	letter-spacing: 0.24em;
	color: var(--k-blue);
}

.hetero-doc .kdoc-layer .__ttl {
	display: block;
	margin: 0.6em 0 0.7em;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.7;
	color: var(--k-navy);
}

.hetero-doc .kdoc-layer p {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.95;
	color: #405062;
}

.hetero-doc .kdoc-layers.-four {
	grid-template-columns: repeat(2, 1fr);
}

.hetero-doc .kdoc-layer .__tag {
	display: inline-block;
	margin-top: 0.9em;
	padding: 0.25em 0.7em;
	background: var(--k-mist);
	color: var(--k-navy);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
}

/* 手順リスト（番号つき） */
.post_content .hetero-doc .kdoc-steps {
	counter-reset: kstep;
	margin: 2.2em 0;
	padding: 0;
	list-style: none;
}

.post_content .hetero-doc .kdoc-steps li {
	position: relative;
	margin: 0 0 0.9rem;
	padding: 1.1rem 1.4rem 1.1rem 3.6rem;
	background: #fff;
	border: 1px solid var(--k-line);
	font-size: 0.92rem;
	line-height: 1.95;
}

.post_content .hetero-doc .kdoc-steps li::before {
	counter-increment: kstep;
	content: counter(kstep, decimal-leading-zero);
	position: absolute;
	left: 1.25rem;
	top: 1.15rem;
	font-family: var(--swl-font_family-en-ja);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--k-blue);
}

.post_content .hetero-doc .kdoc-steps li b {
	display: block;
	margin-bottom: 0.25em;
	color: var(--k-navy);
	letter-spacing: 0.04em;
}

/* 表：紺のヘッダー＋水色ストライプ */
.post_content .hetero-doc .wp-block-table thead th {
	background: linear-gradient(100deg, var(--k-navy), var(--k-blue));
	border-color: rgba(255, 255, 255, 0.22);
}

.post_content .hetero-doc .wp-block-table th,
.post_content .hetero-doc .wp-block-table td {
	border-color: var(--k-line);
}

.post_content .hetero-doc .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
	background: var(--k-mist);
}

.post_content .hetero-doc .wp-block-table figcaption {
	color: #5d6f81;
}

/* コード */
.post_content .hetero-doc .wp-block-code {
	border-left: 4px solid var(--k-navy);
}

/* チェックリスト */
.post_content .hetero-doc .is-style-check_list li::before {
	color: var(--k-blue);
}

@media not all and (min-width: 900px) {
	.hetero-doc .kdoc-layers,
	.hetero-doc .kdoc-layers.-four {
		grid-template-columns: 1fr;
	}
}

@media not all and (min-width: 600px) {
	.hetero-doc .kdoc-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.hetero-doc .kdoc-hero {
		padding: 1.5rem 1.4rem;
	}

	.post_content .hetero-doc h2 {
		font-size: 1.08rem;
		padding: 0.65em 0.9em;
	}
}


/* 記事内の表：列が多くても潰さず、狭い画面では横スクロール */
.post_content .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.post_content .wp-block-table table {
	width: max-content;
	min-width: 100%;
	border-collapse: collapse;
}

.post_content .wp-block-table th,
.post_content .wp-block-table td {
	white-space: nowrap;
	padding: 0.6em 1em;
	font-size: 0.88rem;
	border: 1px solid #e3e3e3;
}

.post_content .wp-block-table thead th {
	background: #111;
	color: #fdfdfd;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	line-height: 1.6;
	white-space: normal;
	vertical-align: bottom;
}

.post_content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
	background: #f7f7f7;
}

.post_content .wp-block-table figcaption {
	white-space: normal;
	margin-top: 0.8em;
	font-size: 0.78rem;
	line-height: 1.9;
	color: #777;
}


/* お仕事依頼ページ：サービスカードと FAQ */
.hetero-svc {
	height: 100%;
	padding: 2.4rem 2.2rem;
	background: #fff;
	border: 1px solid #e3e3e3;
}

.hetero-svc .__tag {
	display: block;
	font-family: var(--swl-font_family-en-ja);
	font-size: 0.68rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #9a9a9a;
	margin-bottom: 0.9em;
}

.hetero-svc h3 {
	margin: 0 0 0.8em;
	padding: 0;
	font-size: 1.15rem;
	letter-spacing: 0.06em;
	border: none;
	background: transparent;
}

.hetero-svc p {
	font-size: 0.92rem;
	line-height: 2;
}

.hetero-svc .__note {
	margin-top: 1.2em;
	font-size: 0.8rem;
	color: #777;
}

.hetero-faq dl {
	margin: 0;
}

.hetero-faq dt {
	position: relative;
	padding: 1.2em 0 0 2.2em;
	font-weight: 700;
	letter-spacing: 0.04em;
	border-top: 1px solid #e3e3e3;
}

.hetero-faq dt::before {
	content: "Q.";
	position: absolute;
	left: 0;
	font-family: var(--swl-font_family-en-ja);
	color: #111;
}

.hetero-faq dd {
	position: relative;
	margin: 0.6em 0 1.4em;
	padding-left: 2.2em;
	line-height: 2;
	color: #444;
}

.hetero-faq dd::before {
	content: "A.";
	position: absolute;
	left: 0;
	font-family: var(--swl-font_family-en-ja);
	color: #9a9a9a;
}


/* =====================================================
   13. サブページ・フッター・その他
   ===================================================== */
/* サブページのタイトルエリア（画像背景時に薄く暗くする） */
.l-topTitleArea.c-filterLayer::before {
	background-color: #000;
	opacity: 0.2;
	content: "";
}

/* ページネーション：モノトーンのボックス型 */
[class*="page-numbers"] {
	color: #111;
	background-color: #fff;
	border: 1px solid #111;
	border-radius: 0;
	box-shadow: none;
	transition: background-color 0.25s, color 0.25s;
}

.page-numbers.current {
	color: #fff;
	background-color: #111;
}

a[class*="page-numbers"]:hover {
	color: #fff;
	background-color: #111;
}

/* キーボード操作時のフォーカスリング */
:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

/* ページトップへ戻るボタン */
#pagetop {
	border-radius: 50%;
}

/* 固定ページ（About・Contact 等）は 1 カラムに */
.page #sidebar {
	display: none;
}

/* 翻訳ページ（日本語以外）では日本語のサイドバーを出さない */
html:not([lang^="ja"]) #sidebar {
	display: none;
}

html:not([lang^="ja"]) .l-mainContent {
	width: 100% !important;
	max-width: 100%;
}

.page .l-mainContent {
	width: 100% !important;
	max-width: 100%;
}

/* サイドバー内のリンクはテキスト色に合わせる */
#sidebar a {
	color: inherit;
}

/* サイドバー・フッターのウィジェットタイトル */
.c-widget__title.-side,
.c-widget__title.-footer {
	position: relative;
	padding: 0.5em;
}

.c-widget__title.-side::before,
.c-widget__title.-footer::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 40%;
	height: 2px;
	z-index: 1;
	background: var(--color_main);
}

.c-widget__title.-side::after,
.c-widget__title.-footer::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--color_border);
}

/* =====================================================
   動的システム（Dynamic Systems）
   ===================================================== */
/* 07 Contact リビール：固定レイヤーと、その上を滑る本文カーテン */
#hetero_reveal {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
}

#hetero_reveal .l-section {
	padding: 2.4rem 0 1.2rem;
	width: min(1160px, 90vw);
	margin-left: auto;
	margin-right: auto;
}

#hetero_reveal .l-footer {
	padding-top: 0.5rem;
}

/* フォーム込みで常にコンパクトに（大画面でも確実に1画面へ収める） */
#hetero_reveal .l-section .is-style-section_ttl.-en {
	font-size: clamp(2.8rem, 6.5vw, 4.2rem);
}

#hetero_reveal .wpcf7-form textarea {
	height: 96px;
}

#hetero_reveal .l-footer::before {
	font-size: clamp(2.8rem, 7vw, 5.6rem);
}

/* リビール内フォーム込みでも画面内に収める・はみ出す場合は内部スクロール */
#hetero_reveal {
	max-height: 100vh;
	overflow-y: auto;
}

/* お問い合わせフォーム（CF7）：モノクロ・エディトリアル */
.wpcf7-form label {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	color: #555;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	width: 100%;
	margin-top: 0.35em;
	padding: 0.65em 0.9em;
	font: inherit;
	font-size: 0.92rem;
	color: #111;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 0;
	box-shadow: none;
	transition: border-color 0.25s ease;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	border-color: #111;
	outline: none;
}

.wpcf7-form textarea {
	height: 130px;
	resize: vertical;
}

.wpcf7-form input[type="submit"] {
	display: inline-block;
	padding: 0.75em 3.2em;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: #fff;
	background: #111;
	border: 1px solid #111;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
	background: #fff;
	color: #111;
}

/* フロントの Contact セクション：2カラムのコンパクト配置 */
.l-section.__contact .wpcf7 {
	max-width: 760px;
}

.l-section.__contact .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.6rem;
	align-items: start;
}

.l-section.__contact .wpcf7-form > p {
	margin: 0;
}

.l-section.__contact .wpcf7-form > fieldset.hidden-fields-container {
	display: none;
}

.l-section.__contact .wpcf7-form > p:has([data-name="your-subject"]),
.l-section.__contact .wpcf7-form > p:has(.wpcf7-textarea),
.l-section.__contact .wpcf7-form > p:has(.wpcf7-submit),
.l-section.__contact .wpcf7-form > .wpcf7-response-output {
	grid-column: 1 / -1;
}

.l-section.__contact .wpcf7-response-output {
	margin: 0.4em 0 0;
	padding: 0.5em 1em;
	font-size: 0.85rem;
}

@media not all and (min-width: 600px) {
	.l-section.__contact .wpcf7-form {
		grid-template-columns: 1fr;
		gap: 0.9rem;
	}
}

/* 低い画面ではさらに圧縮して必ず収める */
@media (max-height: 820px) {
	#hetero_reveal .l-section {
		padding: 2rem 0 1rem;
	}

	#hetero_reveal .l-section .is-style-section_ttl.-en {
		font-size: clamp(2.6rem, 6vw, 3.6rem);
	}

	#hetero_reveal .l-footer::before {
		font-size: clamp(2.8rem, 6.5vw, 5rem);
	}

	#hetero_reveal .l-footer {
		padding-top: 0.5rem;
	}

	#hetero_reveal .wpcf7-form textarea {
		height: 92px;
	}

	#hetero_reveal .wpcf7-form input[type="submit"] {
		padding: 0.6em 2.6em;
	}
}

@media (max-height: 740px) {
	#hetero_reveal .hetero-contactlead {
		display: none;
	}

	#hetero_reveal .l-section {
		padding: 1.4rem 0 0.7rem;
	}

	#hetero_reveal .l-section .is-style-section_ttl.-en {
		font-size: 2.3rem;
		margin-bottom: 0.8rem;
	}

	#hetero_reveal .wpcf7-form {
		gap: 0.7rem 1.4rem;
	}

	#hetero_reveal .wpcf7-form textarea {
		height: 68px;
	}

	#hetero_reveal .wpcf7-form input[type="text"],
	#hetero_reveal .wpcf7-form input[type="email"] {
		padding: 0.5em 0.8em;
	}
}

@media (max-height: 640px) {
	#hetero_reveal .l-section .is-style-section_ttl.-en .mininote,
	#hetero_reveal .l-section .is-style-section_ttl.-en small {
		display: none;
	}

	#hetero_reveal .wpcf7-form textarea {
		height: 54px;
	}

	#hetero_reveal .l-footer::before {
		display: none;
	}

	#hetero_reveal .l-footer {
		padding-top: 0;
	}
}

.top #content {
	position: relative;
	z-index: 1;
	background: #fdfdfd;
	box-shadow: 0 26px 44px -18px rgba(17, 17, 17, 0.14);
}


/* 01 カスタムカーソル（ブランドドット） */
.hetero-cursor-dot,
.hetero-cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 99990;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.3s;
}

.hetero-cursor-dot {
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: #111;
}

.hetero-cursor-ring {
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 1px solid rgba(17, 17, 17, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--swl-font_family-en-ja);
	font-size: 10px;
	letter-spacing: 0.18em;
	color: #fff;
	transition: opacity 0.3s, width 0.35s cubic-bezier(0.22, 1, 0.36, 1), height 0.35s cubic-bezier(0.22, 1, 0.36, 1), margin 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s, border-color 0.3s;
}

.hetero-cursor-ring .__lbl {
	opacity: 0;
	font-weight: 700;
	transition: opacity 0.2s;
}

html.cursor-on .hetero-cursor-dot,
html.cursor-on .hetero-cursor-ring {
	opacity: 1;
}

html.cur-link .hetero-cursor-ring {
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	background: rgba(17, 17, 17, 0.06);
}

html.cur-card .hetero-cursor-ring {
	width: 74px;
	height: 74px;
	margin: -37px 0 0 -37px;
	background: #111;
	border-color: #111;
}

html.cur-card .hetero-cursor-ring .__lbl {
	opacity: 1;
}

html.cur-card .hetero-cursor-dot {
	opacity: 0;
}

/* 05 ヒーローのクリック波紋 */
.hetero-click-ring {
	position: absolute;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 1px solid rgba(17, 17, 17, 0.5);
	border-radius: 50%;
	pointer-events: none;
	z-index: 4;
	animation: hetero-click 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes hetero-click {
	to { transform: scale(30); opacity: 0; }
}

/* 06 ライブチャートの鼓動リング */
.hetero-pulse {
	fill: none;
	stroke: rgba(17, 17, 17, 0.4);
	stroke-width: 1.5;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.hetero-chartAnim.-live .hetero-pulse {
	animation: hetero-pulse 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.hetero-chartAnim.-live .hetero-pulse.-b {
	animation-delay: 1.2s;
}

@keyframes hetero-pulse {
	0% { opacity: 0.9; transform: scale(1); }
	70%, 100% { opacity: 0; transform: scale(4.6); }
}

@media (prefers-reduced-motion: reduce) {
	.hetero-cursor-dot,
	.hetero-cursor-ring,
	.hetero-click-ring {
		display: none;
	}

	.hetero-chartAnim.-live .hetero-pulse {
		animation: none;
	}
}

/* ページ間遷移のクロスフェード（対応ブラウザのみ・未対応は従来通り） */
@view-transition {
	navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.25s;
}

/* 記事の読了プログレスバー（main.js が .single で生成） */
.hetero-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 3px;
	background: #111;
	z-index: 10000;
	pointer-events: none;
}

/* テキスト選択もブランドカラー */
::selection {
	background: #111;
	color: #fdfdfd;
}

/* カードホバー：写真は動かさず、影の深さだけで応答 */

.p-postList__thumb {
	transition: box-shadow 0.45s ease;
}

.p-postList__link:hover .p-postList__thumb {
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.13), 0 4px 8px rgba(0, 0, 0, 0.06);
}

@media (prefers-reduced-motion: reduce) {
	.p-postList__item,
	.p-postList__item:hover {
		transform: none;
		transition: none;
	}
}

/* フッター：ライト基調・巨大アウトラインのブランドマーク */
.l-footer {
	background-color: var(--color_footer_bg);
	color: var(--color_footer_text);
	position: relative;
	padding-top: 3rem;
}

.l-footer::before {
	content: "Heterodoxxy.";
	display: block;
	text-align: center;
	font-family: var(--swl-font_family-en-ja);
	font-weight: 700;
	font-size: clamp(4rem, 10vw, 8.5rem);
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: transparent;
	-webkit-text-stroke: 1px #dcdcdc;
	pointer-events: none;
}

.l-footer .copyright {
	font-size: 12px;
	text-align: center;
	letter-spacing: 0.15em;
}

@media (min-width: 600px) {
	.l-footer__nav a {
		border-right: 1px solid;
		font-size: 13px;
		padding: 0 0.75em;
	}

	.l-footer__nav li:first-child a {
		border-left: 1px solid;
	}
}

/* ============================================================
   Heterodoxxy : サイト全体を黒基調・ゴージャスに上書き
   （Sil-port由来のライト基調を全ページでダーク化）
   ============================================================ */
:root{
	--hx-ink:#0a0a0a; --hx-paper:#f3efe6; --hx-mute:#a49e93;
	--hx-gold:#c7a659; --hx-gold2:#e7d3a1; --hx-line:rgba(199,166,89,.28);
	--hx-serif:"Cormorant Garamond","Didot","Bodoni MT",serif;
	--hx-mincho:"Zen Old Mincho","Shippori Mincho","Hiragino Mincho ProN",serif;
}
html, body { background:#0a0a0a; }
body, #body_wrap { background:#0a0a0a; color:#d9d3c7; }
/* ヘッダー（通常・追従とも黒／文字は明色） */
.l-header, .l-fixHeader, .l-header__bar, .l-header__barInner,
.l-fixHeader__inner, .l-header__inner{ background:#0a0a0a !important; }
.l-header a, .l-fixHeader a, .l-header__logo a, .l-fixHeader__logo a,
.l-header__logo, .c-gnav a, .c-gnavWrap a, .p-menuText,
.l-header .c-headLogo, .l-header .c-headLogo a{ color:#f3efe6 !important; }
.l-header__menuBtn, .l-fixHeader .c-gnavExpansion, .c-menuBtn__bars,
.c-menuBtn__bars::before, .c-menuBtn__bars::after{ color:#f3efe6 !important; background-color:#f3efe6; }
/* ページタイトル */
.c-pageTitle, .c-pageTitle__inner{ background:#0a0a0a; }
.c-pageTitle__ttl, .c-pageTitle__ttl *, .c-pageTitle *{ color:#f3efe6 !important; }
.c-pageTitle__subTtl{ color:var(--hx-gold2) !important; }
/* 本文エリア */
.l-mainContent, .l-content, .l-article, .p-articleBody, .post_content,
.l-mainArea, .l-sectionWrap{ background:transparent; color:#d9d3c7; }
.post_content h1,.post_content h2,.post_content h3,.post_content h4{ color:#f3efe6; }
.post_content a{ color:var(--hx-gold2); }
/* 投稿カード（ダーク） */
.p-postList__title{ color:#f3efe6 !important; }
.c-postThumb__cat{ background:var(--hx-gold) !important; color:#000 !important; }
.c-postTimes, .c-postTimes *{ color:var(--hx-mute) !important; }
/* フッター */
.l-footer, .l-footer__foot, .l-footer__inner, .l-footer__foot .l-container{ background:#0a0a0a !important; color:var(--hx-mute) !important; }
.l-footer a{ color:#f3efe6 !important; }
.l-footer a:hover{ color:var(--hx-gold2) !important; }
::selection{ background:var(--hx-gold); color:#000; }

/* ============================================================
   Heterodoxxy : 固定ページ共通コンポーネント（黒×ゴージャス）
   ============================================================ */
.hx-page{ font-family:var(--hx-serif),serif; }
.hx-page .hx-eyebrow{ font-family:"Jost",sans-serif; font-size:.72rem; letter-spacing:.42em; text-transform:uppercase; color:var(--hx-gold2); margin:0 0 1.6em; display:flex; align-items:center; gap:14px; }
.hx-page .hx-eyebrow::before{ content:""; width:44px; height:1px; background:var(--hx-gold); }
.hx-page .hx-lead{ font-family:var(--hx-mincho); font-size:clamp(1.2rem,2.2vw,1.8rem); line-height:2.1; letter-spacing:.08em; color:#ece7dc; margin:0 0 1.2em; }
.hx-page .hx-body{ font-family:"Jost","Hiragino Kaku Gothic ProN",sans-serif; font-size:1rem; line-height:2.15; letter-spacing:.05em; color:#b9b3a7; margin:0 0 1.6em; }
.hx-social{ display:flex; gap:26px; font-family:"Jost",sans-serif; font-size:.74rem; letter-spacing:.24em; }
.hx-social a{ color:var(--hx-mute) !important; } .hx-social a:hover{ color:var(--hx-gold2) !important; }
/* About */
.hx-about__grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(30px,6vw,80px); align-items:center; }
.hx-about__portrait{ aspect-ratio:3/4; background-size:cover; background-position:center 15%; filter:grayscale(.28) contrast(1.03); border:1px solid var(--hx-line); }
.hx-facts{ margin:2em 0; border-top:1px solid var(--hx-line); }
.hx-facts > div{ display:grid; grid-template-columns:120px 1fr; gap:16px; padding:14px 0; border-bottom:1px solid var(--hx-line); }
.hx-facts dt{ font-family:"Jost",sans-serif; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--hx-gold); margin:0; }
.hx-facts dd{ margin:0; font-size:.95rem; color:#d9d3c7; font-family:"Jost","Hiragino Kaku Gothic ProN",sans-serif; }
.hx-facts dd a{ color:var(--hx-gold2) !important; }
/* Works gallery */
.hx-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.hx-gallery__item{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#0d0c0b; }
.hx-gallery__item .bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter:grayscale(.4) brightness(.72); transition:transform .9s ease, filter .9s ease; }
.hx-gallery__item:hover .bg{ transform:scale(1.07); filter:grayscale(0) brightness(.85); }
.hx-gallery__item figcaption{ position:absolute; left:20px; bottom:18px; z-index:2; font-family:var(--hx-serif); font-style:italic; font-size:1.3rem; color:var(--hx-paper); }
.hx-gallery__item figcaption span{ display:block; font-family:"Jost",sans-serif; font-style:normal; font-size:.6rem; letter-spacing:.3em; color:var(--hx-gold); }
/* Contact / CF7 dark */
.hx-contact-lead{ font-family:var(--hx-mincho); letter-spacing:.12em; color:#cfc9bd; line-height:2.1; margin:0 0 2.4em; }
.wpcf7{ max-width:640px; }
.wpcf7 label{ display:block; font-family:"Jost",sans-serif; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--hx-gold2); margin:0 0 8px; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea{
	width:100%; background:#131211; border:1px solid var(--hx-line); color:#f3efe6; padding:14px 16px; margin-bottom:22px; font-family:"Jost","Hiragino Kaku Gothic ProN",sans-serif; letter-spacing:.04em; }
.wpcf7 input:focus, .wpcf7 textarea:focus{ outline:none; border-color:var(--hx-gold); }
.wpcf7 input[type=submit]{ background:transparent; border:1px solid var(--hx-gold); color:var(--hx-gold2); padding:16px 50px; letter-spacing:.3em; text-transform:uppercase; font-size:.76rem; cursor:pointer; transition:.4s; }
.wpcf7 input[type=submit]:hover{ background:var(--hx-gold); color:#000; }
@media(max-width:900px){ .hx-about__grid{ grid-template-columns:1fr; } .hx-about__portrait{ max-width:320px; } .hx-gallery{ grid-template-columns:1fr 1fr; } }

/* SP用ヘッダーメニューがPCで見えてしまう不具合の抑止 */
@media (min-width:960px){ .p-spHeadMenu{ display:none !important; } }

/* ファンクラブ注記（フッター最下部） */
.hx-fan-note{ background:#080807; color:#8b857a; text-align:center; font-size:.74rem; line-height:1.9; letter-spacing:.1em; padding:26px 22px; border-top:1px solid rgba(199,166,89,.20); font-family:"Jost","Hiragino Kaku Gothic ProN",sans-serif; }
.hx-fan-note a{ color:var(--hx-gold2) !important; }
.hx-fan-note .__en{ display:block; margin-top:6px; font-size:.62rem; letter-spacing:.22em; color:#6f6a61; text-transform:uppercase; }

/* Instagram ギャラリー（全ページ共通：Worksページでも使用） */
.ht-ig__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; margin-top:8px; }
.ht-ig__grid .instagram-media{ min-width:0 !important; width:100% !important; }
.ht-ig__foot{ text-align:center; margin-top:46px; }
.ht-btn{ display:inline-block; padding:16px 50px; border:1px solid var(--hx-gold); color:var(--hx-gold2) !important;
	font-family:"Jost",sans-serif; font-size:.76rem; letter-spacing:.3em; text-transform:uppercase; transition:.4s; }
.ht-btn:hover{ background:var(--hx-gold); color:#000 !important; }
@media(max-width:900px){ .ht-ig__grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .ht-ig__grid{ grid-template-columns:1fr; } }

/* IG統計（ヒーロー等） */
.ht-stats{ display:flex; gap:clamp(30px,5vw,56px); margin-top:clamp(26px,4vw,42px); }
.ht-stats__item{ display:flex; flex-direction:column; }
.ht-stats__item .n{ font-family:var(--hx-serif); font-style:italic; font-size:clamp(1.7rem,3.2vw,2.7rem); color:var(--hx-paper); line-height:1; }
.ht-stats__item .l{ font-family:"Jost",sans-serif; font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--hx-gold2); margin-top:9px; }

/* ============================================================
   聴診器カーソル（PCのみ・全ページ）／旧カーソルは無効化
   ============================================================ */
@media (hover:hover) and (pointer:fine){
	*{ cursor: url("https://heterodoxxy.site/wp-content/uploads/heterodoxxy/cursor/steth.png") 8 5, auto !important; }
	input[type=text], input[type=email], input[type=tel], input[type=url], input[type=search], textarea{ cursor: text !important; }
	.hetero-cursor-dot, .hetero-cursor-ring{ display:none !important; }
}

/* ============================================================
   端々の白を消す（SWELL既定の明るい背景/パンくずを上書き）
   ============================================================ */
.l-content, .l-content.l-container, .l-container.l-content,
.l-mainArea, .l-mainContent, main.l-mainContent,
.p-articleBody, .post_content{ background:#0a0a0a !important; }
.p-breadcrumb, .p-breadcrumb.-bg-on, .c-breadcrumb{ background:transparent !important; border:0 !important; }
.p-breadcrumb, .p-breadcrumb a, .p-breadcrumb span, .p-breadcrumb li, .c-breadcrumb, .c-breadcrumb a{ color:#9c968b !important; }
.p-breadcrumb a:hover, .c-breadcrumb a:hover{ color:var(--hx-gold2) !important; }
/* ドロワー/検索フォームの白 */
.c-searchForm__s, .c-drawer input[type=text], .p-drawer input[type=text], .c-gnavMenu__search input{ background:#131211 !important; color:#f3efe6 !important; border:1px solid var(--hx-line) !important; }
/* 記事下の白ブロック等の保険 */
.l-articleSide, .c-postList__item, .p-postList__item{ background:transparent !important; }

/* ============================================================
   モバイル ドロワーメニュー（.p-spMenu）をダーク化
   ============================================================ */
.p-spMenu, .p-spMenu__inner, .p-spMenu__body, .p-spMenu__nav, .p-spMenu__foot{ background:#0a0a0a !important; }
.p-spMenu a, .p-spMenu li, .p-spMenu .c-spnav a, .p-spMenu .c-listMenu a, .p-spMenu span{ color:#f3efe6 !important; }
.p-spMenu .c-spnav > li, .p-spMenu .c-listMenu > li, .p-spMenu .c-spnav li{ border-color:rgba(199,166,90,.22) !important; }
.p-spMenu .c-spnav a::before, .p-spMenu .c-listMenu a::before{ border-color:var(--hx-gold) !important; color:var(--hx-gold) !important; }
.p-spMenu svg, .p-spMenu path{ fill:#f3efe6 !important; stroke:#f3efe6 !important; }
.p-spMenu__title, .c-spnav__ttl, .p-spMenu .c-listMenu__ttl{ background:#000 !important; color:#f3efe6 !important; border-color:rgba(199,166,90,.3) !important; }
/* 閉じるボタン・ヘッダーアイコンを明色に */
.p-spMenu [class*="close"], .c-drawerClose, .p-drawer__close, .c-iconBtn.-closeBtn{ color:#f3efe6 !important; }
.p-spMenu [class*="close"] svg, .c-drawerClose svg{ fill:#f3efe6 !important; }

/* ドロワー/追従ヘッダーの背景を描く擬似要素(::before #fdfdfd)をダークに */
.p-spMenu__inner::before, #sp_menu .p-spMenu__inner::before{ background:#0a0a0a !important; }
.l-fixHeader::before, #body_wrap .l-fixHeader::before{ background:#0a0a0a !important; }