@charset "UTF-8";

.edit-area.achievements {
	padding-top: 6.5rem;
	padding-bottom: 11rem;

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

	.common-list.archive-category {
		margin-bottom: 10rem;
		display: flex;
		flex-wrap: wrap;
		gap: 3rem;

		@media screen and (max-width: 767px) {
			margin-bottom: 4rem;
			gap: 1rem;
		}

		& li {
			background-color: #0d2d74;

			& a {
				padding: 0.8rem 2rem;
				box-sizing: border-box;
				font-style: normal;
				font-weight: 700;
				font-size: 3rem;
				line-height: 1;
				letter-spacing: 0.1em;
				color: #ffffff;

				@media screen and (max-width: 767px) {
					font-size: 1.6rem;
					padding: 0.4rem 1rem 0.5rem;
				}
			}
		}
	}
}

.common-list.achievements {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 5rem 4rem;

	@media screen and (max-width: 767px) {
		gap: 2rem;
	}

	.card {
		width: 37.3rem;
		/* padding-bottom: 3rem; */
		position: relative;

		@media screen and (max-width: 767px) {
			width: 100%;
		}
		&::after {
			content: "";
			position: absolute;
			right: 1rem;
			top: 28rem;
			width: 3rem;
			height: 3rem;
			border-radius: 3rem;
			overflow: hidden;
			background: #0d2d74 url("../../img/archive/achievements/post-btn.png") no-repeat center / 100% auto;
		}
		& a {
			width: 100%;
		}

		.thumbnail {
			width: 100%;
			margin-bottom: 1.2rem;
			height: 32.1rem;
			overflow: hidden;
			border-radius: 1.4rem;
			@media screen and (max-width: 767px) {
				margin-bottom: 1rem;
			}

			& img {
				width: 100%;
				height: 100%;
				vertical-align: top;
				object-fit: cover;
			}
		}

		.list-category {
			display: flex;
			flex-wrap: wrap;
			gap: 1rem;
			margin-bottom: 1.2rem;

			& span {
				padding: 0.6rem 1.4rem;
				box-sizing: border-box;
				font-style: normal;
				font-weight: 700;
				font-size: 1.8rem;
				line-height: 1;
				letter-spacing: 0.1em;
				color: #ffffff;
				border-radius: 10rem;

				@media screen and (max-width: 767px) {
					font-size: 1.4rem;
				}
			}
		}

		.title {
			font-style: normal;
			font-weight: 700;
			font-size: 2rem;
			line-height: 120%;
			letter-spacing: 0.1em;
			font-feature-settings: "palt" on;
			color: #000000;
			margin-bottom: 1.2rem;

			@media screen and (max-width: 767px) {
				font-size: 1.8rem;
				margin-bottom: 1rem;
			}
		}

		.duration {
			font-style: normal;
			font-weight: 500;
			font-size: 1.6rem;
			line-height: 1;
			letter-spacing: 0.1em;
			color: #0d2d74;

			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
			}
		}
		&:hover {
			.thumbnail {
				& img {
					transform: scale(1.05);
					transition: all 0.3s ease-in-out;
				}
			}
		}
	}
}

#area {
	width: 100%;
	padding-bottom: 11rem;

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

	.blue-title {
		font-style: normal;
		font-weight: 700;
		font-size: 3rem;
		line-height: 1;
		letter-spacing: 0.06em;
		font-feature-settings: "palt" on;
		color: #ffffff;
		padding: 2rem 3rem;
		box-sizing: border-box;
		border-radius: 3.5rem;
		background-color: #0d2d74;
		margin-bottom: 2.6rem;
		@media screen and (max-width: 767px) {
			font-size: 1.8rem;
			padding: 2rem;
			margin-bottom: 2rem;
		}
	}

	.sub-title {
		font-style: normal;
		font-weight: 400;
		font-size: 2.4rem;
		line-height: 192%;
		letter-spacing: 0.06em;
		font-feature-settings: "palt" on;
		color: #000000;
		padding-bottom: 5rem;
		border-bottom: #acacac 1px solid;
		@media screen and (max-width: 767px) {
			padding-bottom: 2rem;
			font-size: 1.4rem;
		}
	}

	.area-list {
		margin-bottom: 10rem;
		@media screen and (max-width: 767px) {
			margin-bottom: 6rem;
		}
		.area-block {
			border-bottom: #acacac 1px solid;
			padding-top: 4rem;
			padding-bottom: 4rem;
			cursor: pointer;
			@media screen and (max-width: 767px) {
				padding-top: 2rem;
				padding-bottom: 2rem;
			}
			.title-flex {
				display: flex;
				justify-content: space-between;
				.title {
					font-style: normal;
					font-weight: 700;
					font-size: 2.4rem;
					line-height: 1;
					letter-spacing: 0.1em;
					color: #0d2d74;
					flex: 1;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
					}
				}
				.button {
					margin: 0 1.2rem;
					width: 2.8rem;
					position: relative;
					@media screen and (max-width: 767px) {
						margin: 0 1rem;
						width: 1.8rem;
					}
					&::before {
						content: "";
						position: absolute;
						width: 2.8rem;
						height: 0.5rem;
						background: #0d2d74;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						@media screen and (max-width: 767px) {
							width: 1.8rem;
							height: 0.35rem;
						}
					}
					&::after {
						content: "";
						position: absolute;
						width: 2.8rem;
						height: 0.5rem;
						background: #0d2d74;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%) rotate(90deg);
						transition: all 0.3s ease-in;
						@media screen and (max-width: 767px) {
							width: 1.8rem;
							height: 0.35rem;
						}
					}
				}
			}
			.info-wrap {
				display: grid;
				grid-template-rows: 0fr;
				transition: grid-template-rows 0.3s ease-in;
				.info {
					margin-top: 0;
					font-style: normal;
					font-weight: 400;
					font-size: 1.8rem;
					line-height: 156%;
					letter-spacing: 0.1em;
					color: #000000;
					overflow: hidden;
					min-height: 0;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
					}
				}
			}
		}
		.area-block.open {
			.title-flex {
				.button {
					&::after {
						transform: translate(-50%, -50%);
					}
				}
			}
			.info-wrap {
				margin-top: 2rem;
				grid-template-rows: 1fr;
			}
		}
	}
	.blue-card {
		width: 100%;
		background-color: #e2f3ff;
		padding: 6.5rem 9.5rem;
		box-sizing: border-box;
		border-radius: 2rem;
		@media screen and (max-width: 767px) {
			padding: 3rem 2rem;
		}
		.card-title {
			font-style: normal;
			font-weight: 700;
			font-size: 3.6rem;
			line-height: 1;
			letter-spacing: 0.06em;
			font-feature-settings: "palt" on;
			color: #0d2d74;
			margin: 0 auto 3.7rem;
			position: relative;
			display: table;
			padding: 0 3.5rem;
			box-sizing: border-box;
			@media screen and (max-width: 767px) {
				font-size: 1.8rem;
				margin: 0 auto 2rem;
				padding: 0 2.5rem;
				line-height: 1.5;
			}
			&::before {
				content: "";
				position: absolute;
				left: 0;
				bottom: 2px;
				width: 2.5rem;
				height: 2.5rem;
				background: #fcba06;
				@media screen and (max-width: 767px) {
					width: 1.5rem;
					height: 1.5rem;
					bottom: unset;
					top: 50%;
					transform: translateY(-50%);
				}
			}
			&::after {
				content: "";
				position: absolute;
				right: 0;
				bottom: 2px;
				width: 2.5rem;
				height: 2.5rem;
				background: #fcba06;
				@media screen and (max-width: 767px) {
					width: 1.5rem;
					height: 1.5rem;
					bottom: unset;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
		.card-list {
			margin-bottom: 5.9rem;
			@media screen and (max-width: 767px) {
				margin-bottom: 3rem;
			}
			& li {
				padding-left: 2.3rem;
				margin-bottom: 1.2rem;
				position: relative;
				font-style: normal;
				font-weight: 500;
				font-size: 2rem;
				line-height: 170%;
				letter-spacing: 0.06em;
				font-feature-settings: "palt" on;
				color: #000000;
				@media screen and (max-width: 767px) {
					font-size: 1.4rem;
					margin-bottom: 1rem;
					padding-left: 1.6rem;
				}
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0.9rem;
					width: 1.4rem;
					height: 1.4rem;
					border-radius: 1.4rem;
					background-color: #fcba06;
					@media screen and (max-width: 767px) {
						width: 0.8rem;
						height: 0.8rem;
						border-radius: 0.8rem;
					}
				}
				& span {
					font-style: normal;
					font-weight: 700;
					font-size: 2.6rem;
					line-height: 1.5;
					letter-spacing: 0.06em;
					font-feature-settings: "palt" on;
					color: #0d2d74;
					@media screen and (max-width: 767px) {
						font-size: 1.6rem;
					}
				}
			}
		}
		& p {
			font-style: normal;
			font-weight: 700;
			font-size: 2.4rem;
			line-height: 1;
			letter-spacing: 0.06em;
			font-feature-settings: "palt" on;
			color: #0d2d74;
			@media screen and (max-width: 767px) {
				font-size: 1.4rem;
				line-height: 1.5;
			}
			& span {
				position: relative;
				&::after {
					content: "";
					position: absolute;
					top: -0.6rem;
					width: 0.5rem;
					height: 0.5rem;
					border-radius: 0.5rem;
					left: 50%;
					transform: translateX(-50%);
					background-color: #fcba06;
				}
			}
		}
	}
}