@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&family=Kaisei+Tokumin&display=swap');

/*メニューアイコンここから----------------------------------------------------*/

#nav-button{
position:fixed;
 top: 1vw;
 right:1vw;
 padding: 3vw;
 width:		6.5vw;	
 height:		6vw;	
 display:	block;
 	border:		0vw solid #00999f;	
 	/*box-shadow:	1px 1px 1px #007182;*/	
 	border-radius:	4px;
 	background-color:rgba(133,203,205,0.8);
 	/*background-color:#90CE9C;*/
 	text-align:	center;
 	z-index:220;
}
 	
#nav-button p{
 				position:absolute;
 				left:2vw;
 				top:4.6vw;
 				font-size:0.7em;
 				color:#fff;
 				z-index:200;
 					}
 
 
.nav-unshown { 
				display:none; 
				}
				
#nav-open { 
display: inline-block;
width: 7vw; 
height: 6vw;
vertical-align: middle;
z-index:200;
}

#before{
position:absolute; 
top:4vw;
     left:1.3vw;
height: 1vw;
width: 10vw;
border-radius: 0.5vw; 
background: #fff; 
display: block; 
cursor: pointer;
z-index:200;
 } 
 
#after{
position:absolute; 
top:4vw;
left:1.3vw;
height: 1.2vw;
width: 10vw;
border-radius: 0.5vw; 
background: #fff; 
display: block; 
cursor: pointer;
z-index:200;
 } 

#before2{
position:absolute; 
top:1.5vw;
     left:1.3vw;
height: 1.2vw;
width: 10vw;
border-radius: 0.5vw; 
background: #fff; 
display: block; 
cursor: pointer;
z-index:200;
 } 
 
#after2{
position:absolute; 
top:6.3vw;
     left:1.3vw;
height: 1.2vw;
width: 10vw;
border-radius: 0.5vw; 
background: #fff; 
display: block; 
cursor: pointer;
z-index:200;
 } 



#nav-input:checked ~ #before
{
			transform: rotate(45deg);
 	transition: .3s ease-in-out;		
				}
				
#nav-input:checked ~ #before2
{
			display:none;
				}

#nav-input:checked ~ #after
{
			transform: rotate(-45deg);
 	transition: .3s ease-in-out;		
				}

#nav-input:checked ~ #after2
{
			display:none;
				}

#nav-close {
display: none;
position: fixed; 
z-index: 80;
top: 13vw;
left: 0; 
width: 100%;
height: 100%; 
background: #000000;
opacity: 0;
 } 

#nav-top-close{
				position:fixed;
				display:block;
				top:0;
				left:0; 
				height:14vw;
				width:50vw;
				background:#28A1A3;/*#2ec6ff;*/
				z-index:100;
				-webkit-transform: translateX(-105%);
				transform: translateX(-105%);
}

#nav-content {
    
position: fixed;
display:block;
top: 0; 
left: 0; 
z-index:80;
width: 50vw;
max-width: 100vw;
height: 100%; 
background: #ffffff;
box-shadow:0 0 5px #000000;
-webkit-transform: translateX(-105%); transform: translateX(-105%);
} 

#nav-input:checked ~ #nav-close
{
				display: block;
				} 

#nav-input:checked ~ #nav-top-close
{
				-webkit-transform: translateX(0%); 
				transform: translateX(0%);
				transition: .2s ease-in-out;
				} 

#nav-input:checked ~ #nav-content { 
-webkit-transform: translateX(0%); 
transform: translateX(0%);
transition: .2s ease-in-out;
}


#ul {
	width: 50vw;
	font-size:4.5vw;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color:#28A1A3;/*#2ec6ff;*/
    font-family: "Kaisei Opti", serif;
	opacity:1;
	z-index:85;
}

#ul li a {
	display: block;
		border-top: 0.5vw dotted #ffffff
	;
	padding: 1vw 6vw;
	text-decoration: none;
	color: #fff;
}

#ul li {
	text-align: center;
}

#ul li img{
    display:none;
}

#ul li:first-child{
border:none;
height:14vw;
}


#ul li:nth-child(6){
border:none;
height:vw;
font-size:vw;
padding-left:;
padding-right:;
}

#ul li:last-child {
border-bottom: 0.5vw dotted #ffffff
}

#ul li a.active {
	color: #ffffff;
	background-color: #0d6990;
}
#ul li a:hover:not(.active) {
	color: #ffffff; 
	opacity:0.5;
	background-color: #0d6990;
}