.navi{flex:0 0 200px;height:100%;position:relative}.navi.toggle-width-active{flex:0 0 60px}@media screen and (max-width:779px){.navi{z-index:150;flex:0 0 200px;position:fixed;top:0;left:0}}@media screen and (min-width:780px){.app.top-navi .navi{background-color:#1d6998;flex:0;height:auto;position:relative}.app.top-navi.sandbox .navi{background-color:#22aaa1}}
.navi-main{-webkit-overflow-scrolling:touch;background-color:#1d6998;flex-flow:column;min-width:200px;height:100%;display:flex;position:relative;overflow:auto}@media screen and (min-width:780px){.navi-main.toggle-width-active{min-width:60px}}.navi-main .width-toggle{z-index:25;cursor:pointer;width:4px;height:100%;display:none;position:fixed;top:0;left:200px}.navi-main .width-toggle:hover{background-color:#fff;box-shadow:0 0 3px #00000080}.navi-main.toggle-width-active .width-toggle{left:58px}@media screen and (min-width:780px){.navi-main .width-toggle{display:block}}.sandbox .navi-main{background-color:#22aaa1}@media screen and (max-width:779px){.navi-main{z-index:100;height:100%;padding-top:48px;transition:left .3s;position:absolute;top:0;left:-200px;overflow:auto}.navi-main.open{left:0}}.toggle-width-active .display-item{z-index:100;opacity:1;background-color:#1d6998;border-radius:3px;justify-content:center;align-items:center;height:44px;padding:4px 12px;transition:top .2s cubic-bezier(.66,.32,.28,.6),left .2s linear,opacity .1s linear,transform .1s linear;display:flex;position:fixed;left:78px;transform:scale(1);box-shadow:0 0 8px #00000026}@media screen and (max-width:779px){.toggle-width-active .display-item{display:none}}.toggle-width-active .display-item.hide{opacity:0;transition:top .2s cubic-bezier(.66,.32,.28,.6) .1s,left .2s linear .1s,opacity .1s linear .1s,transform 50ms linear .1s;left:90px;transform:scale(0)}.toggle-width-active .display-item .detail{flex-flow:column;flex:1;display:flex;position:relative}.toggle-width-active .display-item .detail .display,.toggle-width-active .display-item .detail .desc{color:#fff;flex:2;margin:0;font-size:16px;line-height:20px}.toggle-width-active .display-item .detail .desc{flex:1;font-size:10px;line-height:10px}.toggle-width-active .display-item:before{content:"h";border:10px solid #0000;border-right-color:#1d6998;padding:0;font-size:0;display:block;position:absolute;top:12px;left:-20px}.sandbox .toggle-width-active .display-item{background-color:#22aaa1}.sandbox .toggle-width-active .display-item:before{border-right-color:#22aaa1}@media screen and (min-width:780px){.navi-main.top-navi{flex-flow:row;justify-content:space-between;align-items:center;max-width:1078px;height:auto;margin:0 auto}.navi-main.top-navi .width-toggle{display:none}}
.navi-logo{background-color:#00000080;justify-content:center;height:48px;min-height:48px;max-height:48px;margin:0 0 8px;line-height:48px;display:flex;position:relative;overflow:hidden}.navi-logo>a{color:#fff;height:100%;text-decoration:none;display:flex}.navi-logo>a>svg{height:100%}.navi-logo>a>svg .real-path{fill:#fff}.navi-logo>a>.text{padding:0 12px;font-size:24px;font-style:italic;font-weight:700;display:block}.logo-c.sandbox .text{flex-flow:column;max-height:44px;line-height:12px;display:block}.logo-c.sandbox .text span{display:block}.logo-c.sandbox .text span.main{margin:4px 0}.logo-c.sandbox .text span.sub{font-size:13px}@media screen and (min-width:780px){.navi-main.toggle-width-active .navi-logo>a{justify-content:center;align-items:center;width:100%;padding:0;display:flex}.navi-main.toggle-width-active .navi-logo>a .logo-c{flex-flow:column;font-size:12px;line-height:12px;display:flex}.navi-main.top-navi .navi-logo{background-color:#0000;margin:0}.navi-main.top-navi .navi-logo>a{padding:0 12px}.navi-main.top-navi .navi-logo:after{content:"";background:linear-gradient(#1d6998,#fff,#1d6998);width:1px;height:70%;position:absolute;top:15%;right:0}}