@charset "UTF-8";
/* -----------------------------------------------------------
	.p-equipment__imgs
----------------------------------------------------------- */
.p-equipment__imgs {
	margin: 160px auto;
	margin-inline: auto;
	@media (min-width: 1025px) {
		width: calc(100% - 80px);
	}
	@media (min-width: 768px) and (max-width: 1024px) {
		width: 92%;
		margin: 80px auto 160px;
	}
	@media (max-width: 767px) {
		width: 89.6%;
		margin: 40px auto 80px;
	}
	.p-equipment__imgs-list {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 2.9vw;
		@media (max-width: 767px) {
			flex-wrap: wrap;
			gap:24px 4%;
		}
		.p-equipment__imgs-item {
			&:nth-child(1),
			&:nth-child(4) {
				flex: 1 1 auto;
				@media (max-width: 767px) {
					width: 33%;
				}
			}
			&:nth-child(2),
			&:nth-child(3) {
				flex: 2.085 1 auto;
				@media (max-width: 767px) {
					width: 63%;
				}
			}
			&:nth-child(even) {
				align-self: flex-start;
			}
			&:nth-child(1) {
				padding-bottom: 40px;
				@media (max-width: 767px) {
					align-self: flex-start;
					padding-bottom: 0;
				}
				figure {
					animation-delay: 0.3s;
				}
			}
			&:nth-child(2) {
				@media (max-width: 767px) {
					align-self: flex-end;
					padding-top: 40px;
				}
			}
			&:nth-child(3) {
				padding-top: 88px;
				@media (max-width: 767px) {
					align-self: flex-start;
					padding-top: 0;
				}
				figure {
					animation-delay: 0.5s;
				}
			}
			&:nth-child(4) {
				@media (max-width: 767px) {
					align-self: flex-end;
					padding-top: 80px;
				}
				figure {
					animation-delay: 0.6s;
				}
			}
			figure {
				animation: floating-y 2s ease-in-out infinite alternate-reverse;
				img {
					border-radius: 8px;
				}
				figcaption {
					text-align: right;
					font-size: 75%;
					line-height: 1.3;
					margin-top: 8px;
				}
			}
		}
	}
}
@keyframes floating-y {
	0% {
		transform: translateY(-3%);
	}
	100% {
		transform: translateY(3%);
	}
}

/* -----------------------------------------------------------
	.p-equipment
----------------------------------------------------------- */
.p-equipment {
	margin-bottom: 240px;
	@media (max-width: 767px) {
		margin-bottom: 160px;
	}
	.p-contents-link {
		margin-bottom: 160px;
		@media (max-width: 767px) {
			margin-bottom: 80px;
		}
		.p-contents-link__list {
			border-top: 1px solid var(--color-border);
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			@media (max-width: 767px) {
				grid-template-columns: 1fr;
				grid-template-row: auto;
			}
			.p-contents-link__item {
				border-bottom: 1px solid var(--color-border);
				&:not(:nth-child(3n+1)) {
					border-left: 1px dashed var(--color-border);
					@media (max-width: 767px) {
						border-left: none;
						border-top: 1px dashed var(--color-border);
					}
				}
				a {
					display: grid;
					grid-template-columns: auto 1fr 24px;
					grid-column-gap: 6px;
					padding: 20px 16px;
					align-items: center;
					position: relative;
					&::after {
						content: "";
						width: 0px;
						height: 1px;
						background-color: var(--color-blue);
						position: absolute;
						bottom: 0;
						left: 0;
						transition: 0.3s;
					}
					.num {
						font-family: var(--font-sans);
						color: var(--color-blue);
						font-weight: 500;
						line-height: 1;
						font-style: italic;
						font-size: 87.5%;
					}
					.txt {
						font-weight: 500;
						line-height: 1;
					}
					.icon {
						position: relative;
						width: 24px;
						aspect-ratio: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						img {
							position: relative;
							z-index: 1;
							width: 14px;
							aspect-ratio: 1;
							transform: rotate(90deg);
						}
						&::before {
							content: "";
							width: 100%;
							height: 100%;
							border-radius: 50%;
							background: linear-gradient(90deg, #54C3F1 0%, #0885CD 100%);
							background-color: #fff;
							position: absolute;
							inset: 0;
							margin: auto;
							transition: transform .3s ease;
						}
					}
					@media (hover: hover) {
						&:hover {
							&::after {
								width: 100%;
							}
							.icon {
								&::before {
									transform: scale(1.2);
								}
							}
						}
					}
				}
			}
		}
	}
	.p-equipment__item {
		display: flex;
		flex-direction: column;
		gap:240px;
		@media (max-width: 767px) {
			gap:80px;
		}
		.p-equipment__block {
			scroll-margin-top: 130px;
			@media (max-width: 767px) {
				scroll-margin-top: 64px;
			}
			h3 {
				@media (max-width: 767px) {
					display: flex;
					gap:16px;
					align-items: center;
					margin-bottom: 32px;
				}
				span {
					display: block;
					&.num {
						font-family: var(--font-sans);
						color: var(--color-blue);
						font-style: italic;
						font-weight: 500;
						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-equipment__table-wrap {
				@media (max-width: 767px) {
					overflow-x: auto;
					width: 105.2%;
				}
			}
			.p-equipment__table {
				width: 100%;
				@media (max-width: 767px) {
					display: grid;
					grid-template-columns: 10em 1fr;
				}
				thead {
					@media (max-width: 767px) {
						height: 100%;
						border-top: 1px solid var(--color-border);
						border-left: 1px solid var(--color-border);
						
					}
					tr {
						@media (max-width: 767px) {
							display: grid;
							grid-template-columns: 1fr;
							grid-template-rows: repeat(6, 1fr);
							height: 100%;
						}
					}
					th {
						font-weight: 700;
						line-height: 1.4;
						border-bottom: 1px solid var(--color-border);
						text-align: center;
						@media (min-width: 768px){
							position: sticky;
							top:72px;
							z-index:5;
							background: #F8F9FA;
							padding: 64px 7px 7px;
						}
						@media (max-width: 767px) {
							display: block;
							padding: 16px 4px;
							span {
								font-size: 75%;
							}
						}
					}
				}
				tbody {
					border-left: 1px solid var(--color-border);
					border-right: 1px solid var(--color-border);
					@media (max-width: 767px) {
						border-left: none;
						border-top: 1px solid var(--color-border);
						display: grid;
						grid-template-columns: repeat(21, 1fr);
						height: 100%;
					}
					tr {
						@media (max-width: 767px) {
							display: grid;
							grid-template-columns: 1fr;
							grid-template-rows: repeat(6, 1fr);
							height: 100%;
						}
						td {
							border-left: 1px solid var(--color-border);
							border-bottom: 1px solid var(--color-border);
							padding: 24px;
							line-height: 1.4;
							@media (max-width: 767px) {
								display: block;
								padding: 16px;
								width: max-content;
								min-width: 100%;
							}
						}
					}
				}
			}
		}
	}
}