/**
 * HEAVLISH — サービスLP・プログラミング教室 統一スタイル
 * home-redesign.css の直後に読み込む（各ページで $service_pages_unified_css = true）
 * 旧ページ末尾 <style> を集約。ライト面は末尾の上書きブロックで確保。
 */

body.home-redesign.service-page {
	background: var(--hr-light) !important;
	color: var(--hr-text-dark);
}


/* ----- extracted from homepage-production.php ----- */
		/* CSS Version:  - キャッシュバスティング用 */
		/* ホームページ制作ページ専用スタイル - 高級感とシンプルさを重視 */
		.service-page.homepage-production {
			background: #0a0a0a;
			color: #ffffff;
		}

		/* 統一された余白システム（8pxベース） */
		.section-padding {
			padding: 120px 0;
		}

		.container-narrow {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 40px;
			box-sizing: border-box;
		}

		.bg-dark {
			background: rgba(0, 0, 0, 0.2);
		}

		/* ヒーローセクション - シンプルで洗練されたデザイン */
		#service-hero {
			position: relative;
			min-height: 85vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 140px 40px 100px;
			overflow: hidden;
		}

		#service-hero .hero-title {
			font-size: 3.5rem;
			font-weight: 300;
			margin-bottom: 24px;
			color: #ffffff;
			text-align: center;
			line-height: 1.2;
			letter-spacing: -0.04em;
		}

		#service-hero .hero-subtitle {
			font-size: 1.125rem;
			margin-bottom: 40px;
			color: rgba(255, 255, 255, 0.8);
			line-height: 1.75;
			text-align: center;
			font-weight: 400;
			max-width: 640px;
		}

		#service-hero .hero-buttons {
			display: flex;
			gap: 16px;
			justify-content: center;
			flex-wrap: wrap;
		}

		/* サービス特徴カード - シンプルで洗練されたデザイン */
		.features-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 32px;
			margin-top: 64px;
		}

		.feature-card {
			text-align: center;
			background: rgba(255, 255, 255, 0.03);
			border: 1px solid rgba(255, 255, 255, 0.08);
			border-radius: 8px;
			padding: 48px 40px;
			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
			position: relative;
		}

		.feature-card:hover {
			background: rgba(255, 255, 255, 0.05);
			border-color: rgba(255, 255, 255, 0.15);
			transform: translateY(-4px);
		}

		.feature-icon {
			width: 56px;
			height: 56px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 24px;
			margin: 0 auto;
			transition: all 0.3s ease;
		}

		.feature-icon .material-icons {
			font-size: 28px;
			color: rgba(255, 255, 255, 0.9);
		}

		.feature-card:hover .feature-icon {
			transform: translateY(-2px);
		}

		.feature-card h3 {
			font-size: 1.25rem;
			margin-bottom: 16px;
			color: #ffffff;
			font-weight: 500;
			letter-spacing: -0.02em;
			line-height: 1.4;
		}

		.feature-card p {
			color: rgba(255, 255, 255, 0.7);
			line-height: 1.75;
			margin: 0;
			font-size: 0.95rem;
		}

		/* 制作プロセスタイムライン - シンプルで洗練 */
		.process-timeline {
			margin-top: 64px;
		}

		.process-item {
			display: flex;
			align-items: flex-start;
			gap: 32px;
			margin-bottom: 48px;
			position: relative;
			text-align: left;
		}

		.process-item:last-child {
			margin-bottom: 0;
		}

		.process-number {
			flex-shrink: 0;
			width: 56px;
			height: 56px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.1);
			border: 1px solid rgba(255, 255, 255, 0.2);
			color: #fff;
			border-radius: 50%;
			font-size: 1.125rem;
			font-weight: 500;
		}

		.process-content {
			flex: 1;
			padding-top: 4px;
		}

		.process-content h3 {
			font-size: 1.25rem;
			margin-bottom: 12px;
			color: #ffffff;
			font-weight: 500;
			letter-spacing: -0.02em;
		}

		.process-content p {
			color: rgba(255, 255, 255, 0.7);
			line-height: 1.75;
			font-size: 0.95rem;
		}

		/* 料金プラン - シンプルで洗練 */
		.pricing-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
			gap: 32px;
			margin-top: 64px;
		}

		.pricing-card {
			background: rgba(255, 255, 255, 0.03);
			border: 1px solid rgba(255, 255, 255, 0.08);
			border-radius: 8px;
			padding: 48px 40px;
			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
			position: relative;
		}

		.pricing-card.featured {
			border-color: rgba(255, 255, 255, 0.2);
			background: rgba(255, 255, 255, 0.05);
		}

		.pricing-badge {
			position: absolute;
			top: 24px;
			right: 24px;
			background: rgba(255, 255, 255, 0.1);
			border: 1px solid rgba(255, 255, 255, 0.2);
			color: #fff;
			padding: 4px 12px;
			border-radius: 4px;
			font-size: 0.75rem;
			font-weight: 500;
			letter-spacing: 0.05em;
			text-transform: uppercase;
		}

		.pricing-card:hover {
			background: rgba(255, 255, 255, 0.05);
			border-color: rgba(255, 255, 255, 0.15);
			transform: translateY(-4px);
		}

		.pricing-card.featured:hover {
			background: rgba(255, 255, 255, 0.07);
		}

		.pricing-header {
			margin-bottom: 32px;
		}

		.pricing-header h3 {
			font-size: 1.375rem;
			margin-bottom: 20px;
			color: #ffffff;
			font-weight: 500;
			letter-spacing: -0.02em;
		}

		.pricing-price {
			display: flex;
			align-items: baseline;
			justify-content: center;
			gap: 4px;
		}

		.price-amount {
			font-size: 2.0rem;
			font-weight: 400;
			color: #ffffff;
			letter-spacing: -0.03em;
		}

		.price-note {
			font-size: 0.875rem;
			color: rgba(255, 255, 255, 0.6);
		}

		.pricing-features {
			list-style: none;
			padding: 0;
			margin: 0 0 32px 0;
		}

		.pricing-features li {
			padding: 12px 0;
			color: rgba(255, 255, 255, 0.8);
			display: flex;
			align-items: center;
			gap: 12px;
			font-size: 0.95rem;
			line-height: 1.6;
		}

		.pricing-features .material-icons {
			color: rgba(255, 255, 255, 0.6);
			font-size: 1.125rem;
		}

		.pricing-note {
			font-size: 0.875rem;
			color: rgba(255, 255, 255, 0.6);
			text-align: center;
			margin-top: 24px;
			line-height: 1.6;
		}

		/* お問い合わせセクション - シンプルで洗練 */
		.contact-content {
			margin-top: 48px;
		}

		.contact-intro {
			text-align: center;
			font-size: 1rem;
			margin-bottom: 40px;
			color: rgba(255, 255, 255, 0.8);
			line-height: 1.875;
			max-width: 640px;
			margin-left: auto;
			margin-right: auto;
		}

		.contact-info {
			margin: 48px 0;
		}

		.contact-item {
			display: flex;
			align-items: center;
			gap: 16px;
			margin-bottom: 16px;
			padding: 20px 24px;
			background: rgba(255, 255, 255, 0.03);
			border: 1px solid rgba(255, 255, 255, 0.08);
			border-radius: 8px;
			transition: all 0.3s ease;
		}

		.contact-item:hover {
			background: rgba(255, 255, 255, 0.05);
			border-color: rgba(255, 255, 255, 0.12);
		}

		.contact-icon {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgba(255, 255, 255, 0.7);
		}

		.contact-buttons {
			margin: 48px 0;
			text-align: center;
		}

		.contact-message {
			text-align: center;
			font-size: 1.125rem;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.9);
			margin-top: 40px;
			line-height: 1.75;
			max-width: 640px;
			margin-left: auto;
			margin-right: auto;
		}

		/* FAQセクション - シンプルで洗練 */
		.faq-container {
			margin-top: 48px;
		}

		.faq-item {
			margin-bottom: 16px;
			background: rgba(255, 255, 255, 0.03);
			border-radius: 8px;
			overflow: hidden;
			border: 1px solid rgba(255, 255, 255, 0.08);
			transition: all 0.3s ease;
		}

		.faq-item:hover {
			border-color: rgba(255, 255, 255, 0.12);
		}

		.faq-question {
			width: 100%;
			padding: 24px;
			background: transparent;
			border: none;
			text-align: left;
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #ffffff;
			font-size: 1rem;
			transition: background 0.3s ease;
			min-height: 44px;
		}

		.faq-question:hover,
		.faq-question:focus {
			background: rgba(255, 255, 255, 0.05);
			outline: none;
		}

		.faq-question h3 {
			margin: 0;
			font-size: 1rem;
			font-weight: 400;
			flex: 1;
			letter-spacing: -0.01em;
			line-height: 1.5;
		}

		.faq-icon {
			font-size: 0;
			font-weight: 300;
			transition: color 0.3s ease;
			color: rgba(255, 255, 255, 0.6);
			margin-left: 16px;
		}
		.faq-icon::before {
			content: '+';
			font-size: 1.25rem;
			font-weight: 300;
			color: rgba(255, 255, 255, 0.6);
		}
		.faq-question[aria-expanded="true"] .faq-icon::before {
			content: '−';
		}

		.faq-answer {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease, padding 0.3s ease;
			padding: 0 24px;
		}

		.faq-answer.active {
			max-height: 500px;
			padding: 0 24px 24px;
		}

		.faq-answer p {
			margin: 0;
			line-height: 1.875;
			color: rgba(255, 255, 255, 0.7);
			font-size: 0.95rem;
		}

		/* リップルエフェクト */
		.btn-primary,
		.floating-cta-button {
			position: relative;
			overflow: hidden;
		}

		.ripple {
			position: absolute;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.6);
			transform: scale(0);
			animation: ripple-animation 0.6s ease-out;
			pointer-events: none;
		}

		@keyframes ripple-animation {
			to {
				transform: scale(4);
				opacity: 0;
			}
		}

		/* フローティングCTA - シンプルで洗練 */
		.floating-cta {
			position: fixed;
			bottom: 32px;
			right: 32px;
			z-index: 1000;
			opacity: 0;
			transform: translateY(100px);
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			pointer-events: none;
		}

		.floating-cta.visible {
			opacity: 1;
			transform: translateY(0);
			pointer-events: auto;
		}

		.floating-cta-button {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 14px 24px;
			background: rgba(255, 255, 255, 0.1);
			border: 1px solid rgba(255, 255, 255, 0.2);
			color: #fff;
			border-radius: 4px;
			text-decoration: none;
			font-weight: 400;
			font-size: 0.9375rem;
			min-height: 44px;
			transition: all 0.3s ease;
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
		}

		.floating-cta-button:hover,
		.floating-cta-button:focus {
			background: rgba(255, 255, 255, 0.15);
			border-color: rgba(255, 255, 255, 0.3);
			transform: translateY(-2px);
			outline: none;
		}

		/* セクションタイトル - 洗練されたタイポグラフィ */
		.section-title {
			font-size: 2.5rem;
			font-weight: 300;
			text-align: center;
			margin: 0 auto 16px;
			color: #ffffff;
			width: 100%;
			display: block;
			letter-spacing: -0.03em;
			line-height: 1.2;
		}

		.section-title span {
			display: block;
			font-size: 0.875rem;
			font-weight: 400;
			margin-top: 12px;
			color: rgba(255, 255, 255, 0.5);
			letter-spacing: 0.1em;
			text-transform: uppercase;
		}

		.under_line {
			width: 48px;
			height: 1px;
			background: rgba(255, 255, 255, 0.3);
			margin: 0 auto 64px;
			transform: scaleX(0);
			transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
		}

		.under_line.active {
			transform: scaleX(1);
		}

		/* リード文 - 読みやすさを重視 */
		.lead-content {
			margin-top: 48px;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.lead-text-large {
			font-size: 1.5rem;
			font-weight: 400;
			margin-bottom: 24px;
			color: rgba(255, 255, 255, 0.95);
			text-align: center;
			letter-spacing: -0.02em;
			line-height: 1.6;
			max-width: 720px;
		}

		.lead-text {
			font-size: 1rem;
			line-height: 1.875;
			margin-bottom: 24px;
			text-align: center;
			max-width: 720px;
			margin-left: auto;
			margin-right: auto;
			color: rgba(255, 255, 255, 0.7);
		}

		/* ボタン - シンプルで洗練 */
		.btn-primary {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 14px 32px;
			background: rgba(255, 255, 255, 0.1);
			border: 1px solid rgba(255, 255, 255, 0.2);
			color: #fff;
			border-radius: 4px;
			font-weight: 400;
			font-size: 0.9375rem;
			text-decoration: none;
			transition: all 0.3s ease;
			letter-spacing: 0.02em;
		}

		.btn-primary:hover {
			background: rgba(255, 255, 255, 0.15);
			border-color: rgba(255, 255, 255, 0.3);
			transform: translateY(-2px);
		}

		.btn-secondary {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 14px 32px;
			background: transparent;
			color: #fff;
			border: 1px solid rgba(255, 255, 255, 0.2);
			border-radius: 4px;
			font-weight: 400;
			font-size: 0.9375rem;
			text-decoration: none;
			transition: all 0.3s ease;
			letter-spacing: 0.02em;
		}

		.btn-secondary:hover {
			background: rgba(255, 255, 255, 0.05);
			border-color: rgba(255, 255, 255, 0.3);
			transform: translateY(-2px);
		}

		/* アクセシビリティ: フォーカス表示 */
		*:focus-visible {
			outline: 3px solid #00d4ff;
			outline-offset: 2px;
			border-radius: 2px;
		}

		/* アクセシビリティ: コントラスト比確保（WCAG AA準拠） */
		.btn-primary,
		.btn-secondary,
		.faq-question {
			min-height: 44px;
			min-width: 44px;
		}

		/* レスポンシブ対応 */
		@media (max-width: 768px) {
			#service-hero {
				min-height: 75vh;
				padding: 100px 24px 80px;
			}

			#service-hero .hero-title {
				font-size: 2.25rem;
			}

			#service-hero .hero-subtitle {
				font-size: 1rem;
				margin-bottom: 32px;
			}

			#service-hero .hero-buttons {
				flex-direction: column;
				width: 100%;
				max-width: 320px;
			}

			#service-hero .hero-buttons .btn-primary,
			#service-hero .hero-buttons .btn-secondary {
				width: 100%;
				justify-content: center;
			}

			.section-padding {
				padding: 80px 0;
			}

			.container-narrow {
				padding: 0 24px;
			}

			.section-title {
				font-size: 2rem;
			}

			.section-title span {
				font-size: 0.75rem;
			}

			.under_line {
				margin-bottom: 48px;
			}

			.lead-text {
				font-size: 0.9375rem;
			}

			.lead-text-large {
				font-size: 1.25rem;
			}

			.features-grid {
				gap: 24px;
				margin-top: 48px;
			}

			.feature-card {
				padding: 32px 24px;
				text-align: center;
			}

			.process-timeline {
				margin-top: 48px;
			}

			.process-item {
				gap: 24px;
				margin-bottom: 40px;
			}

			.pricing-grid {
				gap: 24px;
				margin-top: 48px;
			}

			.pricing-card {
				padding: 32px 24px;
			}

			.features-grid {
				grid-template-columns: 1fr;
				gap: 20px;
			}

			.pricing-grid {
				grid-template-columns: 1fr;
				gap: 20px;
			}

			.pricing-card.featured {
				transform: scale(1);
			}

			.process-item {
				flex-direction: column;
				gap: 20px;
				text-align: center;
			}

			.process-number {
				width: 50px;
				height: 50px;
				font-size: 1.2rem;
				margin: 0 auto;
			}

			.faq-question {
				min-height: 48px;
				padding: 16px;
			}

			.faq-answer.active {
				padding: 15px;
			}

			.floating-cta {
				bottom: 1rem;
				right: 1rem;
			}

			.floating-cta-button {
				padding: 0.875rem 1.25rem;
				font-size: 0.9rem;
			}

			.floating-cta-button span:last-child {
				display: none;
			}
		}

		/* モバイル最適化: タッチ操作 */
		@media (hover: none) and (pointer: coarse) {
			.btn-primary,
			.btn-secondary {
				min-height: 48px;
				padding: 14px 28px;
			}

			.btn-primary{
				justify-content: center;
			}

			.faq-question {
				min-height: 48px;
				padding: 16px;
			}
		}

/* ----- extracted from system-construction.php ----- */
		/* CSS Version:  - キャッシュバスティング用 */
		/* システム構築ページ専用スタイル */
		.system-construction {
			background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
		}

		.section-padding {
			padding: 80px 20px;
		}

		.container-narrow {
			max-width: 1200px;
			margin: 0 auto;
		}

		.bg-dark {
			background: rgba(0, 0, 0, 0.3);
		}

		/* グラスモーフィズムデザイン: サービス特徴カード（PC: 3列2行） */
		.features-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24px;
			margin-top: 40px;
		}

		.feature-card {
			background: rgba(255, 255, 255, 0.05);
			backdrop-filter: blur(20px) saturate(180%);
			-webkit-backdrop-filter: blur(20px) saturate(180%);
			border: 1px solid rgba(255, 255, 255, 0.18);
			border-radius: 16px;
			padding: 32px;
			box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
			transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
			position: relative;
			overflow: hidden;
		}

		.feature-card::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 2px;
			background: linear-gradient(90deg, transparent, #00d4ff, transparent);
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.feature-card:hover {
			background: rgba(255, 255, 255, 0.08);
			transform: translateY(-8px) scale(1.02);
			box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
			border-color: rgba(0, 212, 255, 0.4);
		}

		.feature-card:hover::before {
			opacity: 1;
		}

		.feature-icon {
			width: 64px;
			height: 64px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 212, 255, 0.1);
			border-radius: 12px;
			margin: 0 auto;
			margin-bottom: 20px;
			transition: all 0.3s ease;
		}

		.feature-icon .material-icons {
			font-size: 32px;
			color: #00d4ff;
		}

		.feature-card:hover .feature-icon {
			background: rgba(0, 212, 255, 0.2);
			transform: scale(1.1) rotate(5deg);
		}

		.feature-card h3 {
			font-size: 1.3rem;
			text-align: center;
			margin-bottom: 12px;
			color: #fff;
			font-weight: 700;
		}

		.feature-card p {
			color: rgba(255, 255, 255, 0.8);
			line-height: 1.7;
			margin: 0;
		}

		/* 構築プロセスタイムライン */
		.process-timeline {
			margin-top: 40px;
		}

		.process-item {
			display: flex;
			align-items: center;
			gap: 30px;
			margin-bottom: 40px;
			position: relative;
		}

		.process-item:last-child {
			margin-bottom: 0;
		}

		.process-number {
			flex-shrink: 0;
			width: 60px;
			height: 60px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(135deg, #00d4ff, #0099cc);
			color: #fff;
			border-radius: 50%;
			font-size: 1.5rem;
			font-weight: bold;
			box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
		}

		.process-content {
			flex: 1;
			background: rgba(255, 255, 255, 0.05);
			padding: 24px;
			border-radius: 12px;
			border-left: 3px solid #00d4ff;
		}

		.process-content h3 {
			font-size: 1.3rem;
			margin-bottom: 12px;
			color: #00d4ff;
		}

		.process-content p {
			color: rgba(255, 255, 255, 0.8);
			line-height: 1.7;
			margin: 0;
		}

		/* システムグリッド */
		.systems-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 30px;
			margin-top: 40px;
		}

		.system-card {
			background: rgba(255, 255, 255, 0.05);
			backdrop-filter: blur(20px) saturate(180%);
			-webkit-backdrop-filter: blur(20px) saturate(180%);
			border: 1px solid rgba(255, 255, 255, 0.18);
			border-radius: 16px;
			padding: 32px;
			box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
			transition: all 0.3s ease;
			text-align: center;
		}

		.system-card:hover {
			transform: translateY(-8px);
			box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
		}

		.system-icon {
			width: 80px;
			height: 80px;
			margin: 0 auto 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 212, 255, 0.1);
			border-radius: 50%;
		}

		.system-icon .material-icons {
			font-size: 40px;
			color: #00d4ff;
		}

		.system-card h3 {
			font-size: 1.5rem;
			margin-bottom: 16px;
			color: #fff;
		}

		.system-card p {
			color: rgba(255, 255, 255, 0.8);
			line-height: 1.7;
			margin-bottom: 20px;
		}

		.system-features {
			list-style: none;
			padding: 0;
			margin: 0;
			text-align: left;
		}

		.system-features li {
			padding: 8px 0;
			padding-left: 24px;
			position: relative;
			color: rgba(255, 255, 255, 0.9);
		}

		.system-features li:before {
			content: "✓";
			position: absolute;
			left: 0;
			color: #00d4ff;
			font-weight: bold;
		}

		/* リード文 */
		.lead-content {
			margin-top: 40px;
		}

		.lead-text-large {
			font-size: 1.3rem;
			font-weight: bold;
			margin-bottom: 20px;
			color: #00d4ff;
			text-align: center;
		}

		.lead-text {
			font-size: 1.1rem;
			line-height: 1.8;
			margin-bottom: 20px;
		}

		/* お問い合わせ */
		.contact-intro {
			font-size: 1.1rem;
			line-height: 1.8;
			margin-bottom: 15px;
		}

		.contact-info {
			margin: 40px 0;
		}

		.contact-item {
			display: flex;
			align-items: center;
			gap: 15px;
			margin-bottom: 20px;
			padding: 15px;
			background: rgba(255, 255, 255, 0.05);
			border-radius: 8px;
		}

		.contact-icon {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 212, 255, 0.2);
			border-radius: 50%;
		}

		.contact-buttons {
			margin: 40px 0;
			text-align: center;
		}

		.contact-message {
			text-align: center;
			font-size: 1.2rem;
			font-weight: bold;
			color: #00d4ff;
			margin-top: 30px;
		}

		/* 料金セクション */
		.pricing-content {
			margin-top: 40px;
		}

		.pricing-intro {
			text-align: center;
			font-size: 1.1rem;
			margin-bottom: 40px;
			color: rgba(255, 255, 255, 0.9);
		}

		.pricing-cards {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			gap: 30px;
			margin-bottom: 40px;
		}

		.pricing-card {
			background: rgba(255, 255, 255, 0.05);
			backdrop-filter: blur(20px) saturate(180%);
			-webkit-backdrop-filter: blur(20px) saturate(180%);
			border: 1px solid rgba(255, 255, 255, 0.18);
			border-radius: 16px;
			padding: 32px;
			box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
			transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
			position: relative;
			overflow: hidden;
		}

		.pricing-card.featured {
			border-color: rgba(0, 212, 255, 0.4);
			transform: scale(1.05);
		}

		.pricing-badge {
			position: absolute;
			top: 5px;
			right: 0px;
			background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
			color: #fff;
			padding: 6px 16px;
			border-radius: 20px;
			font-size: 0.85rem;
			font-weight: bold;
		}

		.pricing-card:hover {
			transform: translateY(-8px) scale(1.02);
			box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
			border-color: rgba(0, 212, 255, 0.4);
		}

		.pricing-card.featured:hover {
			transform: translateY(-8px) scale(1.07);
		}

		.pricing-card h3 {
			font-size: 1.5rem;
			margin-bottom: 12px;
			color: #fff;
			font-weight: 700;
		}

		.pricing-description {
			color: rgba(255, 255, 255, 0.8);
			margin-bottom: 24px;
			font-size: 0.95rem;
		}

		.pricing-features {
			list-style: none;
			padding: 0;
			margin: 0 0 24px 0;
		}

		.pricing-features li {
			padding: 8px 0;
			color: rgba(255, 255, 255, 0.9);
			position: relative;
			padding-left: 24px;
		}

		.pricing-features li::before {
			content: "✓";
			position: absolute;
			left: 0;
			color: #00d4ff;
			font-weight: bold;
		}

		.pricing-note {
			font-size: 0.9rem;
			color: rgba(255, 255, 255, 0.7);
			text-align: center;
			margin-top: 20px;
			font-style: italic;
		}

		.pricing-message {
			text-align: center;
			font-size: 1.1rem;
			color: rgba(255, 255, 255, 0.9);
			margin-top: 40px;
			padding: 24px;
			background: rgba(0, 212, 255, 0.1);
			border-radius: 8px;
			border: 1px solid rgba(0, 212, 255, 0.2);
		}

		/* FAQセクション */
		.faq-container {
			margin-top: 40px;
		}

		.faq-item {
			margin-bottom: 20px;
			background: rgba(255, 255, 255, 0.05);
			border-radius: 8px;
			overflow: hidden;
			border: 1px solid rgba(255, 255, 255, 0.1);
		}

		.faq-question {
			width: 100%;
			padding: 20px;
			background: transparent;
			border: none;
			text-align: left;
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			font-size: 1.1rem;
			transition: background 0.3s ease;
			min-height: 44px;
		}

		.faq-question:hover,
		.faq-question:focus {
			background: rgba(255, 255, 255, 0.1);
			outline: 2px solid #00d4ff;
			outline-offset: -2px;
		}

		.faq-question h3 {
			margin: 0;
			font-size: 1.0rem;
			font-weight: bold;
			flex: 1;
		}

		.faq-icon {
			font-size: 0;
			font-weight: bold;
			transition: color 0.3s ease;
		}
		.faq-icon::before {
			content: '+';
			font-size: 1.5rem;
			font-weight: bold;
		}
		.faq-question[aria-expanded="true"] .faq-icon::before {
			content: '−';
		}

		.faq-answer {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease, padding 0.3s ease;
			padding: 0 20px;
		}

		.faq-answer.active {
			max-height: 500px;
			padding: 20px;
		}

		.faq-answer p {
			margin: 0;
			line-height: 1.8;
			color: rgba(255, 255, 255, 0.9);
		}

		/* リップルエフェクト */
		.btn-primary,
		.floating-cta-button {
			position: relative;
			overflow: hidden;
		}

		.ripple {
			position: absolute;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.6);
			transform: scale(0);
			animation: ripple-animation 0.6s ease-out;
			pointer-events: none;
		}

		@keyframes ripple-animation {
			to {
				transform: scale(4);
				opacity: 0;
			}
		}

		/* フローティングCTA */
		.floating-cta {
			position: fixed;
			bottom: 2rem;
			right: 2rem;
			z-index: 1000;
			opacity: 0;
			transform: translateY(100px);
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			pointer-events: none;
		}

		.floating-cta.visible {
			opacity: 1;
			transform: translateY(0);
			pointer-events: auto;
		}

		.floating-cta-button {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			padding: 1rem 1.5rem;
			background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
			color: #fff;
			border-radius: 50px;
			box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
			text-decoration: none;
			font-weight: 600;
			min-height: 44px;
			animation: pulse 2s infinite;
			transition: all 0.3s ease;
		}

		.floating-cta-button:hover,
		.floating-cta-button:focus {
			transform: scale(1.05);
			box-shadow: 0 12px 35px rgba(0, 212, 255, 0.6);
			outline: 3px solid rgba(255, 255, 255, 0.5);
			outline-offset: 2px;
		}

		@keyframes pulse {
			0%, 100% {
				box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
			}
			50% {
				box-shadow: 0 8px 35px rgba(0, 212, 255, 0.6);
			}
		}

		/* アクセシビリティ: フォーカス表示 */
		*:focus-visible {
			outline: 3px solid #00d4ff;
			outline-offset: 2px;
			border-radius: 2px;
		}

		/* レスポンシブ対応 */
		@media (max-width: 768px) {
			.section-padding {
				padding: 60px 20px;
			}

			.features-grid {
				grid-template-columns: 1fr;
				gap: 20px;
			}

			.systems-grid {
				grid-template-columns: 1fr;
				gap: 20px;
			}

			.pricing-cards {
				grid-template-columns: 1fr;
				gap: 20px;
			}

			.pricing-card.featured {
				transform: scale(1);
			}

			.process-item {
				flex-direction: column;
				align-items: center;
				text-align: center;
			}

			.process-number {
				margin-bottom: 20px;
			}

			.process-content {
				border-left: none;
				border-top: 3px solid #00d4ff;
			}

			.floating-cta {
				bottom: 1rem;
				right: 1rem;
			}
			
			.floating-cta-button {
				padding: 0.875rem 1.25rem;
				font-size: 0.9rem;
			}
			
			.floating-cta-button span:last-child {
				display: none;
			}

			.faq-question {
				padding: 15px;
				font-size: 1rem;
			}

			.faq-answer.active {
				padding: 15px;
			}
		}

		/* モバイル最適化: タッチ操作 */
		@media (hover: none) and (pointer: coarse) {
			.btn-primary,
			.btn-secondary {
				min-height: 48px;
				padding: 14px 28px;
			}
			
			.faq-question {
				min-height: 48px;
				padding: 16px;
			}
		}

/* ----- extracted from application-development.php ----- */
		/* CSS Version:  - キャッシュバスティング用 */
		/* アプリ開発ページ専用スタイル */
		.application-development {
			background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
		}

		.section-padding {
			padding: 80px 20px;
		}

		.container-narrow {
			max-width: 1200px;
			margin: 0 auto;
		}

		.bg-dark {
			background: rgba(0, 0, 0, 0.3);
		}

		/* グラスモーフィズムデザイン: サービス特徴カード */
		.features-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			gap: 24px;
			margin-top: 40px;
		}

		.feature-card {
			text-align: center;
			background: rgba(255, 255, 255, 0.05);
			backdrop-filter: blur(20px) saturate(180%);
			-webkit-backdrop-filter: blur(20px) saturate(180%);
			border: 1px solid rgba(255, 255, 255, 0.18);
			border-radius: 16px;
			padding: 32px;
			box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
			transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
			position: relative;
			overflow: hidden;
		}

		.feature-card::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 2px;
			background: linear-gradient(90deg, transparent, #00d4ff, transparent);
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.feature-card:hover {
			background: rgba(255, 255, 255, 0.08);
			transform: translateY(-8px) scale(1.02);
			box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
			border-color: rgba(0, 212, 255, 0.4);
		}

		.feature-card:hover::before {
			opacity: 1;
		}

		.feature-icon {
			margin: 0 auto;
			width: 64px;
			height: 64px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 212, 255, 0.1);
			border-radius: 12px;
			margin-bottom: 20px;
			transition: all 0.3s ease;
		}

		.feature-icon .material-icons {
			font-size: 32px;
			color: #00d4ff;
		}

		.feature-card:hover .feature-icon {
			background: rgba(0, 212, 255, 0.2);
			transform: scale(1.1) rotate(5deg);
		}

		.feature-card h3 {
			font-size: 1.3rem;
			margin-bottom: 12px;
			color: #fff;
			font-weight: 700;
		}

		.feature-card p {
			color: rgba(255, 255, 255, 0.8);
			line-height: 1.7;
			margin: 0;
		}

		/* 開発プロセスタイムライン */
		.process-timeline {
			margin-top: 40px;
		}

		.process-item {
			display: flex;
			align-items: flex-start;
			gap: 30px;
			margin-bottom: 40px;
			position: relative;
		}

		.process-item:last-child {
			margin-bottom: 0;
		}

		.process-number {
			flex-shrink: 0;
			width: 60px;
			height: 60px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(135deg, #00d4ff, #0099cc);
			color: #fff;
			border-radius: 50%;
			font-size: 1.5rem;
			font-weight: bold;
			box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
		}

		.process-content {
			flex: 1;
			background: rgba(255, 255, 255, 0.05);
			padding: 24px;
			border-radius: 12px;
			border-left: 3px solid #00d4ff;
		}

		.process-content h3 {
			font-size: 1.3rem;
			margin-bottom: 12px;
			color: #00d4ff;
		}

		.process-content p {
			color: rgba(255, 255, 255, 0.8);
			line-height: 1.7;
			margin: 0;
		}

		/* プラットフォームグリッド */
		.platforms-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 30px;
			margin-top: 40px;
		}

		.platform-card {
			background: rgba(255, 255, 255, 0.05);
			backdrop-filter: blur(20px) saturate(180%);
			-webkit-backdrop-filter: blur(20px) saturate(180%);
			border: 1px solid rgba(255, 255, 255, 0.18);
			border-radius: 16px;
			padding: 32px;
			box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
			transition: all 0.3s ease;
			text-align: center;
		}

		.platform-card:hover {
			transform: translateY(-8px);
			box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
		}

		.platform-icon {
			width: 80px;
			height: 80px;
			margin: 0 auto 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 212, 255, 0.1);
			border-radius: 50%;
		}

		.platform-icon .material-icons {
			font-size: 40px;
			color: #00d4ff;
		}

		.platform-card h3 {
			font-size: 1.5rem;
			margin-bottom: 16px;
			color: #fff;
		}

		.platform-card p {
			color: rgba(255, 255, 255, 0.8);
			line-height: 1.7;
			margin-bottom: 20px;
		}

		.platform-features {
			list-style: none;
			padding: 0;
			margin: 0;
			text-align: left;
		}

		.platform-features li {
			padding: 8px 0;
			padding-left: 24px;
			position: relative;
			color: rgba(255, 255, 255, 0.9);
		}

		.platform-features li:before {
			content: "✓";
			position: absolute;
			left: 0;
			color: #00d4ff;
			font-weight: bold;
		}

		/* リード文 */
		.lead-content {
			margin-top: 40px;
		}

		.lead-text-large {
			font-size: 1.3rem;
			font-weight: bold;
			margin-bottom: 20px;
			color: #00d4ff;
			text-align: center;
		}

		.lead-text {
			font-size: 1.1rem;
			line-height: 1.8;
			margin-bottom: 20px;
		}

		/* お問い合わせ */
		.contact-intro {
			font-size: 1.1rem;
			line-height: 1.8;
			margin-bottom: 15px;
		}

		.contact-info {
			margin: 40px 0;
		}

		.contact-item {
			display: flex;
			align-items: center;
			gap: 15px;
			margin-bottom: 20px;
			padding: 15px;
			background: rgba(255, 255, 255, 0.05);
			border-radius: 8px;
		}

		.contact-icon {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 212, 255, 0.2);
			border-radius: 50%;
		}

		.contact-buttons {
			margin: 40px 0;
			text-align: center;
		}

		.contact-message {
			text-align: center;
			font-size: 1.2rem;
			font-weight: bold;
			color: #00d4ff;
			margin-top: 30px;
		}

		/* 料金セクション */
		.pricing-content {
			margin-top: 40px;
		}

		.pricing-intro {
			text-align: center;
			font-size: 1.1rem;
			margin-bottom: 40px;
			color: rgba(255, 255, 255, 0.9);
		}

		.pricing-cards {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			gap: 30px;
			margin-bottom: 40px;
		}

		.pricing-card {
			background: rgba(255, 255, 255, 0.05);
			backdrop-filter: blur(20px) saturate(180%);
			-webkit-backdrop-filter: blur(20px) saturate(180%);
			border: 1px solid rgba(255, 255, 255, 0.18);
			border-radius: 16px;
			padding: 32px;
			box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
			transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
			position: relative;
			overflow: hidden;
		}

		.pricing-card.featured {
			border-color: rgba(0, 212, 255, 0.4);
			transform: scale(1.05);
		}

		.pricing-badge {
			position: absolute;
			top: 20px;
			right: 20px;
			background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
			color: #fff;
			padding: 6px 16px;
			border-radius: 20px;
			font-size: 0.85rem;
			font-weight: bold;
		}

		.pricing-card:hover {
			transform: translateY(-8px) scale(1.02);
			box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.5);
			border-color: rgba(0, 212, 255, 0.4);
		}

		.pricing-card.featured:hover {
			transform: translateY(-8px) scale(1.07);
		}

		.pricing-card h3 {
			font-size: 1.5rem;
			margin-bottom: 12px;
			color: #fff;
			font-weight: 700;
		}

		.pricing-description {
			color: rgba(255, 255, 255, 0.8);
			margin-bottom: 24px;
			font-size: 0.95rem;
		}

		.pricing-features {
			list-style: none;
			padding: 0;
			margin: 0 0 24px 0;
		}

		.pricing-features li {
			padding: 8px 0;
			color: rgba(255, 255, 255, 0.9);
			position: relative;
			padding-left: 24px;
		}

		.pricing-features li::before {
			content: "✓";
			position: absolute;
			left: 0;
			color: #00d4ff;
			font-weight: bold;
		}

		.pricing-note {
			font-size: 0.9rem;
			color: rgba(255, 255, 255, 0.7);
			text-align: center;
			margin-top: 20px;
			font-style: italic;
		}

		.pricing-message {
			text-align: center;
			font-size: 1.1rem;
			color: rgba(255, 255, 255, 0.9);
			margin-top: 40px;
			padding: 24px;
			background: rgba(0, 212, 255, 0.1);
			border-radius: 8px;
			border: 1px solid rgba(0, 212, 255, 0.2);
		}

		/* FAQセクション */
		.faq-container {
			margin-top: 40px;
		}

		.faq-item {
			margin-bottom: 20px;
			background: rgba(255, 255, 255, 0.05);
			border-radius: 8px;
			overflow: hidden;
			border: 1px solid rgba(255, 255, 255, 0.1);
		}

		.faq-question {
			width: 100%;
			padding: 20px;
			background: transparent;
			border: none;
			text-align: left;
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			font-size: 1.1rem;
			transition: background 0.3s ease;
			min-height: 44px;
		}

		.faq-question:hover,
		.faq-question:focus {
			background: rgba(255, 255, 255, 0.1);
			outline: 2px solid #00d4ff;
			outline-offset: -2px;
		}

		.faq-question h3 {
			margin: 0;
			font-size: 1.1rem;
			font-weight: bold;
			flex: 1;
		}

		.faq-icon {
			font-size: 0;
			font-weight: bold;
			transition: color 0.3s ease;
		}
		.faq-icon::before {
			content: '+';
			font-size: 1.5rem;
			font-weight: bold;
		}
		.faq-question[aria-expanded="true"] .faq-icon::before {
			content: '−';
		}

		.faq-answer {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease, padding 0.3s ease;
			padding: 0 20px;
		}

		.faq-answer.active {
			max-height: 500px;
			padding: 20px;
		}

		.faq-answer p {
			margin: 0;
			line-height: 1.8;
			color: rgba(255, 255, 255, 0.9);
		}

		/* リップルエフェクト */
		.btn-primary,
		.floating-cta-button {
			position: relative;
			overflow: hidden;
		}

		.ripple {
			position: absolute;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.6);
			transform: scale(0);
			animation: ripple-animation 0.6s ease-out;
			pointer-events: none;
		}

		@keyframes ripple-animation {
			to {
				transform: scale(4);
				opacity: 0;
			}
		}

		/* フローティングCTA */
		.floating-cta {
			position: fixed;
			bottom: 2rem;
			right: 2rem;
			z-index: 1000;
			opacity: 0;
			transform: translateY(100px);
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			pointer-events: none;
		}

		.floating-cta.visible {
			opacity: 1;
			transform: translateY(0);
			pointer-events: auto;
		}

		.floating-cta-button {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			padding: 1rem 1.5rem;
			background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
			color: #fff;
			border-radius: 50px;
			box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
			text-decoration: none;
			font-weight: 600;
			min-height: 44px;
			animation: pulse 2s infinite;
			transition: all 0.3s ease;
		}

		.floating-cta-button:hover,
		.floating-cta-button:focus {
			transform: scale(1.05);
			box-shadow: 0 12px 35px rgba(0, 212, 255, 0.6);
			outline: 3px solid rgba(255, 255, 255, 0.5);
			outline-offset: 2px;
		}

		@keyframes pulse {
			0%, 100% {
				box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
			}
			50% {
				box-shadow: 0 8px 35px rgba(0, 212, 255, 0.6);
			}
		}

		/* アクセシビリティ: フォーカス表示 */
		*:focus-visible {
			outline: 3px solid #00d4ff;
			outline-offset: 2px;
			border-radius: 2px;
		}

		/* レスポンシブ対応 */
		@media (max-width: 768px) {
			.section-padding {
				padding: 60px 20px;
			}

			.features-grid {
				grid-template-columns: 1fr;
				gap: 20px;
			}

			.platforms-grid {
				grid-template-columns: 1fr;
				gap: 20px;
			}

			.pricing-cards {
				grid-template-columns: 1fr;
				gap: 20px;
			}

			.pricing-card.featured {
				transform: scale(1);
			}

			.process-item {
				flex-direction: column;
				align-items: center;
				text-align: center;
			}

			.process-number {
				margin-bottom: 20px;
			}

			.process-content {
				border-left: none;
				border-top: 3px solid #00d4ff;
			}

			.floating-cta {
				bottom: 1rem;
				right: 1rem;
			}
			
			.floating-cta-button {
				padding: 0.875rem 1.25rem;
				font-size: 0.9rem;
			}
			
			.floating-cta-button span:last-child {
				display: none;
			}

			.faq-question {
				padding: 15px;
				font-size: 1rem;
			}

			.faq-answer.active {
				padding: 15px;
			}
		}

		/* モバイル最適化: タッチ操作 */
		@media (hover: none) and (pointer: coarse) {
			.btn-primary,
			.btn-secondary {
				min-height: 48px;
				padding: 14px 28px;
			}
			
			.faq-question {
				min-height: 48px;
				padding: 16px;
			}
		}

/* ----- extracted from programming-class.php ----- */
		/* CSS Version:  - キャッシュバスティング用 */
		/* プログラミング教室ページ専用スタイル */
		.programming-class {
			background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
		}

		.section-padding {
			padding: 80px 20px;
		}

		.container-narrow {
			max-width: 1200px;
			margin: 0 auto;
		}

		.bg-dark {
			background: rgba(0, 0, 0, 0.3);
		}

		/* ヒーローセクション */
		#programming-hero {
			position: relative;
			min-height: 60vh;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			overflow: hidden;
		}

		#programming-hero .hero-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
		}

		#programming-hero .gradient-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: radial-gradient(circle at center, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
		}

		#programming-hero .hero-content {
			position: relative;
			z-index: 2;
			padding: 40px 20px;
		}

		#programming-hero .hero-title {
			font-size: 2.5rem;
			font-weight: bold;
			margin-bottom: 20px;
			line-height: 1.4;
		}

		#programming-hero .hero-subtitle {
			font-size: 1.2rem;
			margin-bottom: 40px;
			opacity: 0.9;
		}

		/* リード文セクション */
		#lead {
			background: rgba(0, 0, 0, 0.2);
			margin-top: 40px;
		}

		.lead-content {
			margin-top: 40px;
		}

		.lead-text-large {
			font-size: 1.3rem;
			font-weight: bold;
			margin-bottom: 20px;
			color: #00d4ff;
			text-align: center;
		}

		.lead-text {
			font-size: 1.1rem;
			line-height: 1.8;
			margin-bottom: 20px;
		}

		/* コースカード */
		.course-card {
			background: rgba(255, 255, 255, 0.05);
			border-radius: 12px;
			padding: 40px;
			margin-bottom: 60px;
			border: 1px solid rgba(255, 255, 255, 0.1);
			transition: all 0.3s ease;
		}

		.course-card:last-child {
			margin-bottom: 40px;
		}

		.course-card:hover {
			background: rgba(255, 255, 255, 0.08);
			transform: translateY(-5px);
			box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
		}

		.course-header {
			margin-bottom: 40px;
			padding-bottom: 25px;
			border-bottom: 2px solid rgba(255, 255, 255, 0.2);
			text-align: center;
		}

		.course-badge {
			display: inline-block;
			padding: 8px 16px;
			border-radius: 20px;
			font-weight: bold;
			margin-bottom: 15px;
			font-size: 0.9rem;
		}

		.level1-badge {
			background: #4caf50;
			color: #fff;
		}

		.level2-badge {
			background: #ff9800;
			color: #fff;
		}

		.level3-badge {
			background: #2196f3;
			color: #fff;
		}

		.course-title {
			font-size: 1.8rem;
			margin-bottom: 10px;
		}

		.course-subtitle {
			font-size: 1.1rem;
			opacity: 0.8;
			font-style: italic;
		}

		.course-info {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 20px;
			margin-bottom: 40px;
			padding: 20px;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 8px;
			text-align: center;
		}

		.info-item {
			display: flex;
			flex-direction: column;
		}

		.info-label {
			font-size: 0.9rem;
			opacity: 0.7;
			margin-bottom: 5px;
		}

		.info-value {
			font-size: 1.1rem;
			font-weight: bold;
			color: #00d4ff;
		}

		.course-description {
			margin-top: 40px;
		}

		.description-title {
			font-size: 1.3rem;
			margin-top: 50px;
			margin-bottom: 25px;
			color: #00d4ff;
			padding-top: 20px;
			border-top: 1px solid rgba(0, 212, 255, 0.2);
		}

		.description-title:first-child {
			margin-top: 0;
			padding-top: 0;
			border-top: none;
		}

		/* カリキュラムの流れタイトルの特別な余白 */
		.course-description > .description-title:last-of-type {
			margin-top: 60px;
		}

		.description-grid + .description-title,
		.description-card.single-card + .description-title {
			margin-top: 60px;
		}

		/* 説明セクションのグリッドレイアウト */
		.description-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24px;
			margin-top: 30px;
			margin-bottom: 50px;
		}

		.description-card {
			background: rgba(0, 0, 0, 0.4);
			border-radius: 16px;
			padding: 24px;
			border: 1px solid rgba(0, 212, 255, 0.2);
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
			transition: all 0.3s ease;
			backdrop-filter: blur(10px);
		}

		.description-card.single-card {
			max-width: 100%;
			margin-bottom: 50px;
		}

		.description-card:hover {
			transform: translateY(-4px);
			box-shadow: 0 8px 30px rgba(0, 212, 255, 0.3);
			border-color: rgba(0, 212, 255, 0.4);
			background: rgba(0, 0, 0, 0.5);
		}

		.description-card-header {
			margin-bottom: 20px;
			padding-bottom: 16px;
			text-align: center;
		}

		.description-card-icon {
			font-size: 2.5rem;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 8px;
			color: #00d4ff;
			line-height: 1;
			width: 48px;
			height: 48px;
			background: rgba(0, 212, 255, 0.1);
			border-radius: 12px;
			transition: all 0.3s ease;
		}

		.description-card:hover .description-card-icon {
			background: rgba(0, 212, 255, 0.2);
			transform: scale(1.1);
		}

		.description-card .description-title {
			font-size: 1.2rem;
			margin: 0 0 4px 0;
			color: #00d4ff;
			font-weight: bold;
		}

		.description-subtitle {
			font-size: 0.85rem;
			color: rgba(255, 255, 255, 0.7);
			margin: 0;
			font-weight: normal;
		}

		.description-list, .tech-list, .theme-list {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.description-list li, .tech-list li, .theme-list li {
			display: flex;
			align-items: flex-start;
			padding: 12px 0;
			line-height: 1.7;
			transition: all 0.2s ease;
		}

		.description-list li:hover, .tech-list li:hover, .theme-list li:hover {
			padding-left: 4px;
		}

		.list-icon {
			color: #00d4ff;
			font-size: 1.3rem;
			margin-right: 12px;
			flex-shrink: 0;
			width: 24px;
			height: 24px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			transition: all 0.2s ease;
		}

		.description-list li:hover .list-icon,
		.tech-list li:hover .list-icon,
		.theme-list li:hover .list-icon {
			transform: scale(1.2);
			color: #00d4ff;
		}

		.list-text {
			flex: 1;
			color: rgba(255, 255, 255, 0.95);
			font-size: 0.95rem;
		}

		/* カリキュラム特徴のグリッドレイアウト */
		.curriculum-features-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
			margin-top: 30px;
			margin-bottom: 40px;
		}

		.curriculum-feature-card {
			background: rgba(0, 0, 0, 0.4);
			border-radius: 12px;
			padding: 20px;
			border: 1px solid rgba(0, 212, 255, 0.2);
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
			transition: all 0.3s ease;
			backdrop-filter: blur(10px);
		}

		.curriculum-feature-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 6px 25px rgba(0, 212, 255, 0.3);
			border-color: rgba(0, 212, 255, 0.4);
		}

		.curriculum-feature-header {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 12px;
			padding-bottom: 12px;
			border-bottom: 2px solid rgba(0, 212, 255, 0.2);
			justify-content: center;
		}

		.curriculum-feature-icon {
			font-size: 2rem;
			color: #00d4ff;
			line-height: 1;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 40px;
			background: rgba(0, 212, 255, 0.1);
			border-radius: 10px;
			transition: all 0.3s ease;
		}

		.curriculum-feature-card:hover .curriculum-feature-icon {
			background: rgba(0, 212, 255, 0.2);
			transform: scale(1.1);
		}

		.curriculum-feature-title {
			font-size: 1.1rem;
			margin: 0;
			color: #00d4ff;
			font-weight: bold;
		}

		.curriculum-feature-text {
			margin: 0;
			line-height: 1.7;
			color: rgba(255, 255, 255, 0.95);
			font-size: 0.95rem;
		}

		/* 重要ルールカード（コンパクト版） */
		.important-rules-card {
			margin-top: 30px;
			margin-bottom: 20px;
			padding: 16px 20px;
			background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.05));
			border-left: 4px solid #ffc107;
			border-radius: 8px;
			border: 1px solid rgba(255, 193, 7, 0.3);
			box-shadow: 0 2px 10px rgba(255, 193, 7, 0.2);
		}

		.important-rules-header {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			margin-bottom: 10px;
		}

		.important-rules-icon {
			font-size: 1.5rem;
			color: #ffc107;
			line-height: 1;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			background: rgba(255, 193, 7, 0.1);
			border-radius: 8px;
			transition: all 0.3s ease;
			flex-shrink: 0;
		}

		.important-rules-title {
			font-size: 1.1rem;
			margin: 0;
			color: #ffc107;
			font-weight: bold;
		}

		.important-rules-list {
			list-style: none;
			padding: 0;
			margin: 0 0 10px 0;
		}

		.important-rules-list li {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			padding: 6px 0;
		}

		.rules-icon {
			font-size: 1.2rem;
			color: #ffc107;
			line-height: 1;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			height: 24px;
			background: rgba(255, 193, 7, 0.1);
			border-radius: 4px;
			transition: all 0.2s ease;
			flex-shrink: 0;
		}

		.important-rules-list li:hover .rules-icon {
			background: rgba(255, 193, 7, 0.2);
			transform: scale(1.1);
		}

		.rules-text {
			color: rgba(255, 255, 255, 0.95);
			font-weight: 500;
			font-size: 0.9rem;
		}

		.important-rules-message {
			margin: 0;
			padding-top: 8px;
			border-top: 1px solid rgba(255, 193, 7, 0.2);
			color: rgba(255, 255, 255, 0.9);
			line-height: 1.5;
			font-size: 0.85rem;
			text-align: center;
		}

		/* タイムラインデザイン（左右交互レイアウト） */
		.curriculum-timeline {
			position: relative;
			padding: 30px 0;
			margin-top: 50px;
			margin-bottom: 40px;
			max-width: 100%;
		}

		.curriculum-timeline::before {
			content: '';
			position: absolute;
			left: 50%;
			top: 0;
			bottom: 0;
			width: 3px;
			background: linear-gradient(180deg, #00d4ff 0%, rgba(0, 212, 255, 0.5) 50%, rgba(0, 212, 255, 0.3) 100%);
			transform: translateX(-50%);
			z-index: 1;
		}

		.timeline-item {
			position: relative;
			margin-bottom: 40px;
			display: flex;
			align-items: flex-start;
			width: 100%;
		}

		.timeline-item::before {
			content: '';
			position: absolute;
			left: 50%;
			top: 8px;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			background: #00d4ff;
			border: 4px solid rgba(0, 0, 0, 0.9);
			box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.2), 0 0 20px rgba(0, 212, 255, 0.5);
			transform: translateX(-50%);
			z-index: 3;
			transition: all 0.3s ease;
		}

		.timeline-item:hover::before {
			transform: translateX(-50%) scale(1.2);
			box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.3), 0 0 30px rgba(0, 212, 255, 0.8);
		}

		.timeline-item:last-child {
			margin-bottom: 0;
		}

		.timeline-item-content {
			width: calc(50% - 30px);
			position: relative;
		}

		/* 奇数項目（左側） */
		.timeline-item:nth-child(odd) .timeline-item-content {
			margin-right: auto;
			padding-right: 30px;
			text-align: right;
		}

		/* 偶数項目（右側） */
		.timeline-item:nth-child(even) .timeline-item-content {
			margin-left: auto;
			padding-left: 30px;
			text-align: left;
		}

		.timeline-period {
			display: inline-block;
			padding: 8px 16px;
			background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(0, 212, 255, 0.15));
			border-radius: 20px;
			font-weight: bold;
			color: #00d4ff;
			font-size: 0.95rem;
			margin-bottom: 12px;
			border: 1px solid rgba(0, 212, 255, 0.3);
			box-shadow: 0 2px 8px rgba(0, 212, 255, 0.2);
		}

		.timeline-content {
			background: rgba(0, 0, 0, 0.4);
			padding: 20px 24px;
			border-radius: 12px;
			border: 1px solid rgba(0, 212, 255, 0.2);
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
			backdrop-filter: blur(10px);
			transition: all 0.3s ease;
		}

		.timeline-item:nth-child(odd) .timeline-content {
			/* border-left: 3px solid #00d4ff; */
		}

		.timeline-item:nth-child(even) .timeline-content {
			border-right: 3px solid #00d4ff;
		}

		.timeline-content:hover {
			background: rgba(0, 0, 0, 0.5);
			transform: translateY(-2px);
			box-shadow: 0 6px 20px rgba(0, 212, 255, 0.3);
		}

		.timeline-content h5 {
			font-size: 1.2rem;
			margin-bottom: 10px;
			color: #00d4ff;
			font-weight: bold;
			text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
		}

		.timeline-content p {
			margin: 0;
			line-height: 1.8;
			color: rgba(255, 255, 255, 0.95);
			font-size: 0.95rem;
		}


		/* HEAVLISHだからできること */
		.advantage-content {
			margin-top: 40px;
		}

		.advantage-intro {
			font-size: 1.1rem;
			line-height: 1.8;
			margin-bottom: 30px;
		}

		.advantage-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 30px;
			margin-top: 40px;
		}

		.advantage-card {
			background: rgba(255, 255, 255, 0.05);
			padding: 30px;
			border-radius: 12px;
			border: 1px solid rgba(255, 255, 255, 0.1);
		}

		.advantage-icon {
			width: 60px;
			height: 60px;
			margin-bottom: 20px;
			color: #00d4ff;
			margin: 0 auto;
		}

		.advantage-icon svg {
			width: 100%;
			height: 100%;
		}

		.advantage-card h3 {
			font-size: 1.3rem;
			margin-bottom: 15px;
			color: #00d4ff;
			text-align: center;
		}

		.advantage-card ul {
			list-style: none;
			padding-left: 0;
		}

		.advantage-card ul li {
			padding: 8px 0;
			padding-left: 25px;
			position: relative;
			line-height: 1.6;
		}

		.advantage-card ul li:before {
			content: "•";
			position: absolute;
			left: 0;
			color: #00d4ff;
			font-size: 1.5rem;
		}

		/* 保護者の方へ */
		.parents-content {
			margin-top: 40px;
		}

		.parents-message {
			margin-bottom: 50px;
		}

		.message-large {
			font-size: 1.5rem;
			font-weight: bold;
			margin-bottom: 20px;
			color: #00d4ff;
			text-align: center;
		}

		.message-text {
			font-size: 1.1rem;
			line-height: 1.8;
			margin-bottom: 15px;
		}

		.evaluation-section {
			margin: 50px 0;
			/* padding: 30px; */
			background: rgba(0, 0, 0, 0.3);
			border-radius: 12px;
			text-align: center;
		}

		.evaluation-section h3 {
			font-size: 1.5rem;
			margin-bottom: 20px;
			color: #00d4ff;
		}

		.evaluation-intro {
			font-size: 1.1rem;
			margin-bottom: 30px;
		}

		.evaluation-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 20px;
			margin-bottom: 30px;
		}

		.evaluation-item {
			text-align: center;
			padding: 20px;
			background: rgba(255, 255, 255, 0.05);
			border-radius: 8px;
		}

		.evaluation-percentage {
			font-size: 2.5rem;
			font-weight: bold;
			color: #00d4ff;
			margin-bottom: 10px;
		}

		.evaluation-item h4 {
			font-size: 1.1rem;
			margin-bottom: 10px;
		}

		.evaluation-message {
			font-size: 1.1rem;
			text-align: center;
			margin-top: 20px;
		}

		.future-message {
			margin-top: 50px;
		}

		.future-message h3 {
			font-size: 1.5rem;
			margin-bottom: 20px;
			color: #00d4ff;
			text-align: center;
		}

		.future-message p {
			font-size: 1.1rem;
			line-height: 1.8;
			margin-bottom: 15px;
			text-align: center;
		}

		.message-closing {
			font-size: 1.2rem;
			font-weight: bold;
			color: #00d4ff;
			margin-top: 30px;
		}

		/* 月謝テーブル */
		.pricing-table {
			margin-top: 40px;
		}

		.pricing-table-content {
			width: 100%;
			border-collapse: collapse;
			background: rgba(255, 255, 255, 0.05);
			border-radius: 8px;
			overflow: hidden;
			text-align: center;
		}

		.pricing-table-content th {
			background: rgba(0, 212, 255, 0.2);
			padding: 20px;
			text-align: left;
			font-weight: bold;
			text-align: center;
		}

		.pricing-table-content td {
			padding: 20px;
			border-top: 1px solid rgba(255, 255, 255, 0.1);
		}

		.price-cell {
			font-size: 1.2rem;
			font-weight: bold;
			color: #00d4ff;
		}

		.pricing-note {
			margin-top: 20px;
			text-align: center;
			opacity: 0.8;
		}

		/* お問い合わせ */
		.contact-intro {
			font-size: 1.1rem;
			line-height: 1.8;
			margin-bottom: 15px;
		}

		.contact-info {
			margin: 40px 0;
		}

		.contact-item {
			display: flex;
			align-items: center;
			gap: 15px;
			margin-bottom: 20px;
			padding: 15px;
			background: rgba(255, 255, 255, 0.05);
			border-radius: 8px;
		}

		.contact-icon {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 212, 255, 0.2);
			border-radius: 50%;
		}

		.contact-buttons {
			margin: 40px 0;
			text-align: center;
		}

		.contact-message {
			text-align: center;
			font-size: 1.2rem;
			font-weight: bold;
			color: #00d4ff;
			margin-top: 30px;
		}

		/* チラシセクション */
		/* #programming-poster {
			background: rgba(0, 0, 0, 0.2);
		} */

		.poster-container {
			text-align: center;
		}

		.poster-section-title {
			font-size: 2rem;
			margin-bottom: 30px;
			color: #00d4ff;
		}

		.poster-image-wrapper {
			position: relative;
			max-width: 1000px;
			margin: 0 auto;
			background: rgba(255, 255, 255, 0.05);
			border-radius: 12px;
			padding: 20px;
			border: 1px solid rgba(255, 255, 255, 0.1);
		}

		.poster-image {
			width: 100%;
			height: auto;
			border-radius: 8px;
			cursor: pointer;
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
		}

		.poster-image:hover {
			transform: scale(1.02);
			box-shadow: 0 15px 40px rgba(0, 212, 255, 0.3);
		}

		.poster-actions {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20px;
			margin-top: 20px;
		}

		.poster-note {
			font-size: 0.9rem;
			opacity: 0.7;
		}

		.btn-download {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 12px 28px;
			background: linear-gradient(135deg, #4CAF50, #66BB6A);
			color: #fff;
			border-radius: 25px;
			font-weight: bold;
			text-decoration: none;
			box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
			transition: all 0.3s ease;
			font-size: 1rem;
		}

		.btn-download:hover {
			transform: translateY(-2px);
			box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
			background: linear-gradient(135deg, #66BB6A, #4CAF50);
		}

		.btn-download .material-icons {
			font-size: 1.2rem;
		}

		/* モーダル表示 */
		.poster-modal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.95);
			z-index: 10000;
			overflow: auto;
			padding: 20px;
		}

		.poster-modal.active {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.poster-modal-content {
			position: relative;
			max-width: 90%;
			max-height: 90vh;
			text-align: center;
		}

		.poster-modal-image {
			width: 100%;
			height: auto;
			border-radius: 8px;
			margin-bottom: 20px;
		}

		.poster-modal-actions {
			text-align: center;
			margin-top: 20px;
		}

		.btn-download-modal {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 12px 28px;
			background: linear-gradient(135deg, #4CAF50, #66BB6A);
			color: #fff;
			border-radius: 25px;
			font-weight: bold;
			text-decoration: none;
			box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
			transition: all 0.3s ease;
			font-size: 1rem;
		}

		.btn-download-modal:hover {
			transform: translateY(-2px);
			box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
			background: linear-gradient(135deg, #66BB6A, #4CAF50);
		}

		.btn-download-modal .material-icons {
			font-size: 1.2rem;
		}

		.poster-modal-close {
			position: absolute;
			top: -40px;
			right: 0;
			background: rgba(255, 255, 255, 0.2);
			border: none;
			color: #fff;
			font-size: 2rem;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background 0.3s ease;
		}

		.poster-modal-close:hover {
			background: rgba(255, 255, 255, 0.3);
		}

		/* フォールバックコンテンツ（画像が見つからない場合） */
		.poster-fallback {
			display: none;
			padding: 40px;
		}

		.poster-content {
			text-align: left;
		}

		.poster-main-title {
			font-size: 2.5rem;
			font-weight: bold;
			color: #00d4ff;
			margin-bottom: 10px;
			text-align: center;
		}

		.poster-subtitle {
			font-size: 1.3rem;
			text-align: center;
			margin-bottom: 40px;
			opacity: 0.9;
		}

		.poster-modules {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;
			margin-bottom: 40px;
		}

		.poster-module {
			background: rgba(255, 255, 255, 0.05);
			padding: 20px;
			border-radius: 8px;
			/* border-left: 3px solid #00d4ff; */
		}

		.module-header {
			margin-bottom: 15px;
		}

		.module-level {
			display: inline-block;
			background: #00d4ff;
			color: #000;
			padding: 4px 12px;
			border-radius: 4px;
			font-size: 0.8rem;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.module-title {
			font-size: 1.2rem;
			margin: 10px 0 5px 0;
			color: #00d4ff;
		}

		.module-subtitle {
			font-size: 0.9rem;
			opacity: 0.8;
			margin-top: 5px;
		}

		.module-list {
			list-style: none;
			padding-left: 0;
		}

		.module-list li {
			padding: 5px 0;
			padding-left: 20px;
			position: relative;
			font-size: 0.95rem;
		}

		.module-list li:before {
			content: "•";
			position: absolute;
			left: 0;
			color: #00d4ff;
		}

		.poster-contact {
			background: rgba(0, 212, 255, 0.1);
			padding: 30px;
			border-radius: 8px;
			text-align: center;
		}

		.poster-contact-title {
			font-size: 1.3rem;
			margin-bottom: 20px;
			color: #00d4ff;
		}

		.poster-contact-info {
			display: flex;
			flex-direction: column;
			gap: 15px;
		}

		.poster-contact-info p {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			margin: 0;
		}

		.poster-contact-info .material-icons {
			font-size: 1.2rem;
		}

		/* FAQセクション */
		.faq-container {
			margin-top: 40px;
		}

		.faq-item {
			margin-bottom: 20px;
			background: rgba(255, 255, 255, 0.05);
			border-radius: 8px;
			overflow: hidden;
			border: 1px solid rgba(255, 255, 255, 0.1);
		}

		.faq-question {
			width: 100%;
			padding: 20px;
			background: transparent;
			border: none;
			text-align: left;
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			font-size: 1.1rem;
			transition: background 0.3s ease;
		}

		.faq-question:hover,
		.faq-question:focus {
			background: rgba(255, 255, 255, 0.1);
			outline: 2px solid #00d4ff;
			outline-offset: -2px;
		}

		.faq-question h3 {
			margin: 0;
			font-size: 1.1rem;
			font-weight: bold;
			flex: 1;
		}

		.faq-icon {
			font-size: 0;
			font-weight: bold;
			transition: color 0.3s ease;
		}
		.faq-icon::before {
			content: '+';
			font-size: 1.5rem;
			font-weight: bold;
		}
		.faq-question[aria-expanded="true"] .faq-icon::before {
			content: '−';
		}

		.faq-answer {
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease, padding 0.3s ease;
			padding: 0 20px;
		}

		.faq-answer.active {
			max-height: 500px;
			padding: 20px;
		}

		.faq-answer p {
			margin: 0;
			line-height: 1.8;
			color: rgba(255, 255, 255, 0.9);
		}

		/* パフォーマンス最適化: will-change */
		.course-card:hover,
		.advantage-card:hover,
		.faq-item:hover {
			will-change: transform;
		}

		/* パフォーマンス: コンテンツシフト防止 */
		.poster-image {
			aspect-ratio: 707 / 1000;
			object-fit: contain;
			display: block;
		}

		/* パフォーマンス: 画像最適化 */
		img {
			image-rendering: -webkit-optimize-contrast;
			image-rendering: crisp-edges;
		}

		/* パフォーマンス: フォント読み込み最適化 */
		@font-face {
			font-display: swap;
		}

		/* アクセシビリティ: フォーカス表示 */
		*:focus-visible {
			outline: 3px solid #00d4ff;
			outline-offset: 2px;
			border-radius: 2px;
		}

		/* アクセシビリティ: コントラスト比確保（WCAG AA準拠） */
		.btn-primary,
		.btn-secondary,
		.btn-download,
		.faq-question {
			min-height: 44px;
			min-width: 44px;
		}

		/* アクセシビリティ: スクリーンリーダー対応 */
		.sr-only {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border-width: 0;
		}

		/* レスポンシブ対応 */
		@media (max-width: 768px) {
			#programming-hero .hero-title {
				font-size: 1.8rem;
			}

			.course-card {
				padding: 20px;
			}

			.course-info {
				grid-template-columns: 1fr;
			}

			.advantage-grid {
				grid-template-columns: 1fr;
			}

			.evaluation-grid {
				grid-template-columns: repeat(2, 1fr);
			}

			.curriculum-timeline {
				padding: 20px 0;
			}

			.curriculum-timeline::before {
				left: 20px;
				width: 3px;
				transform: none;
			}

			.timeline-item {
				flex-direction: row !important;
				margin-bottom: 30px;
				justify-content: flex-start !important;
			}

			.curriculum-timeline .timeline-item-content {
				width: 100% !important;
				max-width: 100% !important;
				box-sizing: border-box;
				/* 縦線・ドット（left:20px 付近）より右にカード・バッジをずらす */
				padding-left: 48px !important;
				padding-right: 0 !important;
				margin-left: 0 !important;
				margin-right: 0 !important;
				text-align: left !important;
				order: 1 !important;
				position: relative;
				z-index: 2;
			}

			.curriculum-timeline .timeline-item:nth-child(odd) .timeline-item-content,
			.curriculum-timeline .timeline-item:nth-child(even) .timeline-item-content {
				margin-left: 0 !important;
				margin-right: 0 !important;
				padding-left: 48px !important;
				padding-right: 0 !important;
				text-align: left !important;
			}

			.timeline-item::before {
				left: 20px !important;
				width: 16px;
				height: 16px;
				transform: translateX(-50%);
				order: 0 !important;
			}

			.timeline-item:hover::before {
				transform: translateX(-50%) scale(1.15);
			}

			.timeline-content {
				padding: 15px 18px;
				/* border-left: 3px solid #00d4ff !important; */
				border-right: none !important;
			}

			.timeline-content h5 {
				font-size: 1.1rem;
			}

			.timeline-period {
				padding: 6px 12px;
				font-size: 0.9rem;
			}

			.description-grid {
				grid-template-columns: 1fr;
				gap: 20px;
			}

			.description-card {
				padding: 20px;
			}

			.description-card-icon {
				font-size: 2rem;
			}

			.curriculum-feature-icon {
				font-size: 1.6rem;
			}

			.important-rules-icon {
				font-size: 1.6rem;
			}

			.rules-icon {
				font-size: 1.2rem;
			}

			.list-icon {
				font-size: 1.1rem;
				width: 20px;
			}

			.description-card .description-title {
				font-size: 1.1rem;
			}

			.curriculum-features-grid {
				grid-template-columns: 1fr;
				gap: 16px;
			}

			.curriculum-feature-card {
				padding: 18px;
			}

			.important-rules-card {
				padding: 14px 16px;
				margin-top: 20px;
				margin-bottom: 15px;
			}

			.important-rules-header {
				margin-bottom: 8px;
				gap: 6px;
			}

			.important-rules-icon {
				font-size: 1.3rem;
				width: 28px;
				height: 28px;
			}

			.important-rules-title {
				font-size: 1rem;
			}

			.important-rules-list {
				margin-bottom: 8px;
			}

			.important-rules-list li {
				padding: 4px 0;
				gap: 6px;
			}

			.rules-icon {
				font-size: 1.1rem;
				width: 20px;
				height: 20px;
			}

			.rules-text {
				font-size: 0.85rem;
			}

			.important-rules-message {
				padding-top: 6px;
				font-size: 0.8rem;
			}

			.poster-modules {
				grid-template-columns: 1fr;
			}

			.poster-main-title {
				font-size: 1.8rem;
			}

			.poster-subtitle {
				font-size: 1.1rem;
			}

			.poster-modal-content {
				max-width: 95%;
			}

			.faq-question {
				padding: 15px;
				font-size: 1rem;
			}

			.faq-answer.active {
				padding: 15px;
			}
		}

		/* プリントスタイル */
		@media print {
			header, footer, .poster-actions, .hero-buttons {
				display: none;
			}
			body {
				background: #fff;
				color: #000;
			}
		}

		/* モバイル最適化: タッチ操作 */
		@media (hover: none) and (pointer: coarse) {
			.btn-primary,
			.btn-secondary,
			.btn-download {
				min-height: 48px;
				padding: 14px 28px;
			}
			
			.faq-question {
				min-height: 48px;
				padding: 16px;
			}
		}

		/* ブラウザ互換性: -webkit-プレフィックス */
		.course-card,
		.advantage-card {
			-webkit-transform: translateZ(0);
			transform: translateZ(0);
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
		}

/* ----- from home-redesign.css (service / programming ライト面・コントラスト) ----- */
/* ----- サービス4ページ：ライト面でコントラスト確保（ページ末尾インラインのガラス＋薄色文字を上書き） ----- */
body.home-redesign.programming-class {
	background: var(--hr-light) !important;
	color: var(--hr-text-dark) !important;
}

body.home-redesign.service-page #service-hero .hero-content,
body.home-redesign.programming-class #programming-hero .hero-content {
	color: var(--hr-text-on-dark);
}
body.home-redesign.service-page #service-hero .hero-subtitle,
body.home-redesign.programming-class #programming-hero .hero-subtitle {
	color: rgba(255, 255, 255, 0.92) !important;
	opacity: 1 !important;
}

/* セクション見出し・リード（白文字のままだとライト背景で消える） */
body.home-redesign.service-page #main .section-title,
body.home-redesign.programming-class #main .section-title {
	color: var(--hr-navy) !important;
	-webkit-text-fill-color: var(--hr-navy) !important;
	background: none !important;
	text-shadow: none !important;
}
body.home-redesign.service-page #main .section-title span,
body.home-redesign.programming-class #main .section-title span {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--hr-muted-dark) !important;
	-webkit-text-fill-color: var(--hr-muted-dark) !important;
	opacity: 1 !important;
	text-transform: none;
	letter-spacing: 0.04em;
}
body.home-redesign.service-page #main .under_line,
body.home-redesign.programming-class #main .under_line {
	background: rgba(0, 21, 41, 0.18) !important;
}
body.home-redesign.service-page #main .lead-text-large,
body.home-redesign.programming-class #main .lead-text-large {
	color: var(--hr-royal) !important;
}
body.home-redesign.service-page #main .lead-text,
body.home-redesign.programming-class #main .lead-text {
	color: var(--hr-text-dark) !important;
}
body.home-redesign.programming-class #main #lead {
	background: transparent !important;
}

/* 交互帯：インラインの半透明黒 → ライトグレー */
body.home-redesign.service-page #main .bg-dark,
body.home-redesign.programming-class #main .bg-dark {
	background: var(--hr-light2) !important;
	border-top: 1px solid rgba(0, 21, 41, 0.06);
	border-bottom: 1px solid rgba(0, 21, 41, 0.06);
}

/* 特徴・システム・プラットフォーム・料金カード */
body.home-redesign.service-page #main .feature-card,
body.home-redesign.service-page #main .system-card,
body.home-redesign.service-page #main .platform-card,
body.home-redesign.service-page #main .pricing-card,
body.home-redesign.programming-class #main .course-card,
body.home-redesign.programming-class #main .curriculum-feature-card,
body.home-redesign.programming-class #main .description-card {
	background: #fff !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: 1px solid rgba(0, 21, 41, 0.1) !important;
	box-shadow: var(--hr-shadow) !important;
	color: var(--hr-text-dark) !important;
}
body.home-redesign.programming-class #main .description-card:hover {
	background: #fff !important;
}
body.home-redesign.service-page #main .feature-card:hover,
body.home-redesign.service-page #main .system-card:hover,
body.home-redesign.service-page #main .platform-card:hover,
body.home-redesign.service-page #main .pricing-card:hover {
	background: #fff !important;
}
body.home-redesign.service-page #main .feature-icon .material-icons,
body.home-redesign.service-page #main .system-icon .material-icons,
body.home-redesign.service-page #main .platform-icon .material-icons {
	color: var(--hr-royal) !important;
}
body.home-redesign.service-page #main .feature-card h3,
body.home-redesign.service-page #main .system-card h3,
body.home-redesign.service-page #main .platform-card h3,
body.home-redesign.service-page #main .pricing-card h3,
body.home-redesign.programming-class #main .course-title,
body.home-redesign.programming-class #main .curriculum-feature-title {
	color: var(--hr-navy) !important;
}
body.home-redesign.service-page #main .feature-card p,
body.home-redesign.service-page #main .system-card p,
body.home-redesign.service-page #main .system-card li,
body.home-redesign.service-page #main .platform-card p,
body.home-redesign.service-page #main .pricing-description,
body.home-redesign.programming-class #main .curriculum-feature-text,
body.home-redesign.programming-class #main .curriculum-feature-card p {
	color: var(--hr-muted-dark) !important;
}
body.home-redesign.service-page #main .system-features li {
	color: var(--hr-text-dark) !important;
}
body.home-redesign.service-page #main .pricing-intro,
body.home-redesign.service-page #main .pricing-features li,
body.home-redesign.service-page #main .pricing-note,
body.home-redesign.programming-class #main .pricing-note,
body.home-redesign.service-page #main .pricing-message,
body.home-redesign.service-page #main .pricing-price,
body.home-redesign.service-page #main .pricing-header h3,
body.home-redesign.service-page #main .price-amount {
	color: var(--hr-text-dark) !important;
	-webkit-text-fill-color: var(--hr-text-dark) !important;
}
body.home-redesign.service-page #main .price-note {
	color: var(--hr-muted-dark) !important;
}
body.home-redesign.service-page #main .pricing-features .material-icons {
	color: var(--hr-royal) !important;
}
body.home-redesign.service-page #main .pricing-card.featured {
	border-color: rgba(0, 98, 255, 0.35) !important;
	box-shadow: 0 8px 28px rgba(0, 98, 255, 0.12) !important;
}
body.home-redesign.service-page #main .pricing-badge {
	background: rgba(0, 98, 255, 0.1) !important;
	border: 1px solid rgba(0, 98, 255, 0.28) !important;
	color: var(--hr-royal) !important;
}

/* ライト面では .btn-primary が半透明＋白文字のまま → 白カード上で不可視。ヒーロー内は従来のガラスボタンを維持 */
body.home-redesign.service-page #main .btn-primary,
body.home-redesign.programming-class #main .btn-primary {
	display: inline-flex;
	background: var(--hr-royal) !important;
	border: 1px solid var(--hr-royal) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	box-shadow: 0 4px 14px rgba(0, 98, 255, 0.28);
}

body.home-redesign.service-page #main .btn-primary:hover,
body.home-redesign.programming-class #main .btn-primary:hover {
	background: var(--hr-navy) !important;
	border-color: var(--hr-navy) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	box-shadow: 0 6px 18px rgba(0, 21, 41, 0.2);
}

body.home-redesign.service-page #main #service-hero .btn-primary,
body.home-redesign.programming-class #main #programming-hero .btn-primary {
	background: rgba(255, 255, 255, 0.1) !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	box-shadow: none;
}

body.home-redesign.service-page #main #service-hero .btn-primary:hover,
body.home-redesign.programming-class #main #programming-hero .btn-primary:hover {
	background: rgba(255, 255, 255, 0.15) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	box-shadow: none;
}

/* 料金カード：プラン名・価格をライト帯内で区切り、CTA はカード幅いっぱいで読みやすく */
body.home-redesign.service-page #main .pricing-card .pricing-header {
	background: linear-gradient(145deg, rgba(0, 98, 255, 0.1) 0%, rgba(0, 21, 41, 0.06) 100%);
	border: 1px solid rgba(0, 98, 255, 0.18);
	border-radius: 12px;
	padding: 1.25rem 1.15rem 1.35rem;
	margin-bottom: 1.35rem;
}

body.home-redesign.service-page #main .pricing-card .btn-primary {
	width: 100%;
	max-width: 100%;
	justify-content: center;
	box-sizing: border-box;
	margin-top: 0.25rem;
}

/* デスクトップは3列（狭い画面では段階的に1列へ） */
@media (min-width: 992px) {
	body.home-redesign.service-page #main #pricing .pricing-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
		align-items: stretch;
	}
}

@media (min-width: 769px) and (max-width: 991px) {
	body.home-redesign.service-page #main #pricing .pricing-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	body.home-redesign.service-page #main #pricing .pricing-grid {
		grid-template-columns: 1fr;
	}
}

/* プロセス（ホームページ制作のみ番号サークルが薄色だったため上書き。他サービスはグラデーション維持） */
body.home-redesign.homepage-production #main .process-number {
	background: rgba(0, 98, 255, 0.12) !important;
	border: 1px solid rgba(0, 98, 255, 0.32) !important;
	color: var(--hr-royal) !important;
	box-shadow: none !important;
}
body.home-redesign.service-page #main .process-content {
	background: #fff !important;
	border-left: 4px solid var(--hr-royal) !important;
	box-shadow: var(--hr-shadow);
	border-radius: 12px !important;
	padding: 1.25rem 1.5rem !important;
}
body.home-redesign.service-page #main .process-content h3 {
	color: var(--hr-royal) !important;
}
body.home-redesign.service-page #main .process-content p {
	color: var(--hr-text-dark) !important;
}

/* FAQ */
body.home-redesign.service-page #main .faq-item,
body.home-redesign.programming-class #main .faq-item {
	background: #fff !important;
	border: 1px solid rgba(0, 21, 41, 0.1) !important;
}
body.home-redesign.service-page #main .faq-question,
body.home-redesign.programming-class #main .faq-question {
	color: var(--hr-navy) !important;
}
body.home-redesign.service-page #main .faq-question h3,
body.home-redesign.programming-class #main .faq-question h3 {
	color: inherit !important;
}
body.home-redesign.service-page #main .faq-icon::before,
body.home-redesign.service-page #main .faq-icon,
body.home-redesign.programming-class #main .faq-icon::before,
body.home-redesign.programming-class #main .faq-icon {
	color: var(--hr-royal) !important;
}
body.home-redesign.service-page #main .faq-answer p,
body.home-redesign.programming-class #main .faq-answer p {
	color: var(--hr-muted-dark) !important;
}

/* お問い合わせ・CTA文 */
body.home-redesign.service-page #main .contact-intro,
body.home-redesign.service-page #main .contact-item,
body.home-redesign.programming-class #main .contact-intro {
	color: var(--hr-text-dark) !important;
}
body.home-redesign.service-page #main .contact-item,
body.home-redesign.programming-class #main .contact-item {
	background: var(--hr-light2) !important;
	border: 1px solid rgba(0, 21, 41, 0.08);
}
body.home-redesign.service-page #main .contact-message {
	color: var(--hr-royal) !important;
}

/* プログラミング教室：コース内 */
body.home-redesign.programming-class #main .course-subtitle {
	opacity: 1 !important;
	color: var(--hr-muted-dark) !important;
}
body.home-redesign.programming-class #main .course-info {
	background: var(--hr-light2) !important;
	border: 1px solid rgba(0, 21, 41, 0.08);
}
body.home-redesign.programming-class #main .info-label {
	color: var(--hr-muted-dark) !important;
	opacity: 1 !important;
}
body.home-redesign.programming-class #main .info-value {
	color: var(--hr-royal) !important;
}
body.home-redesign.programming-class #main .description-title {
	color: var(--hr-royal) !important;
	border-top-color: rgba(0, 98, 255, 0.2) !important;
}
body.home-redesign.programming-class #main .course-header {
	border-bottom-color: rgba(0, 21, 41, 0.12) !important;
}
body.home-redesign.programming-class #main .description-subtitle {
	color: var(--hr-muted-dark) !important;
}
body.home-redesign.programming-class #main .list-text {
	color: var(--hr-text-dark) !important;
}
body.home-redesign.programming-class #main .rules-text {
	color: var(--hr-text-dark) !important;
}
body.home-redesign.programming-class #main .important-rules-message {
	color: var(--hr-muted-dark) !important;
}

/* タイムライン・アドバンテージ・保護者向け・料金表 */
body.home-redesign.programming-class #main .timeline-content {
	background: #fff !important;
	border: 1px solid rgba(0, 21, 41, 0.1) !important;
	box-shadow: var(--hr-shadow) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}
body.home-redesign.programming-class #main .timeline-content:hover {
	background: #fff !important;
}
body.home-redesign.programming-class #main .timeline-content h5 {
	color: var(--hr-royal) !important;
	text-shadow: none !important;
}
body.home-redesign.programming-class #main .timeline-content p {
	color: var(--hr-text-dark) !important;
}
body.home-redesign.programming-class #main .timeline-item::before {
	border: 4px solid #fff !important;
	box-shadow: 0 0 0 3px rgba(0, 98, 255, 0.2) !important;
}

/* カリキュラムの流れ：illustrations.css 等のグローバル .timeline-item と干渉しないよう分離 */
body.home-redesign.programming-class #main .curriculum-timeline {
	width: 100%;
	position: relative;
	isolation: isolate;
}
body.home-redesign.programming-class #main .curriculum-timeline .timeline-item {
	width: 100% !important;
	max-width: none !important;
	left: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
body.home-redesign.programming-class #main .curriculum-timeline .timeline-item:nth-child(odd),
body.home-redesign.programming-class #main .curriculum-timeline .timeline-item:nth-child(even) {
	text-align: initial !important;
	left: auto !important;
}
@media (min-width: 769px) {
	body.home-redesign.programming-class #main .curriculum-timeline::before {
		left: 50% !important;
		transform: translateX(-50%) !important;
	}
	body.home-redesign.programming-class #main .curriculum-timeline .timeline-item::before {
		left: 50% !important;
		transform: translateX(-50%) !important;
	}
	body.home-redesign.programming-class #main .curriculum-timeline .timeline-item:hover::before {
		transform: translateX(-50%) scale(1.2) !important;
	}
}

@media (max-width: 768px) {
	body.home-redesign.programming-class #main .curriculum-timeline::before {
		left: 20px !important;
		transform: none !important;
	}
	body.home-redesign.programming-class #main .curriculum-timeline .timeline-item::before {
		left: 20px !important;
		transform: translateX(-50%) !important;
	}
	body.home-redesign.programming-class #main .curriculum-timeline .timeline-item:hover::before {
		transform: translateX(-50%) scale(1.15) !important;
	}
	body.home-redesign.programming-class #main .curriculum-timeline .timeline-item-content {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding-left: 48px !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		text-align: left !important;
		position: relative;
		z-index: 2;
	}
	body.home-redesign.programming-class #main .curriculum-timeline .timeline-item:nth-child(odd) .timeline-item-content,
	body.home-redesign.programming-class #main .curriculum-timeline .timeline-item:nth-child(even) .timeline-item-content {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 48px !important;
		padding-right: 0 !important;
		text-align: left !important;
	}
}
body.home-redesign.programming-class #main .advantage-card {
	background: #fff !important;
	border: 1px solid rgba(0, 21, 41, 0.1) !important;
}
body.home-redesign.programming-class #main .advantage-intro,
body.home-redesign.programming-class #main .advantage-card ul li {
	color: var(--hr-text-dark) !important;
}
body.home-redesign.programming-class #main .advantage-card h3 {
	color: var(--hr-navy) !important;
}
body.home-redesign.programming-class #main .evaluation-section {
	background: var(--hr-light2) !important;
}
body.home-redesign.programming-class #main .evaluation-item {
	background: #fff !important;
	border: 1px solid rgba(0, 21, 41, 0.08);
}
body.home-redesign.programming-class #main .evaluation-intro,
body.home-redesign.programming-class #main .evaluation-item h4,
body.home-redesign.programming-class #main .evaluation-message {
	color: var(--hr-text-dark) !important;
}
body.home-redesign.programming-class #main .message-text,
body.home-redesign.programming-class #main .future-message p {
	color: var(--hr-text-dark) !important;
}
body.home-redesign.programming-class #main .pricing-table-content {
	background: #fff !important;
	border: 1px solid rgba(0, 21, 41, 0.1);
}
body.home-redesign.programming-class #main .pricing-table-content th {
	background: rgba(0, 98, 255, 0.1) !important;
	color: var(--hr-navy) !important;
}
body.home-redesign.programming-class #main .pricing-table-content td {
	color: var(--hr-text-dark) !important;
	border-top-color: rgba(0, 21, 41, 0.08) !important;
}

/* ポスター枠・モジュール（ライト面用） */
body.home-redesign.programming-class #main .poster-image-wrapper {
	background: #fff !important;
	border: 1px solid rgba(0, 21, 41, 0.1) !important;
}
body.home-redesign.programming-class #main .poster-note {
	color: var(--hr-muted-dark) !important;
	opacity: 1 !important;
}
body.home-redesign.programming-class #main .poster-module {
	background: var(--hr-light2) !important;
}
body.home-redesign.programming-class #main .module-subtitle {
	color: var(--hr-muted-dark) !important;
}
body.home-redesign.programming-class #main .module-list li {
	color: var(--hr-text-dark) !important;
}
body.home-redesign.programming-class #main .poster-subtitle {
	color: var(--hr-muted-dark) !important;
	opacity: 1 !important;
}

body.home-redesign.service-page #main .contact-icon .material-icons,
body.home-redesign.programming-class #main .contact-icon .material-icons {
	color: var(--hr-royal) !important;
}

/* システム・アプリ：番号リングをライト面でも判読できるように */
body.home-redesign.system-construction #main .process-number,
body.home-redesign.application-development #main .process-number {
	background: linear-gradient(135deg, #0062ff, #0047b3) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(0, 98, 255, 0.25) !important;
}

/* ----- サービス3＋プログラミング教室：ヒーロー横幅100vw＋ページ別SVG背景 ----- */
body.home-redesign.homepage-production #service-hero,
body.home-redesign.system-construction #service-hero,
body.home-redesign.application-development #service-hero,
body.home-redesign.programming-class #programming-hero {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	box-sizing: border-box !important;
	min-height: min(88vh, 960px) !important;
	max-height: none !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	padding-top: calc(72px + 4rem) !important;
	padding-bottom: 4.5rem !important;
}

@media (max-width: 768px) {
	body.home-redesign.homepage-production #service-hero,
	body.home-redesign.system-construction #service-hero,
	body.home-redesign.application-development #service-hero,
	body.home-redesign.programming-class #programming-hero {
		min-height: min(82vh, 840px) !important;
		padding-top: calc(64px + 3rem) !important;
		padding-bottom: 3rem !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}
}

body.home-redesign.homepage-production #service-hero .hero-background {
	background-image:
		linear-gradient(115deg, rgba(0, 21, 41, 0.4) 0%, rgba(0, 8, 20, 0.34) 45%, rgba(0, 37, 77, 0.42) 100%),
		url("../images/homepage_haikei.png") !important;
	background-size: cover, cover !important;
	background-position: center, center !important;
	background-repeat: no-repeat !important;
}

body.home-redesign.system-construction #service-hero .hero-background {
	background-image:
		linear-gradient(125deg, rgba(0, 8, 20, 0.4) 0%, rgba(0, 21, 41, 0.34) 45%, rgba(0, 8, 28, 0.44) 100%),
		url("../images/system_haikei.png") !important;
	background-size: cover, cover !important;
	background-position: center, center !important;
	background-repeat: no-repeat !important;
}

body.home-redesign.application-development #service-hero .hero-background {
	background-image:
		linear-gradient(110deg, rgba(0, 8, 20, 0.4) 0%, rgba(10, 37, 64, 0.36) 50%, rgba(0, 8, 20, 0.44) 100%),
		url("../images/application_haikei.png") !important;
	background-size: cover, cover !important;
	background-position: center, center !important;
	background-repeat: no-repeat !important;
}

body.home-redesign.programming-class #programming-hero .hero-background {
	background-image:
		linear-gradient(118deg, rgba(0, 8, 20, 0.38) 0%, rgba(0, 21, 41, 0.32) 45%, rgba(0, 8, 20, 0.42) 100%),
		url("../images/programing_hero.png") !important;
	background-size: cover, cover !important;
	background-position: center, center !important;
	background-repeat: no-repeat !important;
}

/* programming-class hero: background layers must not steal clicks from CTA links */
body.home-redesign.programming-class #programming-hero .hero-background,
body.home-redesign.programming-class #programming-hero .gradient-overlay {
	pointer-events: none !important;
}

body.home-redesign.programming-class #programming-hero .hero-content {
	position: relative;
	z-index: 3;
}

body.home-redesign.programming-class #programming-hero .hero-buttons {
	position: relative;
	z-index: 1;
	gap: 12px 14px;
}

/* Fixed header offset for in-page anchor #courses */
body.home-redesign.programming-class #main section#courses {
	scroll-margin-top: 120px;
}

body.home-redesign.programming-class #main section#pricing {
	scroll-margin-top: 120px;
}

/* 写真ヒーロー：下段だけ軽くトーンを足し、写真が見えるように（テキストは text-shadow で視認性確保） */
body.home-redesign.application-development #service-hero .gradient-overlay {
	background: linear-gradient(
		180deg,
		rgba(0, 8, 20, 0.12) 0%,
		rgba(0, 8, 20, 0.22) 40%,
		rgba(0, 8, 20, 0.38) 100%
	) !important;
}

body.home-redesign.homepage-production #service-hero .gradient-overlay {
	background: linear-gradient(
		180deg,
		rgba(0, 8, 20, 0.12) 0%,
		rgba(0, 8, 20, 0.22) 40%,
		rgba(0, 8, 20, 0.38) 100%
	) !important;
}

body.home-redesign.system-construction #service-hero .gradient-overlay {
	background: linear-gradient(
		180deg,
		rgba(0, 8, 20, 0.12) 0%,
		rgba(0, 8, 20, 0.22) 40%,
		rgba(0, 8, 20, 0.38) 100%
	) !important;
}

body.home-redesign.programming-class #programming-hero .gradient-overlay {
	background: linear-gradient(
		180deg,
		rgba(0, 8, 20, 0.12) 0%,
		rgba(0, 8, 20, 0.22) 40%,
		rgba(0, 8, 20, 0.38) 100%
	) !important;
}

body.home-redesign.homepage-production #service-hero .hero-title,
body.home-redesign.system-construction #service-hero .hero-title,
body.home-redesign.application-development #service-hero .hero-title,
body.home-redesign.programming-class #programming-hero .hero-title {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	text-shadow:
		0 2px 20px rgba(0, 0, 0, 0.5),
		0 0 48px rgba(0, 98, 255, 0.35) !important;
}

body.home-redesign.homepage-production #service-hero .hero-subtitle,
body.home-redesign.system-construction #service-hero .hero-subtitle,
body.home-redesign.application-development #service-hero .hero-subtitle,
body.home-redesign.programming-class #programming-hero .hero-subtitle {
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55) !important;
}

/*
 * 下層（サービスLP・プログラミング教室等）モバイル：横ガター縮小
 * 冒頭の .container-narrow { padding: 0 40px } が #container・.section-padding と重なり、
 * 本文が画面幅の約6割にまで狭まるのを防ぐ。
 */
@media (max-width: 768px) {
	body.home-redesign:not(.home) #container {
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
	}
	body.home-redesign:not(.home) .section-padding {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}
	body.home-redesign:not(.home) .container-narrow {
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}
}