@charset "utf-8";
/* ========================================================================

  /assets/css/nav.css

======================================================================== */


/************************************************************************
  #nav-drawer
************************************************************************/
#nav-drawer { margin:auto; width:100%; height:auto; text-align:center; position:relative;  }
#nav-drawer a { color:#ffffff; transform:scale(0.95,1); font-weight:normal; letter-spacing:0.1em; }
/* input */
.nav-unshown { display:none; }


#nav-close { display:none; width:calc(17/1200*100vw); height:calc(17/1200*100vw); /*opacity:0; transition:.3s ease-in-out;*/ position:fixed; z-index:100; }


/* チェックが入ったら表示 */
#nav-input:checked ~ #nav-close { display:block; opacity:.5; }


/* #nav-open */
#nav-open { width:calc(30/1200*100%); height:calc(30/1200*100vw); position:fixed; top:calc(40/1200*100%); /*right:calc(40/1200*100%);*/ right: calc(50% - (500/1200*100%)); z-index:100; }
#nav-open:hover { cursor:pointer; }
#nav-open img { margin:auto; width:calc(20/1200*100vw); height:calc(12/1200*100vw); position:absolute; top:0; bottom:0; right:0; left:0; }

#nav-input:checked ~ #nav-open { width:calc(17/1200*100vw); height:calc(17/1200*100vw); background:url('../img/btn_close.svg') no-repeat; background-size:100% auto; display:block; z-index:10000; /*transition:1s ease-in-out;*/ }

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

body.sub #nav-open { top:calc(25/1000*100vw); right:calc(40/1200*100vw); }
body.sub #nav-input:checked ~ #nav-open { top:calc(30/1000*100vw); right:calc(45/1200*100vw); }

/* ============ smart phone ============ */
@media (max-width:750px){

#nav-open { width:calc((60*1.2)/750*100vw); height:calc((60*1.2)/750*100vw); top:calc(25/750*100vw); right:calc(25/750*100vw); }
#nav-open img { width:calc((40*1.2)/750*100vw); height:calc((24*1.2)/750*100vw); }


#nav-input:checked ~ #nav-open { margin:calc(15/750*100vw); width:calc(30/750*100vw); height:calc(30/750*100vw); top:calc(25/750*100vw); right:calc(25/750*100vw); }

body.sub #nav-open { top:calc(20/750*100vw); right:calc(40/750*100vw); }
body.sub #nav-input:checked ~ #nav-open { top:calc(30/750*100vw); right:calc(45/750*100vw); }
}

/************************************************************************
  #nav-drawer
************************************************************************/
#nav-drawer { width:100%; }

/************************************************************************
  #nav-content
************************************************************************/
ul#nav-content { margin:auto; padding:100px 50px 50px; width:100%; height:100vh; background-color:rgba(68,85,102,0.9); position:relative; z-index:9999; letter-spacing:0.2em; position:fixed; top:0; right:0; }

ul#nav-content { 
visibility:hidden;
opacity:0;
transition:.3s ease-in-out;
/*
transform:translateY(-105%);
*/
}

ul#nav-content li { margin-bottom:calc(50/1200*100%); }
ul#nav-content li a { text-decoration:none; /*font-weight:bold;*/ font-size:14px; font-size:1.4rem; }

/* チェックが入ったら表示 */
#nav-input:checked ~ #nav-content { display:block; }

#nav-input:checked ~ #nav-content {
/*
-webkit-transform:translateY(0%);
transform:translateY(0%);
box-shadow:6px 0 25px rgba(0,0,0,.15);
*/
visibility:visible;
opacity:1;
transition: all 0.4s ease;
}


/* ============ smart phone ============ */
@media (max-width:750px){

ul#nav-content { margin-bottom:calc(30/750*100vw); }
ul#nav-content li {  }
ul#nav-content li a { color:#ffffff; font-size:calc(24/750*100vw); }

}
.scroll { background-color:#333333; border-radius:50%; }