@charset "UTF-8";
/* message
---------------------------------------- */
.hisory {
	.page-visual {
		position: relative;
		padding: 0;

		.page-visual__title {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding-inline: var(--layout-inline-gutter);
		}

		.page-visual__picture {
			overflow: hidden;

			.page-visual__image {
				width: 100%;
				max-height: 360px;
				object-fit: cover;
			}
		}
	}

	.message {
		.message__panel {
			margin-block: var(--space-40) 0;
			padding-inline: 0;

			.message__body {
				padding-inline: var(--layout-inline-gutter);

				.message__body-title {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: center;
					margin-inline: calc(-1 * var(--layout-inline-gutter));

					.message__body-title-text {
						letter-spacing: -0.05em;
					}
				}

				.message__visual {
					width: 60%;
					min-width: 240px;
					max-width: 320px;
					height: clamp(296px,82.2vw,384px);
					margin-block: var(--space-24) 0;
					border-radius: 16px;
					overflow: hidden;
					filter: drop-shadow(12px 12px 0px rgb(var(--bg-color-primary)));
				}

				.message__signature {
					width: 60%;
					min-width: 244px;
					max-width: 336px;
					margin-block: 28px 0;
					margin-inline: auto;
					padding-inline: 0 var(--space-08);
					font-size: var(--font-size-sm-fix);
					text-align: right;

					.message__company {
						padding-inline: 0 1.4em;
						color: var(--color-dark);
					}

					.message__name {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						margin-block: 8px 0;

						.message__job-role {
							padding-inline: 0 1em;
							font-size: 0.85em;
						}

						.message__signature-image {
							max-width: 144px;
						}
					}
				}
			}
		}
	}
}

@media (width >= 920px) {
	.hisory {
		.message {
			.message__panel {
				margin-block: var(--space-24) 0;

				.message__body {
					display: grid;
					grid-template-columns: 1fr 1.8fr;
					grid-template-rows: auto 1fr;
					grid-template-areas:
					"message-media message-title"
					"message-media message__content";
					align-items: start;
					gap: 0 24px;

					.message__body-title {
						padding-block: var(--space-16) 0;
						grid-area: message-title;
						justify-content: flex-start;
						margin-inline: 0;
						text-align: left;
					}

					.message__media {
						grid-area:  message-media;

						.message__visual {
							grid-area: message-visual;
							width: calc(100% - var(--space-20));
							max-width: none;
							height: auto;
							margin-block: 0;
							margin-inline: 0 auto;
						}
					}

					.message__content {
						grid-area: message__content;
						width: 100%;
					}

					.message__signature {
						width: calc(100% - var(--space-20));
						margin-block: 24px 0;
					}
				}
			}
		}
	}
}

/* timeline
---------------------------------------- */
.timeline {
	.timeline__content {
		padding-block: 0 var(--layout-block-end);
	}

	.timeline__main-image {
		display: block;
		margin-block: var(--space-28) 0;
	}

	.timeline__inner {
		position: relative;
		margin-inline: var(--layout-inline-gutter);
		padding-inline: 1.5em;
		font-weight: 600;
		line-height: 1.6;

		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 0em;
			bottom: 0;
			width: 1px;
			background: rgb(var(--color-primary) / 50%);
		}

		.timeline__heading {
			margin-inline: -0.1em 0;
			padding-block: var(--space-24) 0;
			color: rgb(var(--color-dark) / 20%);
			font-weight: 600;
			font-size: var(--font-size-lg);
		}

		.timeline__bg-1950 {
			position: relative;

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				background-image: url(../../images/common/illust/illust-niwabito.webp);
				background-position: right 88px;
				background-repeat: no-repeat;
				background-size: clamp(120px,33.3vw,160px);
				opacity: 0.8;
			}
		}

		.timeline__item {
			margin-block: var(--space-12) var(--space-32);

			.timeline__year {
				display: flex;
				align-items: baseline;
				gap: 0.3em;
				font-size: var(--font-size-reg-fixd);
				line-height: 1.2;

				&::before {
					content: "";
					flex-shrink: 0;
					align-self: center;
					transform: translateY(0.1em);
					width: 10px;
					height: 10px;
					margin-inline: calc(-12px - 1em) 0.5em;
					background: rgba(var(--color-primary));
					border-radius: 50%;
				}

				&.timeline__year--major {
					font-size: var(--font-size-md);

					&::before {
						width: 14px;
						height: 14px;
						transform: translateY(0.1em);
						margin-inline: calc(-17px - calc(var(--font-size-md))/2) 0.2em;
					}
				}
			}
		}

		.timeline__detail {
			padding-block: 1em 0;

			.timeline__event {
				font-family: var(--font-family-sans);

				&:nth-child(n + 2 of .timeline__event) {
					padding-block: 1em 0;
				}

				&.timeline__event--important {
					font-size: 1.2em;
				}
			}

			.timeline__figure {
				.timeline__image {
					border-radius: 16px;

					&.timeline__image--visual {
						width: 100%;
						max-width: 360px;
						margin-block: var(--space-08) var(--space-08);
					}

					&.item__image--xs {
						width: clamp(80px,22.2vw,96px);
					}

					&.item__image--sm {
						width: clamp(96px,26.7vw,132px);
					}

					&.item__image--reg {
						width: clamp(144px,40vw,204px);
					}

					&.item__image--md {
						width: clamp(168px,46.7vw,224px);
					}

					&.item__image--lg {
						width: clamp(192px,53.3vw,248px);
					}
				}

				&.timeline__100th {
					position: relative;
					max-width: 360px;
					padding-block: 60px 0;

					.timeline__100th--message {
						position: absolute;
						right: -36px;
						top: 4px;
						width: 160px;
					}
				}
			}

			&.timeline__row {
				.timeline__event {
					display: inline-block;
					margin-block: 0 var(--space-08);
					padding-inline: 0 1em;
				}

				.timeline__figure {
					display: inline-block;

					.timeline__image {
						display: inline;
						margin-block: 0 var(--space-08);
						vertical-align: top;
					}
				}

				& + .timeline__detail {
					margin-block: var(--space-16) 0;
				}
			}
		}

		.timeline__conclusion {
			font-size: 1.3em;
		}
	}
}

@media (width >= 811px) {
	.timeline {
		.timeline__inner {
			position: relative;
			left: 160px;
			width: calc(100% - 160px - calc(var(--layout-inline-gutter) + var(--space-20) + 1.5em) * 2);

			.timeline__detail {
				&:first-of-type {
					padding-block: 0.1em 0;
				}
			}

			.timeline__year--major {
				&:first-of-type {
					& + [class="p-timeline__detail"] {
						[class="p-timeline__event"] {
							padding-block: 0.2em 0;
						}
					}
				}
			}


			.timeline__bg-1950 {
				&::before {
					background-position: clamp(240px,29.6vw,320px) top;
				}
			}
		}

		.timeline__item {
			position: relative;

			.timeline__year {
				justify-content: flex-end;
				position: absolute;
				left: calc(-120px - 14px - 1em);
				top: 0;
				width: 120px;
				text-align: right;

				&::before {
					position: absolute;
					right: -20px;
					left: auto;
					margin-inline: 0;
				}

				&.timeline__year--major {
					top: -0.15em;

					&::before {
						left: calc(120px + 14px + 1em);
					}
				}
			}
		}
	}
}

@media (width >= 1000px) {
	#timeline {
		.timeline__detail {
			&.timeline__grid {
				display: grid;
				grid-template-columns: 1.2fr 1fr;
				gap: 24px;

				.timeline__figure {
					width: 100%;
					margin-block: 0;

					&.timeline__100th {
						margin-block: -60px 0;
					}
				}
			}
		}
	}
}

/* company
---------------------------------------- */
.company {
	padding-block: var(--layout-block-start) var(--layout-block-end);
	padding-inline: var(--layout-inline-gutter);
	background-color: rgb(var(--bg-color-primary));

	.company__content {
		padding-block: 0;
	}

	.company__title {
		color: rgb(var(--color-tertiary) / 80%);
		text-align: right;

		.company__sub-title {
			color: rgb(var(--color-tertiary) / 80%);
			margin-block: -0.4em 0;
			font-size: 3em;
		}
	}

	.company__inner {
		padding-block: var(--space-40) 0;

		.company__panel {
			padding-inline: 0;

			.company__list {
				max-width: 800px;
				margin-inline: auto;

				.company__item:first-of-type {
					padding-block: var(--space-24) var(--space-08);
				}
			}

			.access__content {
				padding-block: var(--space-80) 0;

				.access__title {
					font-size: var(--font-size-md);
					text-align: center;
				}

				.access__map {
					padding-block: var(--space-16) 0;

					.access__map-iframe {
						aspect-ratio: 4/3;
					}

					.access__map-btn {
						padding-block: var(--space-16) 0;
					}
				}

				.access__info {
					.access__info-title {
						padding-block: var(--space-24) 0;
						font-size: var(--font-size-reg);

						.access__info-icon {
							display: inline;
							width: 1.45em;
							padding-inline: 0 0.25em;
							vertical-align: sub;
						}
					}

					.access__list {
						.access__item:first-of-type {
							padding-block: var(--space-08);
						}

						.access__step-list {
							.access__step-item {
								padding-inline: 1em 0;
								text-indent: -1.2em;
							}
						}
					}
				}
			}
		}
	}
}

@media (width >= 520px) {
	#company {
		.company__grid {
			display: grid;
			grid-template-columns: 8em 1fr;
		}
	}
}

@media (width >= 960px) {
	#company {
		.access__grid {
			display: grid;
			grid-template-areas:
			"access-title access-title"
			"access-map access-info";
			grid-template-columns: 1fr 1fr;
			column-gap: 36px;

			.access__title {
				grid-area: access-title;
			}

			.access__map-iframe {
				grid-area: access-map;
			}

			.access__info {
				grid-area: access-info;

				.access__info-title:first-of-type {
					padding-block: var(--space-20) 0;
				}
			}
		}
	}
}