#feature {
	width: 100%;

	@media (max-width: 768px) {
		padding-inline: min(calc(100vw * (20 / 375)), 20px);
	}

	.pc_only {
		display: block;

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

	.sp_only {
		display: none;

		@media (max-width: 768px) {
			display: block;
		}
	}

	.mt-45 {
		margin-top: 45px;
	}

	.mt-48 {
		margin-top: 48px;

		@media (max-width: 768px) {
			margin-top: 32px;
		}
	}

	.section-description {
		margin-top: 32px;
		color: #1E293B;
		
		@media (max-width: 768px) {
			margin-top: 24px;
		}
	}

	.card-container {
		display: grid;
		grid-template-rows: auto;
		justify-content: center;

		&.three {
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 24px;
			margin-top: 40px;

			@media (max-width: 768px) {
				grid-template-columns: auto;
				grid-template-rows: repeat(3, auto);
			}
		}

		.card {
			position: relative;
			background-color: #fff;
			/* border: 3px solid #3f3e52; */
			border-radius: 8px;
			padding: 72px 24px 24px;
			display: flex;
			flex-direction: column;
			gap: 16px;
			overflow: hidden;

			.number {
				position: absolute;
				top: 0;
				left: 0;
				font-size: 4rem;
				font-weight: bold;
				font-family: "futura-pt", sans-serif;
				line-height: 1;
				color: #ffffff;
				width: 60px;
				height: 60px;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #211170;

				@media (max-width: 768px) {
					font-size: 4rem;
					width: 60px;
					height: 60px;
				}
			}

			.caption {
				font-size: 2.2rem;
				font-weight: bold;
				line-height: 1.6em;
				letter-spacing: 0;
				color: #1E293B;
				text-align: center;
			}

			.image {
				width: 100%;
			}

			.text {
				font-size: 1.6rem;
				line-height: 1.6em;
				letter-spacing: 0;
				color: #576379;
				text-align: left;
			}

			.note {
				font-size: 1.2rem;
				line-height: 1.5em;
				letter-spacing: 0;
				color: #949494;
				text-align: center;

				/* @media (max-width: 768px) {
					font-size: 3.2vw;
				} */

				& > a {
					text-decoration: underline;
				}
			}
		}
	}
}

.bg-column {
	width: 100%;
	background-color: #F6F9FC;
	padding-block: min(calc(100vw * (100 / 1440)), 100px);
	display: flex;
	flex-direction: column;
	gap: min(calc(100vw * (72 / 1440)), 72px);

	@media (max-width: 768px) {
		padding-block: min(calc(100vw * (72 / 375)), 72px);
    gap: min(calc(100vw * (32 / 375)), 32px);
  }
}