@charset "UTF-8";
/* ==========================================================================
   UNIxy Design Kit — 漆と真鍮
   ここで定義しているのは「部品」です。ブロックの詳細設定 →「追加CSSクラス」
   に u- から始まるクラス名を入れたところにだけ効きます。
   何も付けていないブロックの見た目は変わりません。
   ========================================================================== */

/* --- 1. 色と文字の設定 --------------------------------------------------- */

:root {
	--u-lacquer-900: #01201f;
	--u-lacquer-800: #012b29;
	--u-lacquer-700: #013735;
	--u-lacquer-600: #04443f;
	--u-brass-300: #ecd3b3;
	--u-brass-400: #d6ae86;
	--u-brass-500: #b88c65;
	--u-brass-700: #8a6647;
	--u-umber: #614b36;
	--u-paper: #faf5f3;
	--u-paper-2: #f2e9e4;
	--u-smoke: #616161;

	--u-bg: var(--u-paper);
	--u-bg-elev: #fffdfc;
	--u-bg-sunk: #f4ece8;
	--u-ink: #012b29;
	--u-ink-2: #4f5a58;
	--u-ink-3: var(--u-smoke);
	--u-rule: rgba(97, 75, 54, 0.18);
	--u-rule-strong: rgba(97, 75, 54, 0.34);
	--u-accent: var(--u-brass-700);

	--u-shadow-1: 0 1px 2px rgba(1, 43, 41, 0.05), 0 8px 24px -12px rgba(1, 43, 41, 0.18);
	--u-shadow-2: 0 2px 4px rgba(1, 43, 41, 0.06), 0 28px 60px -28px rgba(1, 43, 41, 0.35);

	--u-f-display: "Hiragino Mincho ProN", "HiraMinProN-W3", "Yu Mincho", "YuMincho",
		"Noto Serif JP", serif;
	--u-f-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic",
		"Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
	--u-f-latin: "Helvetica Neue", "Arial Nova", Arial, "Hiragino Sans", sans-serif;

	--u-ease: cubic-bezier(0.16, 0.84, 0.24, 1);
	--u-ease-heavy: cubic-bezier(0.32, 0.06, 0.16, 1);
}

/* --- 2. ファーストビュー（ショートコード [unixy_hero]） ------------------ */

.unixy-hero {
	position: relative;
	/* 記事コンテナの中に置かれても画面幅いっぱいに広げる */
	left: 50%;
	right: 50%;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	display: flex;
	align-items: flex-end;
	min-height: 60vh;
	padding: clamp(120px, 16vw, 200px) 0 clamp(56px, 8vw, 104px);
	overflow: hidden;
	isolation: isolate;
	background: radial-gradient(120% 90% at 30% 0%, #04443f 0%, #01201f 62%, #010f0f 100%);
	color: var(--u-paper);
	perspective: 1200px;
}
.unixy-hero--tall {
	min-height: min(100svh, 900px);
	align-items: center;
}

/* 全幅ブロックの中に置かれている場合は、二重に広げない */
.alignfull > .unixy-hero,
.alignfull .unixy-hero {
	left: auto;
	right: auto;
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.unixy-hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: -2;
}
.unixy-hero__grain {
	position: absolute;
	inset: -10%;
	z-index: -1;
	pointer-events: none;
	opacity: 0.2;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

.unixy-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1160px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 40px);
	transform-style: preserve-3d;
}

.unixy-hero__title {
	font-family: var(--u-f-display);
	font-weight: 400;
	font-size: clamp(2.1rem, 1.5rem + 3vw, 4rem);
	line-height: 1.38;
	letter-spacing: 0.03em;
	color: var(--u-paper);
	margin: 0;
	max-width: 17em;
	text-wrap: balance;
	text-shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
}
.unixy-hero__title .u-accent {
	color: var(--u-brass-300);
}
.unixy-hero__sub {
	margin: clamp(22px, 3vw, 34px) 0 0;
	max-width: 30em;
	color: #d3ded9;
	font-size: 1rem;
	line-height: 2.05;
	text-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
}
.unixy-hero .u-eyebrow {
	color: var(--u-brass-300);
}

.unixy-hero__meta {
	position: absolute;
	right: clamp(20px, 5vw, 40px);
	bottom: clamp(56px, 8vw, 104px);
	writing-mode: vertical-rl;
	font-family: var(--u-f-latin);
	font-size: 0.62rem;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: rgba(236, 211, 179, 0.6);
}
@media (max-width: 999px) {
	.unixy-hero__meta { display: none; }
}

.unixy-hero__cue {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	width: 1px;
	height: 54px;
	background: rgba(236, 211, 179, 0.25);
	overflow: hidden;
}
.unixy-hero__cue::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 40%;
	background: var(--u-brass-300);
	animation: unixy-cue 2.6s var(--u-ease-heavy) infinite;
}
@keyframes unixy-cue {
	0% { transform: translateY(-100%); }
	60%, 100% { transform: translateY(250%); }
}

.unixy-plane {
	transition: transform 0.9s var(--u-ease);
	transform: translate3d(calc(var(--u-px, 0) * 1px), calc(var(--u-py, 0) * 1px), 0);
}

/* --- 3. 文字の部品 ------------------------------------------------------- */

/* 小見出しの上に置く英字ラベル */
.u-eyebrow {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	font-family: var(--u-f-latin);
	font-size: 0.64rem;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--u-accent);
	margin-block: 0 22px;
	font-weight: 500;
	line-height: 1.4;
}
.u-eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
	flex: 0 0 auto;
}

/* 見出しを明朝にする */
.u-display {
	font-family: var(--u-f-display);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.45;
	text-wrap: balance;
}

.u-lede {
	font-size: 1.1rem;
	line-height: 2.05;
	color: var(--u-ink-2);
	max-width: 34em;
}
.u-quiet {
	color: var(--u-ink-3);
	font-size: 0.82rem;
	line-height: 1.9;
}

/* --- 4. ボタン ----------------------------------------------------------- */

.u-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 30px;
	border: 1px solid var(--u-brass-500);
	border-radius: 2px;
	background: linear-gradient(135deg, var(--u-brass-500), var(--u-brass-700) 62%, var(--u-umber));
	color: #fff9f2;
	text-decoration: none;
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	cursor: pointer;
	overflow: hidden;
	box-shadow: var(--u-shadow-1);
	transition: transform 0.5s var(--u-ease), box-shadow 0.5s var(--u-ease);
}
.u-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 32%, rgba(255, 246, 232, 0.55) 48%, transparent 64%);
	transform: translateX(-120%);
	transition: transform 0.9s var(--u-ease-heavy);
}
.u-btn:hover,
.u-btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--u-shadow-2);
	color: #fff9f2;
}
.u-btn:hover::after { transform: translateX(120%); }
.u-btn__arw { transition: transform 0.45s var(--u-ease); flex: 0 0 auto; }
.u-btn:hover .u-btn__arw { transform: translateX(4px); }

.u-btn--ghost {
	background: transparent;
	color: currentColor;
	border-color: rgba(236, 211, 179, 0.45);
	box-shadow: none;
}
.u-btn--ghost::after { display: none; }
.u-btn--ghost:hover { border-color: var(--u-brass-400); }

.u-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: clamp(28px, 4vw, 44px);
}

/* WordPress の「ボタン」ブロックに u-btn / u-btn--ghost を付けた場合。
   クラスはブロックの外側 div に付くので、中のリンクへ流し込む。 */
.wp-block-button.u-btn > .wp-block-button__link,
.wp-block-button.u-btn--ghost > .wp-block-button__link {
	padding: 16px 30px;
	border: 1px solid var(--u-brass-500);
	border-radius: 2px;
	background: linear-gradient(135deg, var(--u-brass-500), var(--u-brass-700) 62%, var(--u-umber));
	color: #fff9f2;
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	box-shadow: var(--u-shadow-1);
	transition: transform 0.5s var(--u-ease), box-shadow 0.5s var(--u-ease);
}
.wp-block-button.u-btn > .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--u-shadow-2);
	color: #fff9f2;
}
/* 単体で使う <a class="u-btn--ghost"> にも枠と余白が要る */
a.u-btn--ghost:not(.u-btn) {
	display: inline-flex;
	align-items: center;
	padding: 16px 30px;
	border: 1px solid var(--u-rule-strong);
	border-radius: 2px;
	text-decoration: none;
	font-size: 0.9rem;
	letter-spacing: 0.1em;
}
.wp-block-button.u-btn--ghost > .wp-block-button__link {
	background: transparent;
	color: var(--u-ink);
	border-color: var(--u-rule-strong);
	box-shadow: none;
}
.wp-block-button.u-btn--ghost > .wp-block-button__link:hover {
	border-color: var(--u-brass-500);
	color: var(--u-accent);
	transform: translateY(-2px);
}
.u-cta .wp-block-button.u-btn--ghost > .wp-block-button__link {
	color: var(--u-paper);
	border-color: rgba(236, 211, 179, 0.45);
}

/* --- 5. カード（3Dチルト） ----------------------------------------------- */

.u-deck {
	display: grid;
	gap: clamp(18px, 2.4vw, 26px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	perspective: 1400px;
}
.u-deck--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

.u-plate {
	position: relative;
	background: var(--u-bg-elev);
	border: 1px solid var(--u-rule);
	border-radius: 3px;
	padding: clamp(26px, 3.4vw, 40px);
	box-shadow: var(--u-shadow-1);
	transform-style: preserve-3d;
	transition: transform 0.7s var(--u-ease), box-shadow 0.7s var(--u-ease),
		border-color 0.7s var(--u-ease);
	overflow: hidden;
}
.u-plate::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
}
.u-plate::after {
	content: "";
	position: absolute;
	inset: -1px;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		340px circle at var(--u-mx, 50%) var(--u-my, 50%),
		rgba(214, 174, 134, 0.26),
		transparent 62%
	);
	transition: opacity 0.6s var(--u-ease);
}
.u-plate:hover { box-shadow: var(--u-shadow-2); border-color: var(--u-rule-strong); }
.u-plate:hover::after { opacity: 1; }
.u-plate > * { position: relative; }
.u-plate > :first-child { margin-top: 0; }
.u-plate > :last-child { margin-bottom: 0; }

/* 実績・記事カード */
.u-card {
	position: relative;
	border: 1px solid var(--u-rule);
	border-radius: 3px;
	background: var(--u-bg-elev);
	overflow: hidden;
	box-shadow: var(--u-shadow-1);
	transition: transform 0.7s var(--u-ease), box-shadow 0.7s var(--u-ease);
}
.u-card:hover { box-shadow: var(--u-shadow-2); }
.u-card img { display: block; width: 100%; height: auto; }

.u-chip {
	display: inline-block;
	font-family: var(--u-f-latin);
	font-size: 0.62rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--u-accent);
	border: 1px solid var(--u-rule-strong);
	border-radius: 999px;
	padding: 4px 12px;
}

/* --- 6. リスト ----------------------------------------------------------- */

/* チェック風の箇条書き */
.u-ticks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}
.u-ticks li {
	position: relative;
	padding-left: 26px;
	color: var(--u-ink-2);
	font-size: 0.92rem;
	line-height: 1.85;
	margin: 0;
}
.u-ticks li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.82em;
	width: 11px;
	height: 6px;
	border-left: 1.4px solid var(--u-accent);
	border-bottom: 1.4px solid var(--u-accent);
	transform: rotate(-45deg);
}
.u-ticks--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 11px 28px; }

/* 罫線で区切った一覧 */
.u-bars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--u-rule);
	border-block: 1px solid var(--u-rule);
}
.u-bars li {
	background: var(--u-bg);
	padding: 18px 4px 18px 30px;
	position: relative;
	margin: 0;
	color: var(--u-ink-2);
	font-size: 0.93rem;
	transition: background-color 0.4s var(--u-ease), padding-left 0.4s var(--u-ease),
		color 0.4s var(--u-ease);
}
.u-bars li::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	background: var(--u-accent);
	transform: rotate(45deg);
	opacity: 0.75;
}
.u-bars li:hover { background: var(--u-bg-elev); padding-left: 38px; color: var(--u-ink); }
.u-sunk .u-bars li { background: var(--u-bg-sunk); }
.u-sunk .u-bars li:hover { background: var(--u-bg-elev); }

/* --- 7. 手順・理由（番号は自動で振られます） ----------------------------- */

.u-steps {
	display: grid;
	gap: clamp(12px, 1.6vw, 18px);
	counter-reset: u-step;
	perspective: 1600px;
}
.u-step {
	position: relative;
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr);
	gap: clamp(14px, 2.5vw, 32px);
	align-items: start;
	background: var(--u-bg-elev);
	border: 1px solid var(--u-rule);
	border-left: 2px solid var(--u-brass-500);
	border-radius: 2px;
	padding: clamp(20px, 2.6vw, 30px) clamp(20px, 3vw, 36px);
	box-shadow: var(--u-shadow-1);
	transition: transform 0.6s var(--u-ease), box-shadow 0.6s var(--u-ease);
}
.u-step::before {
	counter-increment: u-step;
	content: "STEP " counter(u-step, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1 / -1;
	font-family: var(--u-f-latin);
	font-variant-numeric: tabular-nums;
	font-size: 0.74rem;
	letter-spacing: 0.2em;
	color: var(--u-accent);
	padding-top: 0.5em;
	white-space: nowrap;
}
.u-step > * { grid-column: 2; margin-block: 0; }
.u-step > * + * { margin-top: 8px; }
.u-step:hover { transform: translateZ(24px) translateX(6px); box-shadow: var(--u-shadow-2); }
@media (max-width: 620px) {
	.u-step { grid-template-columns: minmax(0, 1fr); }
	.u-step::before { grid-column: 1; grid-row: auto; padding-top: 0; }
	.u-step > * { grid-column: 1; }
}

.u-reasons {
	display: grid;
	gap: 1px;
	background: var(--u-rule);
	border-block: 1px solid var(--u-rule);
	counter-reset: u-reason;
}
.u-reason {
	background: var(--u-bg);
	display: grid;
	grid-template-columns: minmax(90px, 0.5fr) minmax(0, 3fr);
	gap: clamp(16px, 4vw, 48px);
	padding: clamp(28px, 4vw, 48px) 0;
	transition: background-color 0.5s var(--u-ease);
}
.u-reason::before {
	counter-increment: u-reason;
	content: counter(u-reason, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1 / -1;
	font-family: var(--u-f-latin);
	font-variant-numeric: tabular-nums;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	letter-spacing: 0.04em;
	color: transparent;
	-webkit-text-stroke: 1px var(--u-brass-500);
	line-height: 1;
	padding-top: 0.1em;
}
.u-reason > * { grid-column: 2; margin-block: 0; max-width: 42em; }
.u-reason > * + * { margin-top: 14px; }
.u-reason:hover { background: var(--u-bg-elev); }
.u-sunk .u-reason { background: var(--u-bg-sunk); }
@media (max-width: 700px) {
	.u-reason { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.u-reason::before { grid-column: 1; grid-row: auto; }
	.u-reason > * { grid-column: 1; }
}

/* --- 8. 料金 ------------------------------------------------------------- */

.u-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--u-f-latin);
	font-variant-numeric: tabular-nums;
	margin-block: 6px 20px;
}
.u-price strong,
.u-price b {
	font-size: clamp(2rem, 4.4vw, 3.2rem);
	font-weight: 400;
	letter-spacing: 0.01em;
	background: linear-gradient(120deg, var(--u-brass-500), var(--u-brass-300) 40%, var(--u-brass-700));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.u-opt-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--u-rule);
	border: 1px solid var(--u-rule);
	border-radius: 3px;
	overflow: hidden;
}
@media (max-width: 900px) { .u-opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .u-opt-grid { grid-template-columns: minmax(0, 1fr); } }
.u-opt {
	background: var(--u-bg-elev);
	padding: clamp(24px, 3vw, 34px);
	transition: background-color 0.45s var(--u-ease);
}
.u-opt:hover { background: var(--u-bg-sunk); }
.u-opt > * { margin-block: 0; }
.u-opt > * + * { margin-top: 10px; }

/* --- 9. よくある質問（コアの「詳細」ブロック） --------------------------- */

.u-faq {
	display: grid;
	gap: 1px;
	background: var(--u-rule);
	border-block: 1px solid var(--u-rule);
}
.u-faq details,
.u-faq .wp-block-details {
	background: var(--u-bg);
	margin: 0;
	padding: 0;
	border: 0;
}
.u-sunk .u-faq details { background: var(--u-bg-sunk); }
.u-faq summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 22px 44px 22px 34px;
	font-family: var(--u-f-display);
	font-size: 1.08rem;
	letter-spacing: 0.02em;
	line-height: 1.7;
	transition: color 0.35s var(--u-ease);
}
.u-faq summary::-webkit-details-marker { display: none; }
.u-faq summary:hover { color: var(--u-accent); }
.u-faq summary::before {
	content: "Q";
	position: absolute;
	left: 2px;
	top: 24px;
	font-family: var(--u-f-latin);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	color: var(--u-accent);
}
.u-faq summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	background:
		linear-gradient(var(--u-accent), var(--u-accent)) center / 12px 1px no-repeat,
		linear-gradient(var(--u-accent), var(--u-accent)) center / 1px 12px no-repeat;
	transition: transform 0.45s var(--u-ease);
}
.u-faq details[open] summary::after {
	background:
		linear-gradient(var(--u-accent), var(--u-accent)) center / 12px 1px no-repeat;
}
.u-faq details > :not(summary) {
	margin: 0 4px 0 34px;
	padding-bottom: 8px;
	color: var(--u-ink-2);
	font-size: 0.93rem;
	max-width: 46em;
}
.u-faq details > :last-child { padding-bottom: 26px; }

/* --- 10. セクションの地色・CTA ------------------------------------------- */

.u-band { padding-block: clamp(64px, 9vw, 132px); }
.u-sunk { background: var(--u-bg-sunk); }

.u-cta {
	position: relative;
	background: radial-gradient(90% 130% at 12% 0%, var(--u-lacquer-600) 0%, var(--u-lacquer-900) 58%, #010f0f 100%);
	color: var(--u-paper);
	padding-block: clamp(60px, 9vw, 116px);
	overflow: hidden;
	border-top: 1px solid rgba(236, 211, 179, 0.4);
}
.u-cta::after {
	content: "";
	position: absolute;
	width: 460px;
	height: 460px;
	right: -140px;
	top: -180px;
	border: 1px solid rgba(236, 211, 179, 0.14);
	border-radius: 50%;
	pointer-events: none;
}
.u-cta :is(h1, h2, h3, h4, h5, p, li, span, strong) { color: inherit; }
.u-cta :is(h1, h2, h3, h4) { font-family: var(--u-f-display); font-weight: 400; }
.u-cta .u-eyebrow { color: var(--u-brass-300); }
.u-cta > * { position: relative; z-index: 1; }

.u-rule { height: 1px; background: var(--u-rule); border: 0; margin: 0; }

/* --- 11. スクロール演出 -------------------------------------------------- */

.u-reveal {
	opacity: 0;
	transform: translateY(26px) rotateX(6deg);
	transform-origin: 50% 100%;
	transition: opacity 0.9s var(--u-ease), transform 1s var(--u-ease);
}
.u-reveal.is-in { opacity: 1; transform: none; }

/* 演出を控えめにする設定の端末では動かさない */
@media (prefers-reduced-motion: reduce) {
	.u-reveal { opacity: 1; transform: none; transition: none; }
	.unixy-hero__cue { display: none; }
	.unixy-plane { transition: none; transform: none; }
	.u-btn,
	.u-plate,
	.u-step,
	.u-bars li { transition-duration: 0.001ms; }
}

/* ブロックエディタの編集画面では演出を切って中身を見えるようにする */
.block-editor-page .u-reveal { opacity: 1; transform: none; }