/* ==========================================================================
   テーマ・コンポーネント
   ========================================================================== */

@layer theme {
	/* =========================================================================
	   Section Eyebrow — 小見出しラベル
	   ========================================================================= */

	.section-eyebrow {
		font-family: var(--font-family-sans);
		font-size: 0.7rem;
		font-weight: var(--font-weight-semibold);
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--color-text-light);
		margin-bottom: 0;
	}

	/* =========================================================================
	   Buttons
	   ========================================================================= */

	.btn {
		display: inline-block;
		padding: var(--spacing-sm) var(--spacing-xl);
		font-size: 0.78rem;
		font-weight: var(--font-weight-semibold);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		border: 1px solid transparent;
		border-radius: 0;
		cursor: pointer;
		transition: all var(--transition-fast);
		text-align: center;
		text-decoration: none;
		white-space: nowrap;

		&:hover {
			text-decoration: none;
		}

		&:disabled {
			opacity: 0.55;
			cursor: not-allowed;
		}
	}

	.btn-primary {
		background-color: var(--color-primary);
		color: var(--color-bg);
		border-color: var(--color-primary);

		&:hover {
			background-color: var(--color-accent);
			border-color: var(--color-accent);
			color: var(--color-bg);
		}

		&:active {
			opacity: 0.85;
		}
	}

	.btn-secondary {
		background-color: transparent;
		color: var(--color-text);
		border-color: var(--color-border);

		&:hover {
			border-color: var(--color-text);
			color: var(--color-text);
		}
	}

	.cta-buttons {
		display: flex;
		gap: var(--spacing-md);
		flex-wrap: wrap;
		margin-top: var(--spacing-xl);

		@media (max-width: 768px) {
			flex-direction: column;
		}
	}

	@media (max-width: 768px) {
		.btn {
			width: 100%;
			text-align: center;
		}
	}

	/* =========================================================================
	   Cards — sub-page 用
	   container-type は残してコンテナクエリ互換を保持
	   ========================================================================= */

	.card,
	.value-card,
	.brand-card,
	.service-card,
	.responsibility-card {
		container-type: inline-size;
		container-name: card;
	}

	.card {
		background-color: transparent;
		border: none;
		border-top: 1px solid var(--color-border);
		border-radius: 0;
		padding: var(--spacing-xl) 0;
	}

	/* Value cards — sub-page 用 */
	.value-card {
		background-color: transparent;
		border: none;
		border-top: 1px solid var(--color-border);
		border-radius: 0;
		padding: var(--spacing-xl) 0;

		& h3 {
			font-size: clamp(0.95rem, 2vw, 1.1rem);
			margin-bottom: var(--spacing-sm);
			color: var(--color-primary);
		}

		& p {
			font-size: 0.9rem;
			color: var(--color-text-light);
		}
	}

	/* Brand cards — sub-page 用 */
	.brand-card {
		background-color: transparent;
		border: none;
		border-top: 1px solid var(--color-border);
		border-radius: 0;
		padding: var(--spacing-xl) 0;
		display: flex;
		flex-direction: column;

		& h3 {
			font-size: clamp(1.2rem, 3vw, 1.8rem);
			margin-bottom: var(--spacing-sm);

			& a {
				color: var(--color-primary);
				transition: color var(--transition-fast);

				&:hover {
					color: var(--color-accent);
					text-decoration: none;
				}
			}
		}
	}

	.brand-tagline {
		font-size: 0.72rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--color-text-light);
		margin-bottom: var(--spacing-md);
	}

	.brand-services {
		flex: 1;
		list-style: none;
		padding: 0;
		margin: var(--spacing-md) 0;

		& li {
			padding: var(--spacing-xs) 0;
			border-top: 1px solid var(--color-border);
			color: var(--color-text);
			font-size: 0.9rem;
			margin: 0;

			&:last-child {
				border-bottom: 1px solid var(--color-border);
			}
		}
	}

	.btn-learn-more {
		margin-top: var(--spacing-lg);
		display: inline-block;
		font-size: 0.78rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--color-accent);
		font-weight: var(--font-weight-semibold);
		transition: opacity var(--transition-fast);

		&:hover {
			opacity: 0.7;
			text-decoration: none;
		}
	}

	/* Service cards */
	.service-card {
		background-color: transparent;
		border: none;
		border-top: 1px solid var(--color-border);
		border-radius: 0;
		padding: var(--spacing-xl) 0;
		transition: opacity var(--transition-fast);

		& h3 {
			font-size: clamp(0.95rem, 2vw, 1.1rem);
			margin-bottom: var(--spacing-sm);
			color: var(--color-primary);
		}

		&:hover {
			opacity: 0.72;
		}
	}

	.responsibility-card {
		background-color: transparent;
		border: none;
		border-top: 1px solid var(--color-border);
		border-radius: 0;
		padding: var(--spacing-xl) 0;

		& h3 {
			color: var(--color-primary);
			margin-bottom: var(--spacing-sm);
			font-size: clamp(0.95rem, 2vw, 1.1rem);
		}
	}

	/* =========================================================================
	   Grid layouts
	   ========================================================================= */

	.brands-grid,
	.values-grid {
		display: grid;
		gap: 0;
		grid-template-columns: 1fr;

		@media (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
			column-gap: var(--spacing-3xl);
		}
	}

	.services-grid,
	.responsibilities-grid {
		display: grid;
		gap: 0;
		grid-template-columns: 1fr;

		@media (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
			column-gap: var(--spacing-3xl);
		}
	}

	.game-categories {
		display: grid;
		gap: 0;
		grid-template-columns: 1fr;

		@media (min-width: 768px) {
			grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
			column-gap: var(--spacing-3xl);
		}
	}

	/* =========================================================================
	   Hero — index.html 用 大型タイポグラフィ
	   ========================================================================= */

	.hero {
		padding: var(--spacing-4xl) 0 var(--spacing-3xl);
		background: none;

		& .container {
			display: flex;
			flex-direction: column;
			gap: var(--spacing-xl);
		}
	}

	.hero-wordmark {
		font-family: var(--font-family-heading);
		font-size: clamp(4.5rem, 20vw, 14rem);
		line-height: 0.88;
		letter-spacing: -0.035em;
		color: var(--color-primary);
		margin-bottom: 0;
	}

	.hero-sub {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--spacing-xl);
		padding-inline-start: 0.05em;

		@media (max-width: 600px) {
			flex-direction: column;
			gap: var(--spacing-md);
		}
	}

	.hero-tagline {
		font-family: var(--font-family-sans);
		font-style: italic;
		font-size: clamp(0.95rem, 2.5vw, 1.2rem);
		line-height: 1.85;
		color: var(--color-text);
		margin: 0;
		max-width: 44ch;
	}

	.hero-meta {
		font-size: 0.68rem;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--color-text-light);
		white-space: nowrap;
		padding-top: 0.35em;

		@media (max-width: 600px) {
			padding-top: 0;
		}
	}

	/* 旧 .tagline — サブページ .page-header 用 */
	.tagline {
		font-style: italic;
		font-size: clamp(1rem, 2.5vw, 1.25rem);
		color: var(--color-text-light);
		margin-bottom: var(--spacing-lg);
	}

	.description {
		font-size: 1rem;
		color: var(--color-text-light);
		max-width: 600px;
		line-height: 1.8;
	}

	/* =========================================================================
	   Values — list style（index.html 用）
	   ========================================================================= */

	.values-list {
		list-style: none;
		padding: 0;
		margin: var(--spacing-2xl) 0 0;
	}

	.values-item {
		display: grid;
		grid-template-columns: 3.5rem 1fr;
		gap: var(--spacing-xl);
		padding: var(--spacing-xl) 0;
		border-top: 1px solid var(--color-border);

		&:last-child {
			border-bottom: 1px solid var(--color-border);
		}
	}

	.values-index {
		font-family: var(--font-family-heading);
		font-size: 1.3rem;
		color: var(--color-border);
		line-height: 1.3;
		user-select: none;
	}

	.values-body {
		& h3 {
			font-size: clamp(0.95rem, 2vw, 1.1rem);
			letter-spacing: 0.02em;
			color: var(--color-primary);
			margin-bottom: var(--spacing-xs);
		}

		& p {
			font-size: 0.88rem;
			color: var(--color-text-light);
			margin: 0;
		}
	}

	/* =========================================================================
	   Brands — roster style（index.html 用）
	   ========================================================================= */

	.brands-roster {
		margin-top: var(--spacing-2xl);
	}

	.brand-entry {
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: center;
		gap: var(--spacing-lg);
		padding: var(--spacing-lg) 0;
		border-top: 1px solid var(--color-border);
		text-decoration: none;
		color: inherit;

		&:last-child {
			border-bottom: 1px solid var(--color-border);
		}

		&:hover .brand-entry-name {
			color: var(--color-accent);
		}

		&:hover .brand-entry-arrow {
			transform: translateX(6px);
		}

		@media (max-width: 560px) {
			grid-template-columns: 1fr auto;
		}
	}

	.brand-entry-name {
		font-family: var(--font-family-heading);
		font-size: clamp(1.5rem, 5vw, 3rem);
		line-height: 1;
		color: var(--color-primary);
		transition: color var(--transition-fast);
	}

	.brand-entry-type {
		font-size: 0.7rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--color-text-light);

		@media (max-width: 560px) {
			display: none;
		}
	}

	.brand-entry-arrow {
		font-size: 1.1rem;
		color: var(--color-accent);
		transition: transform var(--transition-base);
		line-height: 1;
	}

	/* =========================================================================
	   Philosophy — index.html 用
	   ========================================================================= */

	.philosophy-statement {
		max-width: 680px;
	}

	.philosophy-lead {
		font-style: italic;
		font-size: clamp(1.05rem, 3vw, 1.5rem);
		line-height: 1.85;
		color: var(--color-text);
		margin-bottom: var(--spacing-2xl);
	}

	.philosophy-conclusion {
		font-size: 0.85rem;
		letter-spacing: 0.04em;
		color: var(--color-text-light);
		border-top: 1px solid var(--color-border);
		padding-top: var(--spacing-lg);
		margin: 0;
	}

	/* sub-page 用 philosophy */
	.philosophy-grid {
		display: grid;
		gap: var(--spacing-md);
		grid-template-columns: 1fr;

		& .philosophy-item {
			font-size: 1rem;
			line-height: 1.8;
		}
	}

	.philosophy-detailed {
		padding: var(--spacing-xl) 0;
		border-top: 1px solid var(--color-border);
		font-size: 1rem;
		line-height: 1.8;
	}

	.philosophy-points {
		display: grid;
		gap: 0;
		grid-template-columns: 1fr;
		margin-top: var(--spacing-2xl);

		@media (min-width: 768px) {
			grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
			column-gap: var(--spacing-3xl);
		}
	}

	.philosophy-point {
		padding: var(--spacing-xl) 0;
		border-top: 1px solid var(--color-border);

		& h3 {
			color: var(--color-primary);
			margin-bottom: var(--spacing-md);
			font-size: clamp(0.95rem, 2vw, 1.1rem);
		}
	}

	/* =========================================================================
	   Organization — index.html 用 テーブル形式
	   ========================================================================= */

	.org-description {
		color: var(--color-text-light);
		font-size: 0.95rem;
		max-width: 55ch;
		margin-top: var(--spacing-lg);
		margin-bottom: 0;
	}

	.org-table {
		margin-top: var(--spacing-2xl);
	}

	.org-row {
		display: grid;
		grid-template-columns: 9rem 1fr;
		gap: var(--spacing-xl);
		padding: var(--spacing-lg) 0;
		border-top: 1px solid var(--color-border);

		&:last-child {
			border-bottom: 1px solid var(--color-border);
		}

		@media (max-width: 560px) {
			grid-template-columns: 1fr;
			gap: var(--spacing-xs);
		}
	}

	.org-row-label {
		font-size: 0.7rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--color-text-light);
		padding-top: 0.2em;
	}

	.org-row-content {
		& ul {
			list-style: none;
			padding: 0;
			margin: 0;

			& li {
				font-size: 0.92rem;
				color: var(--color-text);
				padding: 0.1em 0;
				margin: 0;
			}
		}

		& p {
			font-size: 0.92rem;
			color: var(--color-text);
			margin: 0;
		}
	}

	/* 旧 .org-structure / .org-item — sub-page 互換 */
	.org-structure {
		display: grid;
		gap: 0;
		grid-template-columns: 1fr;
		margin-top: var(--spacing-xl);

		@media (min-width: 768px) {
			grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
			column-gap: var(--spacing-3xl);
		}
	}

	.org-item {
		padding: var(--spacing-xl) 0;
		border-top: 1px solid var(--color-border);

		& h3 {
			color: var(--color-primary);
			margin-bottom: var(--spacing-md);
			font-size: clamp(0.95rem, 2vw, 1.1rem);
		}

		& ul {
			margin: 0;
			padding-left: var(--spacing-md);
		}
	}

	/* =========================================================================
	   CTA Section
	   ========================================================================= */

	.cta {
		background: none;
		color: inherit;
		padding: var(--spacing-4xl) 0;
		text-align: left;

		& h2 {
			color: var(--color-primary);
			margin-bottom: var(--spacing-md);
		}

		& p {
			color: var(--color-text-light);
			font-size: 0.95rem;
			max-width: 50ch;
			opacity: 1;
		}
	}

	/* =========================================================================
	   Forms
	   ========================================================================= */

	.contact-form {
		max-width: 600px;
		margin: var(--spacing-xl) auto;
		display: grid;
		gap: var(--spacing-lg);

		@media (max-width: 768px) {
			padding: 0 var(--spacing-md);
		}
	}

	.form-group {
		display: flex;
		flex-direction: column;

		& label {
			font-weight: var(--font-weight-semibold);
			font-size: 0.72rem;
			letter-spacing: 0.14em;
			text-transform: uppercase;
			margin-bottom: var(--spacing-sm);
			color: var(--color-text-light);
		}

		& input,
		& textarea,
		& select {
			padding: var(--spacing-md);
			border: 1px solid var(--color-border);
			border-radius: 0;
			font-family: var(--font-family-sans);
			font-size: 1rem;
			background-color: transparent;
		}
	}

	/* =========================================================================
	   Misc components — sub-page 用
	   ========================================================================= */

	.section-note {
		color: var(--color-text-light);
		font-style: italic;
		padding: var(--spacing-lg) 0;
	}

	.collaboration-list {
		list-style: none;
		padding: 0;

		& li {
			padding: var(--spacing-md) 0;
			border-top: 1px solid var(--color-border);
			color: var(--color-text);
			font-size: 0.95rem;
			margin: 0;

			&:last-child {
				border-bottom: 1px solid var(--color-border);
			}
		}
	}

	.tech-focus-list {
		list-style: none;
		padding: 0;
		display: grid;
		gap: 0;

		& li {
			padding: var(--spacing-md) 0;
			border-top: 1px solid var(--color-border);
			display: flex;
			align-items: center;
			gap: var(--spacing-sm);
			font-size: 0.95rem;
			color: var(--color-text);
			margin: 0;

			&:last-child {
				border-bottom: 1px solid var(--color-border);
			}

			& .icon-inline {
				flex-shrink: 0;
			}
		}
	}

	.brand-contacts {
		display: grid;
		gap: 0;
		grid-template-columns: 1fr;
		margin-top: var(--spacing-xl);

		@media (min-width: 768px) {
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			column-gap: var(--spacing-3xl);
		}
	}

	.brand-contact {
		padding: var(--spacing-xl) 0;
		border-top: 1px solid var(--color-border);

		& h3 {
			color: var(--color-primary);
			margin-bottom: var(--spacing-md);
			font-size: clamp(0.95rem, 2vw, 1.1rem);
		}
	}

	.values-section {
		display: grid;
		gap: 0;
		grid-template-columns: 1fr;
		margin-top: var(--spacing-xl);

		@media (min-width: 768px) {
			grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
			column-gap: var(--spacing-3xl);
		}
	}

	.value-item {
		padding: var(--spacing-xl) 0;
		border-top: 1px solid var(--color-border);

		& h3 {
			color: var(--color-primary);
			margin-bottom: var(--spacing-md);
			font-size: clamp(0.95rem, 2vw, 1.1rem);
		}
	}

	/* =========================================================================
	   FAQ
	   ========================================================================= */

	.faq-items {
		display: grid;
		gap: 0;
	}

	.faq-item {
		border: none;
		border-top: 1px solid var(--color-border);
		border-radius: 0;
		overflow: hidden;

		&:last-child {
			border-bottom: 1px solid var(--color-border);
		}

		& summary {
			padding: var(--spacing-lg) 0;
			cursor: pointer;
			font-size: 0.95rem;
			font-weight: var(--font-weight-semibold);
			color: var(--color-text);
			transition: color var(--transition-fast);
			user-select: none;
			list-style: none;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: var(--spacing-md);

			&::after {
				content: "+";
				font-size: 1rem;
				color: var(--color-text-light);
				flex-shrink: 0;
				transition: rotate var(--transition-fast);
			}

			&:hover {
				color: var(--color-accent);
			}
		}

		&:open summary::after {
			rotate: 45deg;
		}

		& p {
			margin: 0;
			padding: 0 0 var(--spacing-lg);
			color: var(--color-text-light);
			font-size: 0.92rem;
		}
	}

	/* =========================================================================
	   アニメーション
	   ========================================================================= */

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

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

	@keyframes inputFocus {
		from {
			box-shadow: 0 0 0 0
				color-mix(in srgb, var(--color-accent) 15%, transparent);
		}
		to {
			box-shadow: 0 0 0 2px
				color-mix(in srgb, var(--color-accent) 15%, transparent);
		}
	}

	@keyframes spin {
		to {
			rotate: 360deg;
		}
	}

	/* スクロールアニメーション — opacity のみ（translateY は使わない） */
	.card,
	.brand-card,
	.service-card,
	.value-card,
	.value-item,
	.org-item,
	.philosophy-point,
	.responsibility-card,
	.brand-contact,
	.animate-on-scroll {
		will-change: opacity;
	}

	[data-animate]:not(.is-visible) {
		opacity: 0;
	}

	[data-animate].is-visible {
		animation: fadeIn 0.6s ease-out forwards;
	}

	input:focus,
	textarea:focus,
	select:focus {
		animation: inputFocus 0.3s ease forwards;
	}

	/* =========================================================================
	   アクセシビリティ
	   ========================================================================= */

	:focus-visible {
		outline: 2px solid var(--color-accent);
		outline-offset: 3px;
		border-radius: 2px;
	}

	:focus:not(:focus-visible) {
		outline: none;
	}

	/* =========================================================================
	   モーション削減
	   ========================================================================= */

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}

		[data-animate]:not(.is-visible) {
			opacity: 1;
		}
	}

	/* =========================================================================
	   Icons
	   ========================================================================= */

	.icon-accent {
		/* forest green #2b5940 */
		filter: invert(25%) sepia(45%) saturate(600%) hue-rotate(110deg)
			brightness(78%) contrast(92%);

		@media (prefers-color-scheme: dark) {
			/* light green #5aab7e */
			filter: invert(62%) sepia(28%) saturate(500%) hue-rotate(108deg)
				brightness(100%);
		}
	}

	.icon-muted {
		filter: invert(55%) sepia(0%) saturate(0%) brightness(65%);

		@media (prefers-color-scheme: dark) {
			filter: invert(70%) sepia(0%) saturate(0%) brightness(80%);
		}
	}

	.brand-card-icon {
		margin-bottom: var(--spacing-md);
	}

	.value-card-icon {
		display: flex;
		justify-content: center;
		margin-bottom: var(--spacing-sm);
	}

	.icon-inline {
		display: inline-block;
		vertical-align: middle;
		position: relative;
		top: -1px;
		margin-right: 4px;
	}

	.page-header-icon {
		display: flex;
		justify-content: center;
		margin-bottom: var(--spacing-md);
	}

	.btn-with-icon {
		display: inline-flex;
		align-items: center;
		gap: var(--spacing-sm);
	}

	.icon-btn {
		flex-shrink: 0;
		filter: brightness(0) invert(1);

		&[src*="loader-pinwheel"] {
			animation: spin 1s linear infinite;
		}
	}

	/* =========================================================================
	   Responsive
	   ========================================================================= */

	@media (max-width: 768px) {
		.brands-grid,
		.values-grid,
		.services-grid,
		.game-categories,
		.philosophy-points,
		.responsibilities-grid {
			grid-template-columns: 1fr;
		}
	}
}