@charset "UTF-8";

/**
 * オリジナルcss
 */

.content_page_concept {
	margin-top: 140px;
	margin-bottom: 160px;


	.concept_title {
		position: relative;
		height: 100%;

		&::before {
			content: "";
			display: block;
			width: 160px;
			aspect-ratio: 1;
			background-image: url(../images/common/title_image.png);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center bottom;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}

	.intro_text {
		font-size: 1.8rem;
		line-height: 1.8;
		text-align: center;

		.border_y {
			text-decoration: underline;
			text-underline-offset: -1px;
			text-decoration-thickness: 5px;
			text-decoration-color: #FFEE54;
			font-weight: 500;
		}
	}

	.point_list {
		margin-top: 120px;
	}

	.point_item {
		background-color: var(--c3);
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
		position: relative;
		padding: 80px 40px 40px 40px;
		margin-top: 120px;

		.point_illust {
			position: absolute;
			right: 4%;
			top: -40px;
			width: calc(145 / 1240 * 100%);
		}

		.point_number {
			position: absolute;
			top: -40px;
			font-family: var(--en);
			font-size: 4rem;
			font-weight: 700;
			text-align: center;
			color: #fff;
			background-color: var(--c2);
			width: 80px;
			aspect-ratio: 1;
			align-content: center;
			border-radius: 100vw;
		}

		.point_title {
			font-size: 2.8rem;
			font-weight: 600;
			color: var(--c2);
			text-align: center;
			letter-spacing: 0.05em;

			.border_y {
				text-decoration: underline;
				text-underline-offset: -1px;
				text-decoration-thickness: 5px;
				text-decoration-color: #FFEE54;
			}

			.num_strong {
				font-family: var(--en);
				font-size: 3.6rem;
				color: #E55544;
				font-weight: 700;
			}
		}

		.point_image {
			max-width: 576px;
			width: 100%;
		}

		.point_text {
			max-width: 920px;
			font-size: 1.6rem;
			line-height: 1.75;
			letter-spacing: 0.05em;
		}

		.button_more {
			margin-top: 0;
		}
	}

	@media screen and (max-width: 768px) {
		margin-top: 80px;
		margin-bottom: 80px;

		.concept_title {
			padding-left: 160px;

			&::before {
				width: 120px;
				left: 8px;
			}
		}

		.intro_text {
			font-size: 1.6rem;
			text-align-last: left;

			p+p {
				margin-top: 1em;
			}
		}

		.point_list {
			margin-top: 72px;
		}

		.point_item {
			max-width: 480px;
			padding: 40px 8px 32px 8px;
			gap: 24px;
			margin-top: 64px;

			.point_number {
				top: -25px;
				width: 50px;
				font-size: 2.4rem;
			}

			.point_illust {
				width: 72px;
				top: -25px;
			}

			.point_title {
				font-size: 1.8rem;
				line-height: 1.8;

				.num_strong {
					font-family: var(--en);
					font-size: 2.4rem;
					color: #E55544;
					font-weight: 600;
					line-height: 1;
				}

			}

			.point_image_scroll {
				overflow-x: scroll;
				width: 100%;

				.point_image {
					width: 576px;
				}
			}


			.point_text {
				font-size: 1.4rem;
			}
		}
	}

	@media screen and (max-width: 480px) {}
}