/*---------- ページ全体の指定 ----------*/

html, body, header, section, article, nav, footer,
div, span, p, h1, h2, h3, h4,
ul, ol, li, dl, dt, dd,
table, tr, th, td, tbody, thead, tfoot {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body
{
  position: relative;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family:  "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif;
  -webkit-overflow-scrolling: touch;
}
html { /* iOS */
  font-size: 62.5%;
  line-height: 1.25;
  background: #000;
}

@media screen and (min-width: 330px) { /* android */
  html {
    font-size: 62.5% !important;
  }
}
@media screen and (min-width: 375px) { /* iOS iphone 6*/
  html {
    /*font-size: 70% !important;*/
    font-size: 50% !important;
  }
}
@media screen and (min-width: 500px) { /* android 6*/
  html {
    font-size: 62.5% !important;
  }
}
/* iOS iphone 6 横*/
@media screen and (min-width: 600px) {
  html {
    font-size: 62.5% !important;
    line-height: 1.25;
  }
}

body {
  font-size: 62.5%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input,
textarea {
  -webkit-user-select: auto;
}
ul{
  list-style: none;
}
/*ベースボディ*/
body {
  color: #333;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent !important;
}
a:link {
  color: #868686;
}
a:visited {
  color: #868686;
}
a:hover {
  color: #868686;
}
a:active {
  color: #868686;
}

/*メインコンテンツ領域*/
#main {
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: 100%;
}

/*レイアウト用*/
/*hr系*/
hr {
  margin: 0;
  padding: 0;
  border: none;
}

/* hrライン装飾 */
.line01 ,
.line02
{
  z-index: 1;
  margin: 0;
  padding: 0;
  border: none;
  height: 1px;
  background: #525252;
}
.line01 {
  display: block;
  margin: 0 auto;
  width: 100%;
  background: #000;
  background-size: 100% auto;
}
.line02 {
  display: block;
  line-height: 0;
  width: 100%;
  height: 2px;
  background: #000;
}
.line03 {
  display: block;
  line-height: 0;
  width: 100%;
  height: 3px;
  background: #000;
}
.line04 {
  display: block;
  line-height: 0;
  width: 100%;
  height: 4px;
  background: #000;
}

/*===========OOCSS レイアウト===========*/

/*width*/
.width10 { width: 10px; }
.width20 { width: 20px; }
.width30 { width: 30px; }
.width40 { width: 40px; }
.width50 { width: 50px; }

.width33p{ width: 33% !important;}
.width50p{ width: 50% !important;}
.width60p{ width: 60% !important;}
.width80p{ width: 80% !important;}

/*height*/
.height10 { height: 10px; }
.height20 { height: 20px; }
.height30 { height: 30px; }
.height40 { height: 40px; }
.height50 { height: 50px; }
.height60 { height: 60px; }
.height70 { height: 70px; }
.height80 { height: 80px; }
.height90 { height: 90px; }
.height150 { height: 150px; }
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.clear {
  clear: both;
}
.vtop {
  vertical-align: top;
}
.vmiddle {
  vertical-align: middle;
}
.vbottom{
  vertical-align: bottom;
}
.table_div {
  display: table;
}
.table_div > div {
  display: table-cell;
}
.block {
  display: block;
}
.iblock {
  display: inline-block;
}
.hide {
  display:none;
}
.fleft {
  float: left;
}
.fright {
  float: right;
}
.tcenter{
  text-align:center;
}

/*margin*/
.m0p0 {
  margin: 0;
  padding: 0;
}
.mauto {
  margin: 0 auto;
}

/*padding*/
.p0{padding: 0 !important;}
.p10{padding: 10px !important;}
.pt0{padding-top: 0 !important}

/*===========OOCSS テキスト===========*/
.bold {
  font-weight: bold;
}
.f_normal {
  font-weight: normal;
}

/*テキスト配置*/
.txt_left {
  text-align: left;
}
.txt_center {
  text-align: center;
}
.txt_right {
  text-align: right;
}

/*テキスト色*/
.text_lightyellow {
  color: #e3d8ae;
}
.purple {color: #e46bfd;}
.red {color: #ff0200}
.green {color: #4eff00}
.blue {color: #4ce0e0  }
.yellow {color: #ffe400
}
/*テキストサイズ*/
.txt_xs {
  font-size: 0.9rem;
}
.txt_s {
  font-size: 1rem;
}
.txt_m {
  font-size: 1.15rem;
}
.txt_l {
  font-size: 1.3rem;
}
.txt_xl {
  font-size: 1.6rem;
}
.txt_xll {
  font-size: 1.8rem;
}
.txt_xlll {
  font-size: 2rem;
}

/*行間調整*/
.lh_n {
  line-height: normal;
}
.lh_s {
  line-height: 1.2;
}
.lh_m {
  line-height: 1.4;
}
.lh_l {
  line-height: 1.6;
}
.lh_xl {
  line-height: 1.8;
}

.list_disc {
  list-style-type: disc;
  text-indent: 1.5em;
}

/*ボーダー、パディングのサイズをwidth,heightで指定したサイズで収まるようにする*/
.sizing {
  -webkit-box-sizing: border-box;
  -khtml-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/*---------- ヘッダー ----------*/
header {
  position: relative;
  height: auto;
}

/*---------- フッター ----------*/
footer {
  position: relative;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  text-decoration: none;
}
footer .btn_back{
  position: absolute;
  top: 7px;
}
.copy_footer{
  padding-top: 30px;
}
/*---------- コンテンツ ----------*/

/*---------- ボタン ----------*/
.btn_splite_m_light_gray,
.btn_splite_m_gray,
.btn_splite_m_orange,
.btn_splite_m_purple
{
  border-radius: 10px;
  display: inline-block;
  width: 100px;
  height: 44px;
  background: rgb(85,85,85);
  background-size: 100% auto;
  font-weight: bold;
  color: #4a4138;
  line-height: 44px;
  text-align: center;
  border: 1px solid #919191;
}
.btn_splite_m_light_gray {
  background: #eeeeec;
}
.btn_splite_m_light_gray a {
  color: #4a4138;
}
.btn_splite_m_gray {
  background: rgb(85,85,85);
}
.btn_splite_m_orange {
  background: rgb(255,115,41);
}
.btn_splite_m_purple {
  background: rgb(83, 0, 169);
}

.btn_splite_l_orange,
.btn_splite_l_gray,
.btn_splite_l_purple
{
  display: inline-block;
  width: 180px;
  height: 44px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000;
  line-height: 44px;
  text-align: center;
}
.btn_splite_l_orange {
  background-position: 0 -48px;
}
.btn_splite_l_gray {
  background-position: 0 -1px;
}
.btn_splite_l_purple {
  background-position: 0 -95px;
}
.btn_s_orange {
  box-sizing: border-box;
  padding: 2px 0 10px;
  width: 67px;
  height: 20px;
  background: rgb(255,115,41);
  text-align: center;
}
.btn_s_orange img {
  width: 40%;
}
.btn_m_gray,
.btn_m_orange,
.btn_l_gray,
.btn_l_orange,
.btn_l_purple
{
  box-sizing: border-box;
  text-align: center;
  line-height: 90px;
  font-weight: bold;
  color: #fff;
  text-shadow:
  0 0 3px #000,
  0 0 3px #000,
  0 0 3px #000,
  0 0 3px #000,
  0 0 3px #000;
  border-style: solid;
}
.btn_m_gray img,
.btn_m_orange img
{
  display: block;
  margin: -5px 0 0 -10px;
  height: 13px;
}
.btn_l_gray img,
.btn_l_orange img
{
  display: block;
  margin: -5px auto 0;
  height: 24px;
}
.btn_l_purple img
{
  display: block;
  margin: -7px 0 0 -15px;
  width: 160%;
}
.btn_m_gray {
  width: 95px;
  height: 40px;
  border-width: 24px 35px 30px;
  background: rgb(85,85,85);
}

.btn_m_orange {
  width: 95px;
  height: 40px;
  border-width: 24px 35px 30px;
  background: rgb(255,115,41);
}

.btn_l_gray {
  width: 236px;
  height: 60px;
  border-width: 24px 35px 30px;
  background: rgb(85,85,85);
}
.btn_l_orange {
  width: 236px;
  height: 60px;
  border-width: 24px 35px 30px;
  background: rgb(255,115,41);
}
.btn_l_purple {
  width: 120px;
  height: 30px;
  border-width: 24px 35px 30px;
  background: #e46bfd;
}

/*----------/ ボタン /----------*/
/*---------- テーブル ----------*/
/*テーブル ガチャ排出率*/
.table01{
  margin: 10px auto;
  border-collapse: collapse;
  border-spacing: 0;
  border:1px solid #fff;
  width: 100%;

}
.table01 th{
  padding: 4px;
  border:1px solid #000;
  background: #ddd;
}
.table01 td{
  padding: 2px;
  border:1px solid #000;
  background: #fff;
}

/*----------/ テーブル /----------*/

/*---------- ページャーボタン スプライト ----------*/
.area_pager
{
  position: relative;
  margin: 20px auto;
  height: 22px;
  width: 90%;
  text-align: center;
}
.btn_pager_prev_top,
.btn_pager_prev,
.btn_pager_next,
.btn_pager_next_last {
  position: absolute;
  height: 20px;
  line-height: 20px;
  color: #868686 !important;
  font-size: 1.2rem;
  border: 1px solid #ddd;
}
.btn_pager_prev_top_gray,
.btn_pager_prev_gray,
.btn_pager_next_gray,
.btn_pager_next_last_gray {
  position: absolute;
  height: 32px;
  background-size: auto 100%;
}
.btn_pager_prev_top {
  left: 0;
  width: 75px;
  background-position: -5px 0;
}
.btn_pager_next_last {
  right: 0;
  width: 75px;
  background-position: -221px 0;
}
.btn_pager_prev {
  left: 80px;
  width: 62px;
  background-position: -84px 0;
}
.btn_pager_next {
  right: 80px;
  width: 62px;
  background-position: -153px 0;
}
.btn_pager_prev_top_gray {
  left: 0;
  width: 75px;
  background-position: -5px 0;
}
.btn_pager_next_last_gray {
  right: 0;
  width: 75px;
  background-position: -221px 0;
}
.btn_pager_prev_gray {
  left: 80px;
  width: 62px;
  background-position: -84px 0;
}
.btn_pager_next_gray {
  right: 80px;
  width: 62px;
  background-position: -153px 0;
}
.num_pager,
.num_pager_active
{
  margin: 0 3px !important;
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: #868686 !important;
  font-size: 1rem;
}
a.num_pager,
a.num_pager_active
{
  border: 1px solid #ddd;
  border-radius: 3px;
}
a.num_pager_active {
  border: 1px solid #afafaf;
  font-weight: bold !important;
}
/*----------/ ページャーボタン スプライト /----------*/


/*---------- 個別プロパティ ----------*/

/*---------- イベント共通CSS ここから ----------*/
#wrapper {
  /*height: 100%;*/
  display: block;
}
#wrapper_top,
#wrapper_play_guide,
#wrapper_detail,
#wrapper_rankingreward,
#wrapper_news,
#wrapper_help
{
  position: relative;
  margin: 0 auto;
  min-height: 100%;
}

#wrapper_contents {
  width: 100%;
  height: 100%;
  display: table;
  overflow: hidden;
}

#wrapper_event_info {
  overflo-y: scroll;
  text-align: center;
}

#wrapper_tab_frame {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 2px;
  display: table;
  background: #343434;
  border: 2px solid #b9b89c;
  -webkit-box-shadow:
  inset 0 0 0 2px #000,
  0 0 0 2px #000;
}
#wrapper_tab_contents {
  position: relative;
  width: 100%;
  height: 100%;
  display: table;
  text-align: left;
}
.panel {
  position: relative;
  z-index: 0;
  display: none;
  height: 100%;
  margin: 0 3px 5px 2px;
  padding: 5px;
  background: rgb(29,29,29);
  border: 4px solid #343434;
  -webkit-box-shadow:
  inset 0 0 0 2px #585858,
  0 0 0 2px #b9b89c,
  0 0 0 3px #000;
}
.panel_bottom ,
.panel_top {
  height: 3px;
  display: table-row;
}

.panel > * {
  -webkit-transform: translateZ(0px);
}
#navi_contents {
  position: relative;
  width: 100%;
  height: 10px;
  display: table-row;
  border:1px solid #e46bfd;
}
#tab_main_contents {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow-y: hidden;
}
.main_contents {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.main_contents {
  -webkit-overflow-scrolling: touch;
}
.main_contents > * {
  -webkit-transform: translateZ(0px);
}

/* スクロールバー制御 */
.main_contents::-webkit-scrollbar ,
.panel::-webkit-scrollbar { /* スクロールバー本体 */
  width: 5px;
}
.main_contents::-webkit-scrollbar-thumb ,
.panel::-webkit-scrollbar-thumb { /* スクロールバーの動く部分 */
  border-radius: 2px;
  background: #6d6d6d;
  border: 1px solid #383838;
}
.main_contents::-webkit-scrollbar-track-piece:start ,
.panel::-webkit-scrollbar-track-piece:start { /* スクロールバーの動く部分の前 */
  border-radius: 100px;
  background: #030303;
}
.main_contents::-webkit-scrollbar-track-piece:end ,
.panel::-webkit-scrollbar-track-piece:end { /* スクロールバーの動く部分の後ろ */
  border-radius: 100px;
  background: #030303;
}
.main_contents::-webkit-scrollbar-corner ,
.panel::-webkit-scrollbar-corner { /* スクロールバー角 */
  background: transparent;
}
.main_contents::-webkit-scrollbar-thumb:horizontal ,
.panel::-webkit-scrollbar-thumb:horizontal { /* 横方向のスクロールバーの動く部分 */
  overflow: hidden;
}
.main_contents::-webkit-scrollbar:horizontal ,
.panel::-webkit-scrollbar:horizontal { /* 横方向のスクロールバー本体 */
  overflow: hidden;
}


/* アイコン用 */
.icon_s ,
.icon_m ,
.icon_l {
  display: inline-block;
  vertical-align: middle;
}
.icon_s {
  width: 10px;
  height: 10px;
}
.icon_m {
  width: 16px;
  height: 16px;
}
.icon_l {
  width: 24px;
  height: 24px;
}
/* アイテムアイコン用 */
.item_icon_s ,
.item_icon_m ,
.item_icon_l {
  display: inline-block;
  vertical-align: middle;
}
.item_icon_s {
  width: 35px;
  height: 35px;
}
.item_icon_m {
  width: 60px;
  height: 60px;
}
.item_icon_l {
  width: 100px;
  height: 100px;
}

/*---------- イベントTOP タイトルロゴ ----------*/

.title_logo_s {
  height: 40px;
}
.title_logo_m {
  height: 70px;
}
.title_logo_l {
  height: 110px;
}

/*---------- イベントTOP フッター ----------*/
#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}
#footer a {
  display: inline-block;
  vertical-align: bottom;
}