@charset "UTF-8";
:root {
	--color-primary: #e60076;/* Pink 600 */
	--color-accent: #6d28d9;/* Violet 700 */
	--color-light-bg: #f9fafb;/* Light Gray (bg-gray-50 equivalent) */
	--color-mid-bg: #ffffff;/* White (bg-white equivalent) */
	--color-text: #1f2937;/* Dark Gray (text-gray-800 equivalent) */
}
body {
	font-family: 'Noto Sans JP', 'Inter', sans-serif;
	background-color: var(--color-mid-bg);
	color: var(--color-text);
}
body.overflow-hidden {
	overflow: hidden;
}
.cta-button-main {
	background-image: linear-gradient(to right, #e60076, #6d28d9);
	transition: all 0.3s ease;
}
.cta-button-main:hover {
	opacity: 0.9;
	box-shadow: 0 4px 15px rgba(109, 40, 217, 0.4);
	transform: translateY(-2px);
}

/* Mobile Sticky CTA */
@media (min-width: 1024px) {
	.mobile-sticky-cta {
		display: none !important;
	}
}

/* Scroll Animation (Fade In Up) */
.fade-in-item {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	will-change: opacity, transform;
}

/* 複数の要素が並んでいる場合の遅延アニメーション */
.fade-in-group .fade-in-item:nth-child(1) {
	transition-delay: 0s;
}
.fade-in-group .fade-in-item:nth-child(2) {
	transition-delay: 0.1s;
}
.fade-in-group .fade-in-item:nth-child(3) {
	transition-delay: 0.2s;
}
.fade-in-group .fade-in-item:nth-child(4) {
	transition-delay: 0.3s;
}
.fade-in-group .fade-in-item:nth-child(5) {
	transition-delay: 0.4s;
}
.fade-in-group .fade-in-item:nth-child(6) {
	transition-delay: 0.5s;
}
.fade-in-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* モバイルメニュー スライドイン/アウト制御 */
#menu-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 39;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease-out, visibility 0.4s;
}
#menu-overlay.is-open {
	opacity: 1;
	visibility: visible;
}
#mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 80%;
	max-width: 400px;
	z-index: 40;
	background-color: rgba(255, 255, 255, 0.60);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transform: translateX(100%);
	transition: transform 0.4s ease-out;
}
#mobile-menu.is-open {
	transform: translateX(0);
}
/* アコーディオンのトランジションを有効化するためのCSS */
.transition-max-height {
	transition-property: max-height;
}