@charset "utf-8";
/* CSS Document */

	/* Simulatorへの導線（サイト共通の .button .button-dark を使用） */
	.sim-cta {
		text-align: center;
		padding: 20px 20px 56px;
		box-sizing: border-box;
	}
	.sim-cta__lead {
		font-family: var(--serif);
		font-size: 15px;
		line-height: 1.9;
		letter-spacing: .04em;
		color: var(--navy);
		margin-bottom: 14px;
	}
	@media (max-width: 760px) {
		.sim-cta {
			padding: 12px 16px 40px;
		}
		.sim-cta__lead {
			font-size: 14px;
		}
	}

	.works-section {
		background: #f4f4f4;
		padding: 60px 0;
	}
	.works-wrap {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.works-wrap + .works-wrap {
		margin-top: 30px;
	}
	.works-head {
		flex: 0 0 280px;
		max-width: 143px;
	}
	.works-head__title {
		font-size: 26px;
		font-family: var(--serif);
		font-weight: 700;
		letter-spacing: 0.04em;
		margin: 0 0 4px;
		color: #1a1a1a;
	}
	.works-head__subtitle {
		font-size: 16px;
		color: #333;
		margin: 0 0 16px;
	}
	.works-head__line {
		display: block;
		width: 32px;
		height: 2px;
		background: #1a1a1a;
		margin-bottom: 16px;
	}
	.works-head__desc {
		font-size: 14px;
		line-height: 1.9;
		color: #333;
		margin: 0 0 24px;
	}
	.works-head__btn {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		border: 1px solid #1a1a1a;
		background: #fff;
		color: #1a1a1a;
		text-decoration: none;
		font-size: 13px;
		padding: 12px 20px;
		white-space: nowrap;
	}
	.works-head__arrow {
		font-size: 14px;
	}
	.works-row {
		flex: 1 1 auto;
		display: flex;
		gap: 20px;
		overflow-x: auto;
		padding-bottom: 8px;
		min-width: 0;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}
	.works-row::-webkit-scrollbar {
		height: 6px;
	}
	.works-row::-webkit-scrollbar-thumb {
		background: #ccc;
	}
	.works-card {
		flex: 0 0 260px;
		width: 260px;
		scroll-snap-align: start;
	}
	.works-card .cg-item {
		width: 100%;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		margin: 0 0 12px;
	}
	.works-card .cg-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	.works-card__title {
		font-size: 15px;
		font-weight: 700;
		color: #1a1a1a;
		margin: 0 0 0px;
	}
	.works-card__tags {
		font-size: 15px;
		color: #888;
		margin: 0;
	}

	/* ---- Responsive ---- */
	@media (max-width: 1024px) {
		.works-wrap {
			gap: 28px;
			padding: 0 16px;
		}
		.works-head {
			flex: 0 0 220px;
			max-width: 220px;
		}
		.works-head__title {
			font-size: 28px;
		}
		.works-row {
			gap: 18px;
		}
		.works-card {
			flex: 0 0 220px;
			width: 220px;
		}
	}
	@media (max-width: 768px) {
		.works-section {
			padding: 40px 0;
		}
		.works-wrap {
			flex-direction: column;
			gap: 5px;
		}
		.works-wrap + .works-wrap {
			margin-top: 40px;
		}
		.works-head {
			flex: none;
			max-width: none;
			width: 100%;
		}
		.works-head__desc {
			margin: 0 0 16px;
		}
		.works-head__btn {
			width: 100%;
		}
		.works-row {
			width: 100%;
			gap: 14px;
		}
		.works-card {
			flex: 0 0 68vw;
			width: 68vw;
		}
	}
	@media (max-width: 480px) {
		.works-wrap {
			padding: 0 16px;
		}
		.works-head__title {
			font-size: 24px;
		}
		.works-head__desc {
			font-size: 13px;
		}
		.works-card {
			flex: 0 0 78vw;
			width: 78vw;
		}
		.works-card__title {
			font-size: 14px;
		}
		.works-card__tags {
			font-size: 11px;
		}
	}