@charset "UTF-8";

.EX {
  background: #000;
}

.bgImgFixed {
  background: none;
}
.bgImgFixed::before {
  display: block;
  position: fixed;
  content: '';
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url(../img/bg_cover.png) no-repeat;
  background-position: center top;
  background-size: cover;
  z-index: -1;
}

.pattern {
  background: url(../img/back.png) repeat;
  background-position: center top;
}
.patternFixed {
  background: none;
}
.patternFixed::before {
  display: block;
  position: fixed;
  content: '';
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url(../img/back.png) repeat;
  background-position: center top;
  z-index: -1;
}

.wrapMainEX {
  background: none;
}

#wrapHeader.wrapHeaderEX {
  background: none;
  background: #2a2925;
}
.wrapHeaderEX header {
  background: url(/member/common/img/headerTitle_02_one.png) no-repeat;
  background-position: center;
  margin: 0 auto;
  width: 100%;
  z-index: 999;
  background-size: contain;
}
.wrapHeaderEX .top {
  width: 15%;
  max-width: 100px;
  font-size: 0;
  float: left;
  margin-top: 0;
  vertical-align: middle;
}
.wrapHeaderEX .top img {
  width: 77%;
  max-width: 450px;
  margin-top: 0;
}

.wrapHeaderEX .menu {
  width: 10%;
    margin: 0 0 0 auto;
    text-align: right;
    font-size: 0;
    right: 0;
}
.wrapHeaderEX .menu img {
  width: 100%;
  max-width: 70px;
}

.footerEX {
  background: #2a2925;
  color: #fff;
}

.hero {
  background: url(../img/main.jpg) no-repeat;
  background-position: center top;
  background-size: 1000px 770px;
}
.heroImg {
  text-align: center;
}
@media screen and (max-width: 640px){
  .hero {
    background: url(../img/main_sp.jpg) no-repeat;
    background-position: center top;
    background-size: contain;
  }
  .heroImg_img {
    width: 100%;
  }
}

/* コンテナ */
.containerEX {
  width: auto;
  max-width: 1000px;
  padding: 0;
  margin: 0 auto;
}
.containerEX-narrow {
  width: auto;
  max-width: 1030px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media screen and (max-width: 640px){
  .containerEX-narrow {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.containerEX_inner {
  width: auto;
  margin: 0 auto;
}
.containerEX_inner-narrow {
  padding-left: 15px;
  padding-right: 15px;
}
@media screen and (max-width: 640px){
  .containerEX_inner-narrow {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* box */
.boxEX {
  width: auto;
  max-width: 1000px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media screen and (max-width: 640px){
  .boxEX {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.boxEX-xsmall {
  width: 80%;
  max-width: 540px;
  padding: 0;
}
.boxEX-small {
  width: 80%;
  max-width: 640px;
  padding: 0;
}
.boxEX-middleLow {
  width: 90%;
  max-width: 720px;
  padding: 0;
}
.boxEX-middle {
  width: 94%;
  max-width: 800px;
  padding: 0;
}
.boxEX-middleUp {
  width: 96%;
  max-width: 900px;
  padding: 0;
}
.boxEX-large {
  width: 100%;
  max-width: 1000px;
  padding: 0;
}

/* 期間 */
.termEX {
  width: auto;
  max-width: 1000px;
  margin: 0 auto;
  font-size: 0;
  line-height: 1.3;
  letter-spacing: -0.5em;
  vertical-align: middle;
}
.termEX_label,
.termEX_details {
  display: inline-block;
  margin: 0;
  letter-spacing: normal;
  font-size: 20px;
  font-size: 2.0rem;
  line-height: 1.3;
  vertical-align: middle;
}
.termEX_label {
  width: 18%;
  padding: 0.4em 0;
  background-color: #826c4e;
  text-align: center;
  color: #f3eacc;
}
.termEX_details {
  width: 82%;
  padding: 0.4em 0.75em;
  background-color: #f3eacc;
  color: #321b04;
}
@media screen and (max-width: 640px){
  .termEX_label,
  .termEX_details {
    font-size: 14px;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 360px){
  .termEX_label,
  .termEX_details {
    font-size: 11px;
    font-size: 1.1rem;
  }
}

/* p */
.txtEX,
.ttlEX {
  margin: 0.5em 0;
  color: #ffffff;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: normal;
  line-height: 1.2;
}
@media screen and (max-width: 640px) {
  .txtEX,
  .ttlEX {
    font-size: 14px;
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 360px) {
  .txtEX,
  .ttlEX {
    font-size: 12px;
    font-size: 1.2rem;
  }
}
.txtEX-rev {
  color: #480922;
}

.ttlEX {
  font-weight: bold;
}

.ttlMissionEX {
  margin: 0.5em 0;
  border-bottom: #fff dotted 2px;
  color: #fff;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
}
@media screen and (max-width: 640px) {
  .ttlMissionEX {
    font-size: 15px;
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 360px) {
  .ttlMissionEX {
    font-size: 12px;
    font-size: 1.2rem;
  }
}

/* 画像 */
.imgEX {
  width: auto;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.imgEX-small {
  width: 80%;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.imgEX-large {
  width: auto;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.imgEX-illust {
  width: auto;
  max-width: 800px;
  margin: 0 auto;
}
.imgEX-ss {
  width: 80%;
  max-width: 640px;
  margin: 0 auto;
}
.imgEX a {
  display: block;
}

/* お知らせ */
.infoBoxEX {}

/* 注意事項 */
.attentionEX {
  width: 90%;
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 14px;
  border: 3px double #ff0000;
}
.attentionEX_ttl {
  margin-bottom: 0.5em;
  border-bottom: 1px dotted #ff0000;
  color: #ff0000;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
}
@media screen and (max-width: 640px){
  .attentionEX_ttl {
    font-size: 13px;
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 360px){
  .attentionEX_ttl {
    font-size: 11px;
    font-size: 1.1rem;
  }
}

.ttlRegEX {
  margin-bottom: 0.5em;
  border-bottom: 1px dotted #fff;
  color: #fff;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
}
@media screen and (max-width: 640px){
  .ttlRegEX {
    font-size: 13px;
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 360px){
  .ttlRegEX {
    font-size: 11px;
    font-size: 1.1rem;
  }
}
.regEX,
.listEX,
.listEX_nest,
.orderEX {
  width: auto;
  margin: 0.25em 0;
  padding: 0;
  color: #ffffff;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.2;
}
.regEX_item,
.listEX_item,
.listEX_nest_item {
  margin: 0.25em auto;
  padding-left: 1em;
  text-indent: -1em;
}
.orderEX_item {
  position: relative;
  margin: 0.25em auto;
  padding-left: 1.3em;
  margin-bottom: 0.3em;
}
.orderEX_item::before{
  display: block;
  position: absolute;
  counter-increment: number;
  content: counter(number);
  top: -1px;
  left: -1px;
  width: 1.5em;
  height: 1.5em;
  border: 1px solid #fff;
  border-radius: 50%;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  text-align: center;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.5;
  vertical-align: bottom;
  letter-spacing: -0.08em;
}

.regEX_item:before { content: "※"; }
.listEX_item::before{ content: '・'; }
.listEX_nest_item::before { content: '\0025e6'; }

@media screen and (max-width: 640px) {
  .regEX,
  .listEX,
  .listEX_nest,
  .orderEX {
    font-size: 12px;
    font-size: 1.2rem;
  }
  .orderEX_item::before{
    top: -2px;
    left: -4px;
    width: 17px;
    height: 17px;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}
@media screen and (max-width: 360px) {
  .regEX,
  .listEX,
  .listEX_nest,
  .orderEX {
    font-size: 10px;
    font-size: 1.0rem;
  }
  .orderEX_item::before{
    top: -4px;
    left: -4px;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
}

.regEX_item-em,
.listEX_item-em,
.listEX_nest_item-em,
.orderEX_item-em { color: #f30; }

.orderEX_item-em::before{ border-color: #f30; }


/* リセット文言 */
.resetAbout {
  max-width: 580px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 8px;
  background: transparent;
}
@media screen and (max-width: 640px){
  .resetAbout {
    margin: 10px auto;
    padding: 10px;
  }
}
.resetAbout .txtEX {
  line-height: 1.3;
}
.resetAbout_ttl {
  margin-bottom: .5em;
  color: #fff;
  font-size: 24px;
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: -0.05em;
}
@media screen and (max-width: 640px){
  .resetAbout_ttl {
    font-size: 16px;
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 360px){
  .resetAbout_ttl {
    font-size: 13px;
    font-size: 1.3rem;
  }
}
/* リセット文言 end */

/**/

/* #wrapLink */
#wrapLink.wrapLinkEX {
  background: none;
}
.wrapLinkEX #Link{
  margin-top: 10px;
}

/* 特設&コラボ用　ミッション報酬「宝玉」「イベントポイント」アイコンサイズ設定　230309追加 */
.table-mission_rewardList td .icon_jewels,
.table-collabo_rewardList td .icon_jewels {
  width:77%;
  max-width: 62px;
  vertical-align: bottom;
  }

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

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

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