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

html {
font-size: 62.5%;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
font-size: 1.6rem;
color:#000;
font-family:'Noto Sans JP', sans-serif;
}
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a{
color:#000;
text-decoration: none;
transition: .6s;
}


/*---------------
#header
---------------*/
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
nav{
width: 100%;
height: 50px;
position: absolute;
top: 0;
}
.drawer{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
padding: 0 1em;
height: 50px;
}
.navbar_toggle{
z-index:9999;
position: absolute;
}
.navbar_toggle_icon {
position: relative;
display: block;
height: 4px;
width: 30px;
background: #171717;
transition: ease .5s;
}
.navbar_toggle_icon:nth-child(1) {
top: 0;
margin-bottom: 10px;
}
.navbar_toggle_icon:nth-child(2) {
top: 0;
margin-top: 10px;
}
.navbar_toggle.open .navbar_toggle_icon:nth-child(1) {
top: 7px;
transform: rotate(45deg);
}
.navbar_toggle.open .navbar_toggle_icon:nth-child(2) {
top: -7px;
transform: rotate(-45deg);
}
.menu{
transform: translateX(-100%);
transition:ease .5s;
z-index:1000;
background: rgba(255,255,255,0.90);
height: 100vh;
}
.menu ul li{
padding: 2em;
border-bottom: 1px solid #CCC;
}
.menu ul li a {
font-weight: bold;
letter-spacing: 2px;
}
.menu.open {
transform:translateX(0);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/*---------------
#footer
---------------*/
footer{
	text-align: center;
	padding-bottom: 10px;
}



@media print, screen and (max-width: 559px) {
/*---------------
#header
---------------*/
.navbar_toggle{
right: 20px;
top: 20px;
}
	
	
/*---------------
#footer
---------------*/
footer{
font-size: 1.2rem
}	
	
	
}

@media print, screen and (min-width: 560px) {
/*---------------
#header
---------------*/
#header {
width: 95%;
box-sizing: border-box;
padding: 16px 0;
}
.navbar_toggle{
right: -10px;
top: 30px;
}
.menu ul {
padding-top: 100px;
}
.menu li {
text-align: right;
}
/*---------------
#footer
---------------*/
footer{
font-size: 1.4rem
}
}