@charset "UTF-8";
/* Clearfix
=================================*/
.clearfix:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* Hide from Mac IE \*/

.clearfix { display: block; }
* html .clearfix { height: 1%; }
/* Hide from Mac IE */

/* Centering */
.ver_center { position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
.hor_center { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.center { position: relative; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
body { -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; }

nav.sp_menu { color: #199245; position: fixed; width: 100%; height: 100vh; top: 0; background-color: #F8F5F0; z-index: 9999; display: none; right: 0; text-align: left; }
nav.sp_menu .sp_menu_box { position: relative; width: 100%; height:100vh; padding:0 5%; display:flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: flex-start; }

nav.sp_menu ul.global_nav { margin:0 0 0.5em 0; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
nav.sp_menu ul.global_nav li { width:32%; margin:0 0 0.4em 0; }
nav.sp_menu ul.global_nav li a { padding: 4em 0 0.75em 0; background-position: center 1em; font-size: 0.9em; font-weight: 700; line-height: 1em; background-color: #199245; color:#F8F5F0; border-radius: 1em; letter-spacing: 0; background-size: auto 45%; background-repeat: no-repeat; color: var(--color_paper); display: block; text-align: center; }
nav.sp_menu ul.global_nav .goods a,
nav.sp_menu ul.global_nav .sbn a { padding: 3.25em 0 0.5em 0; background-position: center 0.75em; }
nav.sp_menu ul.global_nav .about a { background-image: url(../../svgs/i_about.svg); }
nav.sp_menu ul.global_nav .news a { background-image: url(../../svgs/i_news.svg); }
nav.sp_menu ul.global_nav .info a { background-image: url(../../svgs/i_info.svg); }
nav.sp_menu ul.global_nav .ex a { background-image: url(../../svgs/i_ex.svg); }
nav.sp_menu ul.global_nav .event a { background-image: url(../../svgs/i_event.svg); }
nav.sp_menu ul.global_nav .goods a { background-image: url(../../svgs/i_goods.svg); }
nav.sp_menu ul.global_nav .sbn a { background-image: url(../../svgs/i_sbn.svg); }
nav.sp_menu ul.global_nav .friends a { background-image: url(../../svgs/i_friends.svg); }
nav.sp_menu ul.global_nav .kids a { background-image: url(../../svgs/i_kids.svg); }
nav.sp_menu ul.global_nav .books a { background-image: url(../../svgs/i_books.svg); }
nav.sp_menu ul.global_nav .document a { background-image: url(../../svgs/i_document.svg); }
nav.sp_menu ul.global_nav .application a { background-image: url(../../svgs/i_application.svg); }
nav.sp_menu ul.global_nav .other a { background-image: url(../../svgs/i_other.svg); }
nav.sp_menu ul.global_nav .books { width:100%; margin:0 0 0 0; }
nav.sp_menu ul.global_nav .books a { padding: 1.2em 0; background-position: 7em 1em; background-size: auto 45%; }
nav.sp_menu ul.sub_nav { padding:0 0; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
nav.sp_menu ul.sub_nav li { width:45%; padding:0 0 0 0; margin: 0.75em 0 0 0; }
nav.sp_menu ul.sub_nav li:nth-child(2n) { width:55%; }
nav.sp_menu ul.sub_nav li a { font-size:0.9em; line-height: 1em; font-weight: 700; color:#199245;  letter-spacing: 0; border-left:solid 3px #199245; padding:0 0 0 1em; }

.menu_overlay { position: fixed; width: 100%; height: 100vh; top: 0; right: 0; background-color: #F8F5F0; opacity: 0.95; z-index: -1;  }
.menu_btn { background-color: #199245; border-radius: 0 0 10px 0; width: 55px; height: 50px; position: fixed; overflow: visible; line-height: 10px; font-size: 1px; float: right; 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; left: 0; z-index: 999; }
.menu_btn .line { position: fixed; background-color: #F8F5F0; overflow: hidden; z-index: 999; width: 30px; height: 2px; -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; left: 11px; }
.menu_btn .line:nth-child(1) { top: 14px; z-index: 2; }
.menu_btn .line:nth-child(2) { top: 24px; z-index: 2; }
.menu_btn .line:nth-child(3) { top: 34px; z-index: 2; }
.btn_wrapper { z-index: 99999; position: fixed; }
.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; }