/*
 * KamiLex 補助スタイル（v0.10.0 KamiLex Brand Design Sprint）
 * theme.json / ブロック属性で表現できない装飾・アニメーション・レスポンシブ調整を置く。
 * 参照デザイン：Apple / Notion / Linear / Stripe / Vercel
 */

/* ============================================================
   0. ベース調整 / デザイントークン
   ============================================================ */

:root {
	--kamilex-coral: #ff687d;
	--kamilex-soft-pink: #f3a1b7;
	--kamilex-blue: #4b9de3;
	--kamilex-light-blue: #a9d8ff;
	--kamilex-brand-gradient: linear-gradient(110deg, var(--kamilex-coral) 0%, var(--kamilex-soft-pink) 38%, #c6b4e7 64%, var(--kamilex-blue) 100%);
	--kamilex-brand-glow: 0 0 24px rgba(255, 104, 125, .28), 0 0 30px rgba(75, 157, 227, .24);
	--kamilex-brand-glow-light: 0 0 20px rgba(255, 255, 255, .88), 0 10px 28px rgba(255, 104, 125, .16), 0 12px 32px rgba(75, 157, 227, .16);
	--kamilex-radius-sm: 12px;
	--kamilex-radius-md: 16px;
	--kamilex-radius-lg: 20px;
	--kamilex-radius-xl: 24px;
	--kamilex-shadow-sm: var(--wp--preset--shadow--sm, 0 1px 2px rgba(20, 18, 16, 0.06));
	--kamilex-shadow-md: var(--wp--preset--shadow--md, 0 16px 32px -20px rgba(20, 18, 16, 0.22));
	--kamilex-shadow-lg: var(--wp--preset--shadow--lg, 0 24px 48px -24px rgba(20, 18, 16, 0.28));
	--kamilex-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	position: relative;
}

/* ============================================================
   0.5 静かな質感（紙のグレイン） — 実装フェーズ第2弾「静かな高級感」
   色を増やさず、ごく微細なノイズを画面全体に重ねるだけで、真っ白な
   デジタル画面の素っ気なさを和らげ、上質な紙に近い質感を出す。
   写真を用意できない現状の代替として、素材感そのものをデザインする。
   ============================================================ */

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: multiply;
	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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
}

/* セクションの切り替わりを「色の断絶」ではなく「素材の継ぎ目」として見せる。 */
.has-bg-alt-background-color,
.kamilex-section-seam {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

/* ============================================================
   0.6 サイト全体の空気感（v0.16.0 モーション演出ブラッシュアップ）
   真っ白な余白が続くと静かすぎる印象になるため、ごく薄い光の滲みを
   画面の裏側にfixedで敷き、極めてゆっくり（40秒周期）漂わせる。
   transformのみを animate するためレイアウトに影響せず、
   CLS/LCPへの影響はない。position:-1 のため通常コンテンツの
   背景色（bg-alt等）で自然に隠れ、余白部分にだけ薄く滲む。
   ============================================================ */

body::after {
	content: "";
	position: fixed;
	inset: -10%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(1100px 760px at 18% -8%, var(--wp--preset--color--accent-tint) 0%, transparent 60%),
		radial-gradient(950px 680px at 102% 108%, var(--wp--preset--color--bg-alt) 0%, transparent 58%);
	opacity: 0.55;
	animation: kamilex-bg-drift 42s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes kamilex-bg-drift {
	0% { transform: translate(0, 0); }
	100% { transform: translate(-2.5%, 2%); }
}

@media (prefers-reduced-motion: reduce) {
	body::after {
		animation: none;
	}
}

/* KamiLexとは（トップページ）の数字ラベルを、ランキングと同じ欧文displayフォント＋アクセントカラーに統一。 */
.kamilex-step-number {
	font-family: var(--wp--preset--font-family--latin-display);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	letter-spacing: -0.01em;
}

p {
	color: var(--wp--preset--color--text-primary);
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bg);
}

/* ============================================================
   1. スクロールフェードイン（motion.js と連動）
   ============================================================ */

/* JSが読み込めた場合のみ初期状態を非表示にする（no-JS環境でのコンテンツ非表示を防ぐ安全策） */
/* v0.16.0：fade upにごくわずかなズーム（scale 0.98→1）を重ね、
   「動きを見せる」のではなく「心地よさを感じる」速度（0.85s）に調整。 */
.kamilex-js .kamilex-reveal {
	opacity: 0;
	transform: translateY(26px) scale(0.98);
	transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.kamilex-reveal.kamilex-in {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.kamilex-reveal-delay-1.kamilex-in { transition-delay: 0.08s; }
.kamilex-reveal-delay-2.kamilex-in { transition-delay: 0.16s; }
.kamilex-reveal-delay-3.kamilex-in { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
	.kamilex-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
   1.5 ヒーロー装飾（Liquid Light・スクロール誘導）
   ============================================================ */

.kamilex-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		linear-gradient(120deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 255, 0.92) 46%, rgba(241, 249, 250, 0.9) 100%);
}

.kamilex-hero::before {
	content: "";
	position: absolute;
	inset: -24% -12%;
	background:
		radial-gradient(circle at 72% 34%, rgba(158, 193, 255, 0.26) 0 9%, rgba(158, 193, 255, 0) 32%),
		radial-gradient(circle at 82% 72%, rgba(126, 222, 213, 0.2) 0 8%, rgba(126, 222, 213, 0) 30%),
		radial-gradient(circle at 54% 64%, rgba(218, 198, 255, 0.18) 0 10%, rgba(218, 198, 255, 0) 34%),
		radial-gradient(circle at 18% 18%, rgba(183, 101, 79, 0.08) 0 7%, rgba(183, 101, 79, 0) 27%);
	transform: translate3d(0, var(--kamilex-parallax-y, 0px), 0) scale(1.05);
	pointer-events: none;
	z-index: -1;
	animation: kamilex-liquid-tide 16s ease-in-out infinite alternate;
	will-change: transform, opacity;
}

.kamilex-hero::after {
	content: "";
	position: absolute;
	inset: -40% -30%;
	background:
		linear-gradient(114deg, transparent 38%, rgba(255, 255, 255, 0.08) 44%, rgba(255, 255, 255, 0.82) 49%, rgba(188, 217, 255, 0.28) 52%, transparent 59%);
	filter: blur(18px);
	opacity: 0.76;
	pointer-events: none;
	z-index: -1;
	animation: kamilex-liquid-sweep 12s cubic-bezier(0.45, 0, 0.2, 1) infinite;
	will-change: transform;
}

.kamilex-hero > *:not(.kamilex-liquid-light) {
	position: relative;
	z-index: 2;
}

.kamilex-liquid-light {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.kamilex-liquid-light__beam {
	position: absolute;
	top: -25%;
	right: 4%;
	width: min(44vw, 560px);
	height: 150%;
	border-radius: 50%;
	background:
		linear-gradient(145deg, rgba(255,255,255,0) 15%, rgba(255,255,255,.72) 45%, rgba(179,213,255,.2) 58%, rgba(255,255,255,0) 78%);
	filter: blur(22px);
	opacity: .72;
	transform: rotate(9deg);
	animation: kamilex-liquid-beam 10s ease-in-out infinite alternate;
}

.kamilex-liquid-light__bubble {
	position: absolute;
	display: block;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 48% 52% 56% 44% / 46% 43% 57% 54%;
	background:
		radial-gradient(circle at 29% 22%, rgba(255,255,255,.92) 0 5%, rgba(255,255,255,.28) 13%, transparent 28%),
		radial-gradient(circle at 70% 78%, rgba(122,213,203,.22), transparent 38%),
		linear-gradient(145deg, rgba(255,255,255,.3), rgba(166,192,255,.13) 52%, rgba(218,178,255,.12));
	box-shadow:
		inset 18px 16px 40px rgba(255,255,255,.48),
		inset -16px -20px 36px rgba(119,167,220,.12),
		0 24px 70px rgba(81,113,164,.12);
	backdrop-filter: blur(2px) saturate(125%);
	will-change: transform;
}

.kamilex-liquid-light__bubble--large {
	top: 12%;
	right: 8%;
	width: clamp(260px, 36vw, 520px);
	aspect-ratio: 1 / 1.05;
	animation: kamilex-bubble-float-large 14s ease-in-out infinite alternate;
}

.kamilex-liquid-light__bubble--medium {
	right: 39%;
	bottom: 4%;
	width: clamp(92px, 12vw, 170px);
	aspect-ratio: 1;
	opacity: .65;
	animation: kamilex-bubble-float-medium 11s ease-in-out infinite alternate;
}

.kamilex-liquid-light__bubble--small {
	top: 18%;
	right: 44%;
	width: clamp(42px, 5vw, 72px);
	aspect-ratio: 1;
	opacity: .56;
	animation: kamilex-bubble-float-small 9s ease-in-out infinite alternate;
}

@keyframes kamilex-liquid-tide {
	0% { transform: translate3d(-1%, var(--kamilex-parallax-y, 0px), 0) scale(1.04); opacity: .82; }
	100% { transform: translate3d(2%, calc(var(--kamilex-parallax-y, 0px) + 14px), 0) scale(1.1); opacity: 1; }
}

@keyframes kamilex-liquid-sweep {
	0%, 18% { transform: translate3d(-16%, 0, 0) rotate(-2deg); opacity: .3; }
	55% { opacity: .82; }
	82%, 100% { transform: translate3d(18%, 4%, 0) rotate(2deg); opacity: .38; }
}

@keyframes kamilex-liquid-beam {
	from { transform: translate3d(-3%, -1%, 0) rotate(8deg); opacity: .52; }
	to { transform: translate3d(5%, 3%, 0) rotate(12deg); opacity: .82; }
}

@keyframes kamilex-bubble-float-large {
	from { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); }
	to { transform: translate3d(-18px, 16px, 0) rotate(3deg) scale(1.025); }
}

@keyframes kamilex-bubble-float-medium {
	from { transform: translate3d(0, 0, 0) rotate(4deg); }
	to { transform: translate3d(12px, -18px, 0) rotate(-3deg); }
}

@keyframes kamilex-bubble-float-small {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-8px, 14px, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.kamilex-hero::before,
	.kamilex-hero::after,
	.kamilex-liquid-light__beam,
	.kamilex-liquid-light__bubble {
		animation: none;
		will-change: auto;
	}
}

.kamilex-hero-mark {
	display: block;
	width: 32px;
	height: 2px;
	background: var(--wp--preset--color--ink);
	margin-bottom: 20px;
}

.kamilex-scroll-cue {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin: var(--wp--preset--spacing--64) auto 0;
	text-decoration: none !important;
	color: var(--wp--preset--color--text-secondary);
}

.kamilex-scroll-cue span {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Lex & Ami product entry: visible in the first homepage experience. */
.kamilex-home-ai {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(240px, .8fr);
	gap: clamp(24px, 5vw, 52px);
	align-items: center;
	width: 100%;
	margin-top: clamp(24px, 4vw, 40px);
	padding: clamp(26px, 5vw, 52px);
	border: 1px solid rgba(46, 43, 58, .1);
	border-radius: clamp(24px, 4vw, 36px);
	background:
		radial-gradient(circle at 8% 22%, rgba(255, 104, 125, .11), transparent 34%),
		radial-gradient(circle at 92% 76%, rgba(75, 157, 227, .12), transparent 36%),
		linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(249, 248, 252, .95));
	box-shadow: 0 24px 70px rgba(48, 44, 66, .13);
	color: #292730;
	font-family: "Zen Kaku Gothic New", "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
	text-align: left;
}

/* Keep the brand hero and the single Lex & Ami section ahead of legacy
   database-saved sections that still fall back to order: 0. */
body.home .site-main > .kamilex-hero {
	order: -2 !important;
}

body.home .site-main > .kamilex-home-ai {
	order: -1 !important;
}

/* Some saved front-page revisions retain a second legacy copy. Never display it. */
body.home .site-main > .kamilex-home-ai ~ .kamilex-home-ai {
	display: none;
}

.kamilex-home-ai__eyebrow,
.kamilex-home-ai__promise,
.kamilex-home-ai__lead,
.kamilex-home-ai__after,
.kamilex-home-ai__guide p {
	margin: 0;
}

.kamilex-home-ai__eyebrow {
	color: #8f594c;
	font: 700 .68rem/1.2 "Geist", sans-serif;
	letter-spacing: .14em;
}

.kamilex-home-ai__promise {
	margin-top: 14px;
	color: #56515d;
	font-size: clamp(.95rem, 2vw, 1.08rem);
	font-weight: 700;
}

.kamilex-home-ai h2 {
	margin: 4px 0 0;
	color: #24222a;
	font-family: "Zen Kaku Gothic New", "Geist", sans-serif;
	font-size: clamp(2.35rem, 6vw, 4rem);
	font-weight: 700;
	letter-spacing: -.055em;
	line-height: 1.05;
}

.kamilex-home-ai__lead {
	max-width: 560px;
	margin-top: 18px;
	color: #625e68;
	font-size: clamp(.92rem, 2vw, 1rem);
	line-height: 1.85;
}

.kamilex-home-ai__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.kamilex-home-ai__facts li {
	padding: 7px 12px;
	border: 1px solid rgba(73, 67, 83, .12);
	border-radius: 999px;
	background: rgba(255, 255, 255, .78);
	color: #57525e;
	font-size: .75rem;
	font-weight: 700;
}

.kamilex-home-ai__cta {
	position: relative;
	isolation: isolate;
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: min(100%, 420px);
	min-height: 62px;
	margin-top: 22px;
	padding: 16px 48px 16px 24px;
	border: 2px solid transparent;
	border-radius: 8px;
	background: linear-gradient(#fff, #fff) padding-box, var(--kamilex-brand-gradient) border-box;
	box-shadow: 0 13px 30px rgba(48, 44, 57, .14), inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, .86), var(--kamilex-brand-glow-light);
	color: #292630;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .025em;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.kamilex-home-ai__cta::before {
	content: "";
	position: absolute;
	inset: -6px;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(110deg, rgba(255, 113, 132, .66) 0%, rgba(255, 255, 255, .98) 50%, rgba(93, 169, 246, .66) 100%);
	filter: blur(10px);
	opacity: .46;
	pointer-events: none;
	animation: kamilex-brand-breathe 3.4s ease-in-out infinite;
}

.kamilex-home-ai__cta-icon {
	display: none;
}

.kamilex-home-ai__cta-label { text-align: center; }
.kamilex-home-ai__cta-arrow {
	position: absolute;
	right: 18px;
	font-size: 1.1rem;
}

.kamilex-home-ai__cta:hover,
.kamilex-home-ai__cta:focus-visible {
	background: linear-gradient(#fff, #fff) padding-box, var(--kamilex-brand-gradient) border-box;
	box-shadow: 0 17px 36px rgba(48, 44, 57, .17), inset 0 1px 0 #fff, 0 0 28px rgba(255, 255, 255, .98), var(--kamilex-brand-glow);
	color: #292630;
	transform: translateY(-2px);
}

.kamilex-home-ai__cta:focus-visible {
	outline: 3px solid rgba(143, 130, 189, .42);
	outline-offset: 3px;
}

.kamilex-home-ai__after {
	margin-top: 11px;
	color: #77717d;
	font-size: .7rem;
	line-height: 1.6;
}

.kamilex-home-ai__cta--product {
	margin-top: 16px;
}

.kamilex-home-ai__cta--product::before {
	opacity: .4;
	animation-delay: -1.7s;
}

.kamilex-home-ai__ranking-link {
	display: inline-block;
	margin-top: 14px;
	color: #5f5966;
	font-size: .78rem;
	font-weight: 700;
	text-underline-offset: 4px;
}

.kamilex-home-ai__ranking-link:hover,
.kamilex-home-ai__ranking-link:focus-visible {
	color: #276fae;
}

.kl-ranking-article-entry {
	box-sizing: border-box;
	margin: 38px 0 12px;
	padding: clamp(20px, 4vw, 30px);
	border: 1px solid rgba(107, 114, 156, .16);
	border-radius: 22px;
	background: linear-gradient(135deg, rgba(255, 241, 239, .9), rgba(245, 250, 255, .96));
	box-shadow: 0 14px 34px rgba(48, 44, 66, .08);
}

.kl-ranking-article-entry p,
.kl-ranking-article-entry h2,
.kl-ranking-article-entry span { margin: 0; }
.kl-ranking-article-entry p { color: #9a5f56; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.kl-ranking-article-entry h2 { margin-top: 8px; font-size: clamp(1.25rem, 4vw, 1.65rem); line-height: 1.35; }
.kl-ranking-article-entry span { display: block; margin-top: 9px; color: #66616b; font-size: .88rem; line-height: 1.75; }
.kl-ranking-article-entry__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.kl-ranking-article-entry__actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 14px; border: 1px solid rgba(72, 90, 128, .18); border-radius: 14px; font-size: .86rem; font-weight: 800; line-height: 1.4; text-align: center; text-decoration: none; }
.kl-ranking-article-entry__ranking { color: #315f8c; background: rgba(255, 255, 255, .82); }
.kl-ranking-article-entry__consult { color: #25212a; background: linear-gradient(110deg, #ffe3df, #e4eeff); box-shadow: 0 8px 20px rgba(107, 114, 156, .18); }
.kl-ranking-article-entry__actions a:hover,
.kl-ranking-article-entry__actions a:focus-visible { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(72, 90, 128, .16); }
.kl-ranking-article-entry__actions a:focus-visible { outline: 3px solid rgba(49, 95, 140, .3); outline-offset: 2px; }

.kl-article-quick-consult {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 5px 16px;
	align-items: center;
	box-sizing: border-box;
	margin: 24px 0;
	padding: 16px 18px;
	border: 1px solid rgba(72, 90, 128, .16);
	border-radius: 16px;
	background: linear-gradient(110deg, rgba(255, 237, 234, .82), rgba(232, 241, 255, .9));
}
.kl-article-quick-consult strong { font-size: .95rem; line-height: 1.45; }
.kl-article-quick-consult span { color: #66616b; font-size: .78rem; line-height: 1.55; }
.kl-article-quick-consult a {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 8px 14px;
	border-radius: 12px;
	color: #fff;
	background: #315f8c;
	font-size: .8rem;
	font-weight: 800;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
}
.kl-article-quick-consult a:focus-visible { outline: 3px solid rgba(49, 95, 140, .3); outline-offset: 3px; }

@media (max-width: 520px) {
	.kl-ranking-article-entry__actions { grid-template-columns: 1fr; }
	.kl-article-quick-consult { grid-template-columns: 1fr; }
	.kl-article-quick-consult a { grid-column: 1; grid-row: auto; margin-top: 7px; }
}

.kamilex-home-ai__guides {
	display: grid;
	gap: 12px;
}

.kamilex-home-ai__guide {
	display: grid;
	grid-template-columns: 50px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	min-width: 0;
	padding: 16px;
	border: 1px solid rgba(64, 59, 73, .1);
	border-radius: 18px;
	background: rgba(255, 255, 255, .75);
}

.kamilex-home-ai__portrait {
	display: block;
	width: 50px;
	height: 50px;
	overflow: hidden;
	border: 1px solid rgba(103, 94, 130, .14);
	border-radius: 15px;
	background: linear-gradient(145deg, #ede9f7, #f6ece8);
	box-shadow: 0 5px 14px rgba(65, 57, 82, .1);
}

.kamilex-home-ai__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kamilex-home-ai__guide strong,
.kamilex-home-ai__guide span {
	display: block;
}

.kamilex-home-ai__guide strong {
	font-size: .92rem;
}

.kamilex-home-ai__guide p > span {
	margin-top: 3px;
	color: #716c76;
	font-size: .72rem;
	line-height: 1.5;
}

@media (max-width: 700px) {
	.kamilex-home-ai {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		margin-top: 38px;
		padding: 25px 19px 20px;
		border-radius: 24px;
	}

	.kamilex-home-ai h2 {
		font-size: clamp(2.25rem, 14vw, 3.15rem);
	}

		.kamilex-home-ai__cta {
			width: 100%;
			min-height: 62px;
			padding-right: 42px;
			padding-left: 18px;
		}

	.kamilex-home-ai__guides {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.kamilex-home-ai__guide {
		grid-template-columns: 40px minmax(0, 1fr);
		gap: 10px;
		padding: 12px 10px;
		border-radius: 15px;
	}

	.kamilex-home-ai__portrait {
		width: 40px;
		height: 40px;
		border-radius: 12px;
	}

	.kamilex-home-ai__guide p > span {
		font-size: .66rem;
	}
}

@media (max-width: 370px) {
	.kamilex-home-ai__guides {
		grid-template-columns: 1fr;
	}
}

/* The AI stylist is the homepage's primary action. Legacy article buttons in
   database-saved hero templates remain available below, but no longer compete
   inside the first view. */
body.home .kamilex-hero > .wp-block-buttons,
body.home .kamilex-hero > .kamilex-scroll-cue {
	display: none;
}

.kamilex-home-consult,
.kamilex-home-steps {
	box-sizing: border-box;
	padding: clamp(72px, 9vw, 112px) 20px;
	font-family: "Zen Kaku Gothic New", "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
}

.kamilex-home-consult {
	background:
		radial-gradient(circle at 4% 10%, rgba(255, 104, 125, .055), transparent 30%),
		radial-gradient(circle at 96% 90%, rgba(75, 157, 227, .06), transparent 32%),
		#fff;
}

.kamilex-home-steps {
	background: #f7f6f3;
}

.kamilex-home-consult__inner,
.kamilex-home-steps__inner {
	width: min(100%, 1040px);
	margin: 0 auto;
}

.kamilex-home-consult h2,
.kamilex-home-steps h2 {
	max-width: 760px;
	margin: 8px 0 0;
	color: #25232b;
	font-size: clamp(1.85rem, 4vw, 2.75rem);
	letter-spacing: -.035em;
	line-height: 1.25;
}

.kamilex-home-steps h2 {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: clamp(1.8rem, 4vw, 2.56rem);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.22;
}

.kamilex-home-consult__intro {
	max-width: 680px;
	margin: 16px 0 0;
	color: #69646e;
	font-size: .98rem;
	line-height: 1.8;
}

.kamilex-home-consult__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 36px;
}

.kamilex-home-consult__card {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	min-width: 0;
	min-height: 176px;
	padding: 24px;
	border: 1px solid rgba(48, 44, 57, .1);
	border-radius: 22px;
	background: linear-gradient(145deg, #fff, #f7f8fc);
	box-shadow: 0 12px 34px rgba(42, 38, 52, .07);
	color: #292630;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.kamilex-home-consult__card:hover,
.kamilex-home-consult__card:focus-visible {
	border-color: rgba(113, 123, 199, .3);
	box-shadow: 0 18px 42px rgba(42, 38, 52, .11), 0 8px 24px rgba(255, 104, 125, .07), 0 8px 24px rgba(75, 157, 227, .07);
	color: #292630;
	transform: translateY(-2px);
}

.kamilex-home-consult__card:focus-visible {
	outline: 3px solid rgba(143, 130, 189, .35);
	outline-offset: 3px;
}

.kamilex-home-consult__tag {
	display: flex;
	align-items: center;
	gap: 9px;
	color: #8f594c;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
}

.kamilex-home-consult__tag img {
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border-radius: 9px;
}

@keyframes kamilex-brand-breathe {
	0%, 100% { opacity: .28; transform: scale(.985); }
	50% { opacity: .58; transform: scale(1.015); }
}

.kamilex-home-consult__card strong {
	display: block;
	margin-top: 13px;
	font-size: clamp(1.05rem, 2.4vw, 1.3rem);
	line-height: 1.55;
}

.kamilex-home-consult__card small {
	margin-top: auto;
	padding-top: 20px;
	color: #5e5964;
	font-size: .75rem;
	font-weight: 700;
}

.kamilex-home-steps ol {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.kamilex-home-steps li {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	min-width: 0;
	padding: 24px;
	border: 1px solid rgba(48, 44, 57, .09);
	border-radius: 20px;
	background: rgba(255, 255, 255, .78);
}

.kamilex-home-steps li > span {
	color: #9b6759;
	font: 700 .72rem/1.2 "Geist", sans-serif;
	letter-spacing: .12em;
}

.kamilex-home-steps li > strong {
	margin-top: 14px;
	color: #2c2931;
	font-size: 1rem;
}

.kamilex-home-steps li > small {
	margin-top: 8px;
	color: #716c75;
	font-size: .78rem;
	line-height: 1.7;
}

.kamilex-home-steps__trust {
	margin-top: 24px;
	padding: 24px;
	border-radius: 20px;
	background: #292630;
	color: #fff;
}

.kamilex-home-steps__trust strong {
	display: block;
	font-size: 1rem;
}

.kamilex-home-steps__trust p {
	max-width: 780px;
	margin: 8px 0 0;
	color: #d4d0d8;
	font-size: .78rem;
	line-height: 1.75;
}

@media (max-width: 700px) {
	body.home .kamilex-hero {
		min-height: clamp(540px, 145vw, 600px) !important;
		padding-top: 56px !important;
		padding-bottom: 16px !important;
	}

	body.home .kamilex-hero > p:first-of-type {
		margin-bottom: 0;
	}

	body.home .kamilex-hero > h1 {
		font-size: clamp(2.05rem, 9.2vw, 2.35rem) !important;
	}

	body.home .site-main > .kamilex-home-ai {
		margin-top: 0;
	}

	.kamilex-home-consult,
	.kamilex-home-steps {
		padding: 64px 20px;
	}

	.kamilex-home-consult__grid,
	.kamilex-home-steps ol {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		margin-top: 28px;
	}

	.kamilex-home-consult__card {
		min-height: 148px;
		padding: 20px;
	}

	.kamilex-home-steps li {
		padding: 20px;
	}
}

.kamilex-scroll-cue-dot {
	animation: kamilex-scroll-bounce 1.8s ease-in-out infinite;
}

@keyframes kamilex-scroll-bounce {
	0%, 100% { transform: translateY(0); opacity: 1; }
	50% { transform: translateY(6px); opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
	.kamilex-scroll-cue-dot,
	.kamilex-home-ai__cta::before {
		animation: none;
	}
}

@media (max-width: 782px) {
	.kamilex-hero {
		background: linear-gradient(145deg, #fff 0%, #f7faff 58%, #f1faf8 100%);
	}

	.kamilex-hero::before {
		inset: -10% -60%;
	}

	.kamilex-hero::after {
		inset: -32% -88%;
		opacity: .6;
	}

	.kamilex-liquid-light__beam {
		top: -12%;
		right: -30%;
		width: 86vw;
		height: 125%;
		opacity: .5;
	}

	.kamilex-liquid-light__bubble--large {
		top: 25%;
		right: -31%;
		width: min(82vw, 350px);
		opacity: .72;
	}

	.kamilex-liquid-light__bubble--medium {
		right: 13%;
		bottom: 6%;
		width: 92px;
		opacity: .52;
	}

	.kamilex-liquid-light__bubble--small {
		top: 12%;
		right: 8%;
		width: 48px;
		opacity: .48;
	}

	.kamilex-scroll-cue {
		display: none;
	}
}

/* ============================================================
   2. ヘッダー / ロゴ / ナビゲーション
   ============================================================ */

.site-header {
	border-bottom: 1px solid transparent;
	backdrop-filter: saturate(180%) blur(12px);
	background: rgba(255, 255, 255, 0.86);
	position: sticky;
	top: 0;
	z-index: 40;
	transition: border-color 0.3s ease;
}

.site-header.kamilex-scrolled {
	border-bottom-color: var(--wp--preset--color--hairline);
}

.kamilex-logo {
	display: flex;
	align-items: center;
	gap: 0 !important;
	text-decoration: none !important;
}

/* WordPressの保存済み追加CSSが出力する旧「KL」マークを無効化する。 */
.kamilex-logo::before {
	content: none !important;
	display: none !important;
}

.kamilex-logo-image {
	display: block;
	max-width: 100%;
	width: auto;
}

.kamilex-logo-image--header,
.site-header .kamilex-logo-image {
	height: auto;
	width: 142px;
}

.kamilex-logo-image--footer,
.site-footer .kamilex-logo-image {
	height: auto;
	width: 132px;
}

.site-header .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--text-primary);
	transition: color 0.2s ease;
}

.site-header .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

.site-footer {
	border-top: 1px solid var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--bg-alt);
}

/* スキップリンク：キーボード操作時のみ表示し、ヘッダー等の反復要素を読み飛ばせるようにする */
.kamilex-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 100;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg) !important;
	padding: 12px 20px;
	border-radius: var(--kamilex-radius-md, 12px);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none !important;
	transition: top 0.2s ease;
}

.kamilex-skip-link:focus {
	top: 16px;
}

/* ============================================================
   3. ボタン
   ============================================================ */

.wp-block-button__link {
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, box-shadow 0.25s ease;
	letter-spacing: -0.01em;
}

.wp-block-button__link:hover {
	transform: translateY(-2px) scale(1.015);
	box-shadow: 0 12px 24px -12px rgba(20, 18, 16, 0.35);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink) !important;
	background: transparent !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--bg) !important;
}

/* ============================================================
   4. 記事カード
   ============================================================ */

.kamilex-article-card {
	transition: transform 0.4s var(--kamilex-ease), box-shadow 0.4s var(--kamilex-ease), border-color 0.4s ease;
	border-radius: var(--kamilex-radius-lg) !important;
	overflow: hidden;
	background: var(--wp--preset--color--bg);
	box-shadow: var(--kamilex-shadow-sm);
}

.kamilex-article-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--kamilex-shadow-lg);
	border-color: var(--wp--preset--color--accent) !important;
}

.kamilex-article-card .wp-block-post-featured-image {
	margin: 0 0 var(--wp--preset--spacing--16) 0;
	border-radius: 16px;
	overflow: hidden;
}

.kamilex-article-card .wp-block-post-featured-image img {
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.kamilex-article-card:hover .wp-block-post-featured-image img {
	/* v0.16.0：指示書に合わせて1.02〜1.03程度の上品なズームに調整（従来1.045は主張が強すぎた）。 */
	transform: scale(1.03);
}

.kamilex-article-card .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.01em;
}

.kamilex-article-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

/* カテゴリーバッジ（記事カード・記事詳細で使用） */
.kamilex-badge {
	display: inline-block;
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent-deep);
	padding: 4px 14px;
	border-radius: 999px;
	text-decoration: none;
	border-bottom: none;
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

.kamilex-badge a {
	display: inline;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	text-decoration: none;
}

.kamilex-badge a:hover {
	background: transparent;
	color: var(--wp--preset--color--accent-deep);
	text-decoration: underline;
}

/* ホームのカテゴリー別インライン装飾より優先し、外側のピルだけを残す。 */
body.home #latest-articles .wp-block-post.wp-block-post .wp-block-post-terms.kamilex-badge a {
	display: inline !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
}

/* ============================================================
   4.5 記事カード（Featured） — 実装フェーズ第2弾「静かな高級感」
   Standard（グリッド）・Rank（編集部セレクト）と並ぶ3階層目。
   アイキャッチ画像が無い現状の代替として、紙のグレイン・極薄
   グラデーション・カテゴリー頭文字の透かしで「素材感」を作る。
   ============================================================ */

.kamilex-featured-card {
	overflow: hidden;
	background: var(--wp--preset--color--bg);
	transition: transform 0.4s var(--kamilex-ease), box-shadow 0.4s var(--kamilex-ease), border-color 0.4s ease;
}

.kamilex-featured-card:hover {
	/* v0.16.0：Standard記事カードと同じ「少しだけ浮く」を、面が大きい分控えめに適用。 */
	transform: translateY(-4px);
	box-shadow: var(--kamilex-shadow-md);
	border-color: var(--wp--preset--color--accent) !important;
}

.kamilex-featured-card:hover .kamilex-featured-media--photo .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.kamilex-featured-media {
	position: relative;
	flex: 1 1 360px;
	min-height: 320px;
	overflow: hidden;
	background:
		linear-gradient(160deg, var(--wp--preset--color--accent-tint) 0%, var(--wp--preset--color--bg-alt) 55%, var(--wp--preset--color--bg) 100%);
}

.kamilex-featured-watermark {
	position: absolute;
	right: -0.05em;
	bottom: -0.22em;
	font-family: var(--wp--preset--font-family--mincho);
	font-style: italic;
	font-size: 14rem;
	line-height: 1;
	color: var(--wp--preset--color--ink);
	opacity: 0.05;
	pointer-events: none;
	user-select: none;
}

.kamilex-featured-mark {
	position: absolute;
	left: 32px;
	bottom: 32px;
	width: 40px;
	height: 2px;
	background: var(--wp--preset--color--accent);
}

.kamilex-featured-content {
	flex: 1 1 360px;
	padding: var(--wp--preset--spacing--48) var(--wp--preset--spacing--48);
}

.kamilex-featured-label {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	margin: 0;
}

.kamilex-featured-content .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	letter-spacing: -0.01em;
}

.kamilex-featured-content .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 600px) {
	.kamilex-featured-media {
		min-height: 200px;
		flex-basis: 100%;
	}

	.kamilex-featured-watermark {
		font-size: 8rem;
	}

	.kamilex-featured-content {
		padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--24);
	}
}

/* 実写真がある記事はそのままFeaturedの主役にする（実装フェーズ第3弾：写真ルール）。 */
.kamilex-featured-media--photo {
	padding: 0;
}

.kamilex-featured-media--photo .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}

.kamilex-featured-media--photo .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--kamilex-ease);
}

/* ============================================================
   4.6 ブランドステートメント（トップページ） — 実装フェーズ第3弾
   スクロール中に一度だけ現れる「間」。色・アニメーションを足さず、
   線・余白・タイポグラフィだけで象徴的な瞬間を作る。
   ============================================================ */

.kamilex-statement {
	text-align: center;
}

.kamilex-statement-mark {
	display: block;
	width: 48px;
	height: 2px;
	background: var(--wp--preset--color--ink);
	margin: 0 auto var(--wp--preset--spacing--32);
}

.kamilex-statement-text {
	font-family: var(--wp--preset--font-family--mincho);
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.kamilex-statement-signature {
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--latin-display);
}

/* ============================================================
   5. 人気カテゴリー（トップページ）
   ============================================================ */

.kamilex-category-grid {
	gap: var(--wp--preset--spacing--16);
}

.kamilex-category-card {
	position: relative;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--kamilex-radius-lg);
	padding: var(--wp--preset--spacing--24) 84px var(--wp--preset--spacing--24) var(--wp--preset--spacing--24);
	transition: border-color 0.3s ease, transform 0.3s var(--kamilex-ease), box-shadow 0.3s ease;
	background: var(--wp--preset--color--bg);
	box-shadow: var(--kamilex-shadow-sm);
}

.kamilex-category-card[data-category-icon]::after,
.kamilex-category-card:has(a[href*="/category/%e3%83%89%e3%83%a9%e3%82%a4%e3%83%a4%e3%83%bc%e3%83%bb%e3%83%98%e3%82%a2%e3%82%a2%e3%82%a4%e3%83%ad%e3%83%b3/"])::after,
.kamilex-category-card:has(a[href*="/category/%e3%83%98%e3%82%a2%e3%82%b1%e3%82%a2/"])::after,
.kamilex-category-card:has(a[href*="/category/%e3%82%b7%e3%83%a3%e3%83%b3%e3%83%97%e3%83%bc%e3%83%bb%e3%83%88%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a1%e3%83%b3%e3%83%88/"])::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 48px;
	height: 48px;
	transform: translateY(-50%);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	pointer-events: none;
}

.kamilex-category-card[data-category-icon="hair-tools"]::after { background-image: url("../images/popular-category-icons/hair-tools.svg"); }
.kamilex-category-card[data-category-icon="hair-care"]::after { background-image: url("../images/popular-category-icons/hair-care.svg"); }
.kamilex-category-card[data-category-icon="shampoo"]::after { background-image: url("../images/popular-category-icons/shampoo.svg"); }
.kamilex-category-card:has(a[href*="/category/%e3%83%89%e3%83%a9%e3%82%a4%e3%83%a4%e3%83%bc%e3%83%bb%e3%83%98%e3%82%a2%e3%82%a2%e3%82%a4%e3%83%ad%e3%83%b3/"])::after { background-image: url("../images/popular-category-icons/hair-tools.svg"); }
.kamilex-category-card:has(a[href*="/category/%e3%83%98%e3%82%a2%e3%82%b1%e3%82%a2/"])::after { background-image: url("../images/popular-category-icons/hair-care.svg"); }
.kamilex-category-card:has(a[href*="/category/%e3%82%b7%e3%83%a3%e3%83%b3%e3%83%97%e3%83%bc%e3%83%bb%e3%83%88%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a1%e3%83%b3%e3%83%88/"])::after { background-image: url("../images/popular-category-icons/shampoo.svg"); }

.kamilex-category-card:hover {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-4px);
	box-shadow: var(--kamilex-shadow-md);
}

.kamilex-category-card a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* ============================================================
   6. 人気記事ランキング（トップページ）
   ============================================================ */

.kamilex-rank-list {
	gap: var(--wp--preset--spacing--16);
}

.kamilex-rank-item {
	align-items: baseline;
	gap: var(--wp--preset--spacing--24);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	padding-bottom: var(--wp--preset--spacing--16);
	width: 100%;
	transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.kamilex-rank-item:hover {
	padding-left: 4px;
}

.kamilex-rank-number {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	/* 実装フェーズ第1弾：Interからロゴ用の欧文displayフォント（Fraunces）へ変更。 */
	font-family: var(--wp--preset--font-family--latin-display);
	min-width: 2.5rem;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
}

.kamilex-rank-item a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.kamilex-rank-item a:hover {
	color: var(--wp--preset--color--accent);
}

/* ============================================================
   7. 美容師監修セクション / KamiLex独自コンポーネント
   ============================================================ */

.kamilex-supervisor-section .kamilex-badge {
	margin-bottom: var(--wp--preset--spacing--16);
}

.kamilex-component {
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
	background: var(--wp--preset--color--bg);
}

.kamilex-component-summary,
.kamilex-component-quick,
.kamilex-quick-summary,
.kamilex-component-stylist,
.kamilex-component-editor,
.kamilex-component-rating,
.kamilex-toc,
article .kamilex-supervisor-section {
	border-radius: var(--kamilex-radius-md) !important;
	box-shadow: var(--kamilex-shadow-sm);
}

/* コンポーネント見出し行（アイコン＋ラベル）を共通化 */
.kamilex-component-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--wp--preset--spacing--16) 0 !important;
}

.kamilex-component-title svg {
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
}

.kamilex-supervisor-section h3 {
	margin-top: var(--wp--preset--spacing--16);
	margin-bottom: 6px;
}

.kamilex-article-sources {
	display: grid;
	gap: 8px;
	margin-bottom: 0;
	padding-left: 1.25rem;
}

.kamilex-article-sources a {
	overflow-wrap: anywhere;
}

.kamilex-component-summary,
.kamilex-component-stylist,
.kamilex-component-editor,
.kamilex-component-rating {
	border-left: 3px solid var(--wp--preset--color--accent-tint) !important;
}

.kamilex-component-quick {
	border-left: 3px solid var(--wp--preset--color--accent) !important;
}

.kamilex-component-stylist .kamilex-component-title svg,
.kamilex-component-editor .kamilex-component-title svg {
	color: var(--wp--preset--color--ink);
}

/* ⚡30秒でわかる — KamiLex編集ルールVer1.0の中核コンポーネント。
   他コンポーネントより一段強い存在感（アクセント淡色の面＋太めの左罫）を持たせ、
   全記事で「ここから読めば良い」と一目でわかる統一デザインにする。 */
.kamilex-quick-summary {
	background: var(--wp--preset--color--accent-tint) !important;
	border-left: 4px solid var(--wp--preset--color--accent) !important;
}

.kamilex-quick-summary .kamilex-component-title {
	color: var(--wp--preset--color--accent-deep);
}

.kamilex-quick-summary-list {
	margin: 0 !important;
	padding-left: 1.3em !important;
}

.kamilex-quick-summary-list li {
	font-weight: 500;
}

.kamilex-quick-summary-list li:not(:last-child) {
	margin-bottom: var(--wp--preset--spacing--8);
}

/* ============================================================
   8. パンくずリスト（記事詳細）
   ============================================================ */

.kamilex-breadcrumb {
	font-size: 0.8125rem;
}

.kamilex-breadcrumb a {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
}

.kamilex-breadcrumb a:hover {
	color: var(--wp--preset--color--accent);
}

/* ============================================================
   8.5 記事情報バー（美容師監修・最終更新日・読了時間） — v0.17.0 編集ルールVer1.0
   ============================================================ */

.kamilex-post-meta {
	gap: 4px 8px;
	margin-top: var(--wp--preset--spacing--8);
}

.kamilex-post-meta p {
	margin: 0;
}

.kamilex-post-meta p:not(:first-child)::before {
	content: "・";
	margin-right: 8px;
}

.kamilex-post-meta-supervised a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	text-decoration: none;
}

.kamilex-post-meta-supervised a:hover {
	color: var(--wp--preset--color--accent-deep);
}

.kamilex-post-meta-supervised svg {
	flex-shrink: 0;
}

/* ============================================================
   9. 目次（記事詳細）
   ============================================================ */

.kamilex-toc-list {
	margin: 0;
	padding-left: 1.2em;
}

.kamilex-toc-list li a {
	text-decoration: none;
	color: var(--wp--preset--color--text-primary);
	transition: color 0.2s ease;
}

.kamilex-toc-list li a:hover {
	color: var(--wp--preset--color--accent);
}

.kamilex-toc-list .kamilex-toc-level-3 {
	list-style: none;
	margin-left: 1em;
	font-size: var(--wp--preset--font-size--small);
}

/* ============================================================
   10. 本文タイポグラフィ（記事詳細）
   ============================================================ */

.wp-block-post-content h2 {
	margin-top: var(--wp--preset--spacing--64);
	margin-bottom: var(--wp--preset--spacing--16);
	scroll-margin-top: 96px;
}

.wp-block-post-content h3 {
	margin-top: var(--wp--preset--spacing--32);
	margin-bottom: var(--wp--preset--spacing--16);
	scroll-margin-top: 96px;
}

.wp-block-post-content p {
	line-height: 1.9;
	margin-bottom: var(--wp--preset--spacing--24);
}

/* 引用：「読んでいて気持ちいい」を基準に、色は左の一本線だけに絞り、
   本文は見出しと同じ明朝体でひと呼吸大きく見せる（実装フェーズ第3弾）。 */
.wp-block-post-content blockquote,
.wp-block-post-content .wp-block-quote {
	position: relative;
	margin: var(--wp--preset--spacing--64) 0;
	padding: 0.2em 0 0.2em var(--wp--preset--spacing--32);
	border-left: none;
	font-family: var(--wp--preset--font-family--mincho);
	font-size: 1.25rem;
	line-height: 1.85;
	color: var(--wp--preset--color--ink);
}

.wp-block-post-content blockquote::before,
.wp-block-post-content .wp-block-quote::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	bottom: 0.3em;
	width: 2px;
	background: var(--wp--preset--color--accent);
}

.wp-block-post-content blockquote cite,
.wp-block-post-content .wp-block-quote cite,
.wp-block-post-content .wp-block-quote__citation {
	display: block;
	margin-top: var(--wp--preset--spacing--16);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-style: normal;
	color: var(--wp--preset--color--text-secondary);
	letter-spacing: 0.03em;
}

/* 画像：余白をたっぷり取り、キャプションは静かな添え書きとして扱う。 */
.wp-block-post-content figure,
.wp-block-post-content .wp-block-image {
	margin: var(--wp--preset--spacing--64) 0;
}

.wp-block-post-content .wp-block-image img {
	border-radius: 16px;
	display: block;
}

.wp-block-post-content .wp-element-caption,
.wp-block-post-content figcaption {
	margin-top: var(--wp--preset--spacing--8);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text-secondary);
	text-align: center;
}

/* 区切り線：既定の横罫ではなく、ロゴ・ヒーローと同じ一本線のモチーフで統一する。 */
.wp-block-post-content hr,
.wp-block-post-content .wp-block-separator {
	border: none;
	width: 32px;
	height: 2px;
	background: var(--wp--preset--color--ink);
	margin: var(--wp--preset--spacing--64) auto;
}

.wp-block-post-content table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-post-content table th,
.wp-block-post-content table td {
	border: 1px solid var(--wp--preset--color--hairline);
	padding: 12px 16px;
	text-align: left;
	font-size: 0.9375rem;
}

.wp-block-post-content table th {
	background: var(--wp--preset--color--bg-alt);
	font-weight: 600;
}

/* 検索・AI回答から来た読者が、記事冒頭で結論と手順を判断できる回答要約。 */
.wp-block-post-content .kl-answer-summary {
	box-sizing: border-box;
	margin: var(--wp--preset--spacing--32) 0 var(--wp--preset--spacing--48);
	padding: clamp(20px, 4vw, 30px);
	border: 1px solid rgba(107, 114, 156, 0.16);
	border-radius: 22px;
	background: linear-gradient(135deg, rgba(255, 241, 239, 0.92), rgba(245, 250, 255, 0.98));
	box-shadow: 0 14px 34px rgba(48, 44, 66, 0.08);
}

.wp-block-post-content .kl-answer-summary > :first-child {
	margin-top: 0;
}

.wp-block-post-content .kl-answer-summary > :last-child {
	margin-bottom: 0;
}

.wp-block-post-content .kl-answer-summary h2 {
	margin-top: 0;
	font-size: clamp(1.25rem, 3vw, 1.6rem);
}

.wp-block-post-content .kl-answer-summary .wp-block-table {
	margin: var(--wp--preset--spacing--16) 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-post-content .kl-answer-summary table {
	min-width: 560px;
	background: rgba(255, 255, 255, 0.76);
}

.wp-block-post-content .kl-answer-summary table th {
	background: rgba(236, 241, 251, 0.84);
}

.wp-block-post-content .kl-answer-summary a {
	font-weight: 700;
	text-underline-offset: 3px;
}

@media (max-width: 600px) {
	.wp-block-post-content .kl-answer-summary {
		margin-top: var(--wp--preset--spacing--24);
		padding: 18px 16px;
		border-radius: 18px;
	}

	.wp-block-post-content .kl-answer-summary table th,
	.wp-block-post-content .kl-answer-summary table td {
		padding: 10px 12px;
		font-size: 0.875rem;
	}
}

/* ============================================================
   11. FAQ（core/detailsブロック）
   ============================================================ */

.kamilex-faq .wp-block-details {
	border-top: 1px solid var(--wp--preset--color--hairline);
	padding-top: var(--wp--preset--spacing--16);
	padding-bottom: var(--wp--preset--spacing--16);
}

.kamilex-faq .wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	transition: color 0.2s ease;
}

.kamilex-faq .wp-block-details summary:hover {
	color: var(--wp--preset--color--accent);
}

/* ============================================================
   12. フッター
   ============================================================ */

.kamilex-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kamilex-footer-links a {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--small);
	transition: color 0.2s ease;
}

.kamilex-footer-links a:hover {
	color: var(--wp--preset--color--accent);
}

.site-footer .wp-block-navigation {
	gap: 8px !important;
}

.site-footer .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
	transition: color 0.2s ease;
}

.site-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* ============================================================
   13. モバイルUI調整
   ============================================================ */

@media (max-width: 782px) {
	.kamilex-article-card:hover {
		transform: none;
	}

	.wp-block-post-content h2 {
		margin-top: var(--wp--preset--spacing--48);
	}

	.site-header {
		padding-top: var(--wp--preset--spacing--16) !important;
		padding-bottom: var(--wp--preset--spacing--16) !important;
	}
}

@media (max-width: 600px) {
	.kamilex-category-grid.wp-block-columns,
	.kamilex-category-grid {
		flex-wrap: wrap;
	}

	.kamilex-hide-mobile {
		display: none;
	}
}

/* モバイルのオーバーレイメニュー：ブランドと統一したタイポグラフィに
   注意：footerのナビゲーションもWP標準仕様上.wp-block-navigation__responsive-dialogで
   マークアップされるため、ここは.site-header配下にのみ限定して適用する
   （範囲を絞らないとフッターの小さな文字サイズ指定が!importantに負けてしまう）。 */
.site-header .wp-block-navigation__responsive-dialog {
	background: var(--wp--preset--color--bg) !important;
}

.site-header .wp-block-navigation__responsive-dialog .wp-block-navigation-item__content {
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
}

.site-header .wp-block-navigation__responsive-container-close,
.site-header .wp-block-navigation__responsive-container-open {
	border-radius: 999px !important;
}

/* ============================================================
   14. トップページ・AI美容師フォトヒーロー
   DB保存済みの背景指定より優先し、コピーとリンク構造は保ったまま
   軽量なレスポンシブ写真へ置き換える。
   ============================================================ */

body.home .kamilex-hero {
	background-color: #fbfcff !important;
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .98) 34%, rgba(255, 255, 255, .72) 40%, rgba(255, 255, 255, .18) 49%, rgba(255, 255, 255, .02) 58%),
		linear-gradient(180deg, rgba(251, 252, 255, 0) 72%, rgba(251, 252, 255, .94) 100%),
		url("../images/kamilex-hero-salon-couple-v2.jpg") !important;
	background-position: center, center, calc(100% + 58px) center !important;
	background-repeat: no-repeat !important;
	background-size: cover, cover, auto 90% !important;
}

body.home .kamilex-hero::before,
body.home .kamilex-hero::after {
	content: none;
	animation: none;
	filter: none;
	will-change: auto;
}

body.home .kamilex-hero > .kamilex-liquid-light {
	display: none !important;
}

body.home .kamilex-hero .kamilex-badge {
	padding: 0;
	border: 0 !important;
	border-radius: 0;
	background: none;
	color: var(--kamilex-coral);
	-webkit-text-fill-color: currentColor;
	font-size: clamp(.8rem, 1.4vw, 1rem);
	font-weight: 700;
	letter-spacing: .08em;
}

body.home .kamilex-hero > p:first-of-type {
	width: fit-content;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.kamilex-badge__coral {
	color: var(--kamilex-coral);
}

.kamilex-badge__blue {
	color: var(--kamilex-blue);
}

body.home .kamilex-hero .kamilex-hero-mark {
	display: none;
}

body.home .kamilex-hero > h1 {
	max-width: min(60%, 820px) !important;
	margin-right: auto !important;
	margin-left: 0 !important;
	font-family: "Zen Kaku Gothic New", "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: clamp(2.5rem, 4.8vw, 4rem) !important;
	font-weight: 700;
	letter-spacing: -.035em !important;
	line-height: 1.28 !important;
}

.kamilex-hero-break-mobile {
	display: block;
}

.kamilex-hero-support {
	max-width: 720px;
	margin-top: clamp(22px, 3vw, 34px);
	font-family: "Zen Kaku Gothic New", "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
}

.kamilex-hero-support__lead {
	max-width: 560px;
	margin: 0;
	color: #302d36;
	font-size: clamp(.94rem, 1.5vw, 1.1rem);
	font-weight: 500;
	line-height: 1.85;
}

.kamilex-hero-lead-break-mobile {
	display: none;
}

.kamilex-hero-values {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: clamp(22px, 3vw, 30px);
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 18px;
	background: rgba(255, 255, 255, .76);
	box-shadow: 0 12px 32px rgba(54, 52, 67, .07);
	backdrop-filter: blur(10px);
}

.kamilex-hero-value {
	display: flex;
	gap: 10px;
	align-items: center;
	min-width: 0;
	padding-right: 12px;
	border-right: 1px solid rgba(45, 43, 54, .1);
}

.kamilex-hero-value:last-child {
	padding-right: 0;
	border-right: 0;
}

.kamilex-hero-value__icon {
	position: relative;
	box-sizing: border-box;
	display: grid;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	place-items: center;
	border-radius: 50%;
	font-size: .7rem;
	font-weight: 900;
}

.kamilex-hero-value--understand .kamilex-hero-value__icon {
	border-radius: 50% 50% 50% 24%;
	background: rgba(255, 105, 125, .15);
	color: #ff667d;
}

.kamilex-hero-value--personal .kamilex-hero-value__icon {
	background: rgba(168, 126, 219, .14);
	color: transparent;
	font-size: 0;
}

.kamilex-hero-value--personal .kamilex-hero-value__icon::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 16px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #aa7bd7;
}

.kamilex-hero-value--personal .kamilex-hero-value__icon::after {
	content: "";
	position: absolute;
	bottom: 8px;
	left: 11px;
	width: 20px;
	height: 11px;
	border: 2px solid #aa7bd7;
	border-radius: 10px 10px 5px 5px;
}

.kamilex-hero-value--memory .kamilex-hero-value__icon {
	background: rgba(80, 159, 234, .14);
	color: #56a0ea;
	font-size: 1.25rem;
}

.kamilex-hero-value strong,
.kamilex-hero-value small {
	display: block;
}

.kamilex-hero-value strong {
	color: #282630;
	font-size: .78rem;
	line-height: 1.4;
}

.kamilex-hero-value small {
	margin-top: 3px;
	color: #65616c;
	font-size: .65rem;
	line-height: 1.45;
}

@media (max-width: 782px) {
	html body.home .site-main > .kamilex-hero {
		min-height: clamp(560px, 149vw, 590px) !important;
		background-image:
			linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .98) 24%, rgba(255, 255, 255, .68) 36%, rgba(255, 255, 255, .26) 48%, rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .01) 100%),
			linear-gradient(180deg, rgba(251, 252, 255, 0) 72%, rgba(251, 252, 255, .96) 100%),
			url("../images/kamilex-hero-salon-couple-mobile-v2.jpg") !important;
		background-position: center, center, calc(100% + 120px) center !important;
		background-size: cover, cover, auto 60% !important;
	}

	body.home .kamilex-hero .kamilex-badge {
		font-size: .875rem;
	}

	body.home .kamilex-hero > h1 {
		max-width: 57% !important;
		margin-right: 0 !important;
		font-size: clamp(1.9rem, 8.2vw, 2.15rem) !important;
	}

	.kamilex-hero-break-mobile {
		display: block;
	}

	.kamilex-hero-support {
		max-width: 100%;
		margin-top: 18px;
	}

	.kamilex-hero-support__lead {
		max-width: 58%;
		font-size: .83rem;
		line-height: 1.75;
	}

	.kamilex-hero-lead-break-mobile {
		display: block;
	}

	.kamilex-hero-values {
		gap: 6px;
		margin-top: 20px;
		padding: 9px;
		border-radius: 14px;
	}

	.kamilex-hero-value {
		display: block;
		padding-right: 5px;
	}

	.kamilex-hero-value__icon {
		width: 34px;
		height: 34px;
		margin-bottom: 6px;
		font-size: .58rem;
	}

	.kamilex-hero-value--personal .kamilex-hero-value__icon::before {
		top: 6px;
		left: 13px;
		width: 8px;
		height: 8px;
	}

	.kamilex-hero-value--personal .kamilex-hero-value__icon::after {
		bottom: 6px;
		left: 9px;
		width: 16px;
		height: 9px;
	}

	.kamilex-hero-value--memory .kamilex-hero-value__icon {
		font-size: 1rem;
	}

	.kamilex-hero-value strong {
		font-size: .64rem;
	}

	.kamilex-hero-value small {
		font-size: .53rem;
	}
}
/* Lex & Ami: 診断後の任意・匿名プロフィール（自由入力なし）。 */
.kamilex-guide__profile{margin-top:16px;padding:16px;border:1px solid #e5e1e9;border-radius:15px;background:#faf9fb}.kamilex-guide__profile h3{margin:0;color:#302d38;font-size:14px}.kamilex-guide__profile>p{margin:6px 0 12px;color:#746f7c;font-size:10px;line-height:1.55}.kamilex-guide__profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.kamilex-guide__profile label{display:grid;gap:4px;color:#625d69;font-size:10px;font-weight:700}.kamilex-guide__profile select{box-sizing:border-box;width:100%;min-height:36px;padding:6px 24px 6px 8px;border:1px solid #dfdbe3;border-radius:9px;background:#fff;color:#302d38;font:500 11px/1.3 "Zen Kaku Gothic New",sans-serif}.kamilex-guide__profile button{width:100%;margin-top:12px;padding:10px 12px;border:0;border-radius:10px;background:#8f594c;color:#fff;cursor:pointer;font-size:11px;font-weight:700}.kamilex-guide__profile button:disabled{cursor:default;opacity:.55}.kamilex-guide__profile>small{display:block;margin-top:8px;color:#6f6977;font-size:10px;line-height:1.45}@media(max-width:600px){.kamilex-guide__profile-grid{grid-template-columns:1fr}.kamilex-guide__profile{padding:13px}}
/* Concern hub navigation (v0.23.2) */
.kamilex-section-kicker { color: var(--wp--preset--color--accent, #b65f4a); font-weight: 700; letter-spacing: .12em; }
.kamilex-hub-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.kamilex-hub-card { display: flex; min-height: 164px; flex-direction: column; justify-content: flex-end; padding: 20px; border: 1px solid var(--wp--preset--color--hairline, #e8e5e1); border-radius: 14px; background: linear-gradient(145deg, #fff 58%, rgba(182, 95, 74, .07)); color: inherit; text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.kamilex-hub-card:hover { transform: translateY(-3px); border-color: rgba(182, 95, 74, .45); background: linear-gradient(145deg, #fff 48%, rgba(182, 95, 74, .12)); }
.kamilex-hub-card span { margin-bottom: auto; color: var(--wp--preset--color--accent, #b65f4a); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.kamilex-hub-card strong { font-size: 1.2rem; }
.kamilex-hub-card small { margin-top: 6px; color: var(--wp--preset--color--text-secondary, #6f6b68); line-height: 1.5; }
/* Decorative icons also support existing database-saved homepage blocks.
 * Keep the original link labels, destinations and analytics selectors intact. */
.kamilex-hub-card { position: relative; }
.kamilex-hub-card > span { padding-right: 46px; }
.kamilex-hub-card::after { content: ""; position: absolute; top: 16px; right: 14px; width: 44px; height: 44px; background-position: center; background-repeat: no-repeat; background-size: contain; pointer-events: none; }
.kamilex-hub-card[href$="/scalp-care-guide/"]::after { background-image: url("../images/concern-icons/scalp.svg"); }
.kamilex-hub-card[href$="/dry-hair-guide/"]::after { background-image: url("../images/concern-icons/dryness.svg"); }
.kamilex-hub-card[href$="/frizz-hair-guide/"]::after { background-image: url("../images/concern-icons/frizz.svg"); }
.kamilex-hub-card[href$="/heat-damage-guide/"]::after { background-image: url("../images/concern-icons/heat.svg"); }
.kamilex-hub-card[href$="/color-service-guide/"]::after { background-image: url("../images/concern-icons/color.svg"); }
.kamilex-hub-card:focus-visible { outline: 2px solid #8871ab; outline-offset: 4px; }
.kl-concern-hubs--restored { padding: clamp(56px, 8vw, 96px) 24px; }
.kl-concern-hubs__inner { width: min(1040px, 100%); margin: 0 auto; }
.kl-concern-hubs--restored h2 { margin: 8px 0 0; font-size: clamp(1.875rem, 3.5vw, 2.75rem); letter-spacing: -.02em; }
.kl-concern-hubs__lead { margin: 14px 0 0; color: var(--wp--preset--color--text-secondary, #6f6b68); line-height: 1.8; }
/* The restored section is authoritative; hide an older copy from a saved block template. */
.home .site-main:has(.kl-concern-hubs--restored) > .kamilex-concern-hubs:not(.kl-concern-hubs--restored) { display: none; }
@media (max-width: 520px) {
  .kamilex-hub-grid .kamilex-hub-card { padding-right: 84px; }
  .kamilex-hub-card > span { padding-right: 0; }
  .kamilex-hub-card::after { top: 50%; right: 20px; width: 48px; height: 48px; transform: translateY(-50%); }
}
.kamilex-hub-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.kamilex-hub-links a { display: inline-flex; min-height: 44px; align-items: center; padding: 9px 16px; border: 1px solid var(--wp--preset--color--hairline, #e8e5e1); border-radius: 999px; color: inherit; text-decoration: none; }
.kamilex-hub-links a:hover { border-color: var(--wp--preset--color--accent, #b65f4a); color: var(--wp--preset--color--accent, #b65f4a); }
.kamilex-guide-steps { counter-reset: guide-step; }
.kamilex-guide-step { position: relative; padding: 28px; border: 1px solid var(--wp--preset--color--hairline, #e8e5e1); border-radius: 14px; }

/* Front page order safety: never rely on database-saved child indexes. */
.home .site-main > .kamilex-hero { order: 0 !important; }
.home .site-main > .kamilex-home-ai { order: 1 !important; }
.home .site-main > .kamilex-home-consult { order: 2 !important; }
.home .site-main > .kamilex-home-steps { order: 3 !important; }
.home .site-main > .kamilex-concern-hubs { order: 4 !important; }
.home .site-main > .kamilex-home-popular-categories { order: 5 !important; }
.home .site-main > .kl-mobile-ranking-entries { order: 6 !important; }
.home .site-main > .kamilex-statement { order: 7 !important; }
.home .site-main > .kamilex-home-latest { order: 8 !important; }
.home .site-main > .kamilex-home-editor-select { order: 8 !important; }
.home .site-main > .kamilex-home-about { order: 9 !important; }
.home .site-main > .kamilex-supervisor-section { order: 10 !important; }
.home .site-main > .kamilex-final-cta { order: 11 !important; }
.home .site-main > .kamilex-guide-entry { order: 12 !important; }
.home .site-main > .kamilex-concern-nav { order: 13 !important; }
.kamilex-guide-step::before { counter-increment: guide-step; content: "0" counter(guide-step); display: block; margin-bottom: 14px; color: var(--wp--preset--color--accent, #b65f4a); font-size: .75rem; font-weight: 700; letter-spacing: .1em; }
@media (max-width: 900px) { .kamilex-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kamilex-hub-grid { grid-template-columns: 1fr; gap: 10px; } .kamilex-hub-card { min-height: 126px; padding: 18px; } .kamilex-guide-step { padding: 22px 18px; } }
@media (prefers-reduced-motion: reduce) { .kamilex-hub-card { transition: none; } }