@charset "utf-8";
/* CSS Document */

* {
	overflow-wrap: break-word;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
}
a:focus {
	outline: none !important;
}
a:hover {
	outline: none;
}
img {
	height: auto;
}

:root {
	--jp-font: "Noto Sans JP", serif;
	--en-font: "Barlow", sans-serif;
	--main-color: rgba(34,75,143,1.0);	/*#224b8f*/
}

/* --------------------------------------------------
header
-------------------------------------------------- */
header {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 4vh;
	background-color: var(--main-color);
}
header h1 {
	font-size: 0.667vw;
	color: rgba(255,255,255,0.667);
	font-weight: normal;
}


/* --------------------------------------------------
main
-------------------------------------------------- */
main {
	height: 82vh;
	position: relative;
}
.main_content {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	width: 100%;
}

/* ホバーアニメーション */
.slide_anime {
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.slide_anime:after {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 101%;
	height: 101%;
	background: var(--main-color);
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
	z-index: -1;
}
.slide_anime:hover {
	color: #fff;
}
.slide_anime:hover:after {
	transform: scale(1, 1);
}


/* --------------------------------------------------
footer
-------------------------------------------------- */
footer {
	display: flex;
	justify-content: center;
	height: 14vh;
}
footer .footer_binbinLink {
	display: block;
	width: 15vw;
}
footer .footer_binbinImage {
	display: block;
}
footer .footer_binbinLink:hover .footer_binbinImage {
	opacity: 0.8;
}