@charset "UTF-8";

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

			/* ライトテーマ用設定 */
			--page-bg: #F9F8F6;
			--page-bg2: #EFE7D1;
			--page-bg3: #DCD5C4;
			--text-main: #524C42;
			--text-sub: #7B7B7B;
			--card-bg: rgba(255, 255, 255, 0.95);
			--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.8;
			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;
		}

		/* -----------------------------------------------------------------
		   Header
		   ----------------------------------------------------------------- */
		.header {
			background-color: var(--head_color);
			padding: 1.5rem 2rem;
			text-align: center;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			position: sticky;
			top: 0;
			z-index: 100;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.site-title {
			font-family: var(--font-en);
			font-size: 1.2rem;
			font-weight: 700;
			color: var(--pop_color);
			text-decoration: none;
			letter-spacing: 0.05em;
		}

		.back-link {
			font-family: var(--font-en);
			color: #fff;
			text-decoration: none;
			font-size: 0.9rem;
			border: 1px solid rgba(255,255,255,0.3);
			padding: 0.5rem 1rem;
			border-radius: 20px;
			transition: all 0.3s;
		}

		.back-link:hover {
			background-color: rgba(255,255,255,0.1);
			border-color: #fff;
		}

		/* -----------------------------------------------------------------
		   Main Content
		   ----------------------------------------------------------------- */
		.container {
			max-width: 800px;
			width: 100%;
			margin: 4rem auto;
			padding: 0 2rem;
			flex: 1;
			position: relative;
			z-index: 1;
		}

		.terms-card {
			background: var(--card-bg);
			border: 1px solid var(--card-border);
			border-radius: 12px;
			padding: 3rem;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
		}

		.page-title {
			font-family: var(--font-en);
			font-size: 2rem;
			margin-bottom: 2.5rem;
			color: var(--head_color);
			text-align: center;
			font-weight: 700;
			letter-spacing: 0.05em;
			position: relative;
			padding-bottom: 1rem;
		}

		.page-title::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 60px;
			height: 3px;
			background-color: var(--pop_color);
			border-radius: 3px;
		}

		/* Terms Sections */
		.section {
			margin-bottom: 3rem;
		}

		.section-title {
			font-size: 1.2rem;
			font-weight: 700;
			color: var(--head_color);
			margin-bottom: 1rem;
			border-left: 4px solid var(--pop_color);
			padding-left: 1rem;
			display: flex;
			align-items: center;
		}

		.section-content {
			color: var(--text-main);
			font-size: 0.95rem;
			line-height: 1.8;
		}

		.section-content p {
			margin-bottom: 1rem;
		}

		ul {
			list-style-type: none;
			padding-left: 1rem;
			margin-bottom: 1rem;
		}

		ul li {
			position: relative;
			padding-left: 1.2rem;
			margin-bottom: 0.5rem;
			color: var(--text-sub);
		}

		ul li::before {
			content: '•';
			position: absolute;
			left: 0;
			color: var(--pop_color);
			font-weight: bold;
		}

		/* -----------------------------------------------------------------
		   Footer
		   ----------------------------------------------------------------- */
		footer {
			text-align: center;
			padding: 2rem;
			border-top: 1px solid rgba(0,0,0,0.05);
			color: var(--tab_color);
			font-family: var(--font-en);
			font-size: 0.8rem;
			background-color: #fff;
		}

		@media (max-width: 600px) {
			.terms-card {
				padding: 2rem 1.5rem;
			}
			.page-title {
				font-size: 1.5rem;
			}
			.header {
				padding: 1rem;
			}
		}