@charset "UTF-8";

		/* ========================================
		Base Reset & Variables
		========================================
		*/
		:root {
			--accent-pink: #eb2f5b;
			--accent-gold: #c5a059;
			--grad-gold: linear-gradient(135deg, #e6c27a 0%, #c5a059 100%);
			--grad-dark: linear-gradient(135deg, #2c3e50 0%, #000000 100%);

			--bg-base: #f8f9fa;
			--bg-white: #ffffff;
			--text-main: #1a1a1a;
			--text-sub: #666666;
			--border-color: #eaeaea;

			--font-sans: 'Noto Sans JP', sans-serif;
			--font-serif: 'Shippori Mincho', serif;
			--font-eng: 'Playfair Display', serif;

			--header-height: 60px;
			--radius-lg: 16px;
			--shadow-card: 0 10px 30px rgba(0,0,0,0.05);
			--shadow-float: 0 20px 40px rgba(0,0,0,0.12);
		}

		* { box-sizing: border-box; margin: 0; padding: 0; }
		body {
			font-family: var(--font-sans);
			background-color: var(--bg-base);
			color: var(--text-main);
			line-height: 1.6;
			-webkit-font-smoothing: antialiased;
		}
		a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
		ul { list-style: none; }

		/* ========================================
		Header
		========================================
		*/
		.simple-header {
			position: fixed;
			top: 0; left: 0; width: 100%;
			height: var(--header-height);
			background: rgba(253, 253, 253, 0.95);
			backdrop-filter: blur(10px);
			z-index: 100;
			border-bottom: 1px solid var(--border-color);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 1.5rem;
		}
		.btn-back { font-family: var(--font-eng); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; }
		.header-logo { font-family: var(--font-eng); font-weight: 900; font-size: 1.2rem; }

		/* ========================================
		Hero Section
		========================================
		*/
		.page-hero {
			padding-top: calc(var(--header-height) + 5rem);
			padding-bottom: 3rem;
			text-align: center;
			background: var(--bg-white);
			position: relative;
			border-bottom: 1px solid var(--border-color);
		}

		.hero-tag {
			font-family: var(--font-eng);
			font-size: 0.85rem;
			letter-spacing: 0.2em;
			color: var(--accent-gold);
			margin-bottom: 1rem;
			display: block;
			text-transform: uppercase;
		}

		.hero-title {
			font-family: var(--font-serif);
			font-size: clamp(2rem, 5vw, 3rem);
			font-weight: 800;
			line-height: 1.3;
			letter-spacing: 0.05em;
			margin-bottom: 1.5rem;
			color: var(--text-main);
		}

		.hero-desc {
			font-size: 0.95rem;
			color: var(--text-sub);
			max-width: 700px;
			margin: 0 auto;
			line-height: 1.8;
			padding: 0 1.5rem;
		}

		.hero-desc1 {
			font-size: 1rem;
			color: var(--text-sub);
			max-width: 700px;
			margin: 20px auto;
			line-height: 1.8;
			padding: 0 1.5rem;
		}

		/* ========================================
		Plan Cards Section
		========================================
		*/
		.plan-section {
			max-width: 1200px;
			margin: 0 auto;
			padding: 5rem 1.5rem;
		}

		.plan-grid {
			display: grid;
			grid-template-columns: 1fr;
			gap: 2rem;
			align-items: center;
		}

		@media (min-width: 900px) {
			.plan-grid {
				grid-template-columns: repeat(3, 1fr);
				gap: 1.5rem;
			}
		}

		.plan-card {
			background: var(--bg-white);
			border-radius: var(--radius-lg);
			padding: 3rem 2rem;
			box-shadow: var(--shadow-card);
			position: relative;
			display: flex;
			flex-direction: column;
			border: 1px solid var(--border-color);
			transition: transform 0.3s;
		}

		.plan-card:hover {
			transform: translateY(-5px);
			box-shadow: var(--shadow-float);
		}

		.plan-card.recommended {
			border: 2px solid var(--accent-gold);
			box-shadow: 0 15px 40px rgba(197, 160, 89, 0.15);
			padding: 4rem 2rem;
			z-index: 10;
		}

		.plan-badge {
			position: absolute;
			top: -15px;
			left: 50%;
			transform: translateX(-50%);
			background: var(--grad-gold);
			color: #fff;
			font-family: var(--font-eng);
			font-weight: 900;
			font-size: 0.8rem;
			letter-spacing: 0.1em;
			padding: 6px 20px;
			border-radius: 50px;
			box-shadow: 0 4px 10px rgba(197, 160, 89, 0.4);
		}

		.plan-name {
			font-family: var(--font-eng);
			font-size: 1.5rem;
			font-weight: 800;
			text-align: center;
			margin-bottom: 0.5rem;
			letter-spacing: 0.05em;
		}

		.plan-target {
			text-align: center;
			font-size: 0.85rem;
			color: var(--text-sub);
			margin-bottom: 2rem;
			padding-bottom: 1.5rem;
			border-bottom: 1px dashed var(--border-color);
		}

		.plan-price {
			text-align: center;
			margin-bottom: 2rem;
		}

		.plan-price .currency {
			font-size: 1rem;
			font-weight: 700;
			vertical-align: top;
			margin-right: 2px;
		}

		.plan-price .amount {
			font-family: var(--font-eng);
			font-size: 3rem;
			font-weight: 900;
			line-height: 1;
			color: var(--text-main);
		}

		.plan-price .period {
			font-size: 0.85rem;
			color: var(--text-sub);
		}

		.plan-features-list {
			margin-bottom: 3rem;
			flex: 1;
		}

		.plan-features-list li {
			display: flex;
			align-items: flex-start;
			gap: 0.8rem;
			font-size: 0.95rem;
			margin-bottom: 1rem;
			color: var(--text-main);
			line-height: 1.4;
		}

		.plan-features-list li::before {
			content: '✓';
			color: var(--accent-gold);
			font-weight: 900;
			font-size: 1.1rem;
			flex-shrink: 0; /* チェックマークが潰れないようにするおまじない */
		}

		.plan-features-list li.disabled {
			color: #bbb;
		}
		.plan-features-list li.disabled::before {
			content: '－';
			color: #ccc;
		}

		.btn-plan {
			display: block;
			text-align: center;
			padding: 1.2rem;
			border-radius: 50px;
			font-weight: 700;
			font-size: 1rem;
			letter-spacing: 0.05em;
			transition: all 0.3s;
		}

		.btn-outline {
			border: 2px solid var(--text-main);
			color: var(--text-main);
			background: transparent;
		}
		.btn-outline:hover {
			background: var(--text-main);
			color: #fff;
		}

		.btn-solid-gold {
			background: var(--grad-gold);
			color: #fff;
			border: none;
			box-shadow: 0 5px 15px rgba(197, 160, 89, 0.3);
		}
		.btn-solid-gold:hover {
			filter: brightness(1.1);
			transform: translateY(-2px);
		}

		/* ----------------------------------------
		   [NEW] Free Plan Banner
		---------------------------------------- */
		.free-plan-banner {
			background: var(--bg-white);
			border: 2px dashed #cbd5e1;
			border-radius: var(--radius-lg);
			padding: 1.5rem 2rem;
			margin-bottom: 4rem;
			display: flex;
			flex-direction: column;
			gap: 1.5rem;
			align-items: center;
			text-align: center;
			transition: all 0.3s;
		}

		.free-plan-banner:hover {
			border-style: solid;
			border-color: var(--text-main);
			box-shadow: var(--shadow-card);
		}

		@media (min-width: 768px) {
			.free-plan-banner {
				flex-direction: row;
				justify-content: space-between;
				text-align: left;
			}
		}

		.free-plan-info h3 {
			font-family: var(--font-eng);
			font-size: 1.3rem;
			font-weight: 800;
			margin-bottom: 0.4rem;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.8rem;
		}

		@media (min-width: 768px) {
			.free-plan-info h3 { justify-content: flex-start; }
		}

		.free-plan-info h3 span {
			font-family: var(--font-sans);
			font-size: 0.8rem;
			font-weight: 700;
			color: var(--text-sub);
			background: #f1f5f9;
			padding: 4px 10px;
			border-radius: 4px;
			letter-spacing: 0.05em;
		}

		.free-plan-info p {
			font-size: 0.95rem;
			color: var(--text-sub);
		}


		/* ========================================
		Comparison Table
		========================================
		*/
		.compare-section {
			background: var(--bg-white);
			padding: 5rem 1.5rem;
			border-top: 1px solid var(--border-color);
		}

		.compare-header {
			text-align: center;
			margin-bottom: 3rem;
		}

		.compare-title {
			font-family: var(--font-serif);
			font-size: 2rem;
			font-weight: 800;
			margin-bottom: 0.5rem;
		}

		.table-wrapper {
			max-width: 1000px;
			margin: 0 auto;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: thin;
			scrollbar-color: #cbd5e1 transparent;
		}
		.table-wrapper::-webkit-scrollbar { height: 6px; }
		.table-wrapper::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 10px; }

		.compare-table {
			width: 100%;
			min-width: 700px;
			border-collapse: collapse;
			text-align: center;
		}

		.compare-table th {
			padding: 1.5rem 1rem;
			font-family: var(--font-eng);
			font-size: 1.1rem;
			font-weight: 800;
			color: var(--text-main);
			border-bottom: 2px solid var(--text-main);
			background: #fff;
			position: sticky;
			top: 0;
		}

		.compare-table th:first-child {
			text-align: left;
			font-family: var(--font-sans);
			font-size: 0.95rem;
			color: var(--text-sub);
			font-weight: 700;
		}

		.compare-table .category-row th {
			background: var(--bg-base);
			text-align: left;
			font-family: var(--font-sans);
			font-size: 0.85rem;
			color: var(--text-sub);
			padding: 0.8rem 1rem;
			border-bottom: 1px solid var(--border-color);
		}

		.compare-table td {
			padding: 1.2rem 1rem;
			border-bottom: 1px solid var(--border-color);
			font-size: 0.95rem;
			color: var(--text-main);
			transition: background 0.2s;
		}

		.compare-table tbody tr:hover td {
			background-color: #fafafa;
		}

		.compare-table td:nth-child(3),
		.compare-table th:nth-child(3) {
			background-color: rgba(197, 160, 89, 0.05);
			border-left: 1px solid rgba(197, 160, 89, 0.2);
			border-right: 1px solid rgba(197, 160, 89, 0.2);
		}

		.check-icon { color: var(--accent-gold); font-weight: 900; font-size: 1.2rem; }
		.minus-icon { color: #ccc; }

		/* ========================================
		Bottom CTA
		========================================
		*/
		.cta-section {
			padding: 6rem 1.5rem;
			text-align: center;
			background: var(--grad-dark);
			color: #fff;
		}

		.cta-title {
			font-family: var(--font-serif);
			font-size: clamp(1.8rem, 4vw, 2.5rem);
			font-weight: 800;
			margin-bottom: 1rem;
		}

		.cta-desc {
			font-size: 0.95rem;
			opacity: 0.8;
			margin-bottom: 3rem;
			line-height: 1.8;
		}

		.btn-cta {
			display: inline-block;
			padding: 1.2rem 4rem;
			background: #fff;
			color: #000;
			font-weight: 700;
			font-size: 1.1rem;
			letter-spacing: 0.1em;
			border-radius: 50px;
			transition: all 0.3s;
		}

		.btn-cta:hover {
			transform: translateY(-3px);
			box-shadow: 0 10px 30px rgba(255,255,255,0.2);
		}

		.site-footer {
			background: #050505; color: #fff; text-align: center; padding: 2rem 0; font-size: 0.8rem;
		}