:root {
	--color-main: #182a80;
}

body {
	background: white;
	padding: 0;
	margin: 0;
	line-height: 1.75;
}
a {
	color: var(--color-main);
	transition-property: color;
	transition-duration: 0.25s;
}
@media (hover: hover) {
	a:hover {
		color: #ec7c04;
	}
}

#front-header {
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: top, center bottom;
	background-size: 100%;
	height: 970px;
	background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 48%, #aac9e3 100%), url(../images/hero_md.jpg);
}

#front-header .object-wrapper {
	max-width: 1280px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: auto;
}
#front-header .object-wrapper .img {
	position: absolute;
	will-change: transform;
}
#front-header .object-wrapper .img--1 {
	top: 30px;
	/* left: 94px; */
	right: calc(50% + 310px);
	width: 236px;
}
#front-header .object-wrapper .img--2 {
	top: 159px;
	left: calc(50% + 290px);
	/* right: 234px; */
	width: 114px;
}
#front-header .object-wrapper .img--3 {
	top: 447px;
	left: calc(50% + 320px);
	/* right: 174px; */
	width: 158px;
}
#front-header .object-wrapper .img--4 {
	top: 474px;
	/* left: 262px; */
	right: calc(50% + 280px);
	width: 90px;
}

#front-header .symbol-wrapper {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	height: 100%;
}
#front-header .symbol-wrapper .img {
	width: 100%;
	max-width: 620px;
	margin: 56px 0 0;
}

.contents {
	margin-block-start: 96px;
	padding-block-end: 64px;
	padding-inline: 10%;
	margin-inline: auto;
	max-width: 800px;
}
.contents__heading {
	font-size: 1.8rem;
	text-align: center;
	color: var(--color-main);
}
.contents__text {
	margin-block-start: 64px;
	line-height: 2;
}
.contents__contact {
	margin-block-start: 80px;
	h3 {
		background: #e8e8e8;
		font-size: 1rem;
		padding: 0.25em 1em;
	}
	dl {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.25em 1em;
	}
	dt, dd {
		padding: 0;
		margin: 0;
	}
}

@media screen and (max-width: 1023.98px) {
	#front-header {
		height: auto;
		max-height: 970px;
		aspect-ratio: 1.05 / 1;
	}
}
@media screen and (max-width: 767.98px) {
	#front-header {
		aspect-ratio: initial;
		height: 716px;
		background-image: linear-gradient(0deg,rgba(255,255,255,0) 48%,#aac9e3 100%),url(../images/hero_sm.jpg);
	}

	#front-header .object-wrapper .img--1 {
			top: -20px;
			/* left: -20px; */
			right: calc(50% + 220px);
			width: 134px;
	}
	#front-header .object-wrapper .img--2 {
			top: 56px;
			/* right: 52px; */
			left: calc(50% + 200px);
			width: 72px;
	}
	#front-header .object-wrapper .img--3 {
			top: 285px;
			/* right: -40px; */
			left: calc(50% + 260px);
			width: 100px;
	}
	#front-header .object-wrapper .img--4 {
			top: 388px;
			/* left: 16px; */
			right: calc(50% + 240px);
			width: 57px;
	}

#front-header .symbol-wrapper {
    padding: 0 20px;
	}
	#front-header .symbol-wrapper .img {
    position: relative;
    top: 50%;
    max-width: 480px;
    margin: -22% 0 0;
    transform: translateY(-50%);
	}
	.contents {
		margin-block-start: 64px;
		padding-inline: 8%;
		padding-block-end: 32px;
	}
	.contents__heading {
		font-size: 1.3rem;
		text-align: left;
	}
	.contents__text {
		margin-block-start: 40px;
	}
	.contents__contact {
		margin-block-start: 64px;
		dl {
			display: grid;
			grid-template-columns: auto 1fr;
			gap: 0.25em 1em;
		}
	}
}
@media screen and (max-width: 639.98px) {
	#front-header {
		height: 600px;
	}
	#front-header .object-wrapper {
		display: none;
	}
}