@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css?family=Fjalla+One&display=swap');

/* ------------------------------------------------
NUL OFFICIAL SITE / layout css
MOD : 2024.10.28
------------------------------------------------ */

* {margin: 0;padding: 0;}

html {font-size: 62.5%;width: 100%;}

body{
font-size: 1.5rem;
font-family: 'Noto Sans JP', sans-serif;
overflow-y:auto !important;
overflow-x:hidden !important;
background:#000;
color:#fff;
line-height:1.7;
width: 100%;
}

.clearfix:after {
content:".";
height:0;
clear:both;
display: block;
visibility:hidden;
}

img {vertical-align:top;}
a:hover img {opacity: 0.6;filter: alpha(opacity=60);-moz-opacity:0.6;}

a {color:#fff;}
a:visited {color:#fff;}
a:hover {color:#f00}

a.btn {display:block;width:40%;padding:10px 30px;margin:30px auto;background:#ccc;border-radius:10px;text-align:center;text-decoration:none;font-size:1.8rem;}
a.btn:hover {background:#600;color:#fff;}




/* header
------------------------------------------------------------- */

header {padding:20px 0;width:100%;height:100px;text-align:center;background-color: rgba(0,0,0,0.9);position:fixed;z-index:300;transition: .3s;border-bottom:1px solid #666;}
header .headlogo {width:150px;padding:0 0 10px 0;transition: .3s;}
	
header ul#gnavi {margin:5px 0 0 0;list-style:none;font-size:1.5rem;white-space: nowrap;transition: .3s;font-family: 'Fjalla One', sans-serif;}
header ul#gnavi li {display:inline;letter-spacing:5px;}
header ul#gnavi li:after {content:"　|　"}
header ul#gnavi li:last-child:after {content:""}

header a {color:#fff;text-decoration:none;}

.is-animation { height: 70px;}
.is-animation .headlogo {width:100px;}
.is-animation ul#gnavi {margin:0;}



/* KV
------------------------------------------------------------- */

#mainvisual { height:800px;padding:120px 0 0 0;background:url(../img/top/mainvisual_201911.jpg) 50% 100% no-repeat;}
#mainvisual .inner { width:1200px;margin:0 auto;position:relative;height:800px;}

#mainvisual_202003 { height:470px;padding:140px 0 0 0;background:url(../img/top/mainvisual_202003.jpg) 50% 100% no-repeat;}
#mainvisual_202003 .inner { width:1200px;margin:0 auto;position:relative;height:470px;}

#mainvisual_202012 { height:800px;padding:140px 0 0 0;background:url(../img/top/mainvisual_202012.jpg) 50% 100% no-repeat;}
#mainvisual_202012 .inner { width:1200px;margin:0 auto;position:relative;height:800px;}

#mainvisual_202101 { height:800px;padding:140px 0 0 0;background:url(../img/top/mainvisual_202101.jpg) 50% 100% no-repeat;}
#mainvisual_202101 .inner { width:1200px;margin:0 auto;position:relative;height:800px;}

#mainvisual_202108 { margin:140px 0 0 0;}
#mainvisual_202108 .inner { width:100%;margin:0 auto;position:relative;}
#mainvisual_202108 .inner img {width:100%;display:block;}


#mainvisual_202201 { margin:140px 0 0 0;}
#mainvisual_202201 .inner { width:100%;margin:0 auto;position:relative;}
#mainvisual_202201 .inner img {width:100%;display:block;}

#mainvisual .inner .text1 {width:940px;top:0px;left:130px;position:absolute;}
#mainvisual .inner .text2 {max-width:875px;bottom:20px;left:160px;position:absolute;}

#mainvisual_202108 .inner p.nextlive,
#mainvisual_202201 .inner p.nextlive{position:absolute;font-size:5rem;font-family: 'Fjalla One', sans-serif;letter-spacing:5px;top:400px;width:100%;text-align:center;text-shadow: 2px 2px 3px #000;}

#mainvisual_202205 { margin:140px 0 0 0;}
#mainvisual_202205 .inner { width:100%;margin:0 auto;position:relative;}
#mainvisual_202205 .inner img {width:100%;display:block;}

#mainvisual_202206 { margin:140px 0 0 0;}
#mainvisual_202206 .inner { width:100%;margin:0 auto;position:relative;}
#mainvisual_202206 .inner img {width:100%;display:block;}

video {width:100%;height:50%;overflow: hidden;padding:0 0 0 0;vertical-align:top;}


#streaming { height:600px;background:#000;}
#streaming .inner { width:1200px;margin:0 auto;position:relative;height:600px;}
#streaming .inner img {width:100%;}


/* profile
------------------------------------------------------------- */

#profile { background:#000;padding:50px 0;color:#ccc;}
#profile .inner { width:1000px;margin:0 auto;}
#profile .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:50px;font-size:3.8rem;font-family: 'Fjalla One', sans-serif;}
#profile .inner p {line-height:2;width:640px;margin:0 auto 40px auto;}
#profile .inner p.en  {color:#888;}
#profile .inner hr {border:none;border-bottom:1px dotted #444;width:740px;margin:0 auto 40px auto;}

#profile .flex {margin:30px 0 0 0;}
#profile .left {float:left;width:300px;margin:0 50px 0 0;text-align:center;font-size:2.8rem;font-family: 'Fjalla One', sans-serif;}
#profile .center {float:left;width:300px;margin:0 50px 0 0;text-align:center;font-size:2.8rem;font-family: 'Fjalla One', sans-serif;}
#profile .right {float:left;width:300px;margin:0 ;text-align:center;font-size:2.8rem;font-family: 'Fjalla One', sans-serif;}

#profile .left .pict,
#profile .center .pict,
#profile .right .pict {margin:0 0 20px 0;}

#profile .flex span{font-size:2rem;}


#profile  ul.snsicon { display:table;margin:0 auto;text-align:center;}
#profile  ul.snsicon li {float:left;display:inline;display:block;padding:10px;margin:0 20px 0 0;width:20px;}
#profile  ul.snsicon li:last-child {margin:0;}
#profile  ul.snsicon li img {width:20px;}


/* live
------------------------------------------------------------- */

#live { background:#fff;padding:50px 0;color:#000;}
#live .inner { width:1000px;margin:0 auto;}
#live .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:50px;font-size:3.8rem;font-family: 'Fjalla One', sans-serif;}
#live .inner h3 {text-align:center;margin:0 0 0 0;letter-spacing:1px;font-size:3.0rem;vertical-align:middle;}
#live .inner h3 em {color:#f00;letter-spacing:1px;font-size:2.0rem;font-style:normal;}
#live .inner h3.small {text-align:center;margin:0 0 0 0;letter-spacing:0;font-size:2.4rem;}

#live .inner h4 {text-align:center;margin:0 0 20px 0;letter-spacing:1px;font-size:2.0rem;}
#live .inner h5 {text-align:center;margin:0 0 40px 0;letter-spacing:1px;font-size:1.8rem;}
#live .inner h6 {text-align:center;margin:0 0 10px 0;letter-spacing:1px;font-size:1.8rem;}

#live .inner h4.sub {text-align:center;margin:0 0 20px 0;letter-spacing:1px;font-size:2.6rem;}
#live .inner h4.venue {text-align:center;margin:0 0 0 0;letter-spacing:1px;font-size:2.2rem;}
#live .inner .time {text-align:center;margin:0 0 10px 0;letter-spacing:1px;font-size:1.5rem;}
#live .inner .pict {display:block;width:50%;margin:auto;}
#live .inner .pict2 {display:block;width:80%;margin:auto;}

#live .inner .sold {text-align:center;margin:0 0 40px 0;letter-spacing:1px;font-size:2.0rem;font-weight:bold;color:#f00;}

#live .inner a {color:#666;}
#live .inner a:visited {color:#666;}
#live .inner a:hover {color:#f00}

#live .inner hr {border-top:none;margin:50px 0;}

#live .inner .bnr {width:100%;}

#live .inner video {width:720px;height:405px;display:block;margin:auto;}

#live .inner input {border:solid 1px #ccc;padding:15px 30px;margin:20px auto 20px auto;font-size:1.8rem;text-transform:uppercase;font-weight:bold;color:#333;cursor:pointer;background:#ffd69c;display:table;}
#live .inner input:hover {background:#ff9600;color:#fff;}

#live .inner a.btn {display:block;width:80%;padding:10px 0;margin:20px auto;background:#ccc;border-radius:10px;text-align:center;text-decoration:none;font-size:1.6rem;}
#live .inner a.btn:hover {background:#600;color:#fff;}

#live .inner .btn_accordion {background:#ccc;cursor: pointer;font-size:1.3rem;padding:5px 0;text-align:center;margin:0 0 40px 0;}

#live .inner .btn1,#live .inner .btn1:visited {display:inline-block;padding:6px 20px;background:#c7000a;color:#fff;margin:10px 0;border:1px solid #ccc;font-size:1.5rem;cursor:pointer;text-decoration:none;}
#live .inner .btn1:hover {border:1px solid #ccc;background:#444;color:#fff;}

#live .inner .btn2,#live .inner .btn2:visited {display:inline-block;padding:6px 20px;background:#E437CF;color:#fff;margin:10px 0;border:1px solid #ccc;font-size:1.5rem;cursor:pointer;text-decoration:none;}
#live .inner .btn2:hover {border:1px solid #ccc;background:#444;color:#fff;}



#live .inner .notice {font-size:12px;border:1px solid #ccc;padding:20px;}
#live .inner .notice h6 {font-size:14px;}



/* NEWS
------------------------------------------------------------- */

#news { background:#666;padding:50px 0;color:#fff;}
#news .inner { width:800px;margin:0 auto;}
#news .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:50px;font-size:3.8rem;font-family: 'Fjalla One', sans-serif;}

#news .inner dl {border-bottom:1px dotted #ccc;margin:0 0 30px 0;}
#news .inner dl dt { float:left;width:250px;}
#news .inner dl dt img { width:100%;}

#news .inner dl dd { float:right;width:520px;margin:0 0 20px 0 ;}

#news .inner dl dd h3 {font-size:2rem;font-weight:bold;margin:0 0 30px 0;}
#news .inner dl dd h3 em { font-size:1.4rem;font-weight:normal;font-style:normal;}

#news .inner .btn1 {display:inline-block;padding:6px 20px;margin:10px 0;border:1px solid #ccc;font-size:1.3rem;cursor:pointer;text-decoration:none;}
#news .inner .btn1:hover {border:1px solid #ccc;background:#444;color:#fff;}

#news .inner .btn_accordion {background:#ccc;color:#333;cursor: pointer;font-size:1.3rem;padding:5px 0;text-align:center;margin:0 0 40px 0;}



/* Discography
------------------------------------------------------------- */

#discography { background:#222;padding:80px 0;color:#fff;}
#discography .inner { width:800px;margin:0 auto;}
#discography .inner h2 {text-align:center;color:#fff;margin:0 0 40px 1em;letter-spacing:20px;font-size:3.8rem;font-family: 'Fjalla One', sans-serif;}

#discography .inner dl {margin:0 0 30px 0;}
#discography .inner dl dt {float:left;width:400px;}
#discography .inner dl dt .jkt {width:340px;}
#discography .inner dl dd {float:right;width:400px;}
#discography .inner dl dd h3 {font-size:2rem;margin:0;line-height:1.2;letter-spacing:2px;}
#discography .inner dl dd .release {font-size:1.2rem;margin:0 0 20px 0;}
#discography .inner dl dd .num {font-size:1.2rem;margin:0 0 10px 0;}
#discography .inner dl dd .price {font-size:1.2rem;margin:0 0 20px 0;}
#discography .inner dl:after {content:".";height:0;clear:both;display: block;visibility:hidden;}

#discography .inner hr {border-top:none;margin:0 0 50px 0;}

#discography .inner .btn1 {display:inline-block;padding:6px 20px;border:1px solid #ccc;font-size:1.3rem;cursor:pointer;text-decoration:none;}
#discography .inner .btn1:hover {border:1px solid #ccc;background:#444;color:#fff;}


/* intromovie
------------------------------------------------------------- */

#intromovie { background:#780808;padding:80px 0;color:#000;}
#intromovie .inner { width:800px;margin:0 auto;}
#intromovie .inner h2 {text-align:center;color:#fff;margin:0 0 40px 1em;letter-spacing:50px;font-size:3.8rem;font-family: 'Fjalla One', sans-serif;}

#intromovie .inner iframe {width:800px;aspect-ratio: 16 / 9;}

#intromovie .inner .btn {display:table;margin:20px auto 0 auto;}
#intromovie .inner .btn1 {display:inline-block;padding:6px 20px;border:1px solid #ccc;font-size:1.3rem;cursor:pointer;text-decoration:none;}
#intromovie .inner .btn1:hover {border:1px solid #ccc;background:#444;color:#fff;}



/* sound
------------------------------------------------------------- */

#sound { background:#780808;padding:80px 0;color:#000;}
#sound .inner { width:800px;margin:0 auto;}
#sound .inner h2 {text-align:center;color:#fff;margin:0 0 40px 1em;letter-spacing:50px;font-size:3.8rem;font-family: 'Fjalla One', sans-serif;}

#sound .inner iframe {width:800px;aspect-ratio: 16 / 9;}

/* notes
------------------------------------------------------------- */

#notes { background:#fff;padding:200px 0 50px 0;color:#000;}
#notes .inner { width:800px;margin:0 auto;line-height:2;}
#notes .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:10px;font-size:3.0rem;font-family: 'Fjalla One', sans-serif;}
#notes .inner h3 {text-align:center;margin:2em 0 0 0;letter-spacing:1px;font-size:2.0rem;}

#notes .inner ul {margin:0 0 1em 1em;list-style:none;}
#notes .inner ul li {padding:10px 0;border-bottom:1px dotted #ccc;}
#notes .inner ul li:before {content:"●";}

#notes .inner a {color:#000;}



/* SHOP
------------------------------------------------------------- */

#shop { background:#fff;padding:200px 0 50px 0;color:#000;}
#shop .inner { width:840px;margin:0 auto;line-height:2;}
#shop .inner h2 {text-align:center;margin:0 0 40px 0.4em;letter-spacing:10px;font-size:3.8rem;font-family: 'Fjalla One', sans-serif;}

#shop dl.left {float:left;width:400px;}
#shop dl.left dt {margin:0 0 10px 0;}

#shop dl.right {float:right;width:400px;}
#shop dl.right dt {margin:0 0 10px 0;}




/* interview
------------------------------------------------------------- */

#interview { background:#fff;padding:200px 0 50px 0;color:#000;}
#interview .inner { width:800px;margin:0 auto;line-height:2;}
#interview .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:10px;font-size:3.0rem;font-family: 'Fjalla One', sans-serif;}
#interview .inner h3 {text-align:center;margin:0 0 0 0;letter-spacing:1px;font-size:3.0rem;}

#interview dl {}
#interview dl dt {font-weight:bold;margin:0 0 0.5em 0;}
#interview dl dd {margin:0 0 2em 0;}

#interview .pict1 {display:block;width:700px;margin:0 auto 2em auto;}
#interview .livedate {border:2px solid #ccc;padding:20px;background:#fafafa;}
#interview .livedate h3 {font-size:2rem;}
#interview .livedate h4 {font-size:1.6rem;text-align:center;}

#interview a {color:#333;}
#interview a:hover {color:#f00;}



/* Inquiry / Order
------------------------------------------------------------*/

#inquiry {background:#ccc;padding:140px 0 50px 0;color:#000;}

#inquiry .jkt {display:block;width:80%;max-width:600px;margin:auto;}

#inquiry #titleheader { padding:20px;background:#666;color:#fff;}
#inquiry #titleheader h2 { text-align:center;letter-spacing:2px;font-size:3.0rem;font-family: 'Fjalla One', sans-serif;}
#inquiry h3 { text-align:center;font-family: 'Forum', cursive;font-size:2rem;letter-spacing:1px;margin:0 0 1em 0; }

#inquiry .inner {width:900px;margin:50px auto 50px auto;padding:50px 20px;border-radius:6px;background:#fff;}
#inquiry p {margin:0 0 10px 0;}
#inquiry p.lead {font-weight:bold;text-align:center;margin:0 0 20px 0;}

#inquiry a {color:#000;} 
#inquiry a:hover {color:#f00;} 

#inquiry .caution {width:80%;font-weight:bold;text-align:center;margin:0 auto 20px auto;padding:20px;color:#FF0004;border:1px solid #666;background:#f1f1f1;}
#inquiry .caution a {color:#f00;}
#inquiry .caution a:visited {color:#f00;}
#inquiry .caution a:hover {color:#600;}

#inquiry table#inqtable{width:80%;margin:30px auto 20px auto;border-collapse:collapse;}
#inquiry table#inqtable th{width:220px;text-align:left;vertical-align:top;padding:10px;font-weight:bold;}
#inquiry table#inqtable td{padding:10px;}
#inquiry table#inqtable .even{background:#ececec;}
#inquiry table#inqtable em{font-size:1.2rem;font-style:normal;line-height:1.1;}

#inquiry table#inqtable select{ font-size:1.6rem;border:1px solid #ccc;padding:3px;border-radius:10px;background:#fff;width:90%;}
#inquiry table#inqtable input[type="text"]{ font-size:1.6rem;border:1px solid #ccc;padding:3px;border-radius:4px;background:#fff;width:90%;}
#inquiry table#inqtable input::placeholder {color:#ccc;}
#inquiry table#inqtable textarea{font-size:1.6rem;border:1px solid #ccc;padding:3px;border-radius:4px;background:#fff;width:90%;resize:vertical;}

#inquiry table#inqtable .cc{float:left;width:170px;text-align:center;}
#inquiry table#inqtable p.cctext{text-align:left;font-size:1.2rem;margin:5px 10px 0 10px;padding:0;}

#inquiry .buttons {text-align:center;margin:0 0 10px 0;}
#inquiry .buttons input[type="submit"],
#inquiry .buttons input[type="button"],
#inquiry .buttons input[type="reset"]{ background:#f2f2f2;font-size:1.6rem;padding:10px 30px;border:1px solid #ccc;border-radius:10px;cursor:pointer;}

#inquiry #errormsg {margin:0 0 30px 0;}
#inquiry #errormsg p {margin:0 0 10px 0;text-align:center;}
#inquiry .errorpoint{color:#f00;}

#inquiry p.btn a {display:block;width:70%;padding:10px;margin:0 0 10px 0;border:1px solid #ccc;border-radius:6px;text-decoration:none;background:#666;color:#fff;}
#inquiry p.btn a:hover {background:#ccc;color:#000;}



/* tribridarchive_sp
------------------------------------------------------------- */

#tribridarchive_sp { background:#fff;padding:200px 0 50px 0;color:#000;}
#tribridarchive_sp .inner { width:840px;margin:0 auto;line-height:2;}
#tribridarchive_sp .inner h2 {text-align:center;margin:0 0 40px 0.4em;letter-spacing:10px;font-size:3.8rem;font-family: 'Fjalla One', sans-serif;}




/* footer
------------------------------------------------------------- */

footer{background:#333;color:#ccc;font-size:1.4rem;}
footer .inner{ width:800px;margin:0 auto;padding:50px 0 50px 0;}

footer .inner a {color:#fff;}
footer .inner a:hover {color:#6a63a7;}

.sharebtn {display:table;margin:10px 0;}
.twitter {display:inline;float:left;width:76px;margin:0 10px 0 0;}
.twitter-share-button{margin:0 10px 0 0;}
.fb-like {display:inline;}
.fb_iframe_widget > span {vertical-align: baseline !important;}


footer .inner  ul.snsicon { display:table;margin:0 auto;text-align:center;}
footer .inner  ul.snsicon li{float:left;display:inline;display:block;padding:10px;margin:0 20px 0 0;width:30px;}
footer .inner  ul.snsicon li:last-child {margin:0;}
footer .inner  ul.snsicon li img {width:50px;}



/* Modal Window
----------------------------------------------------------------*/

.hide-area{display: none;}

.modaal-close:after, 
.modaal-close:before{background:#ccc;}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{background:#666;}

.modaal-outer-wrapper  {}
.modaal-container {max-width:640px !important;border-radius:10px !important;}
.modaal-video .modaal-inner-wrapper{padding:0;}
#modaal-title{font-size:1.2rem;text-align: center;margin: 0 0 20px 0;}

.modaal-container img {width:100%;}
.modaal-container dl {text-align:center;margin:0 0 20px 0;}
.modaal-container dl dt {margin:0 0 20px 0;font-size:1.9rem;font-weight:bold;}
.modaal-container dl dd img {margin:0 0 10px 0;border:2px solid #ccc;}


/* effect
------------------------------------------------ */

.fadein {opacity: 0;transform : translate(0, 50px);transition : all 600ms;}
.fadein.scrollin {opacity: 1;transform: translate(0, 0);}

.effect > .fadein:nth-of-type(2) {
-moz-transition-delay:200ms;
-webkit-transition-delay:200ms;
-o-transition-delay:200ms;
-ms-transition-delay:200ms;
}

.effect > .fadein:nth-of-type(3) {
-moz-transition-delay:400ms;
-webkit-transition-delay:400ms;
-o-transition-delay:400ms;
-ms-transition-delay:400ms;
}

.effect > .fadein:nth-of-type(4) {
-moz-transition-delay:600ms;
-webkit-transition-delay:600ms;
-o-transition-delay:600ms;
-ms-transition-delay:600ms;
}

.effect > .fadein:nth-of-type(5) {
-moz-transition-delay:800ms;
-webkit-transition-delay:800ms;
-o-transition-delay:800ms;
-ms-transition-delay:800ms;
}

.effect > .fadein:nth-of-type(6) {
-moz-transition-delay:1000ms;
-webkit-transition-delay:1000ms;
-o-transition-delay:1000ms;
-ms-transition-delay:1000ms;
}

.effect > .fadein:nth-of-type(7) {
-moz-transition-delay:1200ms;
-webkit-transition-delay:1200ms;
-o-transition-delay:1200ms;
-ms-transition-delay:1200ms;
}

.effect > .fadein:nth-of-type(8) {
-moz-transition-delay:1400ms;
-webkit-transition-delay:1400ms;
-o-transition-delay:1400ms;
-ms-transition-delay:1400ms;
}

.effect > .fadein:nth-of-type(9) {
-moz-transition-delay:1600ms;
-webkit-transition-delay:1600ms;
-o-transition-delay:1600ms;
-ms-transition-delay:1600ms;
}


.leftin {opacity: 0;transform : translate(-100px, 0);transition : all 600ms;}
.leftin.scrollin {opacity: 1;transform: translate(0, 0);}

.rightin {opacity: 0;transform : translate(100px, 0);transition : all 600ms;}
.rightin.scrollin {opacity: 1;transform: translate(0, 0);}

.view {margin:auto;position: relative;overflow: hidden;}
.view::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    transform: translateX(-100%);
    transition: all .3s ease-in-out .3s;
}
.view img {vertical-align: middle;transform: translateX(-100%);}
.view.js-on::after {animation: viewinMask 1s ease-in-out forwards;}
.view.js-on img {animation: viewinImg 1s ease-in-out forwards;}

@keyframes viewinMask {
    0%{transform: translateX(-100%);}
    40%{transform: translateX(0%);}
    60%{transform: translateX(0%);}
    100%{transform: translateX(100%);}
}
@keyframes viewinImg {
    0%{transform: translateX(-100%);}
    40%{transform: translateX(0%);}
    60%{transform: translateX(0%);}
    100%{transform: translateX(0%);}
}


/* sidebar [SP MENU]
------------------------------------------------------------- */

#sidebar {
display:none;
font-size: 1.5rem;
padding-top: 80px;
width: 70%;
height: 100%;
position: fixed;
color: #5e9e2e;
background: #000;
text-align: center;
}
ul#nav_sp {display:none;}

#nav_sp ul {
list-style: none;
margin-left: 0;
}
#nav_sp > ul > li {
position: relative;
}

#nav_sp a {
color: #fff !important;
text-decoration: none !important;
display: block;
padding: 15px 0;
border-bottom:1px solid #666;
transition: background-color .3s linear;
}
#nav_sp a:hover {
text-decoration:none !important;
background: #900;
color:#fff !important;
}

/* sub-menu */
#nav_sp .sub-menu-nav {
position: fixed;
background: #033560;
color: #fff;
top: 0;
padding-top: 20px;
left: 260px;
width: 0;
height: 100%;
overflow: hidden;
transition: width .2s ease-out;
}
#nav_sp .sub-menu-nav a,
#nav_sp .sub-menu:hover .sub-menu-nav {
width: 230px;
}

/* nav-toggle */
#nav-toggle {
display: none;
position: fixed;
top: 20px;
right: 15px;
height: 32px;
cursor:pointer;
}
#nav-toggle > div {
position: relative;
width: 32px;
}
#nav-toggle span {
width: 100%;
height: 2px;
left: 0;
display: block;
background: #fff;
position: absolute;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}

#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 11px;}
#nav-toggle span:nth-child(3) {top: 22px;}

#overlay {
display: none;
position: fixed;
background: rgba(0,0,0,.6);
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}