@charset "UTF-8";
/* -----------------------------------------------------------
	.p-aboutus
----------------------------------------------------------- */
.p-aboutus {
	background: url(../images/aboutus/bg-about.avif) center center no-repeat;
	background-size: cover;
	padding: 240px 0;
	text-align: center;
	color: #fff;
	@media (max-width: 767px) {
		padding: 160px 0;
	}
	.page-title_jp {
		span {
			display: inline-block;
			position: relative;
			padding-left: 48px;
			font-size: calc(20 * var(--rem));
			line-height: 1;
			font-weight: 700;
			letter-spacing: 0.06em;
			margin-bottom: 40px;
			color: #fff;
			@media (max-width: 767px) {
				font-size: calc(18 * var(--rem));
				margin-bottom: 24px;
			}
			&:before {
				content: "";
				width: 32px;
				height: 2px;
				border-radius: 1px;
				background-color: var(--color-blue);
				position: absolute;
				top: 0.25em;
				left: 0;
			}
		}
	}
	.catchcopy_en {
		font-family: var(--font-sans);
		font-size: calc(128 * var(--rem));
		font-style: italic;
		font-weight: 600;
		color: #fff;
		text-transform: uppercase;
		line-height: 1;
		margin-bottom: 56px;
		@media (min-width: 768px) and (max-width: 1024px) {
			font-size: calc(116 * var(--rem));
		}
		@media (max-width: 767px) {
			font-size: calc(50 * var(--rem));
			margin-bottom: 40px;
		}
		>span {
			display: block;
			&:first-child {
				span {
					&:nth-child(5) {
						padding-left: 0.25em;
					}
				}
			}
			&:last-child {
				span {
					&:nth-child(4) {
						padding-left: 0.25em;
					}
					&:last-child {
						font-size: 75%;
					}
				}
			}
		}
	}
	h2 {
		margin-bottom: 40px;
		font-size: calc(30 * var(--rem));
		font-weight: 500;
		letter-spacing: 0.24em;
		@media (max-width: 767px) {
			font-size: calc(18 * var(--rem));
			margin-bottom: 24px;
		}
	}
	.txt {
		font-size: calc(20 * var(--rem));
		font-weight: 500;
		line-height: 2;
		letter-spacing: 0.06em;
		display: flex;
		flex-direction: column;
		gap:1em;
		@media (max-width: 767px) {
			font-size: calc(14 * var(--rem));
		}
	}
}

/* -----------------------------------------------------------
	.p-mission_vision
----------------------------------------------------------- */
.p-mission_vision {
	background: url(../images/common/bg-sky_long.avif) center 0 no-repeat;
	background-size: 100% 100%;
	padding: 120px 0 240px;
	@media (max-width: 767px) {
		padding: 120px 0 160px;
	}
	.p-mission {
		background: url(../images/common/bg-ribbon.avif) center bottom no-repeat;
		background-size: 100% 100%;
		@media (max-width: 767px) {
			background-position: center center;
		}
		.p-mission__wrapper {
			.c-title-basic {
				margin-bottom: 32px;
			}
			.img {
				margin: 0 auto 24px;
				max-width: 560px;
				img {
					border-radius: 8px;
				}
			}
			h3 {
				text-align: right;
				font-size: calc(64 * var(--rem));
				font-weight: 700;
				line-height: 1.4;
				letter-spacing: 0.06em;
				margin-bottom: 48px;
				@media (min-width: 768px) and (max-width: 1024px) {
					font-size: calc(48 * var(--rem));
				}
				@media (max-width: 767px) {
					font-size: calc(24 * var(--rem));
					margin-bottom: 16px;
				}
			}
			.txt {
				text-align: right;
				font-size: calc(24 * var(--rem));
				font-weight: 500;
				line-height: 2;
				letter-spacing: 0.06em;
				@media (max-width: 767px) {
					font-size: calc(14 * var(--rem));
				}
			}
		}
	}
	.p-vision {
		padding-top: 240px;
		position: relative;
		@media (max-width: 767px) {
			padding-top: 120px;
		}
		&::before {
			content: "";
			background: url(../images/aboutus/bg-logomark.avif) center bottom no-repeat;
			background-size: 100% 100%;
			position: absolute;
			top: -100px;
			left: 0;
			width: 100%;
			height: 100%;
		}
		.p-vision__wrapper {
			display: flex;
			justify-content: space-between;
			@media (max-width: 767px) {
				flex-direction: column;
			}
			.p-vision__imgs {
				width: 50%;
				text-align: center;
				position: relative;
				@media (max-width: 767px) {
					width: 70%;
					margin: 40px auto;
					order:2;
				}
				.p-vision__img {
					max-width: 445px;
					@media (min-width: 768px) and (max-width: 1024px) {
						width: 80%;
					}
					@media (max-width: 767px) {
						width: 100%;
					}
					&:first-child {
						position: absolute;
						bottom: 0;
						right: 0;
						@media (max-width: 767px) {
							right: -40px;
						}
						img {
							filter: blur(2px);
						}
					}
					&:last-child {
						position: relative;
						z-index: 1;
						padding-bottom: 84px;
						margin-inline: auto;
						animation-delay: 0.5s;
						@media (min-width: 768px) and (max-width: 1024px) {
							padding-bottom: 64px;
						}
						@media (max-width: 767px) {
							padding-bottom: 0;
							margin-bottom: 40px;
						}
					}
					img {
						border-radius: 8px;
					}
				}
			}
			.p-vision__txt {
				width: 50%;
				padding-left: 8.3%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				@media (max-width: 767px) {
					display: contents;
				}
				.c-title-basic {
					margin-left: auto;
					@media (max-width: 767px) {
						order:1;
						margin-left: 0;
					}
				}
				.p-vision__txt__detail {
					letter-spacing: 0.06em;
					@media (max-width: 767px) {
						order:3;
						text-align: right;
					}
					h3 {
						font-size: calc(64 * var(--rem));
						font-weight: 700;
						line-height: 1.4;
						margin-bottom: 48px;
						@media (min-width: 768px) and (max-width: 1024px) {
							font-size: calc(48 * var(--rem));
							margin-bottom: 24px;
						}
						@media (max-width: 767px) {
							font-size: calc(24 * var(--rem));
							margin-bottom: 16px;
							br {
								display: none;
							}
						}
					}
					.txt {
						font-size: calc(20 * var(--rem));
						font-weight: 500;
						line-height: 2;
						@media (max-width: 767px) {
							font-size: calc(14 * var(--rem));
						}
					}
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	.p-value
----------------------------------------------------------- */
.p-value {
	margin-bottom: 240px;
	@media (min-width: 1025px) {
		display: flex;
		justify-content: space-between;
	}
	@media (max-width: 767px) {
		margin-bottom: 160px;
	}
	.c-title-basic {
		margin-bottom: 64px;
		@media (min-width: 1025px) {
			width: 35%;
		}
		@media (max-width: 767px) {
			margin-bottom: 40px;
		}
	}
	.p-value__contents {
		@media (min-width: 1025px) {
			width: 63%;
		}
		.p-value__list {
			display: flex;
			flex-direction: column;
			gap:80px;
			@media (max-width: 767px) {
				gap:32px;
			}
			.p-value__item {
				padding-top: 64px;
				border-top: 1px solid var(--color-border);
				position: relative;
				display: flex;
				flex-wrap: wrap;
				align-items: flex-end;
				@media (max-width: 767px) {
					padding-top: 32px;
					flex-direction: column;
					align-items: flex-start;
				}
				&::after {
					content: "";
					width: 24px;
					height: 2px;
					background-color: var(--color-blue);
					position: absolute;
					top: -2px;
					left: 0;
				}
				.num {
					font-size: calc(20 * var(--rem));
					font-family: var(--font-sans);
					color: var(--color-blue);
					font-style: italic;
					font-weight: 500;
					line-height: 1;
					margin-bottom: 16px;
					width: 100%;
				}
				h3 {
					font-size: calc(48 * var(--rem));
					font-weight: 700;
					line-height: 1.2;
					letter-spacing: 0.06em;
					width: 55%;
					@media (min-width: 1025px) and (max-width: 1280px) {
						font-size: calc(36 * var(--rem));
						width: 55%;
					}
					@media (max-width: 767px) {
						font-size: calc(24 * var(--rem));
						width: 100%;
						padding-left: 5%;
						letter-spacing: 0;
						br {
							display: none;
						}
					}
				}
				.txt {
					font-size: calc(18 * var(--rem));
					font-weight: 500;
					letter-spacing: 0.06em;
					width: 45%;
					@media (min-width: 1025px) and (max-width: 1280px) {
						font-size: calc(16 * var(--rem));
						width: 45%;
						padding-left: 5%;
						br {
							display: none;
						}
					}
					@media (min-width: 768px) and (max-width: 1024px) {
						br {
							display: none;
						}
					}
					@media (max-width: 767px) {
						font-size: calc(15 * var(--rem));
						width: 100%;
						margin-top: 8px;
						padding-left: 5%;
					}
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	.p-vi
----------------------------------------------------------- */
.p-vi {
	margin-bottom: 240px;
	@media (max-width: 767px) {
		margin-bottom: 160px;
	}
	.c-title-basic {
		margin-bottom: 64px;
		@media (max-width: 767px) {
			margin-bottom: 40px;
		}
	}
	.p-vi__logos {
		max-width: 1120px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr;
		grid-column-gap: 40px;
		@media (max-width: 767px) {
			display: flex;
			flex-direction: column;
			gap:40px;
		}
		.p-vi__logo {
			figure {
				text-align: center;
				height: 100%;
				span {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					border: 1px solid var(--color-border);
					padding: 56px 0;
					height: 334px;
					@media (max-width: 767px) {
						padding: 40px 0;
						height: auto;
					}
					img {
						width: 200px;
						@media (max-width: 767px) {
							width: 140px;
						}
					}
				}
				figcaption {
					margin-top: 16px;
					line-height: 1;
				}
			}
		}
	}
	.p-vi__txt {
		max-width: 1120px;
		margin-inline: auto;
		margin-top: 64px;
		@media (max-width: 767px) {
			margin-top: 40px;
		}
	}
}