@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@200;600&display=swap');

button:focus {
    outline: none;
}
.full-screen {
    width: 100%;
    height: 100vh;
    position: fixed;
    object-fit: cover;
	object-position: 100% 15%;
}
@media screen and (max-width:899px) {
    .full-screen {
        object-position: 90%;
    }
}

/****************************************************
    @ メインコンテンツ
****************************************************/
.history-main {
	width: 100%;
	padding: 5% 0 0;
	background: rgb(197 197 197 / 60%);
}

.history-main .history-intro {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
    text-align: center;
	gap: 40px;
}

.history-intro .main-catch {
	font-size: 1.8vw;
    font-weight: 600;
}
@media screen and (max-width:899px) {
	.history-intro .main-catch {
		font-size: 4.3vw;
	}
}

.history-intro .main-catch span {
	font-size: 3.3vw;
}
@media screen and (max-width:899px) {
	.history-intro .main-catch span {
		font-size: 7.5vw;
	}
}

.history-intro .add-sentence {
	color: #0f2740;
    font-size: 14px;
    line-height: 20px;
	text-shadow: 0 0 #222;
}
@media screen and (max-width:899px) {
	.history-intro .add-sentence {
		font-size: 13px;
		text-align: left;
		line-height: 20px;
		font-weight: 600;
	}
}

.history-main .history-flow {
	width: 75%;
	margin: 5% auto 0;
	padding: 5% 0 35%;
	display: flex;
	flex-direction: column;
    gap: 120px;
	border-left: 1px solid #004ea2;
}
@media screen and (max-width:899px) {
	.history-main .history-flow {
		width: 85%;
		margin: 10% auto 0;
		padding: 10% 0;
		display: flex;
		flex-direction: column;
		gap: 150px;
		border-left: 1px solid #004ea2;
	}
}

.history-flow .history-detail {
	display: flex;
	justify-content: space-between;
	margin-left: 5%;
}
@media screen and (max-width:899px) {
	.history-flow .history-detail {
		display: flex;
		flex-direction: column;
		margin-left: 15%;
	}
}

.history-detail h2 {
	font-size: 2.3vw;
    margin: 0 0 10px;
}
@media screen and (max-width:899px) {
	.history-detail h2 {
		font-size: 5.5vw;
		margin: 0 0 10px;
	}
}

.history-detail h2 span {
	font-family: 'Noto Sans', sans-serif;
	font-size: 4vw;
	font-weight: 600;
	color: #FFFFFF;
	-webkit-text-stroke-color: #004ea2;
	-webkit-text-stroke-width: 1.5px;
}
@media screen and (max-width:899px) {
	.history-detail h2 span {
		font-family: 'Noto Sans', sans-serif;
		font-size: 11vw;
		font-weight: 600;
		margin: 0 0 10px;
		-webkit-text-fill-color: #FFFFFF;
		-webkit-text-stroke-color: #004ea2;
		-webkit-text-stroke-width: 1.2px;
	}
}

.history-detail h2::before {
	content: "";
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background: #004ea2;
    z-index: 0;
    position: absolute;
    transform: translateX(-178%) translateY(37%);
}

.history-detail article .year-event {
	display: flex;
	align-items: center;
	gap: 2vw;
}
@media screen and (max-width:899px) {
	.history-detail article .year-event {
		display: flex;
		align-items: flex-start;
		gap: 1vw;
		flex-direction: column;
	}
}

.history-detail article .year-event h3 {
	width: 4.7vw;
	font-size: 1.2vw;
	margin-bottom: 10px;
}
@media screen and (max-width:899px) {
	.history-detail article .year-event h3 {
		width: 40vw;
		font-size: 5vw;
		margin-bottom: 10px;
	}
}

.history-detail article .year-event p {
	font-size: 1.2vw;
    margin-bottom: 10px;
	color: #0f2740;
	text-shadow: 0 0 #222;
}
@media screen and (max-width:899px) {
	.history-detail article .year-event p {
		font-size: 3.3vw;
		font-weight: 600;
	}
}

.history-detail .building {
	width: 30%;
}
@media screen and (max-width:899px) {
	.history-detail .building {
		width: 100%;
		margin: 5% 0;
	}
}

.history-detail .building img.twenty {
	width: 100%;
    height: fit-content;
    aspect-ratio: 775 / 600;
}

.history-detail .building img.fifteen {
	width: 100%;
    height: fit-content;
    aspect-ratio: 437 / 600;
}

.history-detail .building img.six {
	width: 100%;
    height: fit-content;
    aspect-ratio: 435 / 600;
}

.history-detail .building img.ninety-five {
	width: 100%;
    height: fit-content;
    aspect-ratio: 469 / 600;
}

.history-detail .building img.eighty-seven {
	width: 100%;
    height: fit-content;
    aspect-ratio: 811 / 600;
}

.history-detail .building img.seventy-one {
	width: 100%;
    height: fit-content;
    aspect-ratio: 914 / 600;
}

.history-detail .building img.sixty-two {
	width: 100%;
    height: fit-content;
    aspect-ratio: 900 / 600;
}