@charset "UTF-8";

/* ----------------------------------
NUL OFFICIAL SITE / sp css
MOD : 2019.5.21 
---------------------------------- */

html{
overflow-x : hidden;
overflow-y : auto;
}

.sp {display: none !important;}





@media screen and (min-width: 500px), screen and (orientation: landscape) and (min-width: 768px) {



}




@media screen and (max-width: 829px), screen and (orientation: landscape) and (max-width: 830px) {

.pc {display: none !important;}
.sp {display: block !important;}

body {font-size:1.4rem;}

img.res {width:100%;}


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

header {padding:10px 0;text-align:center;height:50px;}
header .headlogo {width:120px;transition: .3s;}

header .lang {display:none;}

.is-animation { height: 40px;}
.is-animation .headlogo {width:90px;}

#gnavi {display:none;}


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

#sidebar {
display:block;
position: fixed;
right: -300px;
top: 0;
height: 100%;
width: 300px;
color: #fff;
transition: .35s ease-in-out;
overflow-y:auto;
}

#nav_sp {margin:0 0 100px 0;}

/* サブメニューは開けない */
#nav_sp .sub-menu-head:after,
#nav_sp .sub-menu-nav {display: none;}
#nav-toggle {display: block;}

/* nav open */
.open {/*overflow: hidden;*/}
.open #overlay {display: block;}
.open #sidebar  {transform: translate3d(-300px,0,0);}

/* #nav-toggle close */
.open #nav-toggle span:nth-child(1) {top: 11px;transform: rotate(45deg);}
.open #nav-toggle span:nth-child(2) {width: 0;left: 50%;}
.open #nav-toggle span:nth-child(3) {top: 11px;transform: rotate(-45deg);}

/* z-index */
#overlay {z-index: 10;}
#sidebar {z-index: 300;}
#nav-toggle {z-index: 400;}



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

#mainvisual {background:url(../img/mainvisual.jpg) 50% 0 / cover;height:inherit;}
#mainvisual .inner { width:100%;margin:0 auto;position:relative;height:250px;}

.mainvisual {width:100%;padding:70px 0 0 0;}


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

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

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

#mainvisual_202206 { margin:70px 0 0 0;}

video {}
p.nextlive {display:none;}

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


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

#profile { background:#000;padding:50px 0;color:#ccc;}
#profile .inner { width:90%;margin:0 auto;}
#profile .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:10px;font-size:3rem;font-family: 'Fjalla One', sans-serif;}
#profile .inner p {line-height:2;width:100%;margin:0 auto 60px auto;}

#profile .flex {display: flex;flex-flow: row wrap;}

#profile .left {order: 3;float:none;width:100%;margin:0 0 10px 0;text-align:center;font-size:2.8rem;font-family: 'Fjalla One', sans-serif;}
#profile .center {order: 1;float:none;width:100%;margin:0 0 10px 0;text-align:center;font-size:2.8rem;font-family: 'Fjalla One', sans-serif;}
#profile .right {order: 2;float:none;width:100%;margin:0 0 10px 0;text-align:center;font-size:2.8rem;font-family: 'Fjalla One', sans-serif;}

#profile .left .pict,
#profile .center .pict,
#profile .right .pict {width:100%;margin:0;}

#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:90%;margin:0 auto;}
#live .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:20px;font-size:3rem;font-family: 'Fjalla One', sans-serif;}
#live .inner h3 {text-align:center;margin:0 0 0 0;letter-spacing:0;font-size:2rem;}
#live .inner h3.small {text-align:center;margin:0 0 0 0;letter-spacing:0;font-size:1.6rem;}

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

#live .inner h4.sub {text-align:center;margin:0 0 20px 0;letter-spacing:1px;font-size:1.6rem;}
#live .inner h4.venue {text-align:center;margin:0 0 0 0;letter-spacing:1px;font-size:2rem;}

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

#live .inner video {width:100%;height:initial;display:block;margin:auto;}
#live .inner img {width:100%;display:block;margin:auto;}




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

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

#news .inner dl {border-bottom:1px dotted #ccc;}
#news .inner dl dt {float:none;width:100%;}
#news .inner dl dt img { width:60%;display:block;margin:0 auto 20px auto ;}
#news .inner dl dd {float:none;width:100%;margin:0 0 20px 0 ;}
#news .inner dl dd h3 {font-size:1.7rem;font-weight:bold;margin:0 0 30px 0;}
#news .inner dl dd h3 em { font-size:1.2rem;font-weight:normal;font-style:normal;}



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

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

#discography .inner dl {margin:0 0 30px 0;}
#discography .inner dl dt {float:none;width:100%;text-align:center;margin:0 0 20px 0;}
#discography .inner dl dt .jkt {width:80%;max-width:340px;}
#discography .inner dl dd {float:none;width:100%;}
#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 .btn1 {display:table;padding:6px 20px;margin:auto;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:50px 0 50px 0;color:#000;}
#intromovie .inner { width:90%;margin:0 auto;}
#intromovie .inner h2 {text-align:center;color:#fff;margin:0 0 40px 1em;letter-spacing:20px;font-size:3.0rem;font-family: 'Fjalla One', sans-serif;}

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

#intromovie .inner .btn {display:block;margin:20px auto 0 auto;}
#intromovie .inner .btn1 {display:table;width:70%;padding:6px 20px;margin:auto;text-align:center;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:50px 0;color:#000;}
#sound .inner { width:90%;margin:0 auto;}
#sound .inner h2 {text-align:center;color:#fff;margin:0 0 40px 1em;letter-spacing:20px;font-size:3.0rem;font-family: 'Fjalla One', sans-serif;}

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

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

#notes { background:#fff;padding:130px 0 50px 0;color:#000;}
#notes .inner { width:90%;margin:0 auto;line-height:2;}
#notes .inner h2 {text-align:center;margin:0 0 40px 1em;letter-spacing:1px;font-size:2.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 0 1em;list-style:none;}
#notes .inner ul li {padding:10px 0;border-bottom:1px dotted #ccc;}
#notes .inner ul li:before {content:"●";}


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

#shop { background:#fff;padding:130px 0 50px 0;color:#000;}
#shop .inner { width:90%;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:none;width:100%;margin:0 0 20px 0;}
#shop dl.left dt {margin:0 0 10px 0;text-align:center;}

#shop dl.right {float:none;width:100%;}
#shop dl.right dt {margin:0 0 10px 0;text-align:center;}





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

#interview { background:#fff;padding:130px 0 50px 0;color:#000;}
#interview .inner { width:90%;margin:0 auto;line-height:1.8;font-size:1.5rem;}
#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:100%;margin:0 auto 2em auto;}
#interview .livedate h3 {font-size:1.8rem;}
#interview .livedate h4 {font-size:1.5rem;text-align:center;}



/* Inquiry / ORDER
------------------------------------------------------------*/

#inquiry {background:#ccc;padding:0 0 20px 0}

#inquiry #titleheader { padding:20px;background:#000;color:#fff;}
#inquiry #titleheader  h2 { text-align:center;font-family: 'Forum', cursive;font-size:1.8rem;letter-spacing:0; }

#inquiry .inner {width:80%;margin:30px auto 30px auto;padding:5%;border-radius:10px;background:#fff;}


#inquiry table#inqtable{width:100%;margin:30px auto 20px auto;border-collapse:collapse;}
#inquiry table#inqtable th{display:block;width:94%;text-align:left;vertical-align:top;padding:3%;font-weight:bold;}
#inquiry table#inqtable td{display:block;padding:0 3%;}
#inquiry table#inqtable .even{background:#ececec;}
#inquiry table#inqtable em{font-size:1.2rem;font-style:normal;}

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

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



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

#tribridarchive_sp { background:#fff;padding:200px 0 50px 0;color:#000;}
#tribridarchive_sp .inner { width:80%;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;}
footer .inner{ width:90%;margin:0 auto;padding:30px 0 30px 0;}

footer .inner p {padding:0;text-align:center;}


.sharebtn {display:table;margin:10px auto;}


/* 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 dl {text-align:center;margin:0 0 20px 0;}
.modaal-container dl dt {margin:0 0 20px 0;font-size:1.8rem;font-weight:bold;}
.modaal-container dl dd img {display:block;width:100%;max-width:230px;margin:0 auto 10px auto;border:2px solid #ccc;}



/* END
------------------------------------------------------------- */
}