/* Figma: 資料ページ（node 4721:98） */

.materials {
	padding-top: 48px;

	padding-bottom: 120px;

	box-sizing: border-box;
}

.materials .wrap {
	display: flex;

	flex-direction: column;

	gap: 120px;
}

.materials__section {
	width: 100%;
}

.materials__block {
	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 64px;

	width: 100%;

	box-sizing: border-box;
}

.materials__heading {
	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 24px;

	margin: 0;

	padding: 0;
}

.materials__title {
	margin: 0;

	font-weight: 700;

	font-size: 36px;

	line-height: normal;

	color: #000;

	text-align: center;
}

.materials__title-line {
	display: block;

	width: 80px;

	height: 4px;

	background-color: #333;
}

.materials__featured {
	width: 100%;

	max-width: 1200px;

	border: 1px solid #eee;

	border-radius: 16px;

	overflow: hidden;

	box-sizing: border-box;
}

.materials__featured-inner {
	display: flex;

	flex-direction: row;

	align-items: center;

	justify-content: center;

	gap: 56px;

	padding-right: 40px;

	box-sizing: border-box;
}

.materials__featured-visual {
	flex: 1 1 50%;

	max-width: 600px;

	min-height: 354px;

	background-color: #f8f8f8;

	border-radius: 8px 0 0 8px;

	display: flex;

	align-items: center;

	justify-content: center;

	box-sizing: border-box;
}

.materials__featured-sheet {
	position: relative;

	width: 100%;

	max-width: 489px;

	height: 270px;

	margin: 42px 24px;

	background-color: #eee;

	box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);

	display: flex;

	align-items: center;

	justify-content: center;

	box-sizing: border-box;
}

.materials__placeholder-text {
	margin: 0;

	font-weight: 700;

	font-size: 24px;

	line-height: 1.6;

	color: #333;

	text-align: center;
}

.materials__featured-body {
	flex: 1 1 50%;

	min-width: 0;

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	gap: 24px;

	padding: 32px 0 32px 0;

	box-sizing: border-box;
}

.materials__card-title {
	margin: 0;

	font-weight: 700;

	color: #333;
}

.materials__card-title--featured {
	font-size: 24px;

	line-height: 1.6;
}

.materials__card-title--tile {
	font-size: 18px;

	line-height: normal;

	/* text-align: center; */

	width: 100%;
}

.materials__btn {
	display: inline-flex;

	flex-direction: row;

	align-items: center;

	justify-content: center;

	gap: 8px;

	padding: 24px 33px;

	background-color: #fdd000;

	border-radius: 40px;

	font-weight: 700;

	font-size: 15px;

	line-height: normal;

	color: #333;

	text-decoration: none;

	box-sizing: border-box;

	transition: opacity 0.2s ease;
}

.materials__btn:hover {
	opacity: 0.9;
}

.materials__btn-label {
	white-space: nowrap;
}

.materials__btn-icon {
	flex-shrink: 0;
}

.materials__grid {
	display: grid;

	grid-template-columns: repeat(3, minmax(0, 373.333px));

	gap: 40px;

	width: 100%;



	justify-content: center;

	box-sizing: border-box;
}

.materials__tile {
	background-color: #fff;

	border: 1px solid #eee;

	border-radius: 16px;

	overflow: hidden;

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 24px;

	padding-bottom: 32px;

	box-sizing: border-box;
}

.materials__tile-thumb {
	width: 100%;

	height: 202px;

	background-color: #f8f8f8;

	border-radius: 8px 8px 0 0;

	flex-shrink: 0;
}

.materials__tile-body {
	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 24px;

	width: 100%;

	padding: 0 24px;

	box-sizing: border-box;
}

@media screen and (max-width: 1023px) {
	.materials .wrap {
		gap: 80px;
	}

	.materials__block {
		gap: 48px;
	}

	.materials__featured-inner {
		flex-direction: column;

		align-items: stretch;

		padding: 0 24px 32px;

		gap: 32px;
	}

	.materials__featured-visual {
		max-width: none;

		width: 100%;

		min-height: 280px;

		border-radius: 8px;

		margin-top: 24px;
	}

	.materials__featured-sheet {
		margin: 32px 20px;

		height: 240px;
	}

	.materials__featured-body {
		padding: 0;

		align-items: center;

		text-align: center;
	}

	.materials__card-title--featured {
		text-align: center;
	}

	.materials__grid {
		grid-template-columns: 1fr;

		max-width: 400px;

		margin-left: auto;

		margin-right: auto;
	}
}

@media screen and (max-width: 767px) {
	.materials {
		padding-top: 32px;

		padding-bottom: 80px;
	}

	.materials__title {
		font-size: 28px;
	}

	.materials__featured-inner {
		padding-left: 16px;

		padding-right: 16px;
	}

	.materials__placeholder-text {
		font-size: 18px;
	}

	.materials__card-title--featured {
		font-size: 18px;
	}

	.materials__btn {
		width: 100%;

		max-width: 320px;

		padding: 20px 24px;
	}
}