@charset "UTF-8";

		/* -----------------------------------------------------------------
		   CSS Variables (Unified with other pages)
		   ----------------------------------------------------------------- */
		:root {
			/* サイト共通カラー */
			--head_color: #524C42;
			--back_color: #706C65;
			--pop_color: #D6C6A9;
			--tab_color: #AEAEAE;
			--icon_blue_color: #47ACD2;
			--btn_perple_color: #9F58B1;

			/* このページ固有のライトテーマ用設定 */
			--page-bg: #F9F8F6; /* --back_colorを極端に明るくした色 */
			--page-bg2: #EFE7D1;
			--page-bg3: #DCD5C4;
			--text-main: #524C42; /* --head_colorと同じ */
			--text-sub: #7B7B7B;
			--card-bg: rgba(255, 255, 255, 0.8);
			--card-border: rgba(82, 76, 66, 0.1);

			--font-en: 'Outfit', sans-serif;
			--font-jp: 'Zen Kaku Gothic New', sans-serif;
		}

		*, *::before, *::after {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		body {
			font-family: var(--font-jp);
			background-color: var(--page-bg3);
			color: var(--text-main);
			line-height: 1.6;
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			overflow-x: hidden;
			position: relative;
		}

		/* -----------------------------------------------------------------
		   Background Canvas
		   ----------------------------------------------------------------- */
		#canvas-container {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			pointer-events: none;
		}

		/* -----------------------------------------------------------------
		   Hero Section
		   ----------------------------------------------------------------- */
		.hero {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			padding: 4rem 1rem 2rem;
			position: relative;
			z-index: 1;
		}

		.hero-content {
			margin-bottom: 2rem;
			animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
		}

		.hero-title {
			font-family: var(--font-en);
			font-size: clamp(2.5rem, 6vw, 4.5rem);
			font-weight: 700;
			line-height: 1.1;
			letter-spacing: 0.02em;
			margin-bottom: 0.5rem;
			color: var(--head_color);
		}

		.hero-title span {
			color: var(--icon_blue_color);
		}

		.hero-subtitle {
			font-size: 1rem;
			color: var(--text-sub);
			font-weight: 400;
			letter-spacing: 0.05em;
		}

		/* キャラクター画像 */
		.hero-image-wrapper {
			width: 280px;
			max-width: 80vw;
			margin: 0 auto 2rem;
			position: relative;
			animation: float 6s ease-in-out infinite, fadeIn 1s ease-out 0.3s forwards;
			opacity: 0;
		}

		.hero-image {
			width: 100%;
			height: auto;
			display: block;
			filter: drop-shadow(0 20px 30px rgba(0,0,0,0.15));
		}

		/* キャラクター背後の装飾円 */
		.hero-image-wrapper::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 120%;
			height: 120%;
			background: radial-gradient(circle, var(--pop_color) 0%, transparent 70%);
			opacity: 0.3;
			z-index: -1;
		}

		@keyframes fadeUp {
			from { opacity: 0; transform: translateY(20px); }
			to { opacity: 1; transform: translateY(0); }
		}

		@keyframes fadeIn {
			from { opacity: 0; }
			to { opacity: 1; }
		}

		@keyframes float {
			0%, 100% { transform: translateY(0); }
			50% { transform: translateY(-15px); }
		}

		/* -----------------------------------------------------------------
		   Grid Container
		   ----------------------------------------------------------------- */
		.container {
			max-width: 1200px;
			width: 100%;
			margin: 0 auto;
			padding: 0 2rem 6rem;
			flex: 1;
			z-index: 1;
		}

		.card-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			gap: 2rem;
		}

		/* -----------------------------------------------------------------
		   Card Design
		   ----------------------------------------------------------------- */
		.card {
			display: block;
			text-decoration: none;
			background: var(--card-bg);
			border: 1px solid var(--card-border);
			border-radius: 20px;
			padding: 2rem;
			position: relative;
			transition: all 0.3s ease;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
			overflow: hidden;
			opacity: 0;
			animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards;
		}

		/* 左側のアクセントバー（他のツールのデザイン言語を継承） */
		.card::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 6px;
			background-color: var(--tab_color);
			transition: background-color 0.3s;
		}

		.card:hover {
			transform: translateY(-5px);
			box-shadow: 0 15px 40px rgba(82, 76, 66, 0.15);
			background: #fff;
		}

		.card:hover::before {
			background-color: var(--pop_color);
		}

		/* ツールごとの個別カラー設定 */
		.card.type-entity:hover::before { background-color: var(--icon_blue_color); }
		.card.type-qr:hover::before { background-color: var(--btn_perple_color); }
		.card.type-color:hover::before { background-color: #FF80FE; }

		.card-icon {
			font-size: 2rem;
			margin-bottom: 1rem;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 50px;
			height: 50px;
			background: rgba(0,0,0,0.03);
			border-radius: 12px;
			color: var(--head_color);
			transition: all 0.3s;
		}

		.card:hover .card-icon {
			background: var(--head_color);
			color: var(--pop_color);
			transform: rotate(-10deg);
		}

		.card-title {
			font-family: var(--font-en);
			font-size: 1.4rem;
			font-weight: 700;
			color: var(--head_color);
			margin-bottom: 0.5rem;
		}

		.card-desc {
			font-size: 0.9rem;
			color: var(--text-sub);
			line-height: 1.6;
			margin-bottom: 1.5rem;
		}

		.card-link-text {
			font-size: 0.9rem;
			font-weight: bold;
			color: var(--head_color);
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}

		.card-link-text span {
			transition: transform 0.3s;
		}

		.card:hover .card-link-text span {
			transform: translateX(5px);
			color: var(--icon_blue_color);
		}

		/* Disabled Card */
		.card.disabled {
			opacity: 0.6 !important;
			cursor: default;
			background: rgba(255, 255, 255, 0.4);
			border-style: dashed;
		}
		.card.disabled:hover {
			transform: none;
			box-shadow: none;
		}
		.card.disabled:hover::before {
			background-color: var(--tab_color);
		}

		/* -----------------------------------------------------------------
		   Footer
		   ----------------------------------------------------------------- */
		footer {
			text-align: center;
			padding: 2rem;
			font-size: 0.8rem;
			color: var(--tab_color);
			z-index: 1;
		}

		/* -----------------------------------------------------------------
		   Responsive
		   ----------------------------------------------------------------- */
		@media (min-width: 800px) {
			.hero {
				flex-direction: row;
				justify-content: center;
				text-align: left;
				gap: 4rem;
				padding: 6rem 2rem 4rem;
			}

			.hero-image-wrapper {
				order: 2; /* 画像を右へ */
				margin: 0;
				width: 320px;
			}

			.hero-content {
				order: 1;
				max-width: 500px;
			}
		}