@charset "UTF-8";

#header {
	.logomark {
		filter: invert(100%) !important;
	}
}

#page-fv {
	background-color: #0199d0;
	padding-left: 8.5rem;
	box-sizing: border-box;
	@media screen and (max-width: 767px) {
		padding-left: 2.4rem;
	}
	.title {
		padding-top: 20rem;
		padding-bottom: 5.1rem;
		@media screen and (max-width: 767px) {
			padding-top: 8.6rem;
			padding-right: 6rem;
			padding-bottom: 1.3rem;
		}
		.jp {
			font-family: "Yu Gothic", "Noto Sans JP", sans-serif;
			font-style: normal;
			font-weight: 700;
			font-size: 6rem;
			line-height: 150%;
			letter-spacing: 0.1em;
			color: #ffffff;
			@media screen and (max-width: 767px) {
				font-size: 2rem;
			}
		}
	}
	.fv-img {
		border-radius: 22rem 0 0 0;
		overflow: hidden;
		@media screen and (max-width: 767px) {
			border-radius: 3.6rem 0 0 0;
		}
		& img {
			object-fit: cover;
			object-position: bottom right;
			@media screen and (max-width: 767px) {
				aspect-ratio: 369 / 328;
				object-position: center;
			}
			@media screen and (min-width: 2300px) {
				transform: scale(1.1);
			}
		}
	}
}

#contents {
	padding-top: 17rem;
	padding-bottom: 18.3rem;

	@media screen and (max-width: 767px) {
		padding-top: 4rem;
		padding-bottom: 6rem;
	}
}

#intro {
	padding-bottom: 13rem;
	@media screen and (max-width: 767px) {
		padding-bottom: 6rem;
	}
	.intro-text {
		font-family: "Noto Sans JP", sans-serif;
		font-style: normal;
		font-weight: 400;
		font-size: 1.8rem;
		line-height: 200%;
		letter-spacing: 0.05em;
		color: #000000;
		margin-bottom: 8rem;
		@media screen and (max-width: 767px) {
			font-size: 1.4rem;
			line-height: 180%;
			margin-bottom: 4rem;
		}
	}
	.intro-img {
		width: 100%;
	}
}

#profile {
	.profile-title {
		padding-bottom: 4rem;
		border-bottom: 1px solid #000000;
		margin-bottom: 6rem;
		@media screen and (max-width: 767px) {
			padding-bottom: 2rem;
			margin-bottom: 3rem;
		}
	}
	.profiles-flex {
		display: flex;
		gap: 12rem;
		padding-bottom: 5rem;
		border-bottom: 1px solid #000000;
		margin-bottom: 13rem;
		@media screen and (max-width: 767px) {
			gap: 3rem;
			padding-bottom: 3rem;
			margin-bottom: 6rem;
			flex-direction: column;
		}
		.profile-card {
			width: 40rem;
			@media screen and (max-width: 767px) {
				width: 100%;
			}
			.card-img {
				width: 100%;
				margin-bottom: 4rem;
				@media screen and (max-width: 767px) {
					margin-bottom: 2rem;
				}
				& img {
					width: 100%;
					vertical-align: top;
				}
			}
			.profile-text {
				.line1 {
					font-style: normal;
					font-weight: 600;
					font-size: 2.4rem;
					line-height: 100%;
					letter-spacing: 0.03em;
					color: #000000;
					margin-bottom: 3.2rem;
					@media screen and (max-width: 767px) {
						font-size: 1.6rem;
						margin-bottom: 1.6rem;
					}
				}
				.line2 {
					font-style: normal;
					font-weight: 600;
					font-size: 1.8rem;
					line-height: 100%;
					letter-spacing: 0.03em;
					color: #000000;
					margin-bottom: 2rem;
					@media screen and (max-width: 767px) {
						margin-bottom: 1.6rem;
						font-size: 1.4rem;
					}
				}
				.line3 {
					& span {
						font-style: normal;
						font-weight: 600;
						font-size: 1.8rem;
						line-height: 100%;
						letter-spacing: 0.03em;
						color: #000000;
						margin-right: 2rem;
						@media screen and (max-width: 767px) {
							margin-right: 1rem;
							font-size: 1.4rem;
						}
					}
					& a {
						font-style: normal;
						font-weight: 400;
						font-size: 1.8rem;
						line-height: 100%;
						letter-spacing: 0.03em;
						text-decoration-line: underline;
						color: #000000;
						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
						}
					}
				}
			}
		}
	}
	.prof-text {
		font-style: normal;
		font-weight: 400;
		font-size: 1.8rem;
		line-height: 200%;
		letter-spacing: 0.05em;
		color: #000000;
		margin-bottom: 6rem;
		@media screen and (max-width: 767px) {
			font-size: 1.6rem;
			margin-bottom: 4rem;
		}
	}
	.block-img-container {
		margin-bottom: 6rem;
		@media screen and (max-width: 767px) {
			margin-bottom: 3rem;
		}
		.block-img {
			width: 100%;
			margin-bottom: 1.2rem;
			& img {
				width: 100%;
				vertical-align: top;
			}
		}
		.block-text {
			font-style: normal;
			font-weight: 400;
			font-size: 1.8rem;
			line-height: 200%;
			letter-spacing: 0.05em;
			color: #000000;
			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
			}
		}
	}
	#conversation {
		.conversation-block {
			margin-bottom: 6rem;
			@media screen and (max-width: 767px) {
				margin-bottom: 3rem;
			}
			.question {
				font-style: normal;
				font-weight: 600;
				font-size: 2.4rem;
				line-height: 200%;
				letter-spacing: 0.05em;
				color: #a92eab;
				margin-bottom: 4rem;
				@media screen and (max-width: 767px) {
					font-size: 1.6rem;
					margin-bottom: 2rem;
				}
			}
			& ul {
				& li {
					font-style: normal;
					font-weight: 400;
					font-size: 1.8rem;
					line-height: 205%;
					letter-spacing: 0.05em;
					color: #000;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
						line-height: 200%;
					}
					& span {
						color: #0199d0;
						font-weight: 600;
						letter-spacing: 0.1em;
					}
				}
			}
			.purple-text {
				margin-top: 4rem;
				@media screen and (max-width: 767px) {
					margin-top: 2rem;
				}
				& span {
					font-style: normal;
					font-weight: 600;
					font-size: 1.8rem;
					line-height: 3.6rem;
					letter-spacing: 0.05em;
					color: #a92eab;
					background-image: linear-gradient(to bottom, transparent calc(100% - 1rem), rgba(205, 61, 208, 0.2) 0);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					display: inline;
					padding: 0 0 0.2rem 0;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
					}
				}
			}
			.conversation-block-img {
				width: 80rem;
				margin: 4rem auto 0;
				@media screen and (max-width: 767px) {
					width: 100%;
					margin: 2rem auto 0;
				}
			}
		}
	}
}