@charset "UTF-8";

.EX {
  background-color: #000;
}

body.reward {
  min-width: initial;
  background-color: #202020;
  background-image: url(../img/pattern.png);
  background-size: 3px 3px;
}

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

.containerEX_inner {
  background-color: #202020;
  background-image: url(../img/pattern.png);
  background-size: 3px 3px;
  width: 100%;
  padding: 2% 2% 3% !important;
}

/*
.contents {}
*/

/* 期間 */
.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: #9d0009;
}

@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-top: 10%;
}

.h3Collabo_img:first-child {
  margin-top: 0;
}

.h4Collabo {
  margin: 0 auto 1.5%;
  padding: 5% 0 .5%;
  color: #ff6e01;
  border-bottom: 2px #ff6e01 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 #ff6e01 solid;
  padding-left: 0.5rem;
}

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

@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,
.imgEX-btn {
  margin: 2% auto;
}

.imgEX-ss {
  width: 72.5%;
  max-width: 530px;
}

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

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

.imgEX-btn {
  width: 85%;
  max-width: 400px;
}

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


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

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

.ledeBox.ledeBox-point .txtEX,
.ledeBox.ledeBox-point .regEX {
  color: #fff;
}

.txtLink {
  color: #9d0009;
}

.ledeBox-point .txtLink,
.em {
  color: #ff6e01;
}


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

.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: #9d0009;
  color: rgba(255, 255, 255, 1.00);
  font-weight: normal;
}

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

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

.table-collabo_rewardList { table-layout: fixed; }
.table-collabo_rewardList th{
  font-weight: normal;
  color: #ffee00;
}
.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 td:nth-child(1) { width: 40%;}*/
.table-collabo_dungeon td:nth-child(2) { width: 18%;}
.table-collabo_dungeon td:nth-child(3) { width: 35%;}

.table-collabo_point td:nth-child(1),
.table-collabo_reward td:nth-child(1) { width: 18%;}
.table-collabo_point td:nth-child(2),
.table-collabo_reward td:nth-child(2) { width: 55%;}
.table-collabo_point td:nth-child(3),
.table-collabo_reward td:nth-child(3) { width: 27%;}

.table-collabo_material .material_icon { width: 20%;}
.table-collabo_material .material_name { width: 35%;}
.table-collabo_material .material_area { width: 45%;}
.table-collabo_material .material_areas { border-top: #333 1px dotted;}
.table-collabo_material span {
  color: #ff6e01;
  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(3) td,
.table-collabo_exchange_item tr:nth-child(4) td,
.table-collabo_exchange_item tr:nth-child(5) td {
  border-top: #333 1px dotted;
  text-align: left;
}

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


/* リード文 */
.ledeBox {
  background: #fff;
  margin: 2% auto;
  border-radius: 0;
  padding: 1% 2%;
}

.ledeBox.ledeBox-point {
  background: rgba(255, 255, 255, .1);
}

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

.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: #222;
  text-align: left;
  margin-bottom: 1px;
}

.EventMenuList_term::before {
  display: inline-block;
  background: #9d0009;
  color: #fff;
  padding: 0.4em 0.8em;
  margin-right: 0.5em;
}
.EventMenuList_term::before { content: '期間'; }
.EventMenuList_term_num1::before { content: '期間\02460'; }
.EventMenuList_term_num2::before { content: '期間\02461'; }
.EventMenuList_term_num3::before { content: '期間\02462'; }

.btnDetail {
  margin-bottom: 40px;
  padding: .75em 0;
  margin-bottom: 3%;
  width: 60%;
  max-width: 360px;
}

.btnDetail-Long,
.btnDetail-collabo {
  background: #9d0009;
  -webkit-box-shadow: 0 6px 0 #590005, inset 2px 2px 0 rgba(255, 255, 255, .2), inset -2px -2px 0 rgba(0, 0, 0, .2);
  box-shadow: 0 6px 0 #590005, inset 2px 2px 0 rgba(255, 255, 255, .2), inset -2px -2px 0 rgba(0, 0, 0, .2);
}
.btnDetail-Long:active,
.btnDetail-collabo:active {
  -webkit-box-shadow:  0 2px 0 #590005, inset 2px 2px 0 rgba(255, 255, 255, .2), inset -2px -2px 0 rgba(0, 0, 0, .2);
          box-shadow:  0 2px 0 #590005, inset 2px 2px 0 rgba(255, 255, 255, .2), inset -2px -2px 0 rgba(0, 0, 0, .2);
}

.btnDetail.active::after,
.btnDetail::after {content: '';}

.btnDetail-collabo::after { content: '詳細はこちら'; }
.btnDetail-collabo.active::after { content: '詳細をとじる'; }

/* 覚醒特性 */
.txt_tokusei{
  width: 80%;
  background:#9d0009;
  color:#fff;
  font-size: 26px;
  font-size: 2.6rem;
  border-radius: 10px;
  margin: 2rem auto;
  text-align: center;
  padding: 1rem;
}

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

@media screen and (max-width: 480px){
  .txt_tokusei {
    font-size: 18px;
    font-size: 1.8rem;
    margin: 1rem auto;
    padding: 0.8rem;
  }
}

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


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

.noticeCollabo_ttl {
  color: #fff;
  border-bottom: 1px solid #fff;
  font-size: 20px;
  font-size: 2.0rem;
}

.beginner_ttl {
  color: #52c011;
  border-bottom: 2px solid #52c011;
  font-weight: bold;
  font-size: 20px;
  font-size: 2.0rem;
  text-align: center;
}

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

@media screen and (max-width: 640px) {
  .beginner_Area .beginner_ttl,
  .noticeCollabo .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_Area .beginner_ttl,
  .noticeCollabo .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%;
}

.bnrArea_inner {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 0;
}

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

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

.ledeBox.ledeBox-point hr {
  border: none;
  border-bottom: 1px dashed #fff;
  margin: 2% 0;
}

/* コラボとは */
.specAppWrapper,
.tradeNoteWrapper,
.About {
  background: rgba(255, 255, 255 ,0.06);
}
.About_ttl {
  padding: 10px;
  background: #9d0009;
}
.ttlAbout {
  color: #fff;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
  line-height: 1.2;
}
@media screen and (max-width: 640px){
  .About_ttl {
    padding: 10px;
    background: #9d0009;
    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,
.txtAbout 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: 7% auto 0;
  padding: 0;
}
.btnTopPage a {
  display: block;
}
.btnTopPage img {
  width: 100%;
  max-width: initial;
}
@media screen and (max-width: 640px){
  .btnTopPage {
    margin: 30px auto 0;
  }
}

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