@charset "UTF-8";
.EX { background: #58baff; }

.hero {
  background-color: none;
  background-image: url(../img/main.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 1500px 850px;
}

/* pattern */
.pattern { background: url(../img/pattern.png) top center; }

@media screen and (max-width: 800px){
  .hero {
    background-image: url(../img/main_sp.jpg);
    background-size: contain;
    }
  .heroImg_img { width: 100%; }
  .pattern {
    background-size: 10%;
  }
}

/* --Eventメニュー-- */
.EventMenu {
  background: rgba(255, 255, 255, 0.4);
}
.EventMenuList {
  background-color: #612893;
}

/* 詳細ボタン */
.btnDetail {
  width: 75%;
  max-width: 400px;
}

/* 画像サイズ */
.imgEX-small {
  width: 60%;
  margin: 0 auto;
}

.btnDetail-Long,
.btnDetail {
  background-color: #8c49c7;
  -webkit-box-shadow: 0 6px 0 #612893, inset 2px 2px 0 rgba(255, 255, 255, .2), inset -2px -2px 0 rgba(255, 255, 255, .1);
  box-shadow: 0 6px 0 #612893, inset 2px 2px 0 rgba(255, 255, 255, .2), inset -2px -2px 0 rgba(255, 255, 255, .1);
}

.btnDetail-Long:active,
.btnDetail:active{
  -webkit-box-shadow:  0 2px 0 #612893, inset 2px 2px 0 rgba(255, 255, 255, .2), inset -2px -2px 0 rgba(255, 255, 255, .1);
  box-shadow:  0 2px 0 #612893, inset 2px 2px 0 rgba(255, 255, 255, .2), inset -2px -2px 0 rgba(255, 255, 255, .1);
}

/* リード文・テキスト */
.ledeBox { background-color: #fff; }

.regEX { color: #612893; }

.txtEX,
.ledeBox .regEX { color: #000; }

.em { color: #df0024; }

.ledeBox span {
  text-decoration: line-through 3px rgba(223, 0, 36, .75);
}

/* infoBox */
.infoBox {
  background-color: #fff;
}

/* Teble */
.table th { background-color: #b53fd2; }

.table-point td:nth-child(1) { width: 15%; }
.table-point td:nth-child(2) { width: 45%; }
.table-point td:nth-child(3) { width: 15%; }

.table_soul .soul_icon { width: 11%;}
.table_soul .soul_name { width: 20%;}
.table_soul .soul_slot { width: 13%;}
.table_soul .soul_level { width: 10%;}

.table-eventpoint { margin-bottom: 2%; }

.table_material td:nth-child(1) { width: 20%;}
.table_material td:nth-child(2) { width: 35%;}

.table-point span {
  color:#ff7800;
  font-size: 0.9em;
  font-weight: bold;
}

/* ミッション報酬「宝玉アイコン」サイズ設定 */
.table-mission_rewardList td .icon_jewels {
  width:77%;
  max-width: 62px;
  vertical-align: bottom;
  }

  @media screen and (max-width: 800px){
    .table-mission_rewardList td .icon_jewels {
    max-width: 62px;
    }
  }

  @media screen and (max-width: 640px){
    .table-mission_rewardList td .icon_jewels {
    max-width: 52px;
    }
  }

  @media screen and (max-width: 480px){
    .table-mission_rewardList td .icon_jewels {
    max-width: 42px;
    }
  }

/* --注意事項-- */
.EventMenuAttention .attentionEX {
  background: none;
  padding: 0;
}

.EventMenuAttention .attentionEX_ttl {
  border-bottom: 1px dotted #612893;
  color: #612893;
}

/* --ヘッダー・フッター-- */
#wrapHeader.wrapHeaderEX,
.footerEX {
  background: #000000;
  color: #fff;
}

/* h4Event */
.h4Event {
  margin: 0 auto 1.5%;
  padding: 5% 0 .5%;
  color: #612893;
  border-bottom: 2px #612893 solid;
  font-size: 28px;
  font-size: 2.8rem;
  font-weight: bold;
  text-align: center;
}

.accordionContents .h4Event:first-child  {
  padding-top: 2%;
}

.h4Event {
  margin: 0 auto 1%;
}

hr + .h4Event {
  padding-top: 0;
}

@media screen and (max-width: 640px){
  .h4Event {
    font-size: 22px;
    font-size: 2.2rem;
  }
}

@media screen and (max-width: 480px){
  .h4Event {
    font-size: 18px;
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 360px){
  .h4Event {
  font-size: 15px;
  font-size: 1.5rem;
  }
}

/* 覚醒特性 */
.txt_tokusei{
  width: 80%;
  background:#b53fd2;
  color:#fff;
  font-size: 22px;
  font-size: 2.2rem;
  border-radius: 10px;
  margin: 2% auto;
  text-align: center;
  padding: 1.5%;
}

@media screen and (max-width: 640px){
  .txt_tokusei {
    font-size: 18px;
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 480px){
  .txt_tokusei {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 360px){
  .txt_tokusei {
    font-size: 14px;
    font-size: 1.4rem;
  }
}