#event{
  width:calc(100% - 40px);
  margin:0 auto;
  > li{margin-top:30px;}
  li > p{color:#1c2d2a; text-align:right; margin:10px auto;}
  li > p::before{content:"期間：";}
  img.image-resize {width:100%;}
}
@media screen and (max-width:980px){#event{width:100%;}}

/*ウィクリースコア*/
#music_box{max-width:800px; margin:0 auto;}
#music_box > .inner{background:#fff !important; padding:20px !important;}
#music_box > .inner > .cat > .inner:first-child{width:100% !important;}
@media screen and (max-width:980px){#music_box > .inner > .cat > .inner:first-child{justify-content:center; text-align:center;}}

/*タグ*/
#event .sub-title{width:100% !important; margin:0 auto !important;}
#event .tag{display:flex; margin:20px auto 10px; flex-wrap:wrap;}
#event .tag > li{display:block; color:#fff; border-radius:5px; padding:1px 20px; margin:5px;}
#event .tag > li.gene{background:#ff9600;}
#event .tag > li.event{background:#008f8a;}
#event .tag > li.camp{background:#ff0000;}
#event .tag > li.contest{background:#e400ff;}
#event .tag > li.rank{background:#001eff;}
#event .tag > li.gene::before{content:"GENERATOR";}
#event .tag > li.event::before{content:"EVENT";}
#event .tag > li.camp::before{content:"CAMPAIGN";}
#event .tag > li.contest::before{content:"CONTEST";}
#event .tag > li.rank::before{content:"RANKING";}
@media screen and (max-width:800px){#event .tag li{font-size:12px; padding:1px 5px; margin:5px 2.5px}}

/*
================================================================================================================
VARIANT GATE
================================================================================================================
*/
#variant{font-weight:700; text-align:center; line-height:1.5rem;}
#variant img.pic{display:block; width:100%; margin:0 auto;}
#variant img.pic:not(.top){max-width:800px; margin:20px auto;}
#variant img.pic.top{width:calc(100% + 40px); margin-left:-20px; border:1px solid #440000;}
#variant .catch{font-family:"Noto Serif JP", serif; font-size:24px; line-height:2.5rem; margin:20px auto;}
#variant h2{display:block; color:#fff; background: linear-gradient(to right,  #762121 0%,#ed3b4b 100%); font-size:18px; text-align:left; border:1px solid #440000; padding:10px; margin:40px auto;}
#variant em{color:#ff2c2c;}

#variant #howto{font-size:16px;}
#variant #howto strong{font-size:18px;}
#variant .step li:nth-child(1){font-size:18px;}
#variant .step li:nth-child(3){color:#b47d7f; font-size:14px;}

#variant .point{position:relative; width:calc(100% - 30px); max-width:690px; font-size:15px; margin:40px auto 0;}
#variant .point::before{
display:block;
content:"";
position:absolute;
top:-10px;
left:-15px;
width:70px;
height:58px;
background-image:url(/game/sdvx/vii/images/event/point.png);
background-size:100% auto;
background-position:center;}
#variant .point li{padding:10px;}
#variant .point li:nth-child(1){color:#ff2c2c; background:#000; font-size:20px; text-align:center !important; border-radius:20px 20px 0 0;}
#variant .point li:nth-child(2){background:#fff; border-radius:0 0 20px 20px; border:2px solid #000; padding:20px;}
#variant .point li strong{display:block; color:#ff2c2c; font-size:18px;}
#variant .point:last-child{margin-bottom:30px;}

/*フォントサイズ関連*/
@media screen and (max-width:800px){
#variant .catch{font-size:20px;}
#variant #howto{font-size:14px; text-align:left;}
#variant #howto strong{font-size:17px;}
#variant .step li:nth-child(3){font-size:13px;}
#variant .point li strong{font-size:17px;}
#variant .point li br.br-pc{display:none;}
#variant .point li:nth-child(2){font-size:14px; text-align:left;}}

@media screen and (max-width:480px){
#variant .point{width:100%;}
#variant .point li:nth-child(2){padding:10px;}
#variant .point::before{width:60px; height:49px;}}