@charset "UTF-8";

.note {
	font-style: normal;
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1;
	letter-spacing: 0.08em;
	font-feature-settings: "palt" on;
	color: #0d2d74;
	position: relative;
	right: -4rem;
	bottom: -7rem;
	text-align: right;
	margin-top: 0;
	@media screen and (max-width: 767px) {
		font-size: 1.2rem;
		right: -3rem;
		bottom: -5rem;
	}
}

#story {
	width: 100%;
	padding-top: 11rem;
	padding-bottom: 11rem;
	@media screen and (max-width: 767px) {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
	.inner {
		position: relative;
		display: flex;
		align-items: flex-start;
		gap: 11rem;
		@media screen and (max-width: 767px) {
			display: block;
		}
		.tab-button-container {
			width: 28.1rem;
			background-color: #e2f3ff;
			padding: 3rem 4.2rem;
			box-sizing: border-box;
			position: sticky;
			left: 0;
			top: 30rem;
			flex-shrink: 0;
			@media screen and (max-width: 767px) {
				width: 100%;
				position: static;
				margin-bottom: 4rem;
				padding: 2.4rem 3.4rem;
			}
			.tab-button-list {
				display: flex;
				flex-direction: column;
				gap: 3rem;
				@media screen and (max-width: 767px) {
					gap: 2rem;
				}
				.tab-button {
					position: relative;
					cursor: pointer;
					.title {
						margin-bottom: 0.9rem;
						font-style: normal;
						font-weight: 700;
						font-size: 2.2rem;
						line-height: 1;
						letter-spacing: 0.08em;
						font-feature-settings: "palt" on;
						color: #989898;
						@media screen and (max-width: 767px) {
							font-size: 1.6rem;
						}
					}
					.description {
						font-style: normal;
						font-weight: 700;
						font-size: 2rem;
						line-height: 1;
						letter-spacing: 0.08em;
						font-feature-settings: "palt" on;
						color: #989898;
						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
						}
					}
				}
				.tab-button.active {
					&::before {
						content: "";
						position: absolute;
						width: 0.835rem;
						height: 100%;
						background-color: #336ceb;
						left: -1.67rem;
						top: 0;
						@media screen and (max-width: 767px) {
							width: 0.6rem;
						}
					}
					.title {
						color: #000000;
					}
					.description {
						color: #0d2d74;
					}
				}
			}
		}
		.story-content-wrapper {
			flex: 1;
			width: 100%;
			.main-title {
				margin-bottom: 1.6rem;
				font-style: normal;
				font-weight: 700;
				font-size: 3rem;
				line-height: 1;
				letter-spacing: 0.08em;
				font-feature-settings: "palt" on;
				color: #000000;
				@media screen and (max-width: 767px) {
					font-size: 1.8rem;
					margin-bottom: 1rem;
				}
			}
			.type-description {
				margin-bottom: 5rem;
				font-style: normal;
				font-weight: 700;
				font-size: 2.4rem;
				line-height: 1;
				letter-spacing: 0.08em;
				font-feature-settings: "palt" on;
				color: #0d2d74;
				@media screen and (max-width: 767px) {
					margin-bottom: 2rem;
					font-size: 1.6rem;
				}
			}
			.main-img {
				margin-bottom: 7rem;
				width: 100%;
				@media screen and (max-width: 767px) {
					margin-bottom: 2rem;
				}
				& img {
					width: 100%;
				}
			}
			.large-text {
				font-style: normal;
				font-weight: 700;
				font-size: 3.2rem;
				line-height: 1;
				letter-spacing: 0.08em;
				font-feature-settings: "palt" on;
				color: #0d2d74;
				padding-bottom: 2rem;
				border-bottom: 0.2rem solid #0d2d74;
				margin-bottom: 5rem;
				@media screen and (max-width: 767px) {
					font-size: 2rem;
					line-height: 1.5;
					padding-bottom: 2rem;
					margin-bottom: 2rem;
				}
			}
			.common-blocks {
				display: flex;
				flex-direction: column;
				gap: 5rem;
				@media screen and (max-width: 767px) {
					gap: 2rem;
				}
				.block {
					padding-bottom: 5rem;
					border-bottom: 0.2rem solid #0d2d74;
					@media screen and (max-width: 767px) {
						padding-bottom: 2rem;
					}
					.story-title {
						margin-bottom: 3rem;
						font-style: normal;
						font-weight: 700;
						font-size: 2.8rem;
						line-height: 1;
						letter-spacing: 0.08em;
						color: #0d2d74;
						background: #e2f3ff;
						display: inline-block;
						padding: 0.6rem 1.4rem 0.6rem 2.4rem;
						box-sizing: border-box;
						position: relative;
						@media screen and (max-width: 767px) {
							margin-bottom: 2rem;
							font-size: 1.8rem;
							padding: 0.6rem 1.4rem 0.6rem 2rem;
						}
						&::before {
							content: "";
							position: absolute;
							left: 0;
							top: 0;
							height: 100%;
							width: 0.8rem;
							background-color: #0d2d74;
							@media screen and (max-width: 767px) {
								width: 0.6rem;
							}
						}
					}
					.sub-title {
						margin-bottom: 1.4rem;
						font-style: normal;
						font-weight: 700;
						font-size: 2rem;
						line-height: 140%;
						letter-spacing: 0.08em;
						font-feature-settings: "palt" on;
						color: #0d2d74;
						@media screen and (max-width: 767px) {
							font-size: 1.6rem;
						}
					}
					.paragraph {
						font-style: normal;
						font-weight: 400;
						font-size: 1.6rem;
						line-height: 175%;
						letter-spacing: 0.08em;
						font-feature-settings: "palt" on;
						color: #000000;
						@media screen and (max-width: 767px) {
							font-size: 1.4rem;
						}
						& span {
							color: #f05e4b;
						}
					}
					.flex-imgs {
						display: flex;
						gap: 6rem;

						overflow: hidden;
						@media screen and (max-width: 767px) {
							flex-direction: column;
							gap: 2rem;
						}
						.img-container {
							width: 100%;
							height: 32rem;
							object-fit: cover;
							object-position: center;
							flex: 1;
							& img {
								width: 100%;
								vertical-align: top;
							}
						}
					}
				}
			}
		}
	}
	.main-contents {
		display: none;
	}
	.main-contents.active {
		display: block;
	}
	.gallery-flex-imgs {
		display: flex;
		flex-wrap: wrap;
		gap: 6rem;
		@media screen and (max-width: 767px) {
			gap: 2rem;
		}
		.img-container {
			width: calc(50% - 3rem);
			height: 32rem;
			@media screen and (max-width: 767px) {
				width: 100%;
			}
			& img {
				width: 100%;
				height: 100%;
				vertical-align: top;
				object-fit: cover;
				object-position: center;
			}
		}
	}
}