@charset "UTF-8";
/* -----------------------------------------------------------
	.p-strengths
----------------------------------------------------------- */
.p-strengths {
	background: url(../images/common/bg-ribbon.avif) center bottom no-repeat;
	background-size: 100% auto;
	padding: 240px 0 120px;
	@media (min-width: 768px) and (max-width: 1024px) {
		padding: 160px 0 80px;
	}
	@media (max-width: 767px) {
		padding: 120px 0 80px;
		background-position: center 82%;
	}
	.c-title-basic {
		padding: 0 5.6vw;
		.txt-en {
			>span {
				display: block;
				@media (min-width: 768px) and (max-width: 1024px) {
					display: inline-block;
					&:nth-child(2) {
						padding-left: 0.15em;
					}
				}
			}
		}	
	}
	.p-strengths__contets {
		display: flex;
		flex-direction: column;
		gap:295px;
		@media (min-width: 768px) and (max-width: 1024px) {
			gap: 160px;
		}
		@media (max-width: 767px) {
			gap: 40px;
		}
		.p-strengths__item {
			position: relative;
			&:first-child {
				padding-top: 90px;
				@media (min-width: 768px) and (max-width: 1024px) {
					padding-top: 100px;
				}
				@media (max-width: 767px) {
					padding-top: 16px;
				}
			}
			.p-strengths__img {
				max-width: 540px;
				width: 37.5%;
				position: absolute;
				left: 50%;
				bottom: -40px;
				z-index: 1;
				@media (min-width: 1025px) and (max-width: 1280px) {
					width: 40%;
				}
				@media (min-width: 768px) and (max-width: 1024px) {
					width: 45%;
					bottom: 0;
				}
				@media (max-width: 767px) {
					position: relative;
					left: auto;
					bottom: -24px;
					width: 75%;
					margin: 0 auto;
				}
				img {
					border-radius: 8px;
				}
				span {
					position: absolute;
					bottom: 24px;
					right: 24px;
					color: #fff;
					text-align: right;
					font-family: var(--font-sans);
					font-style: italic;
					font-weight: 500;
					line-height: 1.4;
					text-transform: uppercase;
					@media (max-width: 767px) {
						bottom: 16px;
						right: 16px;
						font-size: 10px;
					}
					em {
						display: block;
						font-size: calc(48 * var(--rem));
						font-weight: 400;
						font-style: italic;
						line-height: 1;
						margin-bottom: 8px;
						@media (min-width: 768px) and (max-width: 1024px) {
							font-size: calc(40 * var(--rem));
						}
						@media (max-width: 767px) {
							font-size: calc(26 * var(--rem));
						}
					}
				}
			}
			.p-strengths__txt {
				background: rgba(255, 255, 255, 0.2);
				backdrop-filter: blur(25px);
				padding: 80px 11.1vw;
				@media (min-width: 768px) and (max-width: 1024px) {
					padding: 64px 5.6vw;
				}
				@media (max-width: 767px) {
					padding: 64px 5.6vw 40px;
				}
				.p-txt__wrapper {
					width: 50%;
					@media (max-width: 767px) {
						width: 100%;
					}
					h3 {
						font-size: calc(32 * var(--rem));
						font-weight: 500;
						letter-spacing: 0.06em;
						margin-bottom: 24px;
						@media (min-width: 768px) and (max-width: 1024px) {
							font-size: calc(24 * var(--rem));
						}
						@media (max-width: 767px) {
							font-size: calc(20 * var(--rem));
							text-align: center;
							margin-bottom: 16px;
						}
					}
					.txt {
						padding-right: 7vw;
						@media (max-width: 767px) {
							padding-right: 0;
						}
					}
				}
			}
			&:nth-child(even) {
				.p-strengths__img {
					left: auto;
					right: 58%;
					@media (min-width: 1025px) and (max-width: 1280px) {
						right: 50%;
					}
					@media (min-width: 768px) and (max-width: 1024px) {
						right: 50%;
					}
					@media (max-width: 767px) {
						right: auto;
					}
					span {
						text-align: left;
						right: auto;
						left: 24px;
						@media (max-width: 767px) {
							right: 16px;
						}
					}
				}
				.p-strengths__txt {
					.p-txt__wrapper {
						margin-left: auto;
						@media (min-width: 1025px) and (max-width: 1280px) {
							padding-left: 5.6vw;
						}
						@media (min-width: 768px) and (max-width: 1024px) {
							padding-left: 5.6vw;
						}
						.txt {
							padding-right: 0;
						}
					}
				}
			}
			&:nth-child(3) {
				display: flex;
				align-items: flex-end;
				padding: 0 5.6vw 0 11.1vw;
				margin-top: -130px;
				@media (min-width: 768px) and (max-width: 1024px) {
					margin-top: 0;
					padding-left: 5.6vw;
				}
				@media (max-width: 767px) {
					flex-direction: column;
					margin-top: 0;
					padding: 0 5.6vw;
				}
				.p-strengths__img { 
					max-width: 640px;
					width: 50%;
					position: static;
					order:2;
					@media (max-width: 767px) {
						order:1;
						width: 100%;
					}
				}
				.p-strengths__txt {
					background: none;
					backdrop-filter: blur(0);
					order:1;
					width: 50%;
					padding: 0;
					@media (max-width: 767px) {
						order:2;
						width: 100%;
						padding-top: 40px;
					}
					.p-txt__wrapper {
						width: 100%;
						.txt-en {
							font-family: var(--font-sans);
							color: var(--color-blue);
							text-transform: uppercase;
							display: flex;
							gap:16px;
							margin-bottom: 80px;
							@media (min-width: 768px) and (max-width: 1024px) {
								margin-bottom: 40px;
							}
							@media (max-width: 767px) {
								justify-content: center;
								margin-bottom: 24px;
							}
							.num {
								font-size: calc(48 * var(--rem));
								line-height: 1;
								font-weight: 400;
								font-style: italic;
								display: inline-block;
								@media (min-width: 768px) and (max-width: 1024px) {
									font-size: calc(40 * var(--rem));
								}
								@media (max-width: 767px) {
									font-size: calc(32 * var(--rem));
								}
							}
							.en {
								display: inline-block;
								background: var(--logo-gradation, linear-gradient(90deg, #54C3F1 0%, #0885CD 100%));
								background-clip: text;
								-webkit-background-clip: text;
								-webkit-text-fill-color: transparent;
								font-weight: 500;
								line-height: 1.4;
								font-style: italic;
							}
						}
					}
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	.p-flow
----------------------------------------------------------- */
.p-flow {
	padding-top: 80px;
	margin-bottom: 240px;
	@media (min-width: 768px) and (max-width: 1024px) {
		padding-top: 64px;
	}
	@media (max-width: 767px) {
		padding-top: 40px;
		margin-bottom: 160px;
	}
	.c-title-basic {
		margin-bottom: 64px;
		@media (max-width: 767px) {
			margin-bottom: 40px;
		}
		.txt-en {
			overflow: hidden;
			>span {
				@media (max-width: 767px) {
					display: block;
				}
				&:last-child {
					span {
						&:nth-child(1) {
							padding-left: 0.25em;
							@media (max-width: 767px) {
								padding-left: 0;
							}
						}
					}
				}
			}
		}
	}
	.p-flow__list {
		display: flex;
		flex-direction: column;
		gap:40px;
		padding-left: 52px;
		position: relative;
		&::before {
			content: "";
			background-color: var(--color-border);
			width: 1px;
			height: calc(85.7% + 104px);
			position: absolute;
			left: 12px;
			top: 0;
		}
		@media (max-width: 767px) {
			gap:40px;
			padding-left: 32px;
			&::before {
				left: 10px;
				height: calc(85.7% + 40px);
			}
		}
		.p-flow__item {
			display: grid;
			grid-template-columns: auto repeat(2, 1fr);
			grid-column-gap: 64px;
			border-bottom: 1px solid var(--color-border);
			padding-bottom: 40px;
			@media (min-width: 768px) and (max-width: 1024px) {
				grid-template-columns: auto 1fr 50%;
				grid-column-gap: 40px;
			}
			@media (max-width: 767px) {
				display: flex;
				flex-direction: column;
				gap:24px;
				padding-bottom: 24px;
			}
			.num {
				font-family: var(--font-sans);
				font-style: italic;
				font-weight: 500;
				line-height: 1;
				font-size: calc(36 * var(--rem));
				position: relative;
				color: var(--color-blue);				
				&::before {
					content: "";
					border-radius: 50%;
					background-color: #fff;
					border: 6px solid var(--color-blue);
					width: 24px;
					aspect-ratio: 1;
					position: absolute;
					top: 0.15em;
					left: -52px;
				}
				@media (min-width: 1025px) {
					grid-area: 1 / 1 / 2 / 2;
					padding-top: 64px;
					&::before {
						top: calc(64px + 0.15em);
					}
				}
				@media (min-width: 768px) and (max-width: 1024px) {
					grid-area: 1 / 1 / 3 / 2;
				}
				@media (max-width: 767px) {
					font-size: calc(32 * var(--rem));
					&::before {
						width: 20px;
						left: -32px;
					}
				}
			}
			.img {
				@media (min-width: 1025px) {
					grid-area: 1 / 3 / 2 / 4;
				}
				@media (min-width: 768px) and (max-width: 1024px) {
					grid-area: 1 / 3 / 2 / 4;
				}
				img {
					border-radius: 8px;
				}
			}
			.p-flow__txt {
				@media (min-width: 1025px) {
					grid-area: 1 / 2 / 2 / 3;
					padding-top: 64px;
				}
				@media (min-width: 768px) and (max-width: 1024px) {
					display: contents;
				}
				h3 {
					font-size: calc(32 * var(--rem));
					font-weight: 500;
					line-height: 1.2;
					letter-spacing: 0.06em;
					margin-bottom: 24px;
					@media (min-width: 768px) and (max-width: 1024px) {
						grid-area: 1 / 2 / 2 / 3;
						align-self: center;
					}
					@media (max-width: 767px) {
						font-size: calc(24 * var(--rem));
						margin-bottom: 8px;
					}
				}
				.txt {
					font-size: calc(18 * var(--rem));
					font-weight: 500;
					@media (min-width: 768px) and (max-width: 1024px) {
						grid-area: 2 / 2 / 3 / 4;
						margin-top: 40px;
						br {
							display: none;
						}
					}
					@media (max-width: 767px) {
						font-size: calc(15 * var(--rem));
					}
				}
			}
		}
	}
}

/* -----------------------------------------------------------
	.p-projects
----------------------------------------------------------- */
.p-projects {
	margin-bottom: 240px;
	@media (max-width: 767px) {
		margin-bottom: 120px;
	}
	.c-title-basic {
		margin-bottom: 80px;
		@media (max-width: 767px) {
			margin-bottom: 40px;
		}
		.txt-en {
			line-height: 1.2;
		}
	}
	.p-projects__contents {
		display: flex;
		flex-direction: column;
		gap:240px;
		@media (max-width: 767px) {
			gap:80px;
		}
		.p-projects__box {
			display: grid;
			grid-template-columns: auto 1fr;
			grid-column-gap: 40px;
			align-items:start;
			@media (max-width: 767px) {
				grid-template-columns: auto;
				grid-column-gap: 0;
				grid-row-gap: 24px;
			}
			.p-projects__title {
				position: sticky;
				top: 135px;
				@media (max-width: 767px) {
					position: static;
					display: flex;
					gap:16px;
					align-items: center;
				}
				span {
					display: block;
					&.num {
						font-family: var(--font-sans);
						color: var(--color-blue);
						font-weight: 500;
						font-style: italic;
						line-height: 1;
						font-size: calc(20 * var(--rem));
						margin-bottom: 16px;
						@media (max-width: 767px) {
							font-size: calc(18 * var(--rem));
							margin-bottom: 0;
						}
					}
					&.txt {
						font-size: calc(40 * var(--rem));
						font-weight: 500;
						line-height: 1;
						@media (min-width: 768px) and (max-width: 1024px) {
							font-size: calc(32 * var(--rem));
						}
						@media (max-width: 767px) {
							font-size: calc(24 * var(--rem));
						}
					}
				}
			}
			.p-projects__list {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-column-gap: 40px;
				grid-row-gap: 80px;
				@media (max-width: 767px) {
					grid-column-gap: 8px;
					grid-row-gap: 32px;
				}
				.p-projects__item {
					figure {
						img {
							border-radius: 8px;
						}
						.p-projects__item-wrapper {
							position: relative;
							.copyright {
								text-align: right;
								font-weight: 500;
								font-size: 10px;
								line-height: 1;
								position: absolute;
								-webkit-text-stroke: 2px #fff;
								paint-order: stroke;
								right: 8px;
								bottom: 8px;
								@media (max-width: 767px) {
									right: 4px;
									bottom: 4px;
								}
							}
						}
						figcaption {
							margin-top: 32px;
							font-size: calc(28 * var(--rem));
							font-weight: 500;
							line-height: 1.3;
							@media (min-width: 768px) and (max-width: 1024px) {
								font-size: calc(24 * var(--rem));
								margin-top: 16px;
							}
							@media (max-width: 767px) {
								font-size: calc(16 * var(--rem));
								margin-top: 8px;
							}
							&.en {
								font-family: var(--font-sans);
								font-size: calc(32 * var(--rem));
								@media (min-width: 768px) and (max-width: 1024px) {
									font-size: calc(26 * var(--rem));
								}
								@media (max-width: 767px) {
									font-size: calc(18 * var(--rem));
								}
							}
						}
					}
				}
			}
		}
	}
	.txt-caution {
		text-align: right;
		margin-top: 80px;
		font-size: 75%;
		@media (max-width: 767px) {
			margin-top: 40px;
		}
	}
}