:root {
	/* Colors */
	--color-text: #222222;
	--color-background: #ffffff;
    /* 白地のドット背景：数字ページと共通 */
    --ae-dot-background:
        radial-gradient(
            circle,
            rgba(6, 75, 250, 0.28) 1.5px,
            transparent 1.5px
        ) 0 0 / 24px 24px repeat,
        radial-gradient(
            circle at 40% 35%,
            rgba(36, 170, 221, 0.18) 0,
            rgba(36, 170, 221, 0.10) 120px,
            transparent 260px
        ) -240px -240px /
        calc(100% + 480px) calc(100% + 480px) no-repeat,
        radial-gradient(
            circle at 60% 65%,
            rgba(6, 75, 250, 0.12) 0,
            transparent 240px
        ) -240px -240px /
        calc(100% + 480px) calc(100% + 480px) no-repeat
        #fff;

	/* 詳細モーダルの共通デザイン */
		--modal-blue: #064bfa;
	--modal-header-background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, .22) 1px,
			transparent 1px
		) 0 0 / 24px 24px,
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .22) 1px,
			transparent 1px
		) 0 0 / 24px 24px,
		#064bfa;
	--modal-ink: #17385e;
	--modal-white: #ffffff;
	--modal-tint: #e9f4ff;
	--modal-line: #a8c8ff;
	--modal-radius: 18px;
	--modal-width: 1100px;
	--modal-shadow: 0 20px 64px rgba(6, 40, 110, .25);
	--modal-backdrop: rgba(9, 30, 68, .62);
	--modal-background:
		radial-gradient(circle at 100% 0, #c5e4ff, transparent 360px),
		linear-gradient(180deg, #f4f9ff, #e2efff);

	/* Fonts */
	--font-family-base: sans-serif;

	/* Spacing */
	--spacing-section: 4rem;
	--spacing-inline: 1.5rem;

	/* Content width */
	--content-width: 1200px;
}
@keyframes ae-dot-background-drift {
    0%, 100% {
        background-position:
            0 0,
            -240px -240px,
            -240px -240px;
    }

    50% {
        background-position:
            0 0,
            -180px -280px,
            -300px -200px;
    }
}