@charset "UTF-8";

.fullscreenmenu{
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
input{
display:none;
}
button{
border:none;
background:none;
outline:none;
}
a:hover,
a img:hover,
label img:hover{
opacity:0.8;
}
@media screen and (min-width:1024px) {
#nav{
position:relative;
}
.drawer{
position:absolute;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
.menu,
.menu span{
display:inline-block;
-webkit-transition:all .4s;
transition:all .4s;
box-sizing:border-box;
}
.menu{
position:fixed;
top:20px;
right:25px;
width:50px;
height:22px;
z-index:10;
}
.menu span{
position:absolute;
left:0;
width:100%;
height:2px;
background-color:#000;
z-index:10;
}
.menu span:nth-of-type(1){
top:0px;
}
.menu span:nth-of-type(2){
top:10px;
}
.menu span:nth-of-type(3){
bottom:0px;
}
.menu.active span:nth-of-type(1){
-webkit-transform:translateY(10px)rotate(45deg);
transform:translateY(10px) rotate(45deg);
}
.menu.active span:nth-of-type(2){
opacity:0;
}
.menu.active span:nth-of-type(3){
-webkit-transform:translateY(-10px)rotate(-45deg);
transform:translateY(-10px)rotate(-45deg);
}
#nav{
position:fixed;
top:0;
right:0;
z-index:10;
width:100%;
height:100vh;
opacity:0;
background-color:#ACB4B9;
transition:all 0.3s ease-in-out;
visibility:hidden;
}
#nav.active{
right:0;
opacity:1;
-moz-transform:translateX(0);
-webkit-transform:translateX(0);
transform:translateX(0);
visibility:visible;
}
#nav ul{
margin:20px 0;
padding:20px 0;
}
#nav ul li{
font-size:20px;
font-weight:200;
letter-spacing:0.07em;
list-style-type:none;
}
#nav ul li span{
font-size:0.6em;
font-weight:300;
margin-left:1em;
}
#nav ul li a{
display:block;
padding:0.75em 0;
transition:all 0.2s ease-in-out;
text-align:center;
text-decoration:none;
color:#000;
}
#nav ul li a:hover{
color:#3A5B52;
}
#nav ul li img{
width:50px;
height:auto;
}

}
@media only screen and (min-width:768px) and (max-width:1023px) {
.menu,
.menu span{
display:inline-block;
-webkit-transition:all .4s;
transition:all .4s;
box-sizing:border-box;
}
.menu{
position:fixed;
top:20px;
right:20px;
width:50px;
height:22px;
z-index:10;
}
.menu span{
position:absolute;
left:0;
width:100%;
height:2px;
background-color:#000;
z-index:10;
}
.menu span:nth-of-type(1){
top:0px;
}
.menu span:nth-of-type(2){
top:10px;
}
.menu span:nth-of-type(3){
bottom:0px;
}
.menu.active span:nth-of-type(1){
-webkit-transform:translateY(10px)rotate(45deg);
transform:translateY(10px) rotate(45deg);
}
.menu.active span:nth-of-type(2){
opacity:0;
}
.menu.active span:nth-of-type(3){
-webkit-transform:translateY(-10px)rotate(-45deg);
transform:translateY(-10px)rotate(-45deg);
}
#nav{
position:fixed;
top:0;
right:0;
z-index:10;
width:100%;
height:100vh;
opacity:0;
background-color:#ACB4B9;
transition:all 0.3s ease-in-out;
visibility:hidden;
}
#nav.active{
right:0;
opacity:1;
-moz-transform:translateX(0);
-webkit-transform:translateX(0);
transform:translateX(0);
visibility:visible;
}
#nav ul{
margin:20px 0;
padding:20px 0;
}
#nav ul li{
font-size:20px;
font-weight:200;
letter-spacing:0.07em;
list-style-type:none;
}
#nav ul li span{
font-size:0.5em;
font-weight:300;
margin-left:1em;
}
#nav ul li a{
display:block;
padding:0.6em 0;
transition:all 0.2s ease-in-out;
text-align:center;
text-decoration:none;
color:#000;
}
#nav ul li a:hover{
color:#3A5B52;
}
#nav ul li img{
width:50px;
height:auto;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.menu,
.menu span{
display:inline-block;
-webkit-transition:all .4s;
transition:all .4s;
box-sizing:border-box;
}
.menu{
position:fixed;
top:15px;
right:15px;
width:46px;
height:22px;
z-index:10;
}
.menu span{
position:absolute;
left:0;
width:100%;
height:2px;
background-color:#000;
z-index:10;
}
.menu span:nth-of-type(1){
top:0px;
}
.menu span:nth-of-type(2){
top:10px;
}
.menu span:nth-of-type(3){
bottom:0px;
}
.menu.active span:nth-of-type(1){
-webkit-transform:translateY(10px)rotate(45deg);
transform:translateY(10px) rotate(45deg);
}
.menu.active span:nth-of-type(2){
opacity:0;
}
.menu.active span:nth-of-type(3){
-webkit-transform:translateY(-10px)rotate(-45deg);
transform:translateY(-10px)rotate(-45deg);
}
#nav{
position:fixed;
top:0;
right:0;
z-index:10;
width:100%;
height:100vh;
opacity:0;
background-color:#ACB4B9;
transition:all 0.3s ease-in-out;
visibility:hidden;
}
#nav.active{
right:0;
opacity:1;
-moz-transform:translateX(0);
-webkit-transform:translateX(0);
transform:translateX(0);
visibility:visible;
}
#nav ul{
margin:20px 0;
padding:40px 0;
}
#nav ul li{
font-size:22px;
font-weight:200;
letter-spacing:0.07em;
list-style-type:none;
}
#nav ul li span{
font-size:0.5em;
font-weight:300;
margin-left:1em;
}
#nav ul li a{
display:block;
padding:0.6em 0;
transition:all 0.2s ease-in-out;
text-align:center;
text-decoration:none;
color:#000;
}
#nav ul li a:hover{
color:#3A5B52;
}
#nav ul li img{
width:50px;
height:auto;
}
}