@charset "UTF-8";
#about .aboutSub .aboutSub-inner .titleWrap {
	display: flex;
	align-items: center;
	gap: 1vw;
}
#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner {
	width: 100%;
	background: linear-gradient(to bottom, #d9e3ef, #ffffff);
	padding: 4vh;
	margin-top: var(--spacing-base);
}
@media (max-width: 430px) {
	#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner {
		padding: 4vh 3vw;
	}
}
#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 4vw;
	grid-row-gap: 3vh;
}
#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .grid-01 {
	grid-area: 1/1/2/2;
}
#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .grid-02 {
	grid-area: 1/2/2/3;
}
#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .grid-03 {
	grid-area: 2/1/3/2;
}
#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .grid-04 {
	grid-area: 2/2/3/3;
}
#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .grid-05 {
	grid-area: 3/1/4/3;
}
@media (max-width: 430px) {
	#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-column-gap: 0px;
		grid-row-gap: 20px;
	}
	#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .grid-01 {
		grid-area: 1/1/2/2;
	}
	#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .grid-02 {
		grid-area: 2/1/3/2;
	}
	#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .grid-03 {
		grid-area: 4/1/5/2;
	}
	#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .grid-04 {
		grid-area: 3/1/4/2;
	}
	#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .grid-05 {
		grid-area: 5/1/6/2;
	}
}
#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .gridImag {
	width: 100%;
}
#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .gridImag.rightImg {
	height: auto;
}
@media (max-width: 430px) {
	#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .gridImag {
		width: 100%;
		height: auto;
	}
}
#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .textShaping p {
	line-height: 200%;
	margin-bottom: 2em;
}
#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .textShaping p:last-child {
	margin-bottom: 0;
}
#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .textShaping .annotation {
	font-size: 10px;
	line-height: 180%;
}
#about .aboutSub .aboutSub-inner .aboutSub-main .main-inner .textWrap .textShaping .representative {
	text-align: right;
}
#about .timelineSub {
	background-color: var(--color-background-2);
	position: relative;
}
#about .timelineSub .clipPath {
	position: absolute;
	top: -1px;
	width: 100%;
	height: 10vh;
	background-color: white; /* 背景色 */
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
	clip-path: polygon(0% 0%, 100% 0%, 0% 100%); /* 三角形 */
}
@media (max-width: 430px) {
	#about .timelineSub .clipPath {
		-webkit-clip-path: polygon(0% 0%, 125% 0%, 0% 100%);
		clip-path: polygon(0% 0%, 125% 0%, 0% 100%);
	}
}
#about .timelineSub .aboutSub-inner .secTitleWrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
@media (max-width: 430px) {
	#about .timelineSub .aboutSub-inner .secTitleWrap {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		width: 95%;
		margin: 0 auto;
	}
}
#about .timelineSub .aboutSub-inner .secTitleWrap .secTitle {
	font-size: var(--font-size-secTitle);
	z-index: 1;
}
#about .timelineSub .aboutSub-inner .secTitleWrap .secTitle-img {
	height: 10vh;
	z-index: 1;
}
@media (max-width: 430px) {
	#about .timelineSub .aboutSub-inner .secTitleWrap .secTitle-img {
		height: 5vh;
		align-self: flex-end;
	}
}
#about .timelineSub .aboutSub-inner .aboutSub-main {
	padding-top: var(--spacing-big);
	color: white;
}
#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents {
	display: grid;
	grid-template-columns: 15% 35% 1fr;
	grid-template-rows: 1fr;
	align-items: center;
	padding-bottom: var(--spacing-lg);
}
@media (max-width: 430px) {
	#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 50% 100px;
	}
}
#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents:last-child {
	padding-bottom: 0;
}
#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .year {
	font-size: var(--font-size-lg);
	font-family: var(--font-family-2);
	text-align: center;
	position: relative;
}
@media (max-width: 430px) {
	#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .year {
		text-align: left;
		margin-bottom: 10px;
	}
	#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .year p {
		padding-left: 10px;
	}
}
#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .year:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
	width: 2.4vw;
	height: 2.4vw;
	border-radius: 50%;
	background-color: var(--color-secondary);
	z-index: 5;
}
@media (max-width: 430px) {
	#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .year:before {
		left: -9dvw;
		width: 6dvw;
		height: 6dvw;
	}
}
#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .year:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0.4dvw;
	translate: 0 -50%;
	width: 1.6vw;
	height: 1.6vw;
	border-radius: 50%;
	border: 1px solid white;
	z-index: 5;
}
@media (max-width: 430px) {
	#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .year:after {
		left: -8vw;
		width: 4vw;
		height: 4vw;
	}
}
@media (max-width: 430px) {
	#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .year {
		margin-left: 12vw;
		width: calc(100% - 12vw);
	}
}
#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .img {
	aspect-ratio: 362/181;
	width: 100%;
}
@media (max-width: 430px) {
	#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .img {
		aspect-ratio: 2/1;
		max-width: 290px;
		margin-left: 12vw;
		width: calc(100% - 12vw);
	}
	#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .img img {
		padding-left: 10px;
	}
}
#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .line {
	position: absolute;
	left: 1.2vw;
	top: 50%; /* 小さい円の下からスタート */
	translate: -50% 0;
	width: 1px;
	height: 0;
	border: 1px solid var(--color-background-3);
	opacity: 0;
	z-index: 5;
	transition:
		opacity 1s ease,
		height 1s ease;
}
@media (max-width: 430px) {
	#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .line {
		left: -6vw;
	}
}
#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .text {
	font-size: var(--font-size-sm);
}
@media (max-width: 430px) {
	#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .text {
		margin: 15px 0;
	}
}
#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .text p {
	width: 60%;
	margin-left: 8vw;
}
@media (max-width: 430px) {
	#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents .text p {
		margin-left: 12vw;
		width: calc(100% - 12vw - 10px);
		padding-left: 10px;
	}
}
#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents.active .year:after {
	background-color: var(--color-background-3);
	border: 1px solid var(--color-background-3);
}
#about .timelineSub .aboutSub-inner .aboutSub-main .timelinecontents.active .line {
	position: absolute;
	opacity: 1;
	z-index: 1;
}

.secTitleWrapVer {
	position: relative;
}
.secTitleWrapVer .secTitleWrapVer-inner {
	position: absolute;
	top: 50%;
	left: calc(-1.3 * var(--variable-range-1));
	translate: 0 -50%;
}
@media (max-width: 430px) {
	.secTitleWrapVer .secTitleWrapVer-inner {
		display: none;
	}
}
.secTitleWrapVer .secTitleWrapVer-inner .img-box .title {
	width: var(--variable-range-1);
}

/* Video Controls */
.video-container {
	position: relative;
	height: 640px;
	overflow: hidden;
}
.video-container video {
	width: 100%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.video-controls {
	position: absolute;
	bottom: 20px;
	right: 20px;
	display: flex;
	gap: 16px;
}
.video-btn {
	width: 72px;
	height: 72px;
	border: none;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.6);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}
.video-btn:hover {
	background-color: rgba(0, 0, 0, 0.8);
}
/* Play icon */
.icon-play {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
	margin-left: 4px;
}
/* Pause icon */
.icon-pause {
	width: 20px;
	height: 24px;
	border-left: 6px solid #fff;
	border-right: 6px solid #fff;
}
/* Muted icon */
.icon-muted {
	width: 28px;
	height: 28px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}
/* Unmuted icon */
.icon-unmuted {
	width: 28px;
	height: 28px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}
/*# sourceMappingURL=about.css.map */