/* =========================================================================
   AI CREATOR PORTFOLIO — theme.css
   構造スタイル。色・タイポ・余白の slug は theme.json が正。ここは構造補完。
   design.md（Figma 現物の確定値）に準拠。breakpoint の正は theme.json settings.custom
   （md=768px / lg=1024px）。@media はこの値を人手で参照しコメント併記する。
   ========================================================================= */

:root {
	/* design.md 4章: 角丸・最大幅をCSS変数化（theme.json custom と二重持ちだが @media/算術用）。
	   角丸: ボタン=pill／画像・小パネル=16px（Apple イメージ・2026-07-27）／大パネル=矩形。 */
	--acp-radius-pill: 100px;
	--acp-radius-card: 12px;
	--acp-radius-field: 8px;
	--acp-radius-panel: 0px;
	--acp-max-site: 1200px;
	--acp-max-article: 768px;
	--acp-max-process: 900px;
	--acp-header-h: 72px;
	/* ハウスイージング。base=主体 / soft=穏やか。オーバーシュート系は Swiss v3 で廃止。
	   theme.json settings.custom.easing と二重持ち（transition/animation の算術用）。 */
	--acp-ease: cubic-bezier(0.4, 0.1, 0.3, 1);
	--acp-ease-soft: cubic-bezier(0.1, 0.2, 0.3, 1);
}

/* ---- base ---------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--base);
}

/* 横オーバーフローの保険（想定外のはみ出しへの最終防御）。
   overflow-x:hidden は overflow-y:auto を誘発し body をスクロールコンテナ化するため、
   position:sticky なヘッダーが固定されなくなる。clip はスクロールコンテナを作らず
   sticky を壊さないので、こちらを使う（Chrome 90+/Safari 16+。未対応環境は素通し）。 */
html,
body {
	overflow-x: clip;
}

/* 見出しは英字 Space Grotesk（テック系グロテスク・Google Fonts）先頭＋和文 IBM Plex Sans JP
   のスタック（design.md 2章 / Kitsune v4）。丸ゴ路線（Nunito＋M PLUS Rounded）は
   「可愛すぎ・IT っぽさが欲しい」の判定で廃止（2026-08-22）。丸さの担当はロゴのみ。
   未読込時は Outfit → Helvetica 系に自然フォールバック。tracking は要所で個別指定。
   Space Grotesk は見出し・ロゴ・大きい数字まで。小英字ラベル（カテゴリ・日付・kicker）や
   本文・UI は IBM Plex Sans JP。 */
h1, h2, h3, h4, h5, h6,
.acp-title,
.acp-logo,
.acp-filter-bar__total-num,
.acp-work-detail .acp-wd-process__num,
.acp-work-detail .acp-wd-metric__value,
.acp-flow__num {
	font-family: 'Space Grotesk', 'Outfit', 'Helvetica Neue', 'YakuHanJP', 'IBM Plex Sans JP', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic Medium', 'YuGothic', Arial, sans-serif;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* =========================================================================
   二言語見出し（EN 大 Helvetica ＋ JP 小サブ）。全ページ共通見出し様式（Swiss v3）。
   __en がリベールのマスク器（overflow:hidden）、__mask が動く実体。
   __ja は省略可（kicker が別にある場合）。マスクの初期非表示・出現は Phase 5 のアニメ CSS。
   ========================================================================= */
.acp-bi {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	/* Swiss v3: Helvetica は Jost ほど詰めない（-0.035em → -0.02em） */
	letter-spacing: -0.02em;
}
/* Kitsune v4 モチーフ A: 漸減 3 ドット。ロゴの「走った跡」を見出しマーカーに語彙化
   （v3 で廃止した kicker の穴を埋める）。radial-gradient 3 枚で r=3/2.25/1.75px を描く。 */
.acp-bi::before {
	content: "";
	display: block;
	width: 30px;
	height: 8px;
	margin-bottom: 4px;
	background-image:
		radial-gradient(circle 3px at 3px 4px, var(--wp--preset--color--accent) 98%, transparent),
		radial-gradient(circle 2.25px at 14px 4px, var(--wp--preset--color--accent) 98%, transparent),
		radial-gradient(circle 1.75px at 24px 4px, var(--wp--preset--color--accent) 98%, transparent);
	background-repeat: no-repeat;
}
.acp-bi__en {
	display: block;
	overflow: hidden;
	font-family: 'Space Grotesk', 'Outfit', 'Helvetica Neue', Arial, 'IBM Plex Sans JP', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
	font-weight: 700;
	line-height: 0.95;
	color: var(--wp--preset--color--ink);
}
/* 見出し階層（2026-08-25）: ページ見出し（h1.acp-page-hero__title）は 64px を維持し、
   セクション見出し（h2.acp-bi）は一段下げる。従来は両方 fontSize:section で同寸だったため
   上下関係が読めなかった。Works/News/Contact など全ページで共通に効く。 */
h2.acp-bi .acp-bi__en {
	font-size: clamp(28px, 3.6vw, 44px);
}

.acp-bi__mask {
	display: inline-block;
	will-change: transform;
}
.acp-bi__ja {
	display: block;
	font-family: 'YakuHanJP', 'IBM Plex Sans JP', 'Noto Sans JP', 'Hiragino Sans', sans-serif;
	font-size: var(--wp--preset--font-size--sub);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text);
}

/* kicker（小英字ラベル）は Swiss v3 で廃止（design.md 4章）。 */

/* .pf-unconstrained（constrained を打ち消して全幅化する器）は未使用のため削除
   （2026-07-27）。版面はページ全体で 1200px に統一し、hero も例外にしない。 */

/* ---- pill / button ------------------------------------------------------- */

.acp-btn,
.wp-block-button.acp-btn > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--ui);
	line-height: 1;
	padding: 12px 32px;
	border-radius: var(--acp-radius-pill);
	text-decoration: none;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* 塗り（Kitsune v4: ブランドオレンジ地 × 黒文字）。
   白文字はコントラスト 3.4:1 で本文基準に届かないため不採用（黒文字 = 5.2:1 / AA）。 */
.acp-btn--fill,
.wp-block-button.acp-btn--fill > .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}
.acp-btn--fill:hover,
.wp-block-button.acp-btn--fill > .wp-block-button__link:hover {
	filter: brightness(0.94);
}

/* 線（outline） */
.acp-btn--outline,
.wp-block-button.acp-btn--outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--ink);
}

/* コアの wp-block-button 既定（背景・余白）をリセットして二重枠を防ぐ。
   .acp-btn は外側 .wp-block-button に付くため、装飾は内側リンクに集約する。
   padding:0 は必須 — .acp-btn の padding(12/32) がラッパー自身にも当たり、
   pill が左に 32px ずれて見える（TOP の VIEW ALL WORKS 字下がりの原因）。 */
.wp-block-button.acp-btn {
	background: transparent;
	padding: 0;
}
.wp-block-button.acp-btn > .wp-block-button__link {
	margin: 0;
}
/* Works一覧へのボタンは左寄せ（H方針・旧 center） */
.acp-works__more {
	justify-content: flex-start;
}

.acp-btn:hover,
.wp-block-button.acp-btn > .wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* テキストリンク（VIEW ALL WORKS / VIEW ALL NEWS / ABOUT ME 共通）。
   Swiss v3 のリンク作法: 色は変えない。ホバーで下線が左→右にスライドイン。
   矢印は機能的な方向表示として残す（右へ小さく動く）。 */
.acp-textlink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding-bottom: 4px;
	position: relative;
}
/* 下線（疑似要素・初期は幅0、ホバーで左→右へ伸びる） */
.acp-textlink::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s var(--acp-ease);
}
.acp-textlink:hover::after {
	transform: scaleX(1);
}
.acp-textlink__arrow {
	display: inline-block;
	transition: transform 0.3s ease;
	font-weight: 400;
}
.acp-textlink:hover .acp-textlink__arrow {
	transform: translateX(4px);
}

/* 下線スライドイン（インラインテキスト用の共通ユーティリティ）。
   カードタイトル・News タイトル等、ブロックでない文中リンクに使う。
   background を行フラグメントごとに敷くため、折り返し行にもそれぞれ下線が付く。 */
.acp-hoverline {
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 1px;
	transition: background-size 0.45s var(--acp-ease);
}
.acp-hoverline:hover,
a:hover > .acp-hoverline {
	background-size: 100% 1px;
}
@media (prefers-reduced-motion: reduce) {
	.acp-hoverline {
		transition: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.acp-textlink::after,
	.acp-textlink__arrow {
		transition: none;
	}
}

/* タグ / カテゴリ（Kitsune v4: pill。ロゴの丸端と呼応させる） */
.acp-pill {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 4px 14px;
	border-radius: var(--acp-radius-pill);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
	background: transparent;
	white-space: nowrap;
}

/* ---- card / image -------------------------------------------------------- */

.acp-card-img,
.acp-card-img img {
	border-radius: var(--acp-radius-card);
	display: block;
}

/* 画像ホバーで微拡大（design.md 4章・reveal は app.js + .acp-reveal） */
.acp-hover-zoom {
	overflow: hidden;
	border-radius: var(--acp-radius-card);
}
.acp-hover-zoom img {
	transition: transform 1s var(--acp-ease);
}
/* ホバー拡大は .acp-work-card:hover .acp-hover-zoom img（カード単位）に集約。
   サムネ直ホバーの旧ルールと JS リンク化(is-linked)は stretched-link 化で廃止。 */

/* ---- カードのホバースライドショー ----------------------------------------
   functions.php acp_card_slideshow() がアイキャッチ（1枚目）に本文画像（最大3枚）を
   .acp-card-slide として重ねて出力。app.js initCardSlides() がカード hover 中に
   0.9s 間隔で切替（クロスフェード）。JS 無効・touch 端末・reduce ではアイキャッチのみ。 */
.acp-work-card .wp-block-post-featured-image {
	position: relative;
}
.acp-card-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.5s var(--acp-ease);
	pointer-events: none;
}
.acp-card-slide.is-active {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.acp-card-slide {
		transition: none;
	}
}

/* ---- reveal（スクロール連動フェードイン・IntersectionObserver） ----------
   安全パターン: CSS のデフォルトは「見える」状態。JS が動いた時だけ
   （html.acp-js が付いた時だけ）初期非表示にする。これにより JS 無効・
   IO 未発火・古い環境でも「消えたまま」にならない（過去事故の再発防止）。
   app.js が画面内に入った要素へ .is-visible を付与（一度だけ）。 */
.acp-js .acp-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}
.acp-js .acp-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	/* 演出を無効化し即表示（JS有効でも初期から見える） */
	.acp-js .acp-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.acp-hover-zoom img {
		transition: none;
	}
}

/* =========================================================================
   アニメーション（文字ステッガー / マスクリベール）— Swiss v3
   抑制されたモーションのみ（オーバーシュート・ドット pop は廃止）。
   すべて .acp-js ゲート配下。JS が該当クラス（.is-split / .is-in）を付けた後だけ
   初期非表示が効くので、JS 無効・分割失敗・エディターでは「消えたまま」にならない。
   ========================================================================= */

/* ヒーロー文字ステッガー: JS が .is-split を付けた後のみ各文字を行下へ隠す。 */
.acp-js [data-acp-split].is-split .acp-letter {
	display: inline-block;
	transform: translate3d(0, 160%, 0);
	transition: transform 0.9s var(--acp-ease);
	will-change: transform;
}
.acp-js [data-acp-split].is-split.is-in .acp-letter {
	transform: translate3d(0, 0, 0);
}

/* 二言語見出しの EN マスクリベール: reveal（.is-visible）をトリガに下からせり上げ。
   __ja は少し遅れてフェードイン。JS 有効時のみ初期非表示。 */
.acp-js .acp-reveal .acp-bi__mask {
	transform: translateY(110%);
	transition: transform 0.9s var(--acp-ease);
}
.acp-js .acp-reveal.is-visible .acp-bi__mask {
	transform: translateY(0);
}
.acp-js .acp-reveal .acp-bi__ja {
	opacity: 0;
	transition: opacity 0.6s ease 0.25s;
}
.acp-js .acp-reveal.is-visible .acp-bi__ja {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	/* 文字・マスクを即最終状態に（演出なしで確実に見える）。 */
	.acp-js [data-acp-split].is-split .acp-letter,
	.acp-js .acp-reveal .acp-bi__mask {
		transform: none;
		transition: none;
		animation: none;
	}
	.acp-js .acp-reveal .acp-bi__ja {
		opacity: 1;
		transition: none;
	}
	.acp-header {
		transition: none;
	}
}

/* =========================================================================
   Header / ナビ / モバイルメニュー（全画面オーバーレイ）
   ========================================================================= */

/* ヘッダーを包む template-part ラッパーは高さ＝ヘッダー分しかないため、その中で
   sticky にしてもラッパーを抜けた瞬間に流れてしまう。ラッパーを display:contents で
   ボックスごと消し、sticky のスコープを .wp-site-blocks（ページ全高）へ広げる。 */
.wp-site-blocks > header.wp-block-template-part {
	display: contents;
}
.acp-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: transform 0.4s var(--acp-ease);
}
/* スクロール方向追従（app.js initHeaderScroll）。下方向で隠す・上方向で出す。
   sticky と transform は共存可（transform は sticky の配置を壊さない）。 */
.acp-header.is-hidden {
	transform: translateY(-100%);
}
/* ロゴ左 / [メニュー＋CTA] 右 の 2 分割（PC・モバイル共通のグリッド）。
   モバイルは中央のまとまりが非表示になり、ロゴ左／ハンバーガー右に収まる。 */
.acp-header__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 24px;
	max-width: var(--acp-max-site);
	margin: 0 auto;
	padding: 16px 48px;
	min-height: var(--acp-header-h);
	box-sizing: border-box;
}
/* ナビ＋CTA のまとまり（2 列目 = 右端） */
.acp-header__center {
	display: flex;
	align-items: center;
	gap: 36px;
	justify-self: end;
}
.acp-burger {
	justify-self: end;
}

/* コアの flow レイアウトは子に margin-block-start:24px を付ける（layout:default 指定の副作用）。
   これが grid/flex の行高を押し広げ、ヘッダーの高さが PC だけ高くなる等の崩れになるため、
   自前でレイアウトを組んでいるコンテナでは打ち消す。gap で間隔は担保済み。 */
.acp-header__inner > *,
.acp-header__center > *,
.acp-footer__inner > *,
.acp-cta__inner > *,
.acp-news-row > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ロゴ（Kitsune v4: シンボル accent ＋ワードマーク「ai kitsune」インク色） */
.acp-logo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 20px;
	font-weight: 700; /* シンボルの極太に合わせ 700 */
	line-height: 1;
	letter-spacing: -0.01em;
}
/* Kitsune v4: シンボル SVG（currentColor・accent）＋ワードマーク「ai kitsune」の横並び */
.acp-logo a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.acp-logo svg {
	display: block;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent);
}
@media (max-width: 767px) { /* theme.json custom.breakpoint.md 未満 */
	.acp-logo { font-size: 18px; }
	.acp-logo a { gap: 8px; }
	.acp-logo svg { width: 24px; height: 24px; }
}

/* PC ナビ */
.acp-nav {
	display: flex;
	align-items: center;
	gap: 36px;
}
.acp-nav__link {
	margin: 0;
}
.acp-nav__link a {
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	/* ::after の下線を「テキスト幅」基準にするため、a 自身を含有ブロック化。
	   inline-block にしないと a の幅が 0/行幅になり下線がテキストに合わない。 */
	position: relative;
	display: inline-block;
}
/* ホバー中のメニューのテキスト幅ぶんだけ、下線が左->右へスライドイン */
.acp-nav__link a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
}
.acp-nav__link a:hover::after {
	transform: scaleX(1);
}
/* Swiss v3: ホバーで色は変えない（下線スライドインのみ） */

/* ハンバーガー（モバイルのみ表示）。JS なしでもチェックボックスで開閉。 */
.acp-burger {
	display: none;
	width: 22px;
	height: 16px;
	position: relative;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
}
.acp-burger span {
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: var(--wp--preset--color--ink);
}
.acp-burger span:nth-child(1) { top: 0; }
.acp-burger span:nth-child(2) { top: 7px; }
.acp-burger span:nth-child(3) { top: 14px; }

/* モバイル全画面オーバーレイ
   G修正: width:100vw + padding の二重幅で 64px はみ出していた問題を、
   inset:0（= width:auto で左右0に固定）+ box-sizing:border-box で解消。
   レイアウトは「上=ロゴ+×／中=ナビ／下=CONTACT pill+©」の縦構成。 */
.acp-mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	z-index: 100;
	background: var(--wp--preset--color--base, #f6f6f6);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 24px;
	transform: translateY(-100%);
	visibility: hidden;
	overflow-y: auto;
	/* 閉じるとき: transform で上へスライドさせ、visibility はスライド完了後に hidden へ。
	   （visibility を遅延させないと即座に消え、閉じるアニメが見えない） */
	transition: transform 0.35s var(--acp-ease), visibility 0s linear 0.35s;
}
.acp-mobile-menu.is-open {
	transform: none;
	visibility: visible;
	/* 開くとき: visibility は即時 visible にして、上からのスライドインを見せる */
	transition: transform 0.35s var(--acp-ease), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
	.acp-mobile-menu,
	.acp-mobile-menu.is-open {
		transition: none;
	}
}
/* 上段: ロゴ + 閉じる */
.acp-mobile-menu__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.acp-mobile-menu__logo {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
}
.acp-mobile-menu__logo a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.acp-mobile-menu__logo svg {
	display: block;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent);
}
/* ナビ（メイン）。間延び防止のため詰める（2026-07-27 指示: 距離空きすぎ） */
.acp-mobile-menu__nav {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 8px;
}
.acp-mobile-menu__nav a {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
/* CONTACT pill（ヘッダー同様の AI グラデ塗りボタン）。
   ナビ直下に置く（旧 margin-top:auto の最下部送りは中間の空白が大きすぎるため廃止）。 */
.acp-mobile-menu__cta {
	margin-top: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 14px 36px;
	border-radius: var(--acp-radius-pill);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
/* コピーライト（最下部に固定） */
.acp-mobile-menu__copy {
	margin: auto 0 0;
	font-size: 11px;
	color: var(--wp--preset--color--text);
}
/* 閉じる（×）を明確化: 2本線の × アイコン・タップ領域 44px 確保 */
.acp-mobile-close {
	position: relative;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0;
	margin: -8px -8px 0 0;
}
.acp-mobile-close__bar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 2px;
	background: var(--wp--preset--color--ink);
}
.acp-mobile-close__bar:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.acp-mobile-close__bar:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* =========================================================================
   セクション共通
   ========================================================================= */
.acp-section__head {
	margin-bottom: 48px;
	text-align: left; /* #5: セクション見出し（kicker＋見出し）を左揃え（constrained中央寄り解消） */
}
/* #5 修正: constrained 子要素はコアCSSで max-width:768px + margin-inline:auto となり
   中央に寄る。見出し・kicker を全幅・左端に強制する（!important でコアの :where を上書き）。 */
.acp-section__head > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.acp-title.has-section-font-size {
	letter-spacing: -0.03em;
	line-height: 1;
}

/* 画像プレースホルダ（Figma のグレー面・実装時に差し替え） */
.acp-placeholder {
	background: var(--wp--preset--color--placeholder, #EAE4DC);
	border-radius: var(--acp-radius-card);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
}
.acp-placeholder--portrait {
	aspect-ratio: 4 / 5;
}
/* ---- Kitsune v4 モチーフ D: TOP ヒーローの曲線ドロー -----------------------
   ロゴの path を stroke-dasharray でドローし、跡の 3 ドットが順に現れる。
   pathLength="1"（SVG 属性）で実長非依存 → CSS 完結・JS 不要。
   ポートレート実画像が入ったらこのブロックごと差し替える前提。 */
.acp-hero-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--accent);
}
.acp-hero-mark svg {
	width: 62%;
	max-width: 330px;
	height: auto;
}
.acp-hero-mark__path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: acp-draw 1.25s var(--acp-ease-soft) 0.25s forwards;
}
.acp-hero-mark__dot {
	opacity: 0;
	transform: scale(0.4);
	transform-origin: center;
	transform-box: fill-box;
	animation: acp-dot-in 0.5s var(--acp-ease-soft) 1.3s forwards;
}
/* circle は path と別種なので nth-of-type は 1 始まり */
.acp-hero-mark__dot:nth-of-type(2) { animation-delay: 1.43s; }
.acp-hero-mark__dot:nth-of-type(3) { animation-delay: 1.56s; }
@keyframes acp-draw { to { stroke-dashoffset: 0; } }
@keyframes acp-dot-in { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
	.acp-hero-mark__path,
	.acp-hero-mark__dot {
		animation: none;
		stroke-dashoffset: 0;
		opacity: 1;
		transform: none;
	}
}
.acp-placeholder__label {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--light);
}

/* =========================================================================
   Hero (Top)
   ========================================================================= */
/* ヒーローは 1 カラム中央寄せ（2026-08-25）。従来の 2 カラム（左テキスト＋右ポートレート枠）は
   画像枠ごと廃止し、宣言（Surprise）とサブメッセージだけを中央に据える構成へ変更した。 */
.acp-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	justify-items: center;
}
.acp-hero__left {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.acp-hero__grid > .acp-hero__left,
.acp-hero__grid > .acp-hero__right {
	max-width: none;
}
.acp-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700; /* Space Grotesk の最大ウェイト */
	letter-spacing: -0.03em;
	line-height: 0.9;
	margin: 0;
}
/* 行マスク構造（文字ステッガー出現の器）。行ごとに overflow:hidden で下から出す。
   行内は折り返さない（nowrap）。overflow:hidden で下に切れるぶんを行下パディングで
   確保し、下降アニメを見切れさせない。（末尾ドットは Swiss v3 で全廃） */
.acp-hero__title .acp-line {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	padding-bottom: 0.08em;
}
.acp-hero__title .acp-line__inner {
	display: inline;
}
.acp-hero__sub {
	margin: 56px 0 0;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
/* サブメッセージ。宣言（Surprise）を受ける一行なので本文より大きく、色も ink で強く出す
   （2026-08-25 ユーザー指示）。中央寄せヒーローのため max-width は解除し行間も詰める。 */
.acp-hero__lead {
	margin: 28px 0 0;
	max-width: 24em;
	color: var(--wp--preset--color--ink);
	line-height: 1.7;
	font-size: clamp(19px, 2.4vw, 28px);
	font-weight: 500;
	letter-spacing: -0.01em;
	font-feature-settings: "palt";
}
.acp-hero__more {
	margin: 24px 0 0;
	/* wp-block-buttons の寄せを左端に固定（.acp-works__more と同じ対処） */
	justify-content: flex-start;
}
.acp-hero__more .wp-block-button {
	margin: 0;
}
/* リンク本体の見た目は .acp-textlink に集約（下線＋矢印）。ここは余白のみ。 */
.acp-hero__right {
	display: flex;
}
.acp-hero__right .acp-placeholder--portrait {
	aspect-ratio: 1 / 1;
	min-height: 0;
	height: auto;
	width: 100%;
	align-self: start;
}

/* =========================================================================
   Works grid（TOP抜粋 / 一覧で共有）
   ========================================================================= */
/* Works グリッド: CSS Grid（全カード等幅・サムネ等高で段差なし）。
   列は固定 3 列。display:none したカードは grid から抜け、後続が左詰めに流れる
   （grid-auto-flow:row dense は使わず通常フローで先頭から再配置）。 */
.acp-works__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* Swiss v3: 3列（design.md 3章 共通グリッド） */
	column-gap: 24px;
	row-gap: 48px;
	margin-bottom: 64px;
	align-items: stretch; /* 各行のカードを等高に（1枚目の飛び出し防止） */
}
/* post-template が各カードを <li> でラップする。<li> とカードを縦フローで
   グリッドセル高さいっぱいに伸ばし、行内のサムネ位置を揃える。 */
.acp-works__grid > li {
	display: flex;
	flex-direction: column;
	/* コアの blockGap が <li> に margin-top:24px を付け、Grid の row-gap と二重になり
	   1 行目だけ上にずれる（段差）。margin を打ち消し row-gap に一本化する。 */
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.acp-works__grid > li > .acp-work-card {
	flex: 1 1 auto;
}
/* アイキャッチ未設定時のプレースホルダ枠（実画像は実装時に差し替え・design.md 6章）。
   post-featured-image はアイキャッチが無いと出力されないため、サムネ枠を CSS で確保。 */
.acp-work-card .acp-hover-zoom {
	background: var(--wp--preset--color--placeholder, #EAE4DC);
	aspect-ratio: 4 / 3;
	border-radius: var(--acp-radius-card);
}
.acp-work-card .acp-hover-zoom:has(img) {
	background: transparent;
	aspect-ratio: auto;
}
.acp-work-card .wp-block-post-featured-image {
	margin: 0;
}
/* ---- C: カード全体を1つのリンクボタンに（JS カードクリック）-----------
   .acp-work-card 全体を作品詳細リンク化。クリック挙動は app.js initCardLinks()
   がカードに付与（タイトル <a> の href へ遷移）。説明文・余白も含めカードどこを
   クリックしても /works/slug/ へ。タグだけは本物の <a> なので JS が closest('a')
   で検出してスキップ＝タクソナビ（フィルタ slug 依存）を例外的に残す。
   ホバー演出（タイトル accent＋サムネ拡大）は :hover でカード単位に発火。 */
.acp-work-card {
	position: relative;
}
.acp-work-card__tag {
	margin: 12px 0 0; /* 画像との帰属を明確に（詰め・カード間 gap と差を付ける） */
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--light);
	position: relative;
	z-index: 2; /* タグ（フィルタ発動ボタン）を確実にクリックできるよう前面に */
}
/* タグのラベル。一覧では <button.acp-card-tag>（フィルタ発動）、トップ抜粋・詳細では
   <span.acp-card-tag>（表示のみ）。button のデフォルト UI を打ち消し、見た目を統一する。 */
.acp-card-tag {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-decoration: none;
	display: inline-block;
}
/* button（フィルタ発動）だけ手指カーソル＋ホバーで下線スライドイン（色は変えない）。
   span は装飾なし。 */
button.acp-card-tag {
	cursor: pointer;
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 1px;
	transition: background-size 0.45s var(--acp-ease);
}
button.acp-card-tag:hover {
	background-size: 100% 1px;
}
button.acp-card-tag:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}
.acp-work-card__title {
	margin: 8px 0 0;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.025em;
	font-feature-settings: "palt";
}
.acp-work-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 1px;
	transition: background-size 0.45s var(--acp-ease);
}
/* カード全体のクリックは app.js initCardLinks() が担当（説明文・余白も含め遷移）。
   旧 stretched-link ::after は説明文クリックを <a> 扱いにしてしまい遷移を阻むため廃止。
   タイトルの <a> は本物のリンクとして残し（キーボード/新規タブ/SEO 用）、
   それ以外の領域は JS のカードクリックでフォールバック。 */
.acp-work-card__title a:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}
/* ホバーはカード単位で発火（どこに乗ってもサムネ拡大＋タイトル下線スライドイン。
   Swiss v3: 色は変えない） */
.acp-work-card:hover .acp-work-card__title a {
	background-size: 100% 1px;
}
.acp-work-card:hover .acp-hover-zoom img {
	transform: scale(1.08);
}
.acp-work-card__desc {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.65;
	color: var(--wp--preset--color--text);
}

/* =========================================================================
   Filter Bar（Works / News 一覧）
   ========================================================================= */
.acp-filter-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 0;
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin-bottom: 48px;
}
/* News 一覧はフィルタバー直下を詰める（行自体が上下 padding 24px を持つため。
   Works 一覧はカード側に余白がないので 48px のまま）。 */
.acp-filter-bar--news {
	margin-bottom: 24px;
}
.acp-filter-bar__tabs {
	display: flex;
	gap: 12px;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}
.acp-filter-bar__tabs::-webkit-scrollbar {
	display: none;
}
.acp-filter__btn {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--ink);
	background: transparent;
	border: 1px solid var(--wp--preset--color--border, #E5DFD7);
	border-radius: var(--acp-radius-pill); /* CTA と同じ pill（丸い = 押せる、2026-07-27） */
	padding: 8px 18px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.acp-filter__btn:hover {
	border-color: var(--wp--preset--color--ink);
}
.acp-filter__btn.is-active {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: #fff;
}
.acp-filter-bar__total {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	flex: 0 0 auto;
}
.acp-filter-bar__total-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text);
}
.acp-filter-bar__total-num {
	font-size: 24px;
	font-weight: 800;
	color: var(--wp--preset--color--accent);
}

/* ---- フィルタ絞込アニメ（F）-------------------------------------------
   方針: 非表示は即 display:none（残像なし・即詰め＝パッと切替）。
   新しく表示されるカードだけ .is-entering→通常へ軽くフェードイン。
   JS 無効時はどのクラスも付かず全件表示のまま（フォールバック維持）。 */
.acp-work-card,
.acp-news-row {
	transition: opacity 0.18s ease, transform 0.18s ease;
}
/* 非表示は即時（transition を効かせず跡地も残さない） */
.acp-work-card.is-filtered-out,
.acp-news-row.is-filtered-out {
	display: none;
}
/* 表示に切り替わった瞬間の初期状態（ここから通常へ transition してフェードイン） */
.acp-work-card.is-entering,
.acp-news-row.is-entering {
	opacity: 0;
	transform: translateY(6px);
}
@media (prefers-reduced-motion: reduce) {
	.acp-work-card,
	.acp-news-row {
		transition: none;
	}
	.acp-work-card.is-entering,
	.acp-news-row.is-entering {
		opacity: 1;
		transform: none;
	}
}

/* ---- 「もっと見る」（段階表示）-----------------------------------------
   一覧の初期表示を絞り、残りをこのボタンで段階的に展開する（ページ遷移なし）。
   JS が表示件数を制御し、まだ隠れた項目があるときだけ hidden を外す。 */
.acp-loadmore {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}
.acp-loadmore[hidden] {
	display: none;
}
.acp-loadmore__btn {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--acp-radius-pill); /* 押せるボタンは pill に統一（2026-07-27） */
	padding: 14px 40px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: border-color 0.2s ease;
}
.acp-loadmore__btn:hover {
	border-color: var(--wp--preset--color--ink); /* 色は変えず枠だけ締める */
}
.acp-loadmore__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}
/* News/Works とも post-template が各項目を <li class="wp-block-post"> でラップする。
   非表示クラスは内側（.acp-news-row / .acp-work-card）に付くため、跡地の <li> が
   グリッドセル・縦スペースを占有し続ける。非表示項目を含む <li> 自体を畳む。
   これにより Grid は残りを先頭から左詰めに再配置し、News は段差なく詰まる。 */
.acp-news__list > li:has(> .acp-news-row.is-filtered-out),
.acp-works__grid > li:has(> .acp-work-card.is-filtered-out),
.acp-works__grid > li:has(.acp-work-card.is-filtered-out) {
	display: none;
}

/* =========================================================================
   News list（TOP抜粋 / 一覧で共有）
   ========================================================================= */
/* 見出し/フィルタバー直下に WP が入れる blockGap（24px）を打ち消し、
   隙間を margin-bottom 48px に一本化する（二重 72px の解消）。
   行自体が上下 padding 24px を持つため、視覚的な間隔はこれで十分。 */
.acp-news__query {
	margin-top: 0 !important;
}
.acp-news .acp-section__head {
	margin-bottom: 24px; /* News は行 padding があるぶん見出しを近づける */
}
.acp-news__list {
	display: flex;
	flex-direction: column;
}
/* コアの blockGap が <li> 間に余白を作り、行の反転帯（hover）が届かない白い隙間になる。
   行自身が上下 padding 24px を持つので、li 側の余白は打ち消して密着させる。 */
.acp-news__list > li {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.acp-news-row {
	/* 日付 / カテゴリ / タイトルを固定 3 列のグリッドで揃える。
	   旧 flex-wrap ではタイトル長で 1 段/2 段が混在していたため grid に統一。 */
	display: grid;
	grid-template-columns: 110px 96px 1fr;
	gap: 24px;
	/* 反転帯を本文整列より 20px 外へブリード（hover時のレイアウトシフトなし） */
	padding: 24px 20px;
	margin-inline: -20px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	align-items: center;
	/* フィルタ絞込のフェード（opacity/transform）と反転（background）を同居させる。
	   後段のフィルタ用 transition 定義より本ルールが後勝ちのため、ここに統合。 */
	transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.35s var(--acp-ease);
}
/* News 行 hover（Swiss v3 の例外・2026-07-26 指示）: 下線ではなく色反転。
   行全体が黒帯になり、日付・カテゴリ・タイトルが白へ切り替わる。 */
.acp-news-row:hover {
	background-color: var(--wp--preset--color--ink);
}
.acp-news-row:hover .acp-news-row__date,
.acp-news-row:hover .acp-news-row__cat .acp-card-tag,
.acp-news-row:hover .acp-news-row__text a {
	color: #fff;
}
.acp-news-row__date {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text);
	min-width: 90px;
	transition: color 0.35s var(--acp-ease);
}
.acp-news-row__cat {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--light);
	min-width: 72px;
}
/* カテゴリラベルは .acp-card-tag（button=一覧フィルタ発動 / span=表示）で描画。
   複数カテゴリは隙間を空けて並べる。反転アニメに追従する color transition を持たせる。 */
.acp-news-row__cat .acp-card-tag {
	transition: color 0.35s var(--acp-ease);
}
.acp-news-row__cat .acp-card-tag + .acp-card-tag {
	margin-left: 8px;
}
.acp-news-row__text {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}
.acp-news-row__text a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 0.35s var(--acp-ease);
}

/* News カテゴリ（functions.php が付与する acp-cat--{slug}）。
   Swiss v3: カテゴリごとの色分けは廃止し、全て中立グレーに統一（1色の規律）。
   slug 別 class は functions.php 側の互換のため受けるが、色は付けない。 */
.acp-cat {
	color: var(--wp--preset--color--light);
}
.acp-news__more {
	margin-top: 40px;
}
/* リンク本体の見た目は .acp-textlink に集約。VIEW ALL WORKS も同リンク化済み。 */

/* =========================================================================
   CTA Contact (Top)
   ========================================================================= */
/* 見出し＋ボタンを中央揃えの縦積みに（2026-07-27 指示） */
.acp-cta__inner {
	background: var(--wp--preset--color--surface-2);
	border-radius: var(--acp-radius-panel);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}
.acp-cta__btns {
	justify-content: center;
}
/* 全面リンク化（.acp-cta__link）は 2026-07-27 に試行のうえ撤回。通常のボタン CTA に戻す。 */
.acp-cta__title {
	margin: 0;
	line-height: 1.4;
}

/* =========================================================================
   Page Hero（Works/News/Contact 一覧の見出し帯）
   ========================================================================= */
.acp-page-hero {
	text-align: left; /* #5/H: ページ見出し帯も左揃えを保証（constrained中央寄り解消） */
}
/* 版面（1200px 中央）に揃える。旧実装は max-width:none + margin-left:0 で padding 端まで
   飛び出しており、他セクション（constrained 1200px 中央）と左端がズレていた
   （2026-08-25 実測: 1600px 幅で page-hero/about=48px・他=200px）。 */
.acp-page-hero > * {
	max-width: var(--acp-max-site) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.acp-page-hero__title {
	margin: 4px 0 0;
	letter-spacing: -0.03em;
	line-height: 1;
}
.acp-page-hero__lead {
	margin: 24px 0 0;
	max-width: 640px;
	color: var(--wp--preset--color--text);
	line-height: 1.9;
}

/* =========================================================================
   News 詳細（single.html）
   ========================================================================= */
.acp-news-detail {
	background: var(--wp--preset--color--base);
}
.acp-nd-head {
	text-align: left; /* H方針: 記事ヘッダは左揃え（旧 center） */
}
.acp-nd-back {
	font-size: 12px;
	font-weight: 700;
}
.acp-nd-back a { color: var(--wp--preset--color--accent-deep); text-decoration: none; } /* 小テキストは deep（AA） */
.acp-nd-meta {
	justify-content: flex-start; /* H方針: 左揃え（旧 center） */
	gap: 16px;
	margin: 32px 0 16px;
}
.acp-nd-meta__date { font-size: 13px; font-weight: 700; color: var(--wp--preset--color--text); }
.acp-nd-meta__cat {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--light);
}
.acp-nd-meta__cat .acp-card-tag + .acp-card-tag { margin-left: 8px; }
/* News 詳細タイトル（行間130% / ls -3%）。Medium(500)・サイズ控えめ（最大60px）で
   大きいが繊細・エレガントに（参考 nasu.design 記事）。
   fontSize プリセットは外し（!important 回避）、ここでサイズを定義する。 */
.acp-nd-title {
	font-size: clamp(32px, 5vw, 60px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.03em;
}
/* 本文（design.md: 15-16px / 行間190-200%）。記事内見出しで分節を効かせる。 */
.acp-nd-body {
	font-size: 16px;
	line-height: 1.95;
}
.acp-nd-body p { margin: 0 0 1.5em; }
/* 記事内見出し。繊細トーンに合わせ軽め（h2=600 / h3=500）。本文との分節はサイズで。 */
.acp-nd-body h2 {
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
	margin: 2em 0 0.6em;
}
.acp-nd-body h3 {
	font-size: clamp(20px, 3vw, 24px);
	font-weight: 500;
	line-height: 1.4;
	margin: 1.6em 0 0.5em;
}
.acp-nd-nav__link a {
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* =========================================================================
   Works 詳細（single-work.php）
   ========================================================================= */
.acp-work-detail .acp-wd__inner {
	max-width: var(--acp-max-site);
	margin: 0 auto;
	padding-left: 48px;
	padding-right: 48px;
}
.acp-wd-hero {
	padding-top: 64px;
	padding-bottom: 96px;
}
.acp-wd-hero__crumb {
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--text);
}
.acp-wd-hero__crumb a { color: inherit; text-decoration: none; }
.acp-wd-hero__back {
	margin-top: 16px;
	font-size: 12px;
	font-weight: 700;
}
.acp-wd-hero__back a { color: var(--wp--preset--color--accent-deep); text-decoration: none; } /* 小テキストは deep（AA） */
.acp-wd-hero__tags {
	margin-top: 24px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--text);
}
.acp-wd-hero__tags .acp-card-tag + .acp-card-tag { margin-left: 10px; }
/* Works 詳細 大見出し（行間125%・ls -4%）。
   ウェイトは Medium(500)・サイズはやや控えめ（最大60px）：大きいが繊細・
   エレガントに（参考 nasu.design 記事）。グローバル h1=800 を上書き。 */
.acp-wd-hero__title {
	margin: 16px 0 0;
	font-size: clamp(32px, 5vw, 60px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.03em;
}
.acp-wd-hero__lead {
	margin: 24px 0 0;
	color: var(--wp--preset--color--text);
	line-height: 2;
}
.acp-wd-meta {
	margin: 40px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 28px 64px; /* E: 行間・列間を広げ詰まりを解消（Apple 風のゆとり） */
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 32px;
}
/* E: ラベル(小・薄)を上、値(しっかり)を下の縦積みにして階層を明確化 */
.acp-wd-meta__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}
.acp-wd-meta dt {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--light);
}
.acp-wd-meta dd { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.4; }
.acp-wd-meta dd a { color: var(--wp--preset--color--accent-deep); text-decoration: none; } /* 小テキストは deep（AA） */
.acp-wd-hero__image {
	margin-top: 40px;
	aspect-ratio: 16 / 9;
	min-height: 0;
}

/* セクション大見出し（48/36/32px・行間100%・ls -3%）。
   ウェイトは Medium(500)：大きいが繊細に（参考 nasu.design 記事）。
   旧 20-24px は本文に近すぎてジャンプ率が弱かったため、サイズで階層を付ける。 */
.acp-wd__h2 {
	font-size: clamp(32px, 5vw, 48px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin: 0 0 16px;
}
.acp-wd-overview {
	background: var(--wp--preset--color--surface, #fff);
	padding: 96px 0;
}
.acp-wd-overview__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 64px;
}
.acp-wd-overview__body { font-size: 16px; line-height: 1.95; color: var(--wp--preset--color--text); }
.acp-wd-overview__side {
	background: var(--wp--preset--color--surface-2);
	border-radius: var(--acp-radius-card);
	padding: 32px;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.acp-wd-overview__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--light);
	margin: 0 0 6px;
}
.acp-wd-overview__val { margin: 0; font-size: 13px; line-height: 1.7; }

.acp-wd-process {
	padding: 96px 0;
}
.acp-wd-process__inner {
	max-width: 900px;
	display: flex;
	flex-direction: column;
	gap: 64px;
}
.acp-wd-process__step { display: flex; gap: 32px; align-items: flex-start; }
.acp-wd-process__num {
	/* Kitsune v4 モチーフ E: 番号はブランドオレンジ（48px 大文字なので 3:1 クリア） */
	font-size: 48px;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	flex: 0 0 auto;
}
/* 章見出し（design.md: 28/24px・Bold・行間tight） */
.acp-wd-process__title { margin: 0 0 8px; font-size: clamp(24px, 3vw, 28px); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.acp-wd-process__body { margin: 0; font-size: 16px; color: var(--wp--preset--color--text); line-height: 1.9; }
.acp-wd-metrics {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}
.acp-wd-metric {
	flex: 1 1 200px;
	background: var(--wp--preset--color--surface-2);
	border-radius: var(--acp-radius-card);
	padding: 32px;
	text-align: center;
}
.acp-wd-metric__value {
	display: block;
	font-size: 40px;
	font-weight: 800;
	color: var(--wp--preset--color--accent);
}
.acp-wd-metric__label {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	color: var(--wp--preset--color--text);
}

.acp-wd-next { background: var(--wp--preset--color--dark); }
.acp-wd-next__link {
	display: block;
	max-width: var(--acp-max-site);
	margin: 0 auto;
	padding: 96px 48px;
	text-align: center;
	text-decoration: none;
}
.acp-wd-next__kicker {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.15em;
	color: var(--wp--preset--color--accent-on-dark); /* Kitsune v4: 黒面はダーク用オレンジ（AAA） */
}
.acp-wd-next__title {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 16px;
	font-size: clamp(24px, 4vw, 40px);
	font-weight: 600;
	color: #fff;
	letter-spacing: -0.025em;
	font-feature-settings: "palt";
	transition: transform 0.4s var(--acp-ease);
}
.acp-wd-next__arrow {
	display: inline-block;
	color: var(--wp--preset--color--accent-on-dark); /* Kitsune v4 */
	transition: transform 0.4s var(--acp-ease);
}
.acp-wd-next__link:hover .acp-wd-next__title {
	transform: translateY(-2px);
}
.acp-wd-next__link:hover .acp-wd-next__arrow {
	transform: translate3d(6px, 0, 0);
}

@media (max-width: 767px) { /* sm: < md */
	.acp-work-detail .acp-wd__inner { padding-left: 24px; padding-right: 24px; }
	.acp-wd-overview__grid { grid-template-columns: 1fr; gap: 32px; }
	.acp-wd-process__step { gap: 16px; }
	.acp-wd-process__num { font-size: 36px; }
}

/* =========================================================================
   Contact（フォーム枠のみ / CONTACT INFO / FLOW）
   ========================================================================= */
.acp-contact__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 64px;
	align-items: start;
}
.acp-form {
	background: var(--wp--preset--color--surface, #fff);
	border-radius: var(--acp-radius-panel);
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.acp-form__row { display: flex; flex-direction: column; gap: 8px; }
.acp-form__label {
	font-size: 12px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}
.acp-form__req {
	font-size: 10px;
	color: var(--wp--preset--color--accent-deep); /* 10px は deep（AA） */
	margin-left: 4px;
}
.acp-form__input {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	padding: 12px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--acp-radius-field); /* Kitsune v4: 入力欄 8px */
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.acp-form__input:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent-light);
}
.acp-form__textarea { min-height: 120px; resize: vertical; }
.acp-form__submit {
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--accent); /* CTA = ブランドオレンジ地・黒文字 */
	border: 0;
	border-radius: var(--acp-radius-pill);
	padding: 16px;
	cursor: not-allowed;
	opacity: 0.85;
}
.acp-form__note {
	margin: 0;
	font-size: 11px;
	color: var(--wp--preset--color--text);
	line-height: 1.6;
}
.acp-contact-info {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.acp-contact-info__head {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.05em;
	margin: 0 0 8px;
}
.acp-contact-info__label {
	font-size: 11px;
	font-weight: 700;
	color: var(--wp--preset--color--text);
	margin: 0 0 4px;
}
.acp-contact-info__val { margin: 0; font-size: 14px; line-height: 1.7; }
.acp-contact-info__val a { color: var(--wp--preset--color--accent-deep); text-decoration: none; } /* 小テキストは deep（AA） */
.acp-contact-info__hours {
	background: var(--wp--preset--color--surface-2);
	border-radius: var(--acp-radius-card);
	padding: 20px;
}

.acp-flow__title { margin: 0; }
.acp-flow__list {
	margin-top: 48px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px 64px;
}
.acp-flow__step { display: flex; gap: 20px; align-items: flex-start; }
.acp-flow__num {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 36px;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	line-height: 1;
	flex: 0 0 auto;
}
.acp-flow__txt { flex: 1 1 auto; }
.acp-flow__step-title { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.acp-flow__step-body { margin: 0; font-size: 13px; line-height: 1.8; color: var(--wp--preset--color--text); }

@media (max-width: 767px) { /* sm */
	.acp-contact__grid { grid-template-columns: 1fr; gap: 40px; }
	.acp-flow__list { grid-template-columns: 1fr; }
	.acp-form { padding: 24px; }
}

/* =========================================================================
   About ページ（page-about / about-content）— design.md トーン・左揃え
   ========================================================================= */
/* 旧実装はセクション自体に max-width:1200px を掛けて左端へ張り付かせていた（当時は
   page-hero が全幅左端だったため、それに合わせる意図）。2026-08-25 に page-hero を
   版面（1200px 中央）へ戻したので、この上書きは不要になり左端不揃いの原因になっていた。
   セクションは全幅のまま、子要素が版面で中央に載る他セクションと同じ扱いにする。 */
.acp-about {
	text-align: left;
}
/* コアの `.is-layout-constrained > *` は margin-inline:auto !important を
   詳細度 0,2,0 で当ててくる。これに勝つため親クラスを重ねて詳細度 0,3,0 に上げ、
   左寄せを強制する（本文の左端を見出し帯と揃える）。 */
/* 版面（1200px 中央）に揃える。本文の可読幅（820px）はブロック側で持たせ、
   左端は他セクションと同じ版面基準にする（2026-08-25 の左端不揃い修正）。 */
.acp-about.acp-about > *,
.acp-legal.acp-legal > * {
	max-width: var(--acp-max-site) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.acp-about__block,
.acp-legal .acp-about__body {
	max-width: 820px;
}
.acp-about__block + .acp-about__block {
	margin-top: 56px;
}
.acp-about__h2 {
	margin: 0 0 16px;
	line-height: 1.4;
	letter-spacing: -0.02em;
}
.acp-about__body {
	margin: 0;
	color: var(--wp--preset--color--text);
	line-height: 2;
	font-size: 15px;
}
.acp-about__tags {
	margin-top: 20px;
	gap: 8px;
}
/* 箇条書きの点でテキスト左端がぶら下がると、他ブロック（見出し・本文・タグ）と
   左端が 18px ずれる。マーカーを版面の外側に出して、テキスト左端を揃える。 */
.acp-about__list {
	margin: 0;
	padding-left: 0;
	list-style-position: inside;
	line-height: 2;
	color: var(--wp--preset--color--text);
	font-size: 15px;
}
.acp-about__list li {
	margin-bottom: 0.5em;
}
.acp-about__list strong {
	color: var(--wp--preset--color--ink);
}

/* ---- About: ai kitsune コンセプト（design.md 7章 / Kitsune v4） -----------
   「関わった仕事が、化ける」。色をまとうのはブランド語（ai kitsune）と
   ステートメントのキーワード（化ける・Bakeru）のみ。 */
.acp-brand-mark {
	color: var(--wp--preset--color--accent-deep);
}
.acp-concept__statement {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: clamp(28px, 4.5vw, 48px);
	line-height: 1.55;
	letter-spacing: -0.03em;
	font-feature-settings: "palt";
	margin: 0 0 24px;
}
.acp-concept__mark {
	margin: 40px 0 0;
	color: var(--wp--preset--color--accent);
}
.acp-concept__mark figcaption {
	margin-top: 4px;
	font-size: var(--wp--preset--font-size--sub);
	color: var(--wp--preset--color--text);
}
.acp-concept__lead {
	/* Concept 本文は 3 段落構成（Kitsune v4: 名前の由来→スタンス→連鎖）。
	   段落間は 1.2em、図版との間隔は .acp-concept__mark の margin-top 40px が担う。 */
	max-width: 820px;
	color: var(--wp--preset--color--text);
	margin: 0 0 1.2em;
	line-height: 2;
}
/* 定義表（旧 Gear コンセプトの4行表）は 2026-07-26 指示で廃止。
   Concept は大型タイポ＋リード文のみ。 */
/* できること（3カラム・上罫線）。blockGap の margin は grid gap と二重になるため打ち消す。 */
.acp-yoso {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.acp-yoso > .acp-yoso__item {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.acp-yoso__item {
	border-top: 1px solid var(--wp--preset--color--ink);
	padding-top: 22px;
}
.acp-yoso__cat {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--light);
}
.acp-yoso__title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 600;
	font-feature-settings: "palt";
}
.acp-yoso__body {
	margin: 0;
	font-size: 13px;
	line-height: 1.9;
	color: var(--wp--preset--color--text);
}
@media (max-width: 767px) { /* sm */
	.acp-yoso {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* =========================================================================
   Privacy ページ（page-privacy / privacy-content）— シンプル左揃え
   ========================================================================= */
.acp-legal {
	text-align: left;
}
.acp-legal > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.acp-legal__block + .acp-legal__block {
	margin-top: 40px;
}
.acp-legal__h2 {
	margin: 0 0 12px;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: -0.01em;
}
.acp-legal__body {
	margin: 0;
	color: var(--wp--preset--color--text);
	line-height: 1.9;
	font-size: 14px;
}
.acp-legal__note {
	margin: 40px 0 0;
	padding: 16px 20px;
	background: var(--wp--preset--color--surface-2);
	border-radius: var(--acp-radius-card);
	font-size: 12px;
	line-height: 1.8;
	color: var(--wp--preset--color--text);
}

/* =========================================================================
   Footer
   ========================================================================= */
.acp-footer {
	background: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--border);
}
/* ロゴ → ナビ → © / プライバシーポリシー の順に、中央揃えの縦積み
   （ヘッダー・CTA と同じ中央の作法に統一。2026-07-27 指示） */
.acp-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	max-width: var(--acp-max-site);
	margin: 0 auto;
	padding: 56px 48px;
	box-sizing: border-box;
	text-align: center;
}
.acp-footer__copy {
	font-size: 11px;
	color: var(--wp--preset--color--text);
}
/* © とプライバシーポリシーの横並び行（フッター最下段・中央） */
.acp-footer__meta {
	gap: 20px;
	justify-content: center;
}
.acp-footer__copy a {
	color: inherit;
	text-decoration: none;
	position: relative;
	display: inline-block;
}
.acp-footer__copy a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s var(--acp-ease);
}
.acp-footer__copy a:hover::after {
	transform: scaleX(1);
}
/* フッターナビのリンク hover（Swiss v3）: 色・位置は変えず、下線が左→右にスライドイン。
   ヘッダーナビと同じ作法に統一する。 */
.acp-footer__nav a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.acp-footer__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s var(--acp-ease);
}
.acp-footer__nav a:hover::after {
	transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
	.acp-footer__nav a::after {
		transition: none;
	}
}

/* =========================================================================
   Responsive
   md = 768px / lg = 1024px（theme.json settings.custom が正）
   ========================================================================= */

/* Works グリッドは lg 以上 3 列がベース。md（768–1023px）で 2 列、モバイルで 1 列。 */
@media (max-width: 1023px) { /* md: < lg(1024px) */
	.acp-works__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* md 未満（モバイル <768px）: ナビをハンバーガーへ。横 padding 24。全 1 列・縦積み。 */
@media (max-width: 767px) { /* sm: < md(768px) */
	.acp-header__inner,
	.acp-footer__inner {
		padding-left: 24px;
		padding-right: 24px;
	}
	.acp-header .acp-nav {
		display: none !important;
	}
	/* モバイルはナビ＋CTA のまとまりごと隠し、「ロゴ / ハンバーガー」にする。
	   コア CSS（display:flex・同詳細度で後勝ち）に負けるため親クラスで詳細度を上げる。 */
	.acp-header .acp-header__center {
		display: none !important;
	}
	.acp-burger {
		display: block;
	}
	/* G修正: backdrop-filter は fixed 子（モバイルメニュー）の含有ブロックを
	   ヘッダーに変え、メニューが top:0 でなくヘッダー基準にずれる。モバイルでは無効化し、
	   メニューがビューポート全体を覆えるようにする。 */
	.acp-header {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.acp-footer__inner {
		padding: 48px 24px; /* 縦積み中央は PC と共通（2026-07-27） */
	}
	/* Hero 2カラム → 縦積み */
	.acp-hero__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.acp-hero__sub {
		margin-top: 32px;
	}
	/* Works → 1列。カード間 gap はカード内の画像→テキスト間隔（12px）と
	   明確に差を付け、テキストの帰属が迷子にならないようにする。 */
	.acp-works__grid {
		grid-template-columns: 1fr;
		row-gap: 64px;
	}
	/* News 行: 日付・カテゴリを上段、タイトルは下段に全幅（グリッドで固定） */
	.acp-news-row {
		grid-template-columns: auto 1fr;
		gap: 8px 16px;
	}
	.acp-news-row__text {
		grid-column: 1 / -1;
	}
	/* CTA: モバイルも中央揃えを踏襲（PC と同じ作法）。余白だけ詰める。 */
	.acp-cta__inner {
		gap: 24px;
	}
}

/* lg 以上でモバイルメニューは絶対に出さない（PCナビのみ） */
@media (min-width: 1024px) { /* lg */
	.acp-mobile-menu,
	.acp-burger {
		display: none !important;
	}
}

/* =========================================================================
   版下グリッド／トンボ等の装飾レイヤーは全廃（2026-07-27 確定）。
   方眼 → 両側トリム罫 → 画面四隅の角トンボ → セクション境界の合わせトンボ →
   画像のクロップマーク → 4 カラムの縦罫、の順に検討・削除した。
   最終方針: 補助線は引かず、タイポグラフィと余白だけでグリッドを感じさせる。
   ========================================================================= */