@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 */
body { -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; }
.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%); }
.menu_overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #ffffff; opacity: 1; z-index: -1; }
.menu_btn { background-color: #ffffff; width: 60px; height: 60px; position: fixed; overflow: visible; line-height: 13px; font-size: 1.5px; 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: 0px; left: 0px; z-index: 999; }
.menu_btn .line { position: fixed; background-color: #333; overflow: hidden; z-index: 999; width: 31.5px; height: 1px; -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; left: 15px; }
.menu_btn .line:nth-child(1) { top: 20px; z-index: 999; }
.menu_btn .line:nth-child(2) { top: 30px; z-index: 999; }
.menu_btn .line:nth-child(3) { top: 40px; z-index: 999; }
.btn_wrapper .menu { color: #333; font-size: 0.6em; padding-top: 1em; text-align: center; display: block; clear: both; width: 31.5px; margin-left: 15px; position: fixed; left: 0px; top: 0px; }
.btn_wrapper { z-index: 999; 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; }


.sp_navi nav { position: fixed; width: 100%; height: 100%; top: 10vh; left: 0; background-color: transparent; z-index: 999; display: none; }
.sp_navi .sp_menu_box { width: 90%; margin:auto; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; }
.sp_navi nav ul { margin:0 18% 0 auto; border-top:solid 1px #333; padding:1em 0 2em 0; display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.sp_navi nav ul li { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-feature-settings : "pkna"; }
.sp_navi nav ul li a:hover { color:#a92926; }
.sp_navi nav ul.sp_navi_a { width:58%; font-size: 1.6em; line-height: 1em; letter-spacing: 0.1em; }
.sp_navi nav ul.sp_navi_b { width:58%; font-size: 1.6em; line-height: 1em; letter-spacing: 0.1em; }
.sp_navi nav ul.sp_navi_c { width:40%; font-size: 1.4em; line-height: 1em; letter-spacing: 0.1em; }
.sp_navi .sp_logo { position: fixed; left:10%; bottom:4em; width:20%; }