/* ============================================================
   PRIME ESSENCE — Animation & Spacing Utilities
   CLAUDE.md 11章: Fade in / Subtle slide up / Gentle image reveal のみ許可。
   大きなズーム、高速な動き、連続アニメーション、視差、カーソル追従は禁止。
   prefers-reduced-motion に必ず対応する。
   ============================================================ */

/* ------------------------------------------------------------
   1. スクロール時アニメーション(JSでin-view時に.is-visibleを付与)
   ------------------------------------------------------------ */
.pe-anim {
	opacity: 0;
	transition: opacity var(--pe-transition-slow), transform var(--pe-transition-slow);
}

.pe-anim.is-visible {
	opacity: 1;
	transform: none;
}

.pe-anim--fade-in {
	/* opacityのみの変化、位置は動かさない */
}

.pe-anim--slide-up {
	transform: translateY(24px);
}

.pe-anim--image-reveal {
	transform: scale(1.02);
}

/* prefers-reduced-motionの場合は即時表示し、一切のアニメーションを行わない */
@media (prefers-reduced-motion: reduce) {
	.pe-anim,
	.pe-anim.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* JS未読込時のフォールバック(装飾が隠れたままにならないようにする) */
.no-js .pe-anim {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------
   2. 余白ユーティリティ(セクション内での細かい調整用)
   ------------------------------------------------------------ */
.pe-mt-xs  { margin-top: var(--pe-space-xs) !important; }
.pe-mt-sm  { margin-top: var(--pe-space-sm) !important; }
.pe-mt-md  { margin-top: var(--pe-space-md) !important; }
.pe-mt-lg  { margin-top: var(--pe-space-lg) !important; }
.pe-mt-xl  { margin-top: var(--pe-space-xl) !important; }

.pe-mb-xs  { margin-bottom: var(--pe-space-xs) !important; }
.pe-mb-sm  { margin-bottom: var(--pe-space-sm) !important; }
.pe-mb-md  { margin-bottom: var(--pe-space-md) !important; }
.pe-mb-lg  { margin-bottom: var(--pe-space-lg) !important; }
.pe-mb-xl  { margin-bottom: var(--pe-space-xl) !important; }

/* ------------------------------------------------------------
   3. レイアウトユーティリティ
   ------------------------------------------------------------ */
.pe-stack {
	display: flex;
	flex-direction: column;
}

.pe-stack > * + * {
	margin-top: var(--pe-space-md);
}

.pe-text-center { text-align: center; }

/* 見出しほど強くない、少し強調したいリード用ラベル */
.pe-lead-label {
	font-weight: 500;
	color: var(--pe-color-heading);
	margin: 0;
}

/* 装飾のない箇条書き(本文トーンで読ませたい場合に使用) */
.pe-plain-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pe-space-xs);
	color: var(--pe-color-body);
}

/* 読みやすい行長に収めるための中央寄せコンテナ(FAQ本文など) */
.pe-narrow {
	max-width: 720px;
	margin-inline: auto;
}

/* 小さく控えめな注記テキスト(Budget Guideの※注釈、営業時間の補足等)。
   .pe-tag(ピル形状・white-space:nowrap)を長文に流用すると
   モバイルで横スクロールが発生してしまうため、
   通常の折り返しテキストとして別クラスを用意している。 */
.pe-caption {
	display: block;
	font-size: var(--pe-fs-xs);
	color: var(--pe-color-text-muted);
	line-height: var(--pe-lh-base);
}

/* 【2026-08-15追加・不具合修正】`.pe-caption`は`display: block`を明示指定しているため、
   これがブラウザ標準スタイルシート(UAスタイルシート)の`[hidden] { display: none }`より
   優先されてしまい、Service Areaの「該当する市区町村が見つかりませんでした」
   (data-pe-area-empty)が、検索していない初期状態でも常に表示されたままになっていた
   不具合(`.pe-mobile-menu`・`.pe-form-field`と同じ原因)。 */
.pe-caption[hidden] {
	display: none;
}

/* ボタンを横並びにするための共通レイアウト(Hero/Contact等で使用) */
.pe-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pe-space-sm);
}

.pe-btn-row--center {
	justify-content: center;
}

.pe-visually-hide-mobile {
	display: none;
}

@media (min-width: 768px) {
	.pe-visually-hide-mobile {
		display: revert;
	}

	.pe-visually-hide-desktop {
		display: none;
	}
}