/* //////////////////////////////////
イラストあり｜上部全体の枠
//////////////////////////////////*/
#event_top{
max-width        : 1200px;
height:auto;
width            : 100%;
margin           : 0 auto!important;
display          : -webkit-box;
display          : -ms-flexbox;
display          : flex;
-webkit-box-pack : justify;
-ms-flex-pack    : justify;
justify-content  : space-between;
align-items: stretch!important;
text-align       : center!important;
}

/*event_topの中 左カラム*/
#event_left{
display          : flex; /* 子要素をflexboxで揃える */
flex-direction   : column; /* 子要素をflexboxにより縦方向に揃える */
justify-content  : center; /* 子要素をflexboxにより中央に配置する */
align-items      : center;  /* 子要素をflexboxにより縦中央に配置する */
margin           : 5px!important;
text-align       : center!important;
max-width        : 710px;
width            : 100%;
}

/*index_topの中 右カラムの枠*/
#event_right{
display          : flex; /* 子要素をflexboxで揃える */
flex-direction   : column; /* 子要素をflexboxにより縦方向に揃える */
justify-content  : start; /* 子要素をflexboxにより上に配置する */
align-items      : center;  /* 子要素をflexboxにより中央に配置する */
margin           : 10px!important;
text-align       : center!important;
width            : 490px;
background-color : #fff;
padding-left:0px;
padding-right:3px;
}

.button_flex{display:flex; width: 100%;}
.button_flex_l{flex:0.5;margin:0 5px;}
.button_flex_r{flex:0.5;margin:0 5px;}


.event_right_in{
display         : -webkit-box; /*Android4.3*/
display         : -moz-box;    /*Firefox21*/
display         : -ms-flexbox; /*IE10*/
display         : -webkit-flex; /*PC-Safari,iOS8.4*/
display         : flex;
justify-content : start; /* 子要素をflexboxにより上に配置する */
align-items     : start;  /* 子要素をflexboxにより中央に配置する */
padding         : 5px;
margin          : 2px;
width           : 100%;
}
.event_box{padding:10px;margin:5px;width:99%; background-color:#fff;}



.width2_40{width:40%!important;}
.width2_45{width:45%!important;}
.width2_55{width:55%!important;}
.width2_60{width:60%!important;}




@media screen and (max-width: 1199px){/*最大1200より小さくなったら*/
#event_top{font-size:85%;}
}


@media screen and (min-width: 1024px){
.tab1023{display:none;}
.event_right_in{display:block;}
.event_logo1024{display:none;}
}

@media screen and (max-width: 1023px){/*ipadより小さい*/
#event_top{display:block;background-color: transparent; font-size:90%;}
#event_left{max-width: 935px; margin:0 auto!important; padding-top:20px!important;}

.button_flex{max-width: 900px!important;}
.button_flex_l{text-align: center!important; width: 45%!important;margin:0 10px!important;}
.button_flex_r{text-align: center!important; width: 45%!important;margin:0 10px!important;}

#event_right{width: 100%!important; margin:initial!important; border-radius:0px!important;}
.event_right_in{display:flex;align-items: stretch;}
.event_logo{display:none;}

.tab1024{display:none;}

.event_box{padding:10px!important;margin: 1%;width: initial;}
.status_table th{text-align: left!important; margin:0 10px;}
.status_table td{text-align: left!important; margin:0 30px;}

.width40{width:40%!important;}
.width45{width:45%!important;}
.width55{width:55%!important;}
.width60{width:60%!important;}

}


@media screen and (max-width : 820px){/*1段組*/
.tab820{display:none;}  
.event_right_in{
display                      : block!important;
flex-direction               : column; /* 子要素をflexboxにより縦方向に揃える */
padding                      : 5px;
margin                       : 2px;
width                        : 100%;
}

.event_box{
padding:0px;
margin:3px;
width:100%;
font-size:110%;
}

.status_table th{text-align: center!important; margin:0 auto;}
.status_table td{text-align: center!important; margin:0 auto;}

.width40{width:100%!important;}
.width45{width:100%!important;}
.width55{width:100%!important;}
.width60{width:100%!important;}

}




/* //////////////////////////////////
ロゴのみ・イラストなし｜上部全体の枠
//////////////////////////////////*/
#event_top2{
max-width        : 1200px;
width            : 100%;
height:auto;
margin           : 0 auto!important;
display          : -webkit-box;
display          : -ms-flexbox;
display          : block;
-webkit-box-pack : justify;
-ms-flex-pack    : justify;
justify-content  : space-between;
text-align       : center!important;
}


/*event_top2の中 上カラム*/
#event_left2{
display          : block; /* 子要素を上下に*/
flex-direction   : column; /* 子要素をflexboxにより縦方向に揃える */
justify-content  : center; /* 子要素をflexboxにより中央に配置する */
align-items      : center;  /* 子要素をflexboxにより縦中央に配置する */
margin           : 0 auto!important;
text-align       : center!important;
width            : 100%;
height           : 100%;
position         : relative;
z-index          : 1;
overflow         : hidden;
}

/*index_top2の中 下カラムの枠*/
#event_right2{
display          : flex; /* 子要素を上下に*/
flex-direction   : column; /* 子要素をflexboxにより縦方向に揃える */
justify-content  : start; /* 子要素をflexboxにより上に配置する */
align-items      : center;  /* 子要素をflexboxにより中央に配置する */
margin           : 0 auto!important;
text-align       : center!important;
width            : 100%;
height           : 100%;
position         : relative;
z-index          : 1;
overflow         : hidden;  
padding:5px;
}


#event_right2_in{
display         : -webkit-box; /*Android4.3*/
display         : -moz-box;    /*Firefox21*/
display         : -ms-flexbox; /*IE10*/
display         : -webkit-flex; /*PC-Safari,iOS8.4*/
display         : flex;
justify-content : start; /* 子要素をflexboxにより上に配置する */
align-items: stretch!important;
padding         : 5px;
margin          : 2px;
width           : 100%;
}



@media screen and (max-width: 1023px){
}

@media screen and (max-width : 820px){/*1段組*/
#event_left2{width: 100%!important; margin:initial!important; border-radius:0px!important;}  
#event_right2_in{display:block;}
#event_right2{width: 100%!important; margin:initial!important; border-radius:0px!important;}  

.width2_40{width:initial!important;}
.width2_45{width:initial!important;}
.width2_55{width:initial!important;}
.width2_60{width:initial!important;}
}










/*===============================================
●ZR/CITYの基本情報のテーブル
===============================================*/

/*基本概要テーブル*/
.event_table_top {
width        : 100%;
margin :0 5px!important;
border-width : 0px;
border-collapse: separate;
border-spacing: 0px 3px;
}


.event_table_top th {
border-radius        : 5px;
border-top-width     : 0px;
border-bottom-width  : 0px;
border-left-width    : 0px;
border-right-width   : 0px;
border-top-style     : solid;
width                : 120px;
-moz-text-align-last : justify;/*両端揃え*/
text-align-last      : justify;/*両端揃え*/
text-justify         : inter-ideograph;/*両端揃え*/
padding:20px!important;
font-weight:400;
font-size:85%;
line-height:0;
}

.event_table_top th:before{
  content      : " \f32b";
  font-weight  : 300!important;
  font-family  : "Font Awesome 5 Pro";
  margin-right : 3px;
  color        : gray!important;
}


.event_table_top td {
border-top-width    : 0px;
border-bottom-width : 0px;
border-left-width   : 0px;
border-right-width  : 0px;
line-height         : 1.5em!important;
text-align          : left;
padding-left        : 15px!important;
}  

@media screen and (max-width: 1199px){/*最大1200より小さくなったら*/
.event_table_top th,.event_table_top td {display:block!important;width:98%!important;font-size:95%!important;}

.event_table_top th{/*両端揃えをキャンンセル*/
-moz-text-align-last :initial;
text-align-last      :initial;
text-justify         :initial;
padding-left:10px!important;
line-height:0!important;
}

}

@media screen and (max-width: 1023px){/*ipadより小さい*/
.event_table_top {font-size : 16px}
.event_table_top th {width  : 150px;}
}

@media screen and (max-width: 820px){/*基本概要とステータスが1段組に*/

.event_table_top {font-size: 18px!important;}

.event_table_top th{
-moz-text-align-last : initial;/*両端揃え*/
text-align-last      : initial;/*両端揃え*/
text-justify         : initial;/*両端揃え*/
}

.event_table_top th,.event_table_top td{
display:block; 
width: 98%;
text-align: center;
}

.table_title{
text-align: left!important;
font-size: 20px!important;  
margin-left   : 10px!important;
margin-top: 15px!important;
margin-bottom: 0px!important;
}

}



/*基本概要テーブル｜イラストなし・ロゴのみ*/
.event_table_top2 {
width        : 100%;
margin :0 5px!important;
border-width : 0px;
border-collapse: separate;
border-spacing: 0px 3px;
}


.event_table_top2 th {
border-radius        : 5px;
border-top-width     : 0px;
border-bottom-width  : 0px;
border-left-width    : 0px;
border-right-width   : 0px;
border-top-style     : solid;
width                : 120px;
padding:20px!important;
font-weight:400;
font-size:85%;
line-height:0;
}

.event_table_top2 th:before{
  content      : " \f32b";
  font-weight  : 300!important;
  font-family  : "Font Awesome 5 Pro";
  margin-right : 3px;
  color        : gray!important;
}


.event_table_top2 td {
border-top-width    : 0px;
border-bottom-width : 0px;
border-left-width   : 0px;
border-right-width  : 0px;
line-height         : 1.5em!important;
text-align          : left;
padding-left        : 15px!important;
}  

.event_table_top2 th,.event_table_top2 td {display:block!important;width:98%!important;font-size:95%!important;}

@media screen and (max-width: 1199px){/*最大1200より小さくなったら*/


.event_table_top2 th{/*両端揃えをキャンンセル*/
-moz-text-align-last :initial;
text-align-last      :initial;
text-justify         :initial;
padding-left:10px!important;
line-height:0!important;
}

}

@media screen and (max-width: 1023px){/*ipadより小さい*/
.event_table_top2 {font-size : 16px}
.event_table_top2 th {width  : 150px;}
}

@media screen and (max-width: 820px){/*基本概要とステータスが1段組に*/

.event_table_top2 {font-size: 18px!important;}

.event_table_top2 th{
-moz-text-align-last : initial;/*両端揃え*/
text-align-last      : initial;/*両端揃え*/
text-justify         : initial;/*両端揃え*/
}

.event_table_top2 th,.event_table_top2 td{
display:block; 
width: 98%;
text-align: center;
}

.table_title{
text-align: left!important;
font-size: 20px!important;  
margin-left   : 10px!important;
margin-top: 15px!important;
margin-bottom: 0px!important;
}

}










/*===============================================
●ZR/CITYのステータス・お知らせ・進捗
===============================================*/

.status_table_title{
margin-top:10px!important;
font-weight:700;
font-size:110%!important;
margin-left: 5px;
line-height:0;
}

.status_table_title:before{
  content      : " \f32b";
  font-weight  : 300!important;
  font-family  : "Font Awesome 5 Pro";
  margin-right : 3px;
  color        : #DB005CFF!important;
}



.status_table{
width:100%!important;
background-color:transparent!important;
margin-top:0px;
}


.status_table_self{
width:100%!important;
background-color:transparent!important;
}

.status_table_self th,.status_table_self td{
border      : solid 0px #ccc;
line-height : 1em!important;
text-align  : left;
}



.status_table_self th:before{
  content      : " \f4aa";
  font-weight  : 400!important;
  font-family  : "Font Awesome 5 Pro";
  margin-right : 3px;
  color        : crimson!important;
}


.status_table_self td:before{
  content      : " \f105";
  font-weight  : 300!important;
  font-family  : "Font Awesome 5 Pro";
  margin-left : 10px; 
  margin-right : 3px;
  color        : gray!important;
}


.status_table p{font-size:90%; margin: 0 10px!important;}

@media screen and (min-width: 1024px){/*画面の横幅が1024px以上*/
.status_table th {
border           : solid 0px #ccc;
color            : black;
text-align       : left;
font-size        : 90%;
width            : 120px;
background-color : transparent!important;
}

.status_table tr{
border-bottom    : solid 1px #ccc;
background-color : none!important;
line-height      : 1.5em!important;
text-align       : left;
}

.status_table td {
border           : solid 0px #fff;
font-size        : 100%;
}  


.status_table_self th,.status_table_self td{
display          : block;

}



}

@media screen and (max-width: 1023px){/*画面の横幅が1023px以下*/
.status_table{font-size:110%; width:100%;}
.status_table th,
.status_table td {
display          : block;
text-align       : center;
background-color : none!important;
line-height      : 1em!important;
border-bottom    : none;
border           : solid 0px #ccc;
background-color : transparent!important;
width            : 100%;
}


.status_table th{
min-width  : initial;
padding    : 3px;
border-top : solid 1px #ccc;
font-size  : 90%;
}


.status_table td {
  font-size:100%;
}


.status_table_self th,.status_table_self td{
display          : block;
}

}


@media screen and (max-width: 820px){/*基本概要とステータスが1段組に*/
.status_table_title{text-align: center!important;margin-left: initial;}
.status_table tr > p.mini{
  font-size:100%;
  text-align: center!important;
}

.status_table tr{text-align: initial;}

.status_table_self th,.status_table_self td{
display          : block;
text-align: center;
}

.status_table_self th{font-size:20px;}
.status_table_self td{font-size:17px!important;}





/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーー  
▼▼▼　ステータス内プログレスバー　▼▼▼
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.ep{
    font-size:11px;
    font-weight: normal;
    vertical-align: middle;
}