/* ----------------------------------------------------------------- Google-Font -- */
@font-face {
		font-family: "Noto Sans JP";
		src: url("../fonts/NotoSansJP-Regular.woff2") format("woff2"), url("../fonts/NotoSansJP-Regular.woff") format("woff");
		font-weight: 400;
		font-style: normal;
}

@font-face {
		font-family: "Noto Sans JP";
		src: url("../fonts/NotoSansJP-Bold.woff2") format("woff2"), url("../fonts/NotoSansJP-Bold.woff") format("woff");
		font-weight: 700;
		font-style: normal;
}

.container {
		max-width: 1000px;
		margin: 0 auto;
		padding: 0 1.25rem;
}

/* ----------------------------------------------------------------- header -- */
header {
		padding: 1.25rem 0 1rem;
}

header .header {
		text-align: center;
}

header .header a {
		display: inline-block;
}

header .header a .en {
		display: block;
		font-weight: 700;
		margin-bottom: 0.5rem;
}

header .header a .en img {
		width: 180px;
}

header .header a .jp {
		display: block;
		font-size: 0.5rem;
		line-height: 1;
		font-weight: 700;
}

/* ----------------------------------------------------------------- #top -- */
#top {
		background: #ecfaff;
}

#top .container {
		overflow: hidden;
		padding: 9rem 1.25rem;
		display: flex;
		position: relative;
}

@media (max-width: 1200px) {
		#top .container {
				padding: 5rem 1.25rem;
		}
}

@media (max-width: 600px) {
		#top .container {
				padding: 2rem 1.25rem 45%;
		}
}

#top .container .text {
		width: 50%;
		z-index: 1;
}

@media (max-width: 1200px) {
		#top .container .text {
				width: calc(100% - 45vw);
		}
}

@media (max-width: 600px) {
		#top .container .text {
				width: 100%;
		}
}

#top .container .text p {
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 2.2;
}

@media (max-width: 600px) {
		#top .container .text p {
				font-size: 4.5vw;
		}
}

#top .container .text p span {
		background: #003C88;
		color: #fff;
		font-size: 1.5rem;
		font-weight: 700;
		padding: 0.5rem 0.75rem 0.625rem;
		margin-right: 0.3rem;
}

@media (max-width: 600px) {
		#top .container .text p span {
				font-size: 4.5vw;
		}
}

#top .container .img {
		width: 50%;
		min-width: 500px;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(0%, -50%);
		z-index: 0;
}

@media (max-width: 1200px) {
		#top .container .img {
				width: 45vw;
				min-width: unset;
		}
}

@media (max-width: 600px) {
		#top .container .img {
				width: 70%;
				top: unset;
				transform: none;
				min-width: unset;
				bottom: 0;
		}
}

/* ----------------------------------------------------------------- #company -- */
#company {
		padding: 3rem 1.25rem;
		display: flex;
		flex-wrap: wrap;
}

#company h2 {
		position: relative;
		font-size: 1.5rem;
		font-weight: 700;
		text-align: center;
		padding: 0 0 0.75rem;
		margin-bottom: 3rem;
		width: 100%;
}

#company h2::after {
		content: "";
		display: block;
		width: 60px;
		height: 3px;
		background-color: #003C88;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
}

#company dl {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		max-width: 700px;
		margin: 0 auto;
}

#company dl dt {
		display: flex;
		align-items: center;
		padding: 1.25rem 0;
		width: 180px;
		line-height: 1.75;
		border-bottom: 1px solid #dbdbdb;
}

@media (max-width: 768px) {
		#company dl dt {
				width: 100%;
				border-bottom: none;
				padding: 1.25rem 0 0.25rem;
		}
}

#company dl dd {
		display: flex;
		align-items: center;
		padding: 1.25rem 0;
		width: calc(100% - 180px);
		line-height: 1.75;
		border-bottom: 1px solid #dbdbdb;
}

@media (max-width: 768px) {
		#company dl dd {
				width: 100%;
				padding: 0.25rem 0 1.25rem;
		}
}

/* ----------------------------------------------------------------- footer -- */
footer {
		padding: 3rem 0;
		background: #f4f4f4;
}

footer .container {
		display: flex;
		min-height: 180px;
}

@media (max-width: 480px) {
		footer .container {
				flex-direction: column-reverse;
		}
}

footer .container .footer__data {
		position: relative;
		width: 50%;
		border-right: 1px solid #dbdbdb;
		padding-right: 2rem;
}

@media (max-width: 480px) {
		footer .container .footer__data {
				width: 100%;
				border-right: none;
				margin-right: 0;
				margin-top: 2rem;
				padding: 0;
		}
}

footer .container .footer__data p[class="footer__address"] {
		font-size: 0.75rem;
}

footer .container .footer__data p[class="footer__copy"] {
		position: absolute;
		bottom: 0;
		font-size: 0.625rem;
		padding-right: 2rem;
}

@media (max-width: 480px) {
		footer .container .footer__data p[class="footer__copy"] {
				position: unset;
				margin-top: 2.5rem;
				text-align: center;
				padding-right: 0;
		}
}

footer .container .footer__data a[class="footer__logo"] {
		display: flex;
		flex-direction: column;
		font-size: 0.75rem;
		font-weight: 700;
		margin-bottom: 0.75rem;
}

footer .container .footer__data a[class="footer__logo"] img {
		width: 180px;
		margin-bottom: 0.5rem;
}

footer .container .footer__data a[class="footer__tel"] {
		pointer-events: none;
		font-size: 0.75rem;
}

footer .container .footer__bn {
		width: 50%;
		display: flex;
		flex-wrap: wrap;
		padding-left: 2rem;
}

@media (max-width: 480px) {
		footer .container .footer__bn {
				width: 100%;
				padding-left: 0;
		}
}

footer .container .footer__bn p {
		width: 100%;
		font-size: 0.75rem;
		margin-bottom: 0.5rem;
}

footer .container .footer__bn a {
		display: block;
		width: calc((100% / 2) - 0.5rem);
		max-width: 130px;
		transition: all 0.3s;
}

footer .container .footer__bn a:not(:first-of-type) {
		margin-left: 1rem;
}

footer .container .footer__bn a:hover {
		opacity: 0.6;
}