@charset "UTF-8";

.EX {
  background-color: #130201;
}

body.reward {
  min-width: initial;
  background-color: #000;
}

.pattern {
  background-color: #130201;
  background-image: url(../img/patturn.png);
  background-position: top center;
}

@media screen and (max-width: 800px){
  .pattern {
    background-size: 50%;
  }
}

.containerEX {
  max-width: 800px;
  margin: 0 auto;
  background-color: none;
}

/*
.containerEX_inner {
  padding: 2% 2% 3%;
}
*/

.contents {
  width: 92%;
  max-width: 736px;
  margin: 0 auto;
  padding: 2%;
  border: #fff solid 1px;
  box-sizing: content-box;
  background: rgba(0, 0, 0, .9);
  box-shadow: 0px 0px 30px -10px #f01a17;
}


/* 期間 */
.termCollabo {
  padding: 10px 0;
  color: #fff;
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
  background-color: #000;
  border-top: #e3e1d4 solid 1px;
  border-bottom: #e3e1d4 solid 1px;
}

@media screen and (max-width: 640px){
  .termCollabo {
    padding: 1.5% 0;
    font-size: 16px;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 360px){
  .termCollabo {
    font-size: 13px;
    font-size: 1.3rem;
  }
}

/* 表題 */
.h3Collabo_img {
  margin: 10.4% auto 2% ;
  border-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0)100%) 1/0 0 1px 0;
  border-style: solid;

}

.h3Collabo_img:first-child {
  margin-top: 5%;
}

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

.h4Collabo_short {
  width: 10em;
}

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

.h5Collabo {
  margin: 5% auto 1%;
  color: #fff;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: bold;
  border-left: 4px #ebbe5c solid;
  padding-left: 0.5rem;
}

.h4Collabo + .h5Collabo {
  margin: 0 auto 1%;
}

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

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

  .h5Collabo {
    font-size: 18px;
    font-size: 1.8rem;
  }
}

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

  .h5Collabo {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

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

  .h5Collabo {
    font-size: 14px;
    font-size: 1.4rem;
  }
}


/* 画像設定 */
.imgEX-illust {
  margin: 0 auto 2%;
}

.imgEX-ss {
  width: 80%;
  max-width: 550px;
}

.imgEX-ss + .imgEX-ss {
  margin-top: 2%;
}

.imgEX-illust {
  width: 100%;
  max-width: 800px;
}

.imgEX-btn {
  margin: 2% auto;
  width: 70%;
  max-width: 350px;
}

.imgEX-bnr {
  width: 83.4%;
  max-width: 640px;
  margin: 2.1% auto;
}


/* テキスト色 */
.txtEX,
.regEX,
.listEX {
  color: #fff;
}

.txtLink {
  color: #e61221;
}

.em,
.ttl {
  color: #ebbe5c;
}

/* リード文 */
.ledeBox {
  background: none;
  margin: 0;
  border-radius: 0;
  padding: 0;
}


/* テーブル */
.table-collabo {
  max-width: initial;
  background-color: #fff;
  word-break: break-all;
  word-wrap: break-word;
}

.table-collabo + .table-collabo {
  margin-top: 1%;
}

.table-collabo,
.table-collabo th,
.table-collabo td {
  border-color: #333;
  border-width: 1px;
}

.table-collabo th,
.table-collabo td {
  padding: 1%;
}

.table-collabo th {
  background-color: #5a1b11;
  color: rgba(255, 255, 255, 1.00);
  font-weight: normal;
}

.table-collabo td {
  color: #000;
}

.table-collabo_exchange {
  margin-top: 5%;
}

.table-collabo_rewardList { table-layout: fixed; }
.table-collabo_rewardList th {
  font-weight: normal;
  color: #fff;
}
.table-collabo_rewardList .item_name td {
  border-top: #333 1px dotted;
  font-size: 1.2rem;
}
.table-collabo_rewardList td .icon {
  max-width: 90px;
}
@media screen and (max-width: 800px){
  .table-collabo_rewardList td .icon {
    max-width: 80px;
  }
}
@media screen and (max-width: 640px){
  .table-collabo_rewardList td .icon {
    max-width: 70px;
  }
}
@media screen and (max-width: 480px){
  .table-collabo_rewardList .item_name td {
    font-size: 1rem;
  }
  .table-collabo_rewardList td .icon {
    max-width: 54px;
  }
}

.table-collabo_missin th { width: 20%; }
.table-collabo_missin td { text-align: left; }

.table-collabo_dungeon th:nth-child(2) { width: 18%;}
.table-collabo_dungeon th:nth-child(3) { width: 35%;}

.table-collabo_exchange td:nth-child(1) { width: 18%;}
.table-collabo_exchange td:nth-child(2) { width: 55%;}
.table-collabo_exchange td:nth-child(3) { width: 14%;}
.table-collabo_exchange td:nth-child(4) { width: 14%;}

.table-collabo_material td:nth-child(1) { width: 20%;}
.table-collabo_material td:nth-child(2) { width: 35%;}
.table-collabo_material span {
  color: #9c1600;
  font-size: 0.9em;
  font-weight: bold;
}

.table-collabo_soul .soul_icon { width: 11%;}
.table-collabo_soul .soul_name { width: 20%;}
.table-collabo_soul .soul_slot { width: 13%;}
.table-collabo_soul .soul_level { width: 10%;}

.table-collabo_exchange_item tr:nth-child(2) td:nth-child(3) { text-align: left; }
.table-collabo_exchange_item tr:nth-child(n+3) td {
  border-top: #333 1px dotted;
  text-align: left;
}

.table-collabo .regEX {
  color: #000;
}

@media screen and (min-width: 800px) {
  .table-collabo_exchange_item td br,
  .table-collabo_reward td br { display: none;}
}


/* イベントメニュー */
.EventMenu {
  width: 100%;
  max-width: initial;
  background: none;
}

.EventMenuList {
  border-top: inherit;
  background-color: inherit;
  padding: 0;
  margin-top: 10%;
}

.EventMenu > .EventMenuList:first-child {
  margin-top: 0;
}

.EventMenuContents {
  padding: 0;
}

.EventMenuList_bnr {
  margin: 0 0 1.2%;
}

/*Event内期間*/
.EventMenuList_term {
  padding: 0;
  background: #fff;
  color: #000;
  border: #444 1px solid;
  text-align: left;
}

.EventMenuList_term::before {
  display: inline-block;
  background: #941715;
  color: #fff;
  padding: 0.4em 0.8em;
  margin-right: 0.5em;
}


.EventMenuList_term_num2,
.EventMenuList_term_num3,
.EventMenuList_term_num4,
.EventMenuList_term_num5 {
  border-top: none;
}

.EventMenuList_term::before { content: '期間'; }
.EventMenuList_term_num1::before { content: '期間\02460'; }
.EventMenuList_term_num2::before { content: '期間\02461'; }
.EventMenuList_term_num3::before { content: '期間\02462'; }
.EventMenuList_term_num4::before { content: '期間\02463'; }
.EventMenuList_term_num5::before { content: '期間\02464'; }


/* 詳細ボタン */
.btnDetail {
  margin-bottom: 40px;
  padding: .75em 0;
  margin-bottom: 3%;
  width: 60%;
  max-width: 360px;
  background: #000;
  border: #fff 4px double;
  border-radius: 0;
  box-shadow: none;
}

.btnDetail-Long {
  width: 75%;
  max-width: 400px;
}

.btnDetail-Long::after { content: ''; }
.btnDetail-Long.active::after { content: ''; }


/* 覚醒特性 */
.txt_tokusei{
  width: 80%;
  background:#2f0100;
  color:#fff;
  font-size: 22px;
  font-size: 2.2rem;
  border: 1px #fff solid;
  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;
  }
}

/* step */
.step {
  margin-bottom: 1.5%;
}

.step dt {
  border-bottom: #ebbe5c 1px dotted;
  font-weight: bold;
  color: #ebbe5c;
  font-size: 20px;
  font-size: 2.0rem;
  margin: 5% auto 0;
}

.step dt:first-child{
  margin: 0 auto;
}

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

@media screen and (max-width: 360px) {
  .step dt {
    font-size: 13px;
    font-size: 1.3rem;
  }
}


/* 注意事項 & 初心者入門 */
.beginner_Area,
.noticeCollabo {
  padding: 0;
  width: 100%;
  margin-top: 5%;
}

.beginner_ttl,
.noticeCollabo_ttl {
  font-size: 21px;
  font-size: 2.1rem;
  margin-bottom: 2%;
  text-align: center;
  font-weight: bold;

}

.noticeCollabo_ttl {
  color: #fff;
  border-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0)100%) 1/0 0 1px 0;
  border-style: solid;
}

.beginner_ttl {
  color: #52c011;
  border-image: linear-gradient(to right, rgba(82, 192, 17, 0) 0%, rgba(82, 192, 17, 1) 20%, rgba(82, 192, 17, 1) 80%, rgba(82, 192, 17, 0)100%) 1/0 0 1px 0;
  border-style: solid;
}

.beginner_Area .txtEX {
  padding: 0 2%;
}

.noticeCollabo .regEX,
.noticeCollabo .listEX {
  padding: 0 2%;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.2;
}

@media screen and (max-width: 640px) {
  .beginner_ttl,
  .noticeCollabo_ttl{
    font-size: 16px;
    font-size: 1.6rem;
  }

  .noticeCollabo .regEX,
  .noticeCollabo .listEX {
      font-size: 14px;
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 360px) {
  .beginner_ttl,
  .noticeCollabo_ttl{
    font-size: 13px;
    font-size: 1.3rem;
  }

  .noticeCollabo .regEX,
  .noticeCollabo .listEX {
    font-size: 12px;
    font-size: 1.2rem;
  }
}


/* バナーエリア */
.bnrArea {
  margin: 0 auto;
}

.bnrArea-bottom {
  margin-top: 10%;
}

.bnrItem {
  width: 78.125%;
  max-width: 500px;
  margin: 3.5% auto;
}

hr {
  border: none;
  border-bottom: 1px dotted #fff;
  margin: 5% 0;
}

/* コラボとは */
.specAppWrapper,
.tradeNoteWrapper,
.About {
  background: rgba(0, 0, 0, 1);
}

.About_ttl {
  padding: 10px;
  background: #2f0100;
}

.ttlAbout {
  color: #e3e1d4;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.2;
}

@media screen and (max-width: 640px) {
  .About_ttl {
    padding: 1.5% 0;
  }

  .ttlAbout {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

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

.About_details {
  padding: 2%;
}

.About_details .row {
  width: 96%;
  max-width: 768px;
  margin: 0 auto;
}

.About_details .column {
  padding: 0;
}

.About_details .float-clear { float: none; }
.About_details .kv { padding-right: 2%; }

.txtAbout {
  margin: 0 0 2% 2%;
  color: #fff;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.2;
}

#About .regEX {
  color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
}

.specApp_txt a {
  color: #a38923;
}

@media screen and (max-width: 640px){
  .txtAbout {
    font-size: 12px;
    font-size: 1.2rem;
  }

  #About .regEX {
    font-size: 10px;
    font-size: 1.0rem;
  }
}

@media screen and (max-width: 360px){
  .txtAbout {
    font-size: 10px;
    font-size: 1.0rem;
  }

  #About .regEX {
    font-size: 9px;
    font-size: 0.9rem;
  }
}

/* 運営サイトに戻るボタン */
.btnTopPage {
  width: 70%;
  max-width: 350px;
  margin: 5% auto;
  padding: 0;
}

.btnTopPage a {
  display: block;
}

.btnTopPage img {
  width: 100%;
  max-width: initial;
}

/* ヘッダー・フッダー設定*/
#wrapHeader.wrapHeaderEX,
.footerEX {
  background: #1e0400;
}