@charset "UTF-8";

.btn_wrapper { display:none; z-index: 100000; position: fixed; }
.btn_wrapper .menu_btn { width: 60px; height: 65px; position: fixed; overflow: visible; line-height: 13px; font-size: 1px; float: left; cursor: pointer; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; top: 0; right: 0; z-index: 100; }
.btn_wrapper .menu_btn .line { position: fixed; background-color: #578100; overflow: hidden; z-index: 100; width: 31px; height: 1.5px; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; top: 30px; right: 15px; }
.btn_wrapper .menu_btn .line:nth-child(1) { top: 30px; z-index: 2; }
.btn_wrapper .menu_btn .line:nth-child(2) { top: 40px; z-index: 2; }
.btn_wrapper .menu_btn .line:nth-child(3) { top: 50px; z-index: 2; }
.btn_wrapper.clicked .menu_btn .line:nth-child(1) { -webkit-transform: translateY(10px) rotate(45deg); transform: translateY(10px) rotate(45deg); -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }
.btn_wrapper.clicked .menu_btn .line:nth-child(2) { opacity: 0; -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }
.btn_wrapper.clicked .menu_btn .line:nth-child(3) { -webkit-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); -webkit-transition: all 400ms ease-out 0ms; -moz-transition: all 400ms ease-out 0ms; -o-transition: all 400ms ease-out 0ms; transition: all 400ms ease-out 0ms; }

nav.sp_menu .menu_overlay { position: fixed; width: 100%; height: 100vh; height: 100dvh; top: 0; left: 0; opacity: 0.95; z-index: -1; margin: 0; padding: 0; }
nav.sp_menu { overflow-y: scroll; position: fixed; top: 0; left: 0; padding:6rem 0 3rem 0; width: 100%; height: 100vh; height: 100dvh; color: #ffffff; background-color: #578100; z-index: 9; display: none; }
nav.sp_menu ul { box-sizing: border-box; position: relative; display: inline-block; width: 100%; padding:0.5rem 5%; }
nav.sp_menu ul li { font-size: 1.05em; line-height: 1em; font-weight: 300; text-align: left; padding: 1.2rem 0; border-bottom: solid 1px#DEE6CC; display: flex; }
nav.sp_menu ul li a { width: 35%; margin: 0; padding: 0; color: #ffffff; }
nav.sp_menu ul .children { font-size: 0.85em; width: 65%; margin: 0.15rem 0; padding: 0; }
nav.sp_menu ul .children li { padding: 0 0 0.75rem 0; margin: 0; line-height: 1.25em; border-bottom: none; }
nav.sp_menu ul .children li:last-child { padding: 0 0 0 0; }
nav.sp_menu ul .children a { width: 100%; }
nav.sp_menu ul li.sp_menu--sns { width: 100%; text-align: center; padding:1rem 3rem; }
nav.sp_menu ul li.sp_menu--sns a { width: auto; margin:auto; font-size: 2rem; }
nav.sp_menu small { font-size: 0.75em; line-height: 1em; display:block; margin: 2rem 0; }

@media screen and (max-width: 600px) {
  .btn_wrapper { display:block; }
  .btn_wrapper .menu_btn .line { height: 1px; }
}