@charset "UTF-8";

/*--------------------------------------------------*/

.header-wrap {
	background-color: white;
	display: flex;
	justify-content: center;
}

.header-content {
	background-color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em;
	width: calc(1280px - 2em); /*padding:-2em*/
}

.header-logo {
	display: flex;
	align-items: center;
}

.header-logo img {
	height: 90px;
}

.header-menu {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.header-menu a {
	text-decoration: none;
	color: white;
}

.header-link1 {
	background-color: rgb(44,84,120);
	margin-right: 1em;
	padding: 0.1em 0.5em 0.1em 0.5em;
	transform: skew(-10deg);
	transition: all 0.2s;
}

.header-link1:hover {
	text-shadow: 0px 0px 5px aqua;
	/*box-shadow: 5px 5px 2px rgba(10,10,10,0.3);*/
	/*transform: skew(-10deg) translate(-5px, -5px);*/
}

.header-link2 {
	background-color: white;
	border: solid 2px rgb(44,84,120);
	border-radius: 3px;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 2.2em;
	height: 2.2em;
}

.header-link2 span {
	background-color: rgb(44,84,120);
	width: calc(100% - 12px);
	height: 2px;
	margin: 2px 0 2px 0;
}

.header-link2:hover {
	border: solid 2px rgb(60,150,190);
}

.header-link2:hover span {
	background-color: rgb(60,150,190);
}


/*--------------------------------------------------*/

@media screen and (max-width: 480px) {
.header-logo img {
	height: 60px;
}
}
@media screen and (max-width: 520px) {
.header-wrap {
	font-size: 0.7rem;
}
.header-link1:nth-child(n+1):nth-child(-n+3) {
	display: none;
}
}
@media screen and (max-width: 620px) {
.header-wrap {
	font-size: 0.8rem;
}
.header-link1:nth-child(n+2):nth-child(-n+3) {
	display: none;
}
}
@media screen and (max-width: 720px) {
.header-wrap {
	font-size: 0.9rem;
}
.header-link1:nth-child(n+2):nth-child(-n+2) {
	display: none;
}
}

/*--------------------------------------------------*/

.modal-header-wrap {
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(10,10,10,0.8);
	display: none; /*初期値*/
	flex-flow: column;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	z-index: 100; /*前*/
}

.modal-header-content {
	display: flex;
	flex-flow: column;
	justify-content: space-around;
	text-align: center;
	height: 100vh;
	max-height: 800px; /*最大値制限*/
}

.modal-header-content a {
	text-decoration: none;
	font-family: serif;
	font-weight: bold;
	color: white;
	transition: all 0.3s;
	opacity: 0;
}

.modal-header-content a:first-child:hover {
	background-color: rgb(44,84,120);
	box-shadow: 8px 8px 0px rgba(90,160,240,0.7);
	transform: translate(-4px, -4px);
}

.modal-header-content a:nth-child(n+2):nth-child(-n+6) {
	border: solid 1px transparent;
}

.modal-header-content a:nth-child(n+2):nth-child(-n+6):hover {
	border: solid 1px white;
}

.modal-header-content a:nth-child(n+7):hover {
	box-shadow: 8px 8px 0px orange;
	transform: translate(-4px, -4px);
}

@keyframes anime_modal_h {
	from { opacity: 0; }
	  to { opacity: 1; }
}

.modal-header-content a:nth-child(1) { animation: anime_modal_h 0.5s ease-in 0.0s forwards; }
.modal-header-content a:nth-child(2) { animation: anime_modal_h 0.5s ease-in 0.1s forwards; }
.modal-header-content a:nth-child(3) { animation: anime_modal_h 0.5s ease-in 0.2s forwards; }
.modal-header-content a:nth-child(4) { animation: anime_modal_h 0.5s ease-in 0.3s forwards; }
.modal-header-content a:nth-child(5) { animation: anime_modal_h 0.5s ease-in 0.4s forwards; }
.modal-header-content a:nth-child(6) { animation: anime_modal_h 0.5s ease-in 0.5s forwards; }
.modal-header-content a:nth-child(7) { animation: anime_modal_h 0.5s ease-in 0.6s forwards; }
.modal-header-content a:nth-child(8) { animation: anime_modal_h 0.5s ease-in 0.7s forwards; }
.modal-header-content a:nth-child(9) { animation: anime_modal_h 0.5s ease-in 0.8s forwards; }

/*--------------------------------------------------*/

@media screen and (max-height: 500px) {
.modal-header-content a {
	font-size: 0.7rem;
}
.modal-header-content img {
	height: 40px;
}
}

/*--------------------------------------------------*/