h1,
h2{
text-align:center;
margin:0px auto 1% auto;width:100%;max-width:950px;
}
.top h2{
margin:30px auto 1% auto;width:100%;max-width:950px;
}
h1 img,
h2 img{
width:100%;
}
div.main_box{
border:1px solid rgba(237,222,160,1.0);padding:1%;background-color:rgba(255,242,184,0.9);box-shadow:#ACF 1px 1px 10px!important;
}
.main > img{
max-width:100%;margin:0px auto 10px;display:block;
}

div.main_box{
border:1px solid rgba(237,222,160,1.0);padding:1%;background-color:rgba(255,242,184,0.9);box-shadow:#ACF 1px 1px 10px!important;
}

.bkWAKU{
border:solid 6px #d7b376;
}


/*背景*/
.top_bg01 {
  background-image:url(../images/info/event3/top_bg.webp);
  background-position:center top;
  background-repeat: no-repeat;
  background-size:cover;
  background-color:rgba(12,13,45,0.00)!important;
}

.top_bg01, .top_bg01::before {
  -webkit-transition: all 0s ease;
  -moz-transition: all 0s ease;
  transition: all 0s ease;
}

.top_bg00 {
  background-image:url(../images/info/chararank_g/bg.jpg);
  background-position:center top;
  background-repeat: no-repeat;
  /*background-attachment: fixed;*/
  background-size:100%;
  -webkit-background-size:100%;
  -moz-background-size:100%;
  -o-background-size:100%;
  background-color:rgba(12,13,45,0.00)!important;
}

.top_bg00, .top_bg00::before {
  -webkit-transition: all 0s ease;
  -moz-transition: all 0s ease;
  transition: all 0s ease;
}

/*main*/
.inner{
margin:0 auto;max-width:824px;font-family: "Noto Sans JP", serif;font-weight:700;font-size:18px;
color:#fff;
text-shadow:1px 1px 0 #8d7711,-1px 1px 0 #8d7711,-1px -1px 0 #8d7711,1px -1px 0 #8d7711,
2px 2px 2px #470e7b,-2px 2px 2px #470e7b,-2px -2px 2px #470e7b,2px -2px 2px #470e7b;
transform:rotate(0.03deg);
}

.cate > div{
padding:20px 5px 0px;
font-weight:700;font-size:18px;
text-shadow:1px 1px 0 #8d7711,-1px 1px 0 #8d7711,-1px -1px 0 #8d7711,1px -1px 0 #8d7711,
2px 2px 2px #470e7b,-2px 2px 2px #470e7b,-2px -2px 2px #470e7b,2px -2px 2px #470e7b;
}
.phase{
padding:5px;
}
.phase:not(:first-of-type){
margin-top:40px;
}

.phase:first-of-type{
background:rgba(104,238,182,0.5);
}
.phase:first-of-type > p{
background:rgba(104,238,182,1);
}
.phase:nth-of-type(2){
background:rgba(243,176,242,0.5);
}
.phase:nth-of-type(2) > p{
background:rgba(243,176,242,1);
}
.phase:nth-of-type(3){
background:rgba(254,254,73,0.5);
}
.phase:nth-of-type(3) > p{
background:rgba(254,254,73,1);
}
.phase > p{
padding:10px;background:#e9c305;
text-shadow:none;
color:#000;
}

.phase:first-of-type > dl.reward > dt{
background:#95f2fd;
}
.phase:nth-of-type(3) > dl.reward > dt{
background:#faa71f;
}
dl.reward{
margin-top:10px 0px;
}
dl.reward > dt{
width:100%;background:#e978ff;padding:10px;text-align:center;border:1px solid #ffbb00;border-bottom:3px solid #ffbb00;
margin-top:10px;text-shadow:none;color:#000;
}
dl.reward > dd{
width:100%;background:#fff;color:#470e7b;
text-shadow:none;
}
dl.reward > dd > ul{
display:flex;flex-wrap:wrap;border:1px solid #ffbb00;border-top:none;
}
dl.reward > dd > ul > li:first-of-type{
width:35%;padding:0px 5px;
}
dl.reward > dd > ul > li:last-of-type{
width:65%;padding:0px 11px;border-left:1px solid #ffbb00;
display:flex;
}
dl.reward > dd > ul > li:last-of-type > p{
display:flex;align-items:center;
}
dl.reward > dd > ul > li:first-of-type > p{
padding:5px 2px;
}
dl.reward > dd > ul > li:first-of-type > p:first-of-type{
width:100%;text-align:center;border-bottom:1px solid #ffbb00;
}
dl.reward > dd > ul > li:first-of-type > p:last-of-type{
width:100%;text-align:center;
}


div.btn a {
width: 100%;max-width:320px;text-align: center;display: block;text-decoration:none;
padding: 10px;background:#e91e63;border:3px solid #fff;border-radius:10px;
font-size: 16px;color:#fff !important;font-weight:bold;box-shadow:#fff 0 0 6px;
margin:2% auto;
}
div.btn a:hover{
background:#f37e5a;/*border:3px solid #f37e5a;*/color:#fff !important;
}
div.btn.none a{
pointer-events:none;
background:#adadad;border:3px solid #84888c;color:#84888c !important;cursor:default;
box-shadow:#ccc 0 0 6px;
}
@media (max-width: 700px) {
.cate > div,
div.btn a{
font-size:12px;
}
}
/*calendar*/
#calendar img {
max-width: 100%;
}

#calendar.main_box > p{
background:#fff;padding:5px;margin:10px auto 3px auto;text-align:center;font-weight:bold;font-size:16px;
border:2px solid #000;
}
#calendar.main_box > p:last-of-type{
margin-top:5%;
}

#calendar > ul{
width:100%;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;
}
#calendar > ul > li{
background:#fff;border-left:1px solid #000;border-bottom:1px solid #000;padding:5px;text-align:center;
width:calc(100% / 7);
}
#calendar > ul.cal_header{
border-top:1px solid #000;
}
#calendar > ul > li[data-anv='0'],
#calendar > ul > li:first-of-type{
background:#fff0f0;color:#f00;
}
#calendar > ul > li:last-of-type{
background:#f0f0ff;color:#00f;border-right:1px solid #000;
}

#calendar > ul > li > p:first-of-type{
text-align:left;font-weight:bold;font-size:16px;
}
#calendar > ul > li > p:first-of-type span{
display:none;
}

#calendar > ul > li[data-kind='1']{
background:#fffbaf;
}

@media (min-width: 980px) {
div#schedule,
div#chararank{
margin-top:45px !important;
}
}

@media (min-width: 800px) {
div#schedule,
div#chararank{
margin-top:60px;
}
}
@media (max-width: 800px) {
#calendar > ul > li > p{
font-size:10px;
}
}

@media (max-width: 570px) {
#calendar > ul > li > p:first-of-type{
font-size:14px;
}
#calendar > p{
display:none;
}
#calendar > ul.cal_header{
display:none;
}
#calendar > ul > li{
width:100%;display:none;
}
#calendar > ul > li[data-event='0']{
display:flex;display:flex;flex-wrap:wrap;justify-content:space-between;
}
#calendar > ul > li > p{
font-size:12px;
}
#calendar > ul > li > p:first-of-type span{
display:inline;
}
#calendar > ul > li > p:first-of-type{
width:25%;display:flex;align-items:center;justify-content:center;
border-right:1px solid #ddd;
}
#calendar > ul > li > p:nth-of-type(2){
width:calc((100% - 25%) /2);display:flex;align-items:center;justify-content:center;
}
#calendar > ul > li > p:nth-of-type(3) img{
width:80px;
}
/*#calendar > ul > li:last-of-type{
border:none;
}*/
#calendar > ul > li{
border-top:1px solid #000;border-right:1px solid #000;border-left:1px solid #000;border-bottom:none;
}
#calendar > ul:nth-last-of-type(2) > li{
border-bottom:1px solid #000;
}
#calendar > ul:last-of-type > li[data-event='0']{
border-bottom:2px solid #000;
}
}