@charset "utf-8";

	/*　グローバルナビ　*/
#header-btn.init {
	display: none;
}

#header-btn #global-navi {
	display: none;

	animation-name:navi-menu-off;
    animation-duration:1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
#header-btn #global-navi.show {

	animation-name:navi-menu-on;
    animation-duration:1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


@keyframes navi-menu-on {
    0% {
        opacity: 0;
        transform: translate(-1000px, -1000px);
    }
    1% {
		transform: translate(0px, 0px);
		opacity: 0;
    }
    100%{
    	transform: translate(0px, 0px);
        opacity: 1;
    }
}
/*
@keyframes navi-menu-off {
    0% {
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
*/

#navi-menu {
	color: #f1f2ed;
	font-size: 1.2em;
	padding: 3em 1em;
}
#navi-menu li {
	margin: 1em 0.25em;
	padding: 0.5em 0;
	list-style: none;
	text-align: left;

	font-size: 16px;
}
#navi-menu li span {
	opacity: 0.2;
}
#navi-menu a {
	color: var(--color-white);
	opacity: 1;
	font-weight: bold;
	font-size: 1.2em;
}

#header-btn.show {
	top: 0;
	right: 0;
	background-color: var(--color-navy);

	width: 100%;
	height: 100vh;

	position: fixed;
}

#btn-menu {
	position: absolute;
	width: 30px;
	height: 30px;

	top: 5vw;
	right: 0vw;
	left: auto;

	z-index: 100;
}
#btn-menu .border {
	position: absolute;
	display: block;
	height: 2px;
	width: 100%;
	background-color: var(--color-navy);
	transform: translateY(-7px);

	top: 50%;
	left: 0;
	right: 0;
}
#btn-menu .border:nth-of-type(2){
	transform: translateY(-1px)
}
#btn-menu .border:nth-of-type(3){
	transform: translateY(5px)
}


#header-btn.show #btn-menu {
	top: 5vw;
	right: 3vw;
}

#header-btn.show #btn-menu .border {
	background-color: var(--color-white);
}

#header-btn.show #btn-menu .border:nth-of-type(1){
	transform: rotate(-20deg);
}
#header-btn.show #btn-menu .border:nth-of-type(2){
	display: none;
}
#header-btn.show #btn-menu .border:nth-of-type(3){
	transform: rotate(20deg);
}



#global-navi {
	display: none;
}
#header-btn.show #global-navi {
	display: block;
}


@media screen and (max-width:640px) {
	#header-btn.init {
		display: block;
	}
	#header-btn.show .block-tel {
		display: block;
		color: var(--color-white);
	}
}