@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 801px) {

/********************************************************************************************************
 PC ARTIST
********************************************************************************************************/
#wrapper #container .artist {
 margin: 140px auto 0;
 padding: 120px 0 80px;
 width: 100%;
 border-top: 5px solid #feff01;
 border-bottom: 5px solid #feff01;
 position: relative;
 background: url("/online-live/images/bg_artist.png") no-repeat bottom right;
}

#wrapper #container .artist .mi {
 position: absolute;
 top: -45px;
 left: 38%;
}

#wrapper #container .artist .artist_box ul li {
 margin: 0 0 25px;
 position: relative;
 border: 2px solid #feff01;
}

#wrapper #container .artist .artist_box ul li a {
 text-align: center;
 color: #000;
 font-weight: 600;
 display: block;
 overflow: hidden;
 cursor: pointer;
}

#wrapper #container .artist .artist_box ul li a img {
 display: block;
 width: 100%;
 transition-duration: 0.2s;
}

#wrapper #container .artist .artist_box ul li a img:hover {
 opacity: 0.5;
 transform: scale(1.05);	/*画像の拡大率*/
 transition-duration: 0.2s;
}

#wrapper #container .artist .artist_box ul li a span {
 display: block;
 padding: 12px 0 10px;
 width: 100%;
 position: absolute;
 bottom: 0;
 background: #feff01;
 box-sizing: border-box;
}

#wrapper #container .artist .artist_box ul li a span:hover {
 text-decoration: underline;
}

/*‐‐‐‐‐‐‐‐‐‐PC　ポップアップデザイン‐‐‐‐‐‐‐‐‐‐*/
.artist_popup_wrapper {
 position: fixed;
 z-index: 10;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 display: none;
 overflow: auto;
 text-align: center;
 -webkit-overflow-scrolling: touch;
}

.artist_popup_wrapper .artist_popup {
 margin: 0 auto 10px;
 padding: 40px 35px;
 width: 100%;
 max-width: 600px;
 color: #fff;
 text-align: left;
 background: #000;
 position: relative;
 box-sizing: border-box;
}

.artist_popup_wrapper .artist_popup dl {
 padding: 0 0 30px;
}

.artist_popup_wrapper .artist_popup dl dt {
 margin: 0 0 30px;
 padding: 0 0 20px;
 text-align: center;
 font-size: 24px;
 letter-spacing: 0.05em;
 font-weight: 600;
 border-bottom: 5px solid #feff01;
}

.artist_popup_wrapper .artist_popup dl dd {
 text-align: center;
}

.artist_popup_wrapper .artist_popup .txt_box p {
 padding: 0 0 20px;
 font-size: 14px;
 line-height: 1.5;
}

.artist_popup_wrapper .artist_popup ul.link li {
 padding: 0 0 10px;
}

.artist_popup_wrapper .artist_popup ul.link li a {
 padding-left: 5px;
 font-size: 16px;
 color: #feff01;
}

/********************************************************************************************************
	PC ABOUT
********************************************************************************************************/
#wrapper #container .about {
 margin: 0 auto;
 padding: 0;
 width: 100%;
 position: absolute;
 top: 1790px;
}

#wrapper #container .about .about_box {
 padding: 85px 40px 40px;
 border: 3px solid #feff01;
 box-sizing: border-box;
 position: relative;
}

#wrapper #container .about .about_box h2 {
 padding: 10px;
 font-size: 36px;
 letter-spacing: 0.1em;
 position: absolute;
 top: -30px;
 left: 25%;
 transform: none;
 box-sizing: border-box;
}

#wrapper #container .about .about_box p {
 padding: 0 0 30px;
 text-align: center;
 font-size: 16px;
 line-height: 1.8;
}

#wrapper #container .about .about_box p.txt_r {
 padding: 0;
 text-align: right;
}


/********************************************************************************************************
	PC overview
********************************************************************************************************/
#wrapper #container .overview {
 padding: 70px 0 0;
 background: #262626;
 -webkit-transform: skew(0deg, -3deg);
 box-sizing: border-box;
}

#wrapper #container .overview .overview_box {
 margin: 0 auto;
 width: 780px;
 -webkit-transform: skew(0deg, 3deg);
 position: relative;
}

#wrapper #container .overview .overview_box h2 {
 padding: 10px;
 width: 500px;
 text-align: center;
 font-size: 36px;
 letter-spacing: 0.2em;
 position: absolute;
 top: -100px;
 left: 17%;
 transform: none;
 box-sizing: border-box;
}

#wrapper #container .overview .overview_box dl {
 font-size: 22px;
 letter-spacing: 0.1em;
}

#wrapper #container .overview .overview_box dl dt {
 margin: 0 0 50px; 
 padding: 5px 10px 8px;
 width: 24%;
 font-weight: 200;
 color: #feff01;
 border-left: 10px solid #feff01;
 border-bottom: 1px solid #feff01;
 box-sizing: border-box;
}

#wrapper #container .overview .overview_box dl dd {
 margin: 0 0 50px 80px;
 padding: 5px 0 8px;
 width: 65%;
 font-weight: 200;
 border-bottom: 1px solid #fff;
 box-sizing: border-box;
}
 

/********************************************************************************************************
	PC TICKET
********************************************************************************************************/
#wrapper #container .ticket {
 margin: -40px 0 0;
 padding: 140px 0;
 background: url("/online-live/images/bg_ticket.jpg") no-repeat top center;
 background-size: cover;
}

#wrapper #container .ticket .ticket_box {
 border: 5px solid #feff01;
 position: relative;
}

#wrapper #container .ticket .ticket_box .mi {
 position: absolute;
 top: -45px;
 left: 34%;
}

#wrapper #container .ticket .ticket_box .ticket_txt {
 padding: 100px 0 60px;
 width: 100%;
 background: rgba(40,40,40,0.8);
 box-sizing: border-box;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont {
 margin: 0 auto;
 padding: 0 0 50px;
 width: 800px;
 text-align: center;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont h3 {
 padding: 0 0 25px;
 font-size: 20px;
 font-weight: 600;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont h3::after {
 margin: 18px auto 0;
 content: '';
 display: block;
 background: #feff01;
 height: 3px;
 max-width: 50px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont h3.highlight {
 margin: 0 auto 25px;
 padding: 8px 5px;
 display: inline-block;
 font-size: 19px;
 font-weight: 600;
 letter-spacing: 0.05em;
 color: #000;
 background: #feff01;
 -webkit-transform: skew(-15deg);
 transform: skew(-15deg);
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont h3.highlight::after {
 display: none;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont h4 {
 padding: 0 0 10px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont p {
 line-height: 1.5;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont p em {
 font-size: 20px;
 font-weight: 400;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont p small {
 font-size: 16px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont p span {
 font-size: 12px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont dl {
 padding: 50px 0;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont dl dt {
 font-weight: 600;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont dl dd {
 font-size: 16px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont ul {
 margin: 0 auto;
 width: 660px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont ul li {
 text-align: left;
 font-size: 14px;
 line-height: 1.8;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont .bnr_wrap {
 padding: 0 0 40px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont .bnr_wrap:last-of-type {
 padding: 0;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont .bnr_wrap p {
 padding: 0 0 10px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont .bnr_wrap p a img {
 line-height: 0;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont .bnr_wrap p a:hover {
 opacity: 0.4;
 transition: opacity 0.4s;
}


#wrapper #container .ticket .ticket_box .ticket_txt .cont .bnr_wrap p span {
 font-size: 12px;
 line-height: 1.5;
}

#wrapper #container .ticket .ticket_box dl {
 margin: 0 auto;
 padding: 0 0 30px;
 width: 660px;
}

#wrapper #container .ticket .ticket_box dl:last-of-type {
 padding: 0;
}

#wrapper #container .ticket .ticket_box dl dt {
 margin: 0 0 20px;
 padding: 0 0 10px;
 text-align: center;
 border-bottom: 1px solid #fff;
}

#wrapper #container .ticket .ticket_box dl dd {
 padding: 0 0 20px;
 font-size: 14px;
 line-height: 1.8;
}

#wrapper #container .ticket .ticket_box dl dd ul li {
 padding: 0 0 20px;
 line-height: 1.5;
}

#wrapper #container .ticket .ticket_box dl dd a {
 color: #feff01;
}


}


@media screen and (max-width: 800px) {
/********************************************************************************************************
 SP ARTIST
********************************************************************************************************/
#wrapper #container .artist {
 margin: 60px auto 0;
 padding: 40px 0 20px;
 width: 100%;
 border-top: 3px solid #feff01;
 border-bottom: 3px solid #feff01;
 position: relative;
 background: url("/online-live/images/bg_artist.png") no-repeat bottom right;
 background-size: 100% auto;
}

#wrapper #container .artist .mi {
 position: absolute;
 top: -20px;
 left: 30%;
}

#wrapper #container .artist .artist_box ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

#wrapper #container .artist .artist_box ul li {
 width: 47%;
 margin: 0 0 12px;
 position: relative;
 border: 2px solid #feff01;
}

#wrapper #container .artist .artist_box ul li a {
 text-align: center;
 font-size: 12px;
 color: #000;
 font-weight: 600;
 display: block;
 overflow: hidden;
 cursor: pointer;
}

#wrapper #container .artist .artist_box ul li a img {
 display: block;
 width: 100%;
 transition-duration: 0.2s;
}

#wrapper #container .artist .artist_box ul li a span {
 display: block;
 padding: 5px 0;
 width: 100%;
 position: absolute;
 bottom: 0;
 background: #feff01;
 box-sizing: border-box;
}


/*‐‐‐‐‐‐‐‐‐‐SP　ポップアップデザイン‐‐‐‐‐‐‐‐‐‐*/
.artist_popup_wrapper {
 position: fixed;
 z-index: 10;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 display: none;
 overflow: auto;
 text-align: center;
 -webkit-overflow-scrolling: touch;
}

.artist_popup_wrapper .artist_popup {
 margin: 0 auto 10px;
 padding: 34px 5% 20px;
 width: 100%;
 color: #fff;
 text-align: left;
 background: #000;
 position: relative;
 box-sizing: border-box;
}

.artist_popup_wrapper .artist_popup dl {
 padding: 0 0 30px;
}

.artist_popup_wrapper .artist_popup dl dt {
 margin: 0 0 15px;
 padding: 0 0 8px;
 text-align: center;
 font-size: 18px;
 letter-spacing: 0.05em;
 font-weight: 600;
 border-bottom: 3px solid #feff01;
}

.artist_popup_wrapper .artist_popup dl dd {
 text-align: center;
}

.artist_popup_wrapper .artist_popup .txt_box p {
 padding: 0 0 20px;
 font-size: 12px;
 line-height: 1.5;
}

.artist_popup_wrapper .artist_popup ul.link li {
 padding: 0 0 10px;
}

.artist_popup_wrapper .artist_popup ul.link li a {
 padding-left: 5px;
 color: #feff01;
}

/********************************************************************************************************
	SP ABOUT
********************************************************************************************************/
#wrapper #container .about {
 margin: 0 auto;
 padding: 0;
 width: 100%;
 position: absolute;
 top: 840px;
}

#wrapper #container .about .about_box {
 padding: 30px 2% 20px;
 border: 3px solid #feff01;
 box-sizing: border-box;
 position: relative;
}

#wrapper #container .about .about_box h2 {
 padding: 10px 1.5%;
 font-size: 18px;
 letter-spacing: 0.1em;
 position: absolute;
 top: -20px;
 left: 13%;
 transform: none;
 box-sizing: border-box;
}

#wrapper #container .about .about_box p {
 padding: 0 0 15px;
 text-align: center;
 font-size: 13px;
 line-height: 1.6;
}

#wrapper #container .about .about_box p.txt_r {
 padding: 0;
 text-align: right;
}


/********************************************************************************************************
	PC overview
********************************************************************************************************/
#wrapper #container .overview {
 padding: 40px 0 20px;
 background: #262626;
 -webkit-transform: skew(0deg, -3deg);
 box-sizing: border-box;
}

#wrapper #container .overview .overview_box {
 margin: 0 auto;
 width: 90%;
 -webkit-transform: skew(0deg, 3deg);
 position: relative;
}

#wrapper #container .overview .overview_box h2 {
 padding: 10px 1.5%;
 width: 45%;
 text-align: center;
 font-size: 18px;
 letter-spacing: 0.2em;
 position: absolute;
 top: -55px;
 left: 26%;
 transform: none;
 box-sizing: border-box;
}

#wrapper #container .overview .overview_box dl {
 font-size: 22px;
 letter-spacing: 0.1em;
}

#wrapper #container .overview .overview_box dl dt {
 margin: 0 0 15px; 
 padding: 2px 3% 6px;
 width: 40%;
 font-size: 14px;
 font-weight: 200;
 color: #feff01;
 border-left: 4px solid #feff01;
 border-bottom: 1px solid #feff01;
 box-sizing: border-box;
}

#wrapper #container .overview .overview_box dl dd {
 margin: 0 0 40px;
 padding: 5px 0 8px 3%;
 width: 100%;
 font-size: 14px;
 font-weight: 200;
 border-bottom: 1px solid #fff;
 box-sizing: border-box;
}
 

/********************************************************************************************************
	SP TICKET
********************************************************************************************************/
#wrapper #container .ticket {
 margin: -10px 0 0;
 padding: 80px 0;
 background: url("/online-live/images/sp_bg_ticket.jpg") no-repeat top center;
 background-size: cover;
}

#wrapper #container .ticket .ticket_box {
 border: 3px solid #feff01;
 position: relative;
}

#wrapper #container .ticket .ticket_box .mi {
 position: absolute;
 top: -25px;
 left: 31%;
}

#wrapper #container .ticket .ticket_box .ticket_txt {
 padding: 40px 3% 10px;
 width: 100%;
 background: rgba(40,40,40,0.6);
 box-sizing: border-box;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont {
 margin: 0 auto;
 padding: 0 0 45px;
 text-align: center;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont h3 {
 padding: 0 0 20px;
 font-size: 15px;
 font-weight: 600;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont h3::after {
 margin: 10px auto 0;
 content: '';
 display: block;
 background: #feff01;
 height: 3px;
 max-width: 30px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont h3.highlight {
 margin: 0 auto 15px;
 padding: 6px 1%;
 display: inline-block;
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.05em;
 color: #000;
 background: #feff01;
 -webkit-transform: skew(-15deg);
 transform: skew(-15deg);
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont h3.highlight::after {
 display: none;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont h4 {
 padding: 0 0 10px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont p {
 line-height: 1.5;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont p em {
 font-size: 17px;
 font-weight: 400;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont p small {
 font-size: 13px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont p span {
 padding: 10px 0 0;
 display: block;
 font-size: 12px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont p.txt_l {
 text-align: left;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont .bnr_wrap {
 padding: 0 0 40px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont .bnr_wrap h4 {
 padding: 0 0 10px;
 font-size: 16px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont .bnr_wrap:last-of-type {
 padding: 0;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont .bnr_wrap p img {
 line-height: 0;
 width: 80%;
 height: auto;
}


#wrapper #container .ticket .ticket_box .ticket_txt .cont .bnr_wrap p span {
 font-size: 12px;
 line-height: 1.5;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont dl {
 padding: 25px 0 0;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont dl dt {
 font-weight: 600;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont dl dd {
 font-size: 12px;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont ul {
 margin: 0 auto;
 width: 95%;
}

#wrapper #container .ticket .ticket_box .ticket_txt .cont ul li {
 text-align: left;
 font-size: 10px;
 line-height: 1.8;
}


#wrapper #container .ticket .ticket_box dl {
 margin: 0 auto;
 padding: 0 0 20px;
 width: 100%;
}

#wrapper #container .ticket .ticket_box dl:last-of-type {
 padding: 0;
}

#wrapper #container .ticket .ticket_box dl dt {
 margin: 0 0 12px;
 padding: 0 0 8px;
 font-size: 13px;
 text-align: center;
 border-bottom: 1px solid #fff;
}

#wrapper #container .ticket .ticket_box dl dd {
 padding: 0 0 20px;
 font-size: 11px;
 line-height: 1.8;
}

#wrapper #container .ticket .ticket_box dl dd ul li {
 padding: 0 0 20px;
 line-height: 1.5;
}

#wrapper #container .ticket .ticket_box dl dd a {
 color: #feff01;
}










}