@charset "UTF-8";
#helpBtn {
  width: 100px;
  position: absolute;
  top: 13px;
  right: 276px;
  z-index: 10000;
}

#unionLogBtn {
  width: 120px;
  position: absolute;
  top: 13px;
  right: 144px;
  z-index: 10000;
}

* {
  -webkit-box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #5b5b5b;
  font-weight: normal;
  -webkit-user-select: none;
  letter-spacing: 0px;
  word-wrap: break-word;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased !important;
  overflow-wrap: break-word;
}

.serifFont {
  font-family: "mbm",sans-serif;
}

:root {
  background-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background-color: transparent;
  font-family: "motoya",sans-serif;
}

body.ios {
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

ul {
  list-style: none;
}

img {
  user-drag: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

input, textarea {
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
  -webkit-touch-callout: none;
}

input:focus, textarea:focus {
  outline: 0;
}

.clearfix:after {
  height: .1px;
  display: block;
  visibility: hidden;
  clear: both;
  font-size: .1em;
  line-height: 0;
  content: " ";
  pointer-events: none;
}

/* 汎用:角が斜めの背景 */
.topRadiusStrights {
  background: linear-gradient(0deg, transparent 0px, #333333 0px), linear-gradient(0deg, transparent 0px, #333333 0px), linear-gradient(225deg, transparent 8px, #333333 8px), linear-gradient(135deg, transparent 8px, #333333 8px);
  background-repeat: no-repeat;
  background-position: bottom left, bottom right, top right, top left;
  background-size: 51% 51%;
}

.allRadiusStrights {
  background: linear-gradient(45deg, transparent 8px, #333333 8px), linear-gradient(315deg, transparent 8px, #333333 8px), linear-gradient(225deg, transparent 8px, #333333 8px), linear-gradient(135deg, transparent 8px, #333333 8px);
  background-repeat: no-repeat;
  background-position: bottom left, bottom right, top right, top left;
  background-size: 51% 51%;
}

/* ヘルプボタン */
.helpBtn {
  width: 36px;
  height: 36px;
  background-image: url("/magica/resource/image_web/common/icon/icon_help.png");
  background-size: contain;
  display: none;
  position: absolute;
  top: 12px;
  left: 660px;
  z-index: 100;
}

.helpBtn.on {
  display: block;
  pointer-events: auto;
}

.commonEffect {
  width: 256px;
  height: 256px;
  position: fixed;
  pointer-events: none;
  z-index: 1000100;
}

.commonEffect .effect01, .commonEffect .effect02, .commonEffect .effect03 {
  width: 256px;
  height: 256px;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
}

.commonEffect .effect01 {
  background: url("/magica/resource/image_web/common/tapEffect/tap_effect_circle.png") left top no-repeat;
  -webkit-animation: tap_effect_circle 1s ease-in-out 0s 1 alternate;
  -webkit-animation-fill-mode: both;
}

.commonEffect .effect02 {
  background: url("/magica/resource/image_web/common/tapEffect/tap_effect_circle_s.png") left top no-repeat;
  -webkit-animation: tap_effect_circle_s 1s ease-in-out 0s 1 alternate;
  -webkit-animation-fill-mode: both;
}

.commonEffect .effect03 {
  background: url("/magica/resource/image_web/common/tapEffect/tap_effect_glitter.png") left top no-repeat;
  -webkit-animation: tap_effect_glitter 1s ease-in-out 0s 1 alternate;
  -webkit-animation-fill-mode: both;
}

@-webkit-keyframes tap_effect_circle {
  0% {
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
    opacity: 0;
  }
  6% {
    opacity: .8;
  }
  24% {
    opacity: .8;
  }
  30% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes tap_effect_circle_s {
  0% {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    opacity: 0;
  }
  12% {
    opacity: .8;
  }
  30% {
    opacity: .8;
  }
  48% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes tap_effect_glitter {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
  }
  18% {
    opacity: .8;
  }
  34% {
    opacity: .8;
  }
  58% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* グレースケール */
.grayScale {
  -webkit-filter: grayscale(100%);
}

/* ボタンオーバーレイ */
.overlayOn:before {
  -webkit-animation: common_fade_in .15s ease 0s 1 alternate;
}

.cardFrame {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 100;
}

.cardFrame.RANK_1 {
  background-size: 100% 100%;
}

.cardFrame.RANK_2 {
  background-size: 100% 100%;
}

.cardFrame.RANK_3 {
  background-size: 100% 100%;
}

.cardFrame.RANK_4 {
  background-size: 100% 100%;
}

.cardFrame.RANK_5 {
  background-size: 100% 100%;
}

/* scrollSet -----------------------------------------------------------------*/
.scrollIndicator {
  width: 10px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  z-index: inherit;
}

.scrollWillChange {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
  will-change: transform;
}

.scrollForce {
  pointer-events: none;
  will-change: transform;
}

.scrollForceInvisible {
  pointer-events: none;
  opacity: 0;
}

.scrollForceInvisible.fadeIn {
  -webkit-animation: scrollFadeIn .1s linear 0s 1 normal;
  pointer-events: auto;
}

.scrollIndicator .scrollIndicatorInner {
  width: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-animation: scrollFadeOut .5s linear 0s 1 normal;
  pointer-events: auto;
  -webkit-animation-fill-mode: forwards;
}

.scrollIndicator .scrollIndicatorInner.onScroll {
  -webkit-animation: scrollFadeIn .1s linear 0s 1 normal;
  will-change: transform;
  -webkit-animation-fill-mode: forwards;
}

.scrollIndicatorX {
  width: 100%;
  height: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 10;
}

.scrollIndicatorX .scrollIndicatorInnerX {
  height: 5px;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-animation: scrollFadeOut .5s linear 0s 1 normal;
  pointer-events: auto;
  -webkit-animation-fill-mode: forwards;
}

.scrollIndicatorX .scrollIndicatorInnerX.onScroll {
  -webkit-animation: scrollFadeIn .1s linear 0s 1 normal;
  will-change: transform;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes scrollFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes scrollFadeOut {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* userCharaIcon ------------------------------------------------------------ */
.sortLv .userCharaIcon .lv {
  display: block;
}

.sortAtk .userCharaIcon .lv {
  display: none;
}

.sortAtk .userCharaIcon .atk {
  display: block;
}

.sortDef .userCharaIcon .lv {
  display: none;
}

.sortDef .userCharaIcon .def {
  display: block;
}

.sortHp .userCharaIcon .lv {
  display: none;
}

.sortHp .userCharaIcon .hp {
  display: block;
}

.sortRank .userCharaIcon .lv {
  display: block;
}

.sortGet .userCharaIcon .lv {
  display: none;
}

.sortGet .userCharaIcon .get {
  display: block;
}

.sortEplv .userCharaIcon .lv {
  display: none;
}

.sortEplv .userCharaIcon .eplv {
  display: block;
}

.sortRev .userCharaIcon .lv {
  display: none;
}

.sortRev .userCharaIcon .rev {
  display: block;
}

.sortMlv .userCharaIcon .lv {
  display: none;
}

.sortMlv .userCharaIcon .mlv {
  display: block;
}

.sortEnhance .userCharaIcon .lv {
  display: none;
}

.sortEnhance .userCharaIcon .enhance {
  display: block;
}

.sortComposeAttribute .userCharaIcon .lv {
  display: none;
}

.sortComposeAttribute .userCharaIcon .composeAttribute {
  display: block;
}

.userCharaIcon {
  width: 78px;
  height: 78px;
  position: relative;
}

.userCharaIcon img {
  width: 74px;
  width: 74px;
  position: absolute;
  top: 2px;
  left: 2px;
  -webkit-border-radius: 39px;
  z-index: 5;
}

.userCharaIcon .att, .userCharaIcon .rank, .userCharaIcon .star, .userCharaIcon .bg {
  width: 78px;
  height: 78px;
  background-size: 78px 78px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.userCharaIcon .star {
  z-index: 9;
}

.userCharaIcon .rank {
  z-index: 8;
}

.userCharaIcon .att {
  z-index: 10;
}

.userCharaIcon .lv, .userCharaIcon .atk, .userCharaIcon .def, .userCharaIcon .hp, .userCharaIcon .get, .userCharaIcon .eplv, .userCharaIcon .rev, .userCharaIcon .mlv, .userCharaIcon .enhance, .userCharaIcon .composeAttribute {
  min-width: 18px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  color: #ffffff;
  font-size: 14px;
  text-align: right;
  text-shadow: -1px -1px 1px #342510, 1px -1px 1px #342510, -1px 1px 1px #342510, 1px 1px 1px #342510, -1px -1px #342510, 1px -1px #342510, -1px 1px #342510, 1px 1px #342510;
  z-index: 10;
}

.userCharaIcon .lv span, .userCharaIcon .atk span, .userCharaIcon .def span, .userCharaIcon .hp span, .userCharaIcon .get span, .userCharaIcon .eplv span, .userCharaIcon .rev span, .userCharaIcon .mlv span, .userCharaIcon .enhance span, .userCharaIcon .composeAttribute span {
  color: #ffffff;
}

.userCharaIcon .lv {
  display: block;
}

.userCharaIcon .lv:before {
  margin-right: 5px;
  color: #ffff99;
  font-size: 10px;
  content: "Lv";
}

.userCharaIcon .atk {
  display: none;
}

.userCharaIcon .atk:before {
  margin-right: 5px;
  color: #ffff99;
  font-size: 10px;
  content: "ATK";
}

.userCharaIcon .def {
  display: none;
}

.userCharaIcon .def:before {
  margin-right: 5px;
  color: #ffff99;
  font-size: 10px;
  content: "DEF";
}

.userCharaIcon .hp {
  display: none;
}

.userCharaIcon .hp:before {
  margin-right: 5px;
  color: #ffff99;
  font-size: 10px;
  content: "HP";
}

.userCharaIcon .eplv {
  display: none;
}

.userCharaIcon .eplv:before {
  margin-right: 5px;
  color: #ffff99;
  font-size: 10px;
  content: "エピソードLv";
}

.userCharaIcon .rev {
  display: none;
}

.userCharaIcon .rev:before {
  margin-right: 5px;
  color: #ffff99;
  font-size: 10px;
  content: "魔力解放";
}

.userCharaIcon .mlv {
  display: none;
}

.userCharaIcon .mlv:before {
  margin-right: 5px;
  color: #ffff99;
  font-size: 10px;
  content: "マギアLv";
}

.userCharaIcon .enhance {
  display: none;
}

.userCharaIcon .enhance:before {
  margin-right: 5px;
  color: #ffff99;
  font-size: 10px;
  content: "精神強化";
}

.userCharaIcon .composeAttribute {
  display: none;
}

.userCharaIcon .composeAttribute:before {
  margin-right: 5px;
  color: #ffff99;
  font-size: 10px;
  content: "属性強化";
}

.userCharaIcon .get {
  display: none;
}

#equipWrap > .flexBox {
  height: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: justify;
      align-content: space-between;
}

#equipWrap .memoriaWrap {
  width: 600px;
  min-height: 100px;
  margin-bottom: 10px;
  background: url("/magica/resource/image_web/common/chara/bg_chara_memoria_on_base.png") left 22px no-repeat;
  background-size: 600px -webkit-calc(100% - 30px);
  -webkit-transition: height 0.3s 0s ease-in-out;
  transition: height 0.3s 0s ease-in-out;
  position: relative;
}

#equipWrap .memoriaWrap:not(.none):not(.off):before {
  content: '';
  background: url("/magica/resource/image_web/common/chara/bg_chara_memoria_on_top.png") left top no-repeat;
  position: absolute;
  top: 0;
  width: 600px;
  height: 32px;
  z-index: 1;
}

#equipWrap .memoriaWrap:not(.none):not(.off):after {
  content: '';
  background: url("/magica/resource/image_web/common/chara/bg_chara_memoria_on_bottom.png") left bottom no-repeat;
  position: absolute;
  bottom: 0;
  width: 600px;
  height: 10px;
  z-index: 1;
}

#equipWrap .memoriaWrap:nth-of-type(2).none {
  background: url("/magica/resource/image_web/common/chara/bg_chara_memoria_none_1_a.png");
}

#equipWrap .memoriaWrap:nth-of-type(3).none {
  background: url("/magica/resource/image_web/common/chara/bg_chara_memoria_none_2_a.png");
}

#equipWrap .memoriaWrap:nth-of-type(4).none {
  background: url("/magica/resource/image_web/common/chara/bg_chara_memoria_none_3_a.png");
}

#equipWrap .memoriaWrap.off {
  background: url("/magica/resource/image_web/common/chara/bg_chara_memoria_off.png");
}

#equipWrap .memoriaWrap > .flexBox {
  position: relative;
  top: -36px;
  z-index: 2;
}

#equipWrap .memoriaWrap .memoriaSkill {
  position: relative;
  top: -2px;
  z-index: 5;
}

#equipWrap .memoriaWrap .name {
  width: 100%;
  height: 36px;
  padding: 0 0 0 102px;
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  color: #ffffff;
  line-height: 36px;
}

#equipWrap .memoriaWrap .userMemoriaIcon {
  width: 84px;
  height: 84px;
  position: absolute;
  top: 8px;
  left: 10px;
}

#equipWrap .memoriaWrap .memoriaStatus {
  position: absolute;
  top: 16px;
  right: 10px;
}

#equipWrap .memoriaWrap .memoriaStatus .thStyle {
  width: 42px;
  height: 22px;
  margin-bottom: 2px;
  background: #b28750;
  display: block;
  color: #ffffff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  -webkit-border-radius: 5px 0 0 5px;
}

#equipWrap .memoriaWrap .memoriaStatus .tdStyle {
  width: 65px;
  height: 22px;
  margin-bottom: 2px;
  padding: 0 0 0 6px;
  display: block;
  font-size: 14px;
  line-height: 22px;
}

#equipWrap .memoriaWrap .memoriaSkill .skillName {
  width: 246px;
  height: 24px;
  position: relative;
  top: 0;
  left: 146px;
  font-size: 14px;
  line-height: 24px;
  text-align: left;
}

#equipWrap .memoriaWrap .memoriaSkill .skillDetail {
  width: 320px;
  position: relative;
  top: 0;
  left: 146px;
  font-size: 14px;
  line-height: 1.3;
  padding-bottom: 4px;
  word-break: break-all;
}

#equipWrap .memoriaWrap .memoriaSkill .skillIcon {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 98px;
}

#equipWrap .memoriaWrap .memoriaSkill .skillIcon img {
  width: 100%;
  height: 100%;
}

/* MemoriaIcon -------------------------------------------------------------- */
#sizeChange {
  width: 70px;
  height: 66px;
  background: url("/magica/resource/image_web/page/memoria/btn_memoria_l.png") left top no-repeat;
  z-index: 1;
}

#sizeChange.smaller {
  background: url("/magica/resource/image_web/page/memoria/btn_memoria_m.png") left top no-repeat;
}

#sizeChange.smallest {
  background: url("/magica/resource/image_web/page/memoria/btn_memoria_s.png") left top no-repeat;
}

.userMemoriaIcon {
  -webkit-box-sizing: border-box;
  width: 126px;
  height: 126px;
  position: relative;
  text-align: center;
}

.userMemoriaIcon .cardInner {
  width: 100%;
  height: 100%;
}

.userMemoriaIcon img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

.userMemoriaIcon .lvMax {
  position: absolute;
  right: 5px;
  bottom: 20px;
  z-index: 10;
}

.userMemoriaIcon .dispPrm, .userMemoriaIcon .lv, .userMemoriaIcon .hp, .userMemoriaIcon .atk, .userMemoriaIcon .def, .userMemoriaIcon .getAt, .userMemoriaIcon .limitBreak {
  min-width: 18px;
  display: block;
  display: none;
  position: absolute;
  bottom: -2px;
  left: 4px;
  color: #ffffff;
  font-size: 16px;
  text-align: left;
  text-shadow: -1px -1px 2px #61554e, 1px -1px 2px #61554e, -1px 1px 2px #61554e, 1px 1px 2px #61554e, -1px -1px #61554e, 1px -1px #61554e, -1px 1px #61554e, 1px 1px #61554e, 0 0 4px #61554e, 0 0 4px #61554e, 0 0 4px #61554e;
  z-index: 10;
}

.userMemoriaIcon .lv span {
  color: #ffffff;
}

.userMemoriaIcon .limitBreak {
  min-width: 80px;
  height: 20px;
  bottom: 4px;
  left: 4px;
}

.userMemoriaIcon .limitBreak span {
  width: 20px;
  height: 20px;
  background: url("/magica/resource/image_web/page/memoria/memoria_limitbrake_frame.png") left top no-repeat;
  display: block;
}

.userMemoriaIcon .limitBreak.lbCount1 .lb1 {
  background: url("/magica/resource/image_web/page/memoria/memoria_limitbreak_on.png") left top no-repeat;
  background-size: contain;
}

.userMemoriaIcon .limitBreak.lbCount2 .lb1, .userMemoriaIcon .limitBreak.lbCount2 .lb2 {
  background: url("/magica/resource/image_web/page/memoria/memoria_limitbreak_on.png") left top no-repeat;
  background-size: contain;
}

.userMemoriaIcon .limitBreak.lbCount3 .lb1, .userMemoriaIcon .limitBreak.lbCount3 .lb2, .userMemoriaIcon .limitBreak.lbCount3 .lb3 {
  background: url("/magica/resource/image_web/page/memoria/memoria_limitbreak_on.png") left top no-repeat;
  background-size: contain;
}

.userMemoriaIcon .limitBreak.lbCount4 .lb1, .userMemoriaIcon .limitBreak.lbCount4 .lb2, .userMemoriaIcon .limitBreak.lbCount4 .lb3, .userMemoriaIcon .limitBreak.lbCount4 .lb4 {
  background: url("/magica/resource/image_web/page/memoria/memoria_limitbreak_on.png") left top no-repeat;
  background-size: contain;
}

.userMemoriaIcon.protected .lock {
  width: 24px;
  height: 27px;
  background-image: url("/magica/resource/image_web/page/memoria/memoria_lock.png");
  display: block;
  position: absolute;
  right: 0px;
  bottom: 24px;
  z-index: 150;
}

.userMemoriaIcon.equiped .equip {
  width: 69px;
  height: 22px;
  background: url("/magica/resource/image_web/page/memoria/memoria_equiped.png") left top no-repeat;
  display: block;
  position: absolute;
  top: -14px;
  right: 0;
  z-index: 66;
}

.userMemoriaIcon.equiped .selectable {
  width: 79px;
  height: 22px;
  background: url("/magica/resource/image_web/page/memoria/memoria_set_selectable.png") left top no-repeat;
  display: block;
  position: absolute;
  top: -14px;
  right: 0;
  z-index: 66;
}

.userMemoriaIcon.equiped.ownEquip .equip {
  background: url("/magica/resource/image_web/page/memoria/memoria_equiped_current.png") left top no-repeat;
}

.userMemoriaIcon.equiped.remove.selected .equip {
  background: url("/magica/resource/image_web/page/memoria/memoria_disequip.png") left top no-repeat;
  background-size: contain;
}

.userMemoriaIcon.equiped.remove.selected .selectable {
  width: 69px;
  height: 22px;
  background: url("/magica/resource/image_web/page/memoria/memoria_disequip.png") left top no-repeat;
  background-size: contain;
}

.userMemoriaIcon.alreadySet .alreadySet {
  width: 69px;
  height: 22px;
  background: url("/magica/resource/image_web/page/memoria/memoria_set_other.png") left top no-repeat;
  display: block;
  position: absolute;
  top: -14px;
  right: 0;
  z-index: 66;
}

.userMemoriaIcon.alreadySet.equiped .alreadySet {
  display: none;
}

.userMemoriaIcon.hide {
  display: none !important;
}

.userMemoriaIcon .eventEffect {
  width: 64px;
  height: 20px;
  background: url("/magica/resource/image_web/page/formation/icon_event_bonus.png") left top no-repeat;
  background-size: 64px 20px;
  display: none;
  position: absolute;
  top: -12px;
  left: -5px;
  z-index: 40;
}

.userMemoriaIcon.effective .eventEffect, .userMemoriaIcon.regularEffective .eventEffect {
  display: block;
}

.userMemoriaIcon.selected .overWrap {
  width: 134px;
  height: 134px;
  display: block;
  position: absolute;
  top: -4px;
  left: -4px;
  border: 4px solid #ff3b81;
  border-radius: 24px 12px 12px 12px;
  z-index: 18;
}

.userMemoriaIcon .paramWrap {
  display: none;
}

.userMemoriaIcon.cantEquipAbility .overWrap {
  background: url("/magica/resource/image_web/common/memoria/memoria_unable_ability.png") left top no-repeat;
}

.userMemoriaIcon.cantEquipSkill .overWrap {
  background: url("/magica/resource/image_web/common/memoria/memoria_unable_skill.png") left top no-repeat;
}

.userMemoriaIcon.cantEquipId .overWrap {
  background: url("/magica/resource/image_web/common/memoria/memoria_unable_same.png") left top no-repeat;
}

.userMemoriaIcon.cantEquipAtt .overWrap {
  background: url("/magica/resource/image_web/common/memoria/memoria_unable_element.png") left top no-repeat;
}

.userMemoriaIcon.cantEquipChara .overWrap {
  background: url("/magica/resource/image_web/common/memoria/memoria_unable_chara.png") left top no-repeat;
}

.userMemoriaIcon.cantEquip .overWrap {
  background: url("/magica/resource/image_web/common/memoria/memoria_unable.png") left top no-repeat;
}

.userMemoriaIcon.cantEquipAbility .overWrap, .userMemoriaIcon.cantEquipSkill .overWrap, .userMemoriaIcon.cantEquipId .overWrap, .userMemoriaIcon.cantEquipAtt .overWrap, .userMemoriaIcon.cantEquipChara .overWrap, .userMemoriaIcon.cantEquip .overWrap {
  width: 100%;
  height: 100%;
  background-size: contain;
  display: block;
  position: relative;
  z-index: 18;
}

.smaller .userMemoriaIcon {
  width: 100px;
  height: 100px;
}

.smaller .userMemoriaIcon .dispPrm, .smaller .userMemoriaIcon .lv, .smaller .userMemoriaIcon .hp, .smaller .userMemoriaIcon .atk, .smaller .userMemoriaIcon .def, .smaller .userMemoriaIcon .getAt, .smaller .userMemoriaIcon .limitBreak {
  font-size: 15px;
}

.smaller .userMemoriaIcon .limitBreak {
  height: 18px;
  bottom: 3px;
  left: 3px;
}

.smaller .userMemoriaIcon .limitBreak span {
  width: 18px;
  height: 18px;
  background-size: 18px 18px;
}

.smaller .userMemoriaIcon .lock {
  width: 22px !important;
  height: 25px !important;
  background-size: 22px 25px !important;
  bottom: 18px !important;
}

.smaller .userMemoriaIcon.equiped .equip {
  width: 54px;
  height: 17px;
  background-size: 54px 17px !important;
  top: -10px;
}

.smaller .userMemoriaIcon.equiped .selectable {
  width: 62px;
  height: 17px;
  background-size: 62px 17px !important;
  top: -10px;
}

.smaller .userMemoriaIcon.equiped.remove.selected .selectable {
  width: 54px;
  height: 17px;
  background-size: 54px 17px !important;
}

.smaller .userMemoriaIcon.alreadySet .alreadySet {
  width: 54px;
  height: 17px;
  background-size: 54px 17px !important;
  top: -10px;
}

.smaller .userMemoriaIcon .eventEffect {
  width: 55px;
  height: 17px;
  background-size: 55px 17px;
  top: -10px;
  left: -5px;
}

.smaller .userMemoriaIcon.selected .overWrap {
  width: 108px;
  height: 108px;
  display: block;
  position: absolute;
  top: -4px;
  left: -4px;
  border: 4px solid #ff3b81;
  border-radius: 18px 12px 12px 12px;
  z-index: 18;
}

.smaller .userMemoriaIcon .overWrap:before {
  font-size: 16px;
  line-height: 100px;
}

.smallest .userMemoriaIcon {
  width: 88px;
  height: 88px;
}

.smallest .userMemoriaIcon .dispPrm, .smallest .userMemoriaIcon .lv, .smallest .userMemoriaIcon .hp, .smallest .userMemoriaIcon .atk, .smallest .userMemoriaIcon .def, .smallest .userMemoriaIcon .getAt, .smallest .userMemoriaIcon .limitBreak {
  font-size: 14px;
}

.smallest .userMemoriaIcon .limitBreak {
  height: 16px;
  bottom: 2px;
  left: 2px;
}

.smallest .userMemoriaIcon .limitBreak span {
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
}

.smallest .userMemoriaIcon .lock {
  width: 18px !important;
  height: 20px !important;
  background-size: 18px 20px !important;
  bottom: 16px !important;
}

.smallest .userMemoriaIcon.equiped .equip {
  width: 46px;
  height: 15px;
  background-size: 46px 15px !important;
  top: -8px;
}

.smallest .userMemoriaIcon.equiped .selectable {
  width: 55px;
  height: 15px;
  background-size: 55px 15px !important;
  top: -8px;
}

.smallest .userMemoriaIcon.equiped.remove.selected .selectable {
  width: 46px;
  height: 15px;
  background-size: 46px 15px !important;
}

.smallest .userMemoriaIcon.alreadySet .alreadySet {
  width: 46px;
  height: 15px;
  background-size: 46px 15px !important;
  top: -8px;
}

.smallest .userMemoriaIcon .eventEffect {
  width: 48px;
  height: 15px;
  background-size: 48px 15px;
  top: -8px;
  left: -5px;
}

.smallest .userMemoriaIcon.selected .overWrap {
  width: 96px;
  height: 96px;
  display: block;
  position: absolute;
  top: -4px;
  left: -4px;
  border: 4px solid #ff3b81;
  border-radius: 16px 10px 10px 10px;
  z-index: 18;
}

.smallest .userMemoriaIcon .overWrap:before {
  font-size: 14px;
  line-height: 88px;
}

.pieceSet .userMemoriaIcon.equiped .equip {
  background: url("/magica/resource/image_web/page/memoria/memoria_set_current.png") left top no-repeat;
}

/* MemoriaDetailPop */
#memoriaDetailWrap {
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  z-index: 10001;
}

#memoriaDetailWrap .memoriaNameWrap {
  width: 652px;
  height: 60px;
  background-image: url("/magica/resource/image_web/page/memoria/memoria_pop_title.png");
  position: absolute;
  top: 0;
  right: 0;
  line-height: 60px;
  text-align: left;
  z-index: 5;
}

#memoriaDetailWrap .memoriaNameWrap .memoriaTypeIcon {
  width: 48px;
  height: 49px;
  display: block;
  position: absolute;
  top: 5.5px;
  left: 35px;
}

#memoriaDetailWrap .memoriaNameWrap .memoriaName {
  width: 400px;
  height: 60px;
  display: block;
  position: absolute;
  top: 0;
  left: 90px;
  font-size: 23px;
  text-shadow: -1px -1px 2px #7f58b4, 1px -1px 2px #7f58b4, -1px 1px 2px #7f58b4, 1px 1px 2px #7f58b4, -1px -1px #7f58b4, 1px -1px #7f58b4, -1px 1px #7f58b4, 1px 1px #7f58b4;
}

#memoriaDetailWrap .memoriaNameWrap .memoriaTypeName {
  width: 133px;
  height: 24px;
  background-color: #ffffff;
  display: block;
  position: absolute;
  top: 18px;
  right: 0;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

#memoriaDetailWrap .memoriaNameWrap.SKILL .memoriaTypeIcon {
  background: url("/magica/resource/image_web/page/memoria/memoria_pop_skill.png");
}

#memoriaDetailWrap .memoriaNameWrap.SKILL .memoriaTypeName {
  color: #ef638b;
}

#memoriaDetailWrap .memoriaNameWrap.ABILITY .memoriaTypeIcon {
  background: url("/magica/resource/image_web/page/memoria/memoria_pop_ability.png");
}

#memoriaDetailWrap .memoriaNameWrap.ABILITY .memoriaTypeName {
  color: #3a9abd;
  letter-spacing: -1px;
}

#memoriaDetailWrap .popupCloseBtn {
  width: 91px !important;
  height: 43px !important;
  background-image: url("/magica/resource/image_web/common/global/global_back.png") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  position: absolute !important;
  top: 9px !important;
  left: 7px !important;
  z-index: 101;
}

#memoriaDetailWrap #memoriaDetailPopup {
  width: 1024px;
  height: -webkit-calc(100% - 60px);
  position: absolute;
  top: 60px;
  left: -webkit-calc(50% - 512px);
}

#memoriaDetailWrap #memoriaDetailPopup .popupCardImage {
  width: 389px;
  height: -webkit-calc(100% - 20px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 3px;
  right: 635px;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
}

#memoriaDetailWrap #memoriaDetailPopup .popupCardImage img {
  max-width: 371px;
  height: 100%;
  max-height: 564px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupCardImage.zoom {
  width: 200%;
  height: 150%;
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: -25%;
  left: -50%;
  z-index: 9999;
}

#memoriaDetailWrap #memoriaDetailPopup .popupCardImage.zoom img {
  width: 570px;
  max-width: 570px;
  height: 865px;
  max-height: 1024px;
  position: fixed;
  top: -webkit-calc(50% - 432.5px);
  left: -webkit-calc(50% - 285px);
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
}

#memoriaDetailWrap #memoriaDetailPopup #memoriaProtect {
  width: 120px;
  height: 40px;
  padding: 0;
  padding: 13px 22px 13px 0;
  background-image: url("/magica/resource/image_web/page/memoria/memoria_pop_sprite.png");
  background-repeat: none;
  position: absolute;
  top: 32px;
  right: 0px;
  color: #ffffff;
  font-size: 14px;
  text-align: right;
  text-shadow: 2px 0px 2px #714da3, -2px 0px 2px #714da3, 0px 2px 2px #714da3, 0px -2px 2px #714da3, 2px 2px 2px #714da3, -2px 2px 2px #714da3, 2px -2px 2px #714da3, -2px -2px 2px #714da3;
  z-index: 3;
}

#memoriaDetailWrap #memoriaDetailPopup #memoriaProtect.protected {
  padding: 13px 12px 13px 0;
  background-position: 0 -42px;
  text-shadow: 2px 0px 2px #ff4f9e, -2px 0px 2px #ff4f9e, 0px 2px 2px #ff4f9e, 0px -2px 2px #ff4f9e, 2px 2px 2px #ff4f9e, -2px 2px 2px #ff4f9e, 2px -2px 2px #ff4f9e, -2px -2px 2px #ff4f9e;
}

#memoriaDetailWrap #memoriaDetailPopup #memoriaProtect.protected.cantUnlock {
  pointer-events: none;
  -webkit-filter: grayscale(100%);
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap {
  width: 617px;
  min-height: 430px;
  max-height: -webkit-calc(100% - 50px);
  position: absolute;
  top: 10px;
  right: 20px;
  text-align: left;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .hideArea {
  overflow: hidden;
  width: 597px;
  min-height: 416px;
  max-height: -webkit-calc(100% - 50px);
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .scrollIndicator {
  height: -webkit-calc(100% - 45px) !important;
  top: 15px !important;
  right: 15px !important;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .scrollIndicator .scrollIndicatorInner {
  max-height: 100%;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap {
  width: 611px;
  height: auto;
  min-height: 100%;
  padding: 0px 15px 0px 0px;
  position: absolute;
  top: 0;
  left: 0px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap {
  width: 556px;
  height: 131px;
  margin-left: 24px;
  display: block;
  position: relative;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardLevel {
  min-width: 140px;
  padding-left: 46px;
  position: absolute;
  top: 6px;
  left: 28px;
  font-size: 28px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardLevel .nowLevel {
  position: relative;
  bottom: 0;
  font-size: 33px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardLevel:before {
  position: absolute;
  bottom: 2px;
  left: 0;
  font-size: 22px;
  content: "Lv";
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .memPopLbTitle {
  width: auto;
  height: auto;
  position: absolute;
  top: 102px;
  left: 26px;
  font-size: 18px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3 {
  width: 100px;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 104px;
  left: 110px;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3 li {
  width: 20px;
  height: 20px;
  margin-right: 0px;
  background-image: url("/magica/resource/image_web/page/memoria/memoria_limitbrake_frame.png");
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb1 .statuslb1 {
  background-image: url("/magica/resource/image_web/page/memoria/memoria_limitbreak_on.png");
  background-size: contain;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb2 .statuslb1, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb2 .statuslb2 {
  background-image: url("/magica/resource/image_web/page/memoria/memoria_limitbreak_on.png");
  background-size: contain;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb3 .statuslb1, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb3 .statuslb2, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb3 .statuslb3 {
  background-image: url("/magica/resource/image_web/page/memoria/memoria_limitbreak_on.png");
  background-size: contain;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb4 .statuslb1, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb4 .statuslb2, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb4 .statuslb3, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb4 .statuslb4 {
  background-image: url("/magica/resource/image_web/page/memoria/memoria_limitbreak_on.png");
  background-size: contain;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb5 .statuslb1, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb5 .statuslb2, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb5 .statuslb3, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb5 .statuslb4, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .lbCount_3.thisLb5 .statuslb5 {
  background-image: url("/magica/resource/image_web/page/memoria/memoria_limitbreak_on.png");
  background-size: contain;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .expWrap {
  width: 192px;
  height: 18px;
  padding: 4px 9px;
  background-image: url("/magica/resource/image_web/page/memoria/memoria_compose_guage_wrap.png");
  position: absolute;
  top: 55px;
  left: 18px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .expWrap .exp {
  max-width: 174px;
  height: 10px;
  background-image: url("/magica/resource/image_web/page/memoria/memoria_compose_guage.png");
  display: block;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .expNum {
  width: 56px;
  position: absolute;
  top: 53px;
  left: 205px;
  font-size: 16px;
  text-align: right;
  text-shadow: none;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .nextLvWrap {
  width: 164px;
  position: absolute;
  top: 76px;
  left: 26px;
  font-size: 18px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .nextLvWrap .nextExp {
  width: 100px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardHp, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardAttack, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardDefense {
  width: 144px;
  padding: 0 0 0 66px;
  display: block;
  position: absolute;
  font-size: 20px;
  text-align: left;
  text-shadow: none;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardHp:before, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardAttack:before, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardDefense:before {
  width: 59px;
  padding: 1px 4px;
  background-color: #b28750;
  position: absolute;
  top: 2px;
  left: 0;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardHp {
  top: 36px;
  right: 131px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardHp:before {
  content: "HP";
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardAttack {
  top: 66px;
  right: 131px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardAttack:before {
  content: "ATK";
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardDefense {
  top: 96px;
  right: 131px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .paramWrap .cardDefense:before {
  content: "DEF";
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .hasNumWrap {
  position: absolute;
  right: 25px;
  top: 78px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .hasNumWrap .common_dl {
  margin-bottom: 4px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .hasNumWrap .common_dl dt {
  background: #6c74d0;
  border: none;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .hasNumWrap .common_dl dd {
  width: 55px;
  text-align: center;
  border-top: 1px solid #6c74d0;
  border-right: 1px solid #6c74d0;
  border-bottom: 1px solid #6c74d0;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .effectiveWrap {
  margin-top: 0px;
  margin-left: 28px;
  position: relative;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .effectiveWrap .equipLimited {
  width: 558px;
  height: auto;
  margin-top: 5px;
  position: relative;
  text-align: right;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .effectiveWrap .equipLimited .limitedTitle {
  width: 86px;
  height: 32px;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
  text-shadow: none;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .effectiveWrap .equipLimited .canEquip {
  width: 472px;
  height: 32px;
  color: #7646a3;
  font-size: 14px;
  line-height: 32px;
  text-align: left;
  text-shadow: none;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .effectiveWrap .cardSkillWrap {
  width: 556px;
  height: auto;
  margin-top: 10px;
  display: block;
  position: relative;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .effectiveWrap .cardSkillWrap .skillImage {
  width: 56px;
  height: 56px;
  display: block;
  position: absolute;
  top: 38px;
  left: 12px;
  z-index: 3;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .effectiveWrap .cardSkillWrap .skillImage img {
  width: 54px;
  height: 54px;
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .effectiveWrap .cardSkillWrap .skillName {
  width: 366px;
  height: 33px;
  padding: 0px 10px 0px 20px;
  background-color: #f86a9f;
  display: block;
  position: relative;
  font-size: 18px;
  line-height: 33px;
  border-top-left-radius: 5px;
  border-top-right-radius: 28px;
  text-shadow: none;
  z-index: 1;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .effectiveWrap .cardSkillWrap .skillName.ABILITY {
  background-color: #3a9abd;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .effectiveWrap .cardSkillWrap .skillDescription {
  width: 558px;
  min-height: 76px;
  padding: 4px 20px 4px 90px;
  display: block;
  position: relative;
  top: -2px;
  font-size: 16px;
  word-break: break-all;
  border: solid 2px #c6a882;
  border-radius: 5px;
  border-top-left-radius: 0;
  text-shadow: none;
  z-index: 2;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .effectiveWrap .intervalTurn {
  width: 180px;
  height: 20px;
  position: absolute;
  top: 8px;
  right: 14px;
  text-align: right;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .effectiveWrap .memoriaHr {
  display: none;
  width: 560px;
  margin-left: -3px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .effectiveWrap .cardDescription {
  width: 558px;
  margin-top: 7px;
  min-height: 98px;
  padding: 10px 48px 10px 22px;
  background-color: rgba(255, 255, 255, 0.6);
  display: block;
  position: relative;
  font-size: 15px;
  line-height: 1.3;
  border: solid 1px #eadecc;
  border-radius: 5px;
  text-shadow: none;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .illustrator {
  margin-top: 7px;
  margin-right: 15px;
  margin-left: 28px;
  padding: 1px 0px 1px 148px;
  position: relative;
  font-size: 16px;
  text-shadow: none;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap .illustrator:before {
  padding: 3px 16px 2px;
  background-color: #ebe1d4;
  position: absolute;
  top: 0;
  left: 0;
  color: #a47122;
  font-size: 13px;
  text-align: center;
  content: "イラストレーター";
  text-shadow: none;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap #strengtheningBtn {
  position: absolute;
  bottom: -47px;
  right: 200px;
  width: 120px;
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap #strengtheningBtn.touch {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap #breakthroughBtn {
  position: absolute;
  bottom: -47px;
  right: 20px;
  width: 120px;
  -webkit-transform: scale(1.2);
      -ms-transform: scale(1.2);
          transform: scale(1.2);
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap #breakthroughBtn.touch {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap.btnHide {
  min-height: 489px;
  max-height: -webkit-calc(100% - 50px);
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap.btnHide .paramWrap {
  margin-top: 10px;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap.btnHide .cardSkillWrap {
  margin-top: 20px !important;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap.btnHide .cardDescription {
  padding: 18px 48px 18px 22px !important;
}

#memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap.btnHide #strengtheningBtn, #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap.btnHide #breakthroughBtn {
  display: none;
}

/* userTitle */
.userTitle .userTitleText, .userTitle_s .userTitleText, .userTitle_m .userTitleText {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.userTitle {
  width: 250px;
  height: 30px;
  position: relative;
}

.userTitle .userTitleText {
  width: 250px;
  height: 30px;
  line-height: 32px;
  color: #fff;
  text-align: center;
  font-size: 15px;
  padding: 0 25px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.userTitle .userTitleBg {
  width: 250px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.userTitle_s {
  width: 166px;
  height: 20px;
  position: relative;
}

.userTitle_s .userTitleText {
  width: 166px;
  height: 20px;
  line-height: 19px;
  color: #fff;
  text-align: center;
  font-size: 10px;
  padding: 0 11px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.userTitle_s .userTitleBg {
  width: 166px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.userTitle_s.frame:after {
  content: "";
  diplay: block;
  z-index: 1;
  width: 172px;
  height: 26px;
  position: absolute;
  top: -3px;
  left: -3px;
  background-color: #f8eee2;
  -webkit-clip-path: polygon(8px 0px, 164px 0px, 172px 9px, 172px 17px, 164px 26px, 8px 26px, 0px 17px, 0px 9px);
}

.userTitle_m {
  width: 190px;
  height: 23px;
  position: relative;
}

.userTitle_m .userTitleText {
  width: 190px;
  height: 23px;
  line-height: 22px;
  color: #fff;
  text-align: center;
  font-size: 12px;
  padding: 0 13px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.userTitle_m .userTitleBg {
  width: 190px;
  height: 23px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* globalMenu --------------------------------------------------------------- */
@-webkit-keyframes statusFadeout {
  0% {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-70px);
    opacity: 0;
  }
}

@-webkit-keyframes statusFadein {
  0% {
    -webkit-transform: translateY(-70px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}

#globalMenuContainer {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#globalMenuContainer.hide {
  display: none;
}

#globalMenu {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  /* 滑らかに動かすために */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  pointer-events: none;
  z-index: 1001;
}

#globalMenu #title {
  display: none;
  position: absolute;
  top: 10px;
  right: 100px;
}

#globalMenu .noneDisp {
  display: none !important;
  pointer-events: none !important;
}

#globalMenu .user, #globalMenu #globalBack, #globalMenu #globalBackBtn, #globalMenu .itemStatus {
  pointer-events: auto;
}

#globalMenu #globalBackBtn {
  width: 96px;
  height: 65px;
  background-image: url("/magica/resource/image_web/common/global/global_back.png");
  background-repeat: no-repeat;
  background-position: right 9px;
  background-size: 89px 43px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 101;
  -webkit-filter: brightness(100%);
}

#globalMenu #globalBackBtn span {
  width: 100%;
  height: 100%;
  display: block;
}

#globalMenu #globalBackBtn.off {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  pointer-events: none;
  -webkit-filter: brightness(80%);
}

#globalMenu .user {
  padding-left: 20px;
  position: absolute;
  top: 0;
  left: 0;
}

#globalMenu .user #status {
  width: 158px;
  position: absolute;
  top: 20px;
  left: 90px;
}

#globalMenu .user #status.myPageHide {
  -webkit-animation: statusFadeout .45s ease 0s 1 alternate;
  pointer-events: none;
  -webkit-animation-fill-mode: forwards;
}

#globalMenu .user #status.myPageShow {
  -webkit-animation: statusFadein .45s ease 0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#globalMenu .user #status #exp {
  width: 210px;
  height: 36px;
  margin: 0 0 7px;
  background-image: url("/magica/resource/image_web/common/global/global_expframe.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -8px;
  left: 16px;
  font-size: 12px;
}

#globalMenu .user #status #exp .userRank {
  height: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 11px;
  right: 130px;
}

#globalMenu .user #status #exp .userRank img {
  width: 12px;
  height: 14px;
  margin-left: -1px;
  display: block;
}

#globalMenu .user #status #exp .pointWrap {
  position: absolute;
  top: -8px;
  right: 18px;
  color: #ffe38f;
  font-size: 14px;
  text-shadow: -1px -1px 2px #8e2e24, 1px -1px 2px #8e2e24, -1px 1px 2px #8e2e24, 1px 1px 2px #8e2e24, -1px -1px #8e2e24, 1px -1px #8e2e24, -1px 1px #8e2e24, 1px 1px #8e2e24;
  z-index: 10;
}

#globalMenu .user #status #exp .gaugeWrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

#globalMenu .user #status #exp .gaugeWrap span {
  display: block;
}

#globalMenu .user #status #exp .gaugeWrap .gauge {
  width: 106px;
  height: 6px;
  position: absolute;
  top: 15px;
  left: 87px;
  z-index: 10;
}

#globalMenu .user #status #exp .gaugeWrap .gauge .gaugeInner {
  width: 0;
  height: 6px;
  background-color: #24c6c9;
  border-radius: 3px;
}

#globalMenu .user #status #money {
  width: 124px;
  height: 60px;
  background-image: url("/magica/resource/image_web/common/global/global_money_wrap.png");
  background-position: 0 12px;
  background-size: contain;
  position: absolute;
  top: -20px;
  left: 242px;
}

#globalMenu .user #status #money .pointWrap {
  top: 21px;
  right: 35px;
  line-height: 18px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8) !important;
}

#globalMenu .user #status #money .plusBtn {
  top: 0px;
  right: -25px;
}

#globalMenu .user #status #ap {
  width: 150px;
  height: 60px;
  background-image: url("/magica/resource/image_web/common/global/global_ap_wrap.png");
  background-position: 0 12px;
  background-size: contain;
  position: absolute;
  top: -20px;
  left: 390px;
}

#globalMenu .user #status #ap .pointWrap {
  top: 21px;
  right: 35px;
  line-height: 18px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8) !important;
}

#globalMenu .user #status #ap .pointWrap .ACP, #globalMenu .user #status #ap .pointWrap .MAX_ACP {
  color: #ffe38f;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8) !important;
}

#globalMenu .user #status #ap .pointWrap .ACP.limit, #globalMenu .user #status #ap .pointWrap .MAX_ACP.limit {
  color: cyan;
}

#globalMenu .user #status #ap .pointWrap .ACP.over, #globalMenu .user #status #ap .pointWrap .MAX_ACP.over {
  color: yellow;
}

#globalMenu .user #status #ap .plusBtn {
  top: 0;
  right: -25px;
}

#globalMenu .user #status #ap, #globalMenu .user #status #money {
  background-repeat: no-repeat;
  background-size: contain;
  font-size: 14px;
}

#globalMenu .user #status #ap .plusBtn, #globalMenu .user #status #money .plusBtn {
  width: 60px;
  height: 52px;
  background-image: url("/magica/resource/image_web/common/global/plus_btn.png");
  background-repeat: no-repeat;
  background-position: 3px 11px;
  background-size: 38px 38px;
  display: block;
  position: absolute;
  pointer-events: auto;
  z-index: 20;
}

#globalMenu .user #status #ap .pointWrap, #globalMenu .user #status #money .pointWrap {
  display: block;
  position: absolute;
  color: #ffe38f;
  text-align: right;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4), -1px -1px 1px rgba(0, 0, 0, 0.4), -1px 1px 1px rgba(0, 0, 0, 0.4), 1px -1px 1px rgba(0, 0, 0, 0.4);
}

#globalMenu #globalBack {
  position: absolute;
  top: 10px;
  left: 10px;
}

/* APPopup ----------------------------------------------- */
.apPopup #popupInfoDetailTitle {
  margin-top: 8px;
}

.apPopup .APPopWrap #apPointWrap {
  display: block;
  position: absolute;
  top: 75px;
  left: 392px;
}

.apPopup .APPopWrap #apPointWrap.timeShow {
  top: 61px;
}

.apPopup .APPopWrap .message {
  position: absolute;
  top: 67px;
  left: 567px;
  font-size: 20px;
}

.apPopup .APPopWrap .maxTime {
  width: 100%;
  text-align: center;
  display: block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 103px;
  left: 0px;
  font-size: 18px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.apPopup .APPopWrap .maxTime #apFullTime {
  width: 50px;
  display: inline-block;
}

.apPopup .APPopWrap .maxTime #apFullTime2 {
  min-width: 50px;
  display: inline-block;
}

.apPopup .APPopWrap .maxTime.none .timer {
  display: none;
}

.apPopup .APPopWrap .confirmText, .apPopup .APPopWrap .confirmSP {
  font-size: 18px;
  text-shadow: 0 0;
}

.apPopup .APPopWrap .confirmText {
  height: 60px;
}

.apPopup .APPopWrap .confirmSP {
  margin-bottom: 10px;
}

.apPopup .APPopWrap .confirmSP .pointFrame {
  width: 100px;
  font-size: 18px;
}

.apPopup .APPopWrap .confirmSP .rightWrap {
  width: 320px;
  padding-left: 20px;
  display: inline-block;
}

.apPopup .APPopWrap .confirmSP .rightWrap .arrow {
  position: relative;
  top: -2px;
}

.apPopup .APPopWrap .confirmSP .rightWrap .beforeWrap, .apPopup .APPopWrap .confirmSP .rightWrap .afterWrap {
  width: 130px;
  display: inline-block;
  position: relative;
  text-align: center;
}

.apPopup .APPopWrap .confirmSP .rightWrap .beforeWrap img {
  position: absolute;
  top: 0;
  left: -20px;
}

.apPopup .APPopWrap #confirmBtns {
  width: 430px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 20px;
  left: 92.5px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.apPopup .APPopWrap #useItemWrap {
  width: 816px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 134px;
  left: -webkit-calc(50% - 408px);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.apPopup .APPopWrap #useItemWrap .itemBtn {
  width: 256px;
  height: 354px;
  position: relative;
}

.apPopup .APPopWrap #useItemWrap .itemBtn .itemName {
  width: 100%;
  position: absolute;
  top: 145px;
  left: 0px;
  font-size: 20px;
  text-align: center;
}

.apPopup .APPopWrap #useItemWrap .itemBtn .useNum {
  width: 100%;
  position: absolute;
  top: 180px;
  left: 0;
  font-size: 18px;
  text-align: center;
}

.apPopup .APPopWrap #useItemWrap .itemBtn:before {
  width: 100px;
  height: 100px;
  background-size: 100% 100%;
  position: absolute;
  top: 26px;
  left: -webkit-calc(50% - 50px);
  content: "";
}

.apPopup .APPopWrap #useItemWrap .itemBtn.sp10:before {
  background-image: url("/magica/resource/image_web/item/main/cure_ap_10.png");
}

.apPopup .APPopWrap #useItemWrap .itemBtn.sp30:before {
  background-image: url("/magica/resource/image_web/item/main/cure_ap_30.png");
}

.apPopup .APPopWrap #useItemWrap .itemBtn.sp50:before {
  background-image: url("/magica/resource/image_web/item/main/cure_ap_50.png");
}

.apPopup .APPopWrap #useItemWrap .itemBtn.spmax:before {
  background-image: url("/magica/resource/image_web/item/main/cure_ap.png");
}

.apPopup .APPopWrap #useItemWrap .itemBtn.spstone:before {
  background-image: url("/magica/resource/image_web/item/main/money.png");
}

.apPopup .APPopWrap #useItemWrap .itemBtn .cureBtn {
  width: 132px;
  height: 49px;
  position: absolute;
  bottom: 18px;
  left: -webkit-calc(50% - 66px);
  font-size: 16px;
  line-height: 24px;
}

.apPopup .APPopWrap #useItemWrap .itemBtn .itemRemain {
  width: 100%;
  position: absolute;
  top: 220px;
  left: 0px;
  font-size: 18px;
  text-align: center;
  z-index: 1;
}

.apPopup .APPopWrap #useItemWrap .itemBtn .itemRemain .pointFrame {
  width: 138px;
  margin-bottom: 3px;
  font-size: 18px;
  line-height: 24px;
}

.apPopup .APPopWrap .ap {
  width: 163px;
  height: 38px;
  margin: 0 0 7px;
  background-image: url("/magica/resource/image_web/common/global/ap_base.png");
  background-repeat: no-repeat;
  display: block;
  position: relative;
  font-size: 12px;
}

.apPopup .APPopWrap .ap .pointWrap {
  position: absolute;
  top: 9px;
  right: 28px;
  color: #ffe38f;
  font-size: 15px;
  line-height: 20px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6) !important;
  z-index: 10;
}

.apPopup .APPopWrap .ap .pointWrap .popACP, .apPopup .APPopWrap .ap .pointWrap .popMAX_ACP {
  color: #ffe38f;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6) !important;
}

.apPopup .APPopWrap .ap .pointWrap .popACP.limit, .apPopup .APPopWrap .ap .pointWrap .popMAX_ACP.limit {
  color: cyan;
}

.apPopup .APPopWrap .ap .pointWrap .popACP.over, .apPopup .APPopWrap .ap .pointWrap .popMAX_ACP.over {
  color: yellow;
}

.apPopup .APPopWrap .ap .gaugeWrap {
  width: 150px;
  height: 18px;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

.apPopup .APPopWrap .ap .gaugeWrap span {
  display: block;
}

.apPopup .APPopWrap .ap .gaugeWrap .outline {
  z-index: 10;
}

.apPopup .APPopWrap .ap .gaugeWrap .gauge {
  width: 98px;
  height: 15px;
  display: none;
  position: absolute;
  top: 13px;
  right: -7px;
  z-index: 10;
}

.apPopup .APPopWrap .ap .gaugeWrap .gauge .gaugeInner {
  width: 0;
  height: 15px;
}

.apPopup.forMoney.popupContent.typeA .popupInner .popupTextArea {
  height: 200px;
}

.apPopup.forMoney .confirmSP .pointFrame {
  width: 380px;
}

.apPopup.forMoney .confirmSP .pointFrame .title {
  display: inline-block;
  margin: 0 30px 0 0;
}

.apPopup.forMoney .confirmSP .pointFrame .beforeWrap, .apPopup.forMoney .confirmSP .pointFrame .afterWrap {
  display: inline-block;
  width: 100px;
  color: #ffffff;
}

.apPopup.forMoney .confirmSP .pointFrame .beforeWrap .afterText, .apPopup.forMoney .confirmSP .pointFrame .afterWrap .afterText {
  color: yellow;
}

.apPopup.forMoney .confirmSP .pointFrame .beforeWrap .afterText.limit, .apPopup.forMoney .confirmSP .pointFrame .afterWrap .afterText.limit {
  color: cyan;
}

.apPopup.forMoney .confirmSP .pointFrame .arrow {
  color: yellow;
  display: inline-block;
  margin: 0;
}

.apPopup.forMoney .confirmSP .pointFrame .arrow.limit {
  color: cyan;
}

.apPopup.forMoney .confirmMoney {
  position: absolute;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 194px;
}

.apPopup.forMoney .confirmMoney .cautionText {
  position: absolute;
  width: 100%;
  top: -3px;
  left: 0px;
  text-align: center;
  font-size: 15px;
  line-height: 140%;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap {
  width: 690px;
  height: 26px;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 56px;
  line-height: 24px;
  text-align: left;
  z-index: 5;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .useItemIcon {
  width: 54px;
  height: 54px;
  position: absolute;
  bottom: -14px;
  z-index: 10;
  left: -27px;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .purchasedIcon {
  position: absolute;
  top: -8px;
  left: -40px;
  z-index: 10;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneA, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneB, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneC {
  position: absolute;
  font-size: 18px;
  top: 0px;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneA .inner, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneB .inner, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneC .inner {
  text-align: center;
  position: absolute;
  top: -1px;
  right: 4px;
  width: 192px;
  height: 26px;
  line-height: 25px;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneA .arrow, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneB .arrow, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneC .arrow {
  display: inline-block;
  margin: 0 12px;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneA .num, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneB .num, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneC .num {
  display: inline-block;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneA .num .remain, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneB .num .remain, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneC .num .remain {
  color: #ff4f9e;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneA .num .remain.same, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneB .num .remain.same, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneC .num .remain.same {
  color: #5b5b5b;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneA .num .remain.same .arrow, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneB .num .remain.same .arrow, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneC .num .remain.same .arrow {
  color: #5b5b5b;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneA .num .remain .arrow, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneB .num .remain .arrow, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneC .num .remain .arrow {
  color: #ff4f9e;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneA {
  width: 250px;
  padding-left: 24px;
  left: 0px;
  z-index: 5;
  text-align: left;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneA.pointFrame::before, .apPopup.forMoney .confirmMoney .moneyNumWrap .stoneA.pointFrame::after {
  display: none;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneA .inner {
  top: 0px;
  right: 10px;
  width: 172px;
  height: 24px;
  background-color: #ffffff;
  border: 1px solid #e4dbce;
  line-height: 22px;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneB {
  width: 240px;
  padding-left: 10px;
  color: #a47122;
  background: #e4dbce;
  z-index: 3;
  left: 236px;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneC {
  width: 220px;
  padding-left: 7px;
  color: #a47122;
  background: #e4dbce;
  z-index: 3;
  left: 478px;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneC:before {
  content: "";
  width: 12px;
  height: 24px;
  background: url("/magica/resource/image_web/common/frame/point_frame_lb_r.png") left top no-repeat;
  display: block;
  position: absolute;
  top: 0;
  right: -11px;
}

.apPopup.forMoney .confirmMoney .moneyNumWrap .stoneC .inner {
  right: -2px;
  width: 180px;
}

.apPopup.forMoney #confirmBtns {
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.paging {
  width: -webkit-calc(100% - 40px);
  margin: 0 20px 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0px;
  left: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.paging .prevBtn, .paging .nextBtn {
  width: 60px;
  margin: 0;
  position: absolute;
}

.paging .prevBtn.off, .paging .nextBtn.off {
  display: none;
}

.paging .prevBtn {
  background: rgba(255, 255, 255, 0.3) url("/magica/resource/image_web/common/icon/arrow_l.png") center center no-repeat;
  left: 0;
}

.paging .nextBtn {
  background: rgba(255, 255, 255, 0.3) url("/magica/resource/image_web/common/icon/arrow_r.png") center center no-repeat;
  right: 0;
}

.paging li {
  width: 74px;
  height: 36px;
  margin: 0 5px;
  background: rgba(255, 255, 255, 0.3);
  color: #b89160;
  line-height: 36px;
  text-align: center;
  border: 1px solid #ac8a50;
  -webkit-border-radius: 5px;
  text-shadow: 0 0 0;
}

.paging li.current {
  background: #dbc8ab;
  color: #ffffff;
  pointer-events: none;
}

@-webkit-keyframes result_message_slide_in {
  0% {
    -webkit-transform: translateX(600px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    opacity: 1;
  }
}

#charaComposeResult {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

#charaComposeResult .resultChara {
  width: 1024px;
  height: 768px;
  position: absolute;
  top: -webkit-calc(50% - 350px);
  right: -webkit-calc((100% - 1024px) / 2 - 245px);
  z-index: 1;
}

#charaComposeResult .resultMessageWrap {
  width: 458px;
  height: auto;
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2;
}

#charaComposeResult .resultMessageWrap #messageInner {
  opacity: 0;
}

#charaComposeResult .resultMessageWrap #messageInner.show {
  -webkit-animation: result_message_slide_in .2s ease-out .4s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#charaComposeResult .resultMessageWrap .rowBox {
  width: 458px;
  height: auto;
  position: relative;
}

#charaComposeResult .resultMessageWrap .rowBox .titleBox {
  width: 458px;
  height: 40px;
  padding-left: 42px;
  background: url("/magica/resource/image_web/common/chara/result_message_title.png");
  font-size: 22px;
  line-height: 40px;
  text-shadow: 2px 0 2px #5b3072, -2px 0 2px #5b3072, 0 2px 2px #5b3072, 0 -2px 2px #5b3072, 2px 2px 2px #5b3072, -2px 2px 2px #5b3072, 2px -2px 2px #5b3072, -2px -2px 2px #5b3072;
}

#charaComposeResult .resultMessageWrap .rowBox .textBox {
  width: 458px;
  max-width: 458px;
  min-height: 80px;
  padding: 10px 26px 10px 44px;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, black 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  color: #ffffff;
  font-size: 15px;
  text-align: left;
  word-break: break-all;
  text-shadow: 2px 0 2px #000000, -2px 0 2px #000000, 0 2px 2px #000000, 0 -2px 2px #000000, 2px 2px 2px #000000, -2px 2px 2px #000000, 2px -2px 2px #000000, -2px -2px 2px #000000;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#charaComposeResult .resultMessageWrap .rowBox .artIcon {
  width: 68px;
  height: 68px;
  position: absolute;
  top: -14px;
  left: -40px;
  z-index: 2;
}

#charaComposeResult .resultMessageWrap .rowBox .artIcon img {
  width: 68px;
  height: 68px;
}

#charaComposeResult .resultMessageWrap .rowBox.skillCompose .artIcon:before {
  width: 64px;
  height: 34px;
  background: url("/magica/resource/image_web/common/chara/icon_skill_compose.png") left top no-repeat;
  display: block;
  position: absolute;
  top: -17px;
  left: 2px;
  content: "";
}

#charaComposeResult .resultMessageWrap .rowBox.doppel, #charaComposeResult .resultMessageWrap .rowBox.episodeStory {
  margin-bottom: 18px;
}

#charaComposeResult .resultMessageWrap .rowBox.doppel .textBox, #charaComposeResult .resultMessageWrap .rowBox.episodeStory .textBox {
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* Safari */
  -ms-flex-line-pack: center;
      align-content: center;
}

#charaComposeResult .resultMessageWrap .rowBox.magia {
  margin-bottom: 18px;
}

#charaComposeResult .resultMessageWrap .rowBox.magia .titleBox:after {
  width: 84px;
  height: 20px;
  padding-left: 10px;
  background-color: #ffffff;
  display: block;
  position: absolute;
  top: 10px;
  right: 0;
  color: #5b3072;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  content: "マギア";
  border-radius: 10px 0 0 10px;
  text-shadow: none;
}

#charaComposeResult .resultMessageWrap .rowBox.exSkill {
  margin-bottom: 18px;
}

#charaComposeResult .resultMessageWrap .rowBox.exSkill .titleBox:after {
  width: 84px;
  height: 20px;
  padding-left: 10px;
  background-color: #ffffff;
  display: block;
  position: absolute;
  top: 10px;
  right: 0;
  color: #5b3072;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  content: "EXスキル";
  border-radius: 10px 0 0 10px;
  text-shadow: none;
}

#charaComposeResult .resultMessageWrap .rowBox.connect {
  margin-bottom: 14px;
}

#charaComposeResult .resultMessageWrap .rowBox.connect .titleBox:after {
  width: 84px;
  height: 20px;
  padding-left: 10px;
  background-color: #ffffff;
  display: block;
  position: absolute;
  top: 10px;
  right: 0;
  color: #5b3072;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  content: "コネクト";
  border-radius: 10px 0 0 10px;
  text-shadow: none;
}

#charaComposeResult .resultMessageWrap .rowBox.close {
  margin-bottom: 18px;
}

#charaComposeResult .resultMessageWrap .rowBox.close .textBox {
  min-height: auto;
  display: block;
}

#charaComposeResult .resultMessageWrap .rowBox.close .textBox span {
  display: block;
  color: #ffffff;
}

#charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(2), #charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(3), #charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(4), #charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(5), #charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(6) {
  padding-left: 32px;
  position: relative;
  line-height: 24px;
}

#charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(2):before, #charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(3):before, #charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(4):before, #charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(5):before, #charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(6):before {
  width: 24px;
  height: 24px;
  background: #f2457f;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  -webkit-border-radius: 3px;
  text-shadow: 0 0;
}

#charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(2) {
  margin-top: 8px;
}

#charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(2):before {
  content: "1";
}

#charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(3) {
  margin-top: 6px;
}

#charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(3):before {
  content: "2";
}

#charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(4) {
  margin-top: 6px;
}

#charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(4):before {
  content: "3";
}

#charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(5) {
  margin-top: 6px;
}

#charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(5):before {
  content: "4";
}

#charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(6) {
  margin-top: 6px;
}

#charaComposeResult .resultMessageWrap .rowBox.close .textBox span:nth-child(6):before {
  content: "5";
}

#charaComposeResult .resultMessageWrap .rowBox.close .titleBox:after {
  width: 150px;
  height: 20px;
  padding-left: 10px;
  background-color: #ffffff;
  display: block;
  position: absolute;
  top: 10px;
  right: 0;
  color: #5b3072;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  content: "条件クリアで解放";
  border-radius: 10px 0 0 10px;
  text-shadow: none;
}

#charaComposeResult .resultMessageWrap .rowBox.episodeMagia {
  margin-bottom: 18px;
}

#charaComposeResult .resultMessageWrap .rowBox.episodeMagia .textBox {
  min-height: 48px;
  font-size: 16px;
}

#charaComposeResult .resultMessageWrap .rowBox.episodeItem {
  margin-bottom: 14px;
}

#charaComposeResult .resultMessageWrap .rowBox.episodeItem .textBox {
  min-height: 48px;
}

#charaComposeResult .resultMessageWrap .rowBox.episodeItem .composeRewards {
  width: 128px;
  height: 70px;
  position: absolute;
  top: 8px;
  right: 42px;
  z-index: 3;
}

#charaComposeResult .resultMessageWrap .rowBox.episodeItem .composeRewards img {
  width: 70px;
  height: 70px;
}

#charaComposeResult .resultMessageWrap .rowBox.episodeItem .composeRewards .rewardNums {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 20px;
}

#charaComposeResult .resultInner {
  width: 452px;
  height: 558px;
  padding: 35px 50px;
  background: url("/magica/resource/image_web/common/chara/result_bg.png") left bottom no-repeat;
  position: absolute;
  bottom: -webkit-calc(50% - 279px);
  left: -webkit-calc((100% - 1024px) / 2 + 20px);
  font-size: 16px;
  z-index: 2;
}

#charaComposeResult .resultInner.level .statusWrap.level .after, #charaComposeResult .resultInner.level .statusWrap.HP .after, #charaComposeResult .resultInner.level .statusWrap.ATK .after, #charaComposeResult .resultInner.level .statusWrap.DEF .after, #charaComposeResult .resultInner.level .statusWrap.level .arrow, #charaComposeResult .resultInner.level .statusWrap.HP .arrow, #charaComposeResult .resultInner.level .statusWrap.ATK .arrow, #charaComposeResult .resultInner.level .statusWrap.DEF .arrow {
  display: block;
}

#charaComposeResult .resultInner.level .statusWrap .afterCurrentLv {
  color: #ff403b;
}

#charaComposeResult .resultInner.magiaLevel .statusWrap.magiaLv .after, #charaComposeResult .resultInner.magiaLevel .statusWrap.magiaLv .arrow {
  display: block !important;
}

#charaComposeResult .resultInner.episode .statusWrap.epLv .after, #charaComposeResult .resultInner.episode .statusWrap.epLv .arrow {
  display: block;
}

#charaComposeResult .resultInner.evolve .statusWrap.rank .afterRare {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

#charaComposeResult .resultInner.evolve .statusWrap.level .after, #charaComposeResult .resultInner.evolve .statusWrap.HP .after, #charaComposeResult .resultInner.evolve .statusWrap.ATK .after, #charaComposeResult .resultInner.evolve .statusWrap.DEF .after, #charaComposeResult .resultInner.evolve .statusWrap.rank .arrow, #charaComposeResult .resultInner.evolve .statusWrap.level .arrow, #charaComposeResult .resultInner.evolve .statusWrap.HP .arrow, #charaComposeResult .resultInner.evolve .statusWrap.ATK .arrow, #charaComposeResult .resultInner.evolve .statusWrap.DEF .arrow {
  display: block !important;
}

#charaComposeResult .resultInner.evolve .statusWrap .afterMaxLv {
  color: #ff403b;
}

#charaComposeResult .resultInner.limitBreak .statusWrap.revision .arrow, #charaComposeResult .resultInner.limitBreak .statusWrap.revision .after {
  display: block !important;
}

#charaComposeResult .resultInner.limitBreak .statusWrap.equip .after {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

#charaComposeResult .resultInner .upTextImage {
  width: 282px;
  height: 110px;
  position: absolute;
  top: 20px;
  left: -webkit-calc(50% - 141px);
}

#charaComposeResult .resultInner .upTextImage.level {
  background: url("/magica/resource/image_web/common/chara/result_text_level.png") left top no-repeat;
}

#charaComposeResult .resultInner .upTextImage.evolve {
  background: url("/magica/resource/image_web/common/chara/result_text_evolve.png") left top no-repeat;
}

#charaComposeResult .resultInner .upTextImage.magiaLevel {
  background: url("/magica/resource/image_web/common/chara/result_text_magia_level.png") left top no-repeat;
}

#charaComposeResult .resultInner .upTextImage.limitBreak {
  background: url("/magica/resource/image_web/common/chara/result_text_limit_break.png") left top no-repeat;
}

#charaComposeResult .resultInner .upTextImage.episode {
  background: url("/magica/resource/image_web/common/chara/result_text_episode_level.png") left top no-repeat;
}

#charaComposeResult .resultInner .inner {
  width: 100%;
  height: 544px;
  padding: 0 18px;
  position: absolute;
  bottom: 0;
  left: 0;
}

#charaComposeResult .resultInner .inner p.cardName {
  height: 44px;
  margin: 143px 0 9px;
  display: block;
  color: #ffffff;
  font-size: 20px;
  line-height: 44px;
  text-align: center;
  text-shadow: 0 0;
}

#charaComposeResult .resultInner .inner .statusWrap {
  margin: 0 0 9px;
}

#charaComposeResult .resultInner .inner .statusWrap.HP, #charaComposeResult .resultInner .inner .statusWrap.ATK {
  margin-bottom: 5px;
}

#charaComposeResult .resultInner .inner .statusWrap.revision, #charaComposeResult .resultInner .inner .statusWrap.magiaLv {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#charaComposeResult .resultInner .inner .statusWrap.revision .before, #charaComposeResult .resultInner .inner .statusWrap.magiaLv .before, #charaComposeResult .resultInner .inner .statusWrap.epLv .before {
  width: 26px;
}

#charaComposeResult .resultInner .inner .statusWrap.rank {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#charaComposeResult .resultInner .inner .statusWrap.rank .afterRare {
  display: none;
}

#charaComposeResult .resultInner .inner .statusWrap.rank .arrow {
  margin: 0 10px !important;
}

#charaComposeResult .resultInner .inner .statusWrap.equip .before {
  width: initial !important;
}

#charaComposeResult .resultInner .inner .statusWrap.equip .after {
  padding: 0 !important;
}

#charaComposeResult .resultInner .inner .statusWrap p {
  font-size: 18px;
  line-height: 28px;
}

#charaComposeResult .resultInner .inner .statusWrap .before {
  width: 106px;
  padding: 0 0 0 10px;
  font-size: 18px;
  line-height: 28px;
}

#charaComposeResult .resultInner .inner .statusWrap .after {
  padding: 0 0 0 10px;
  display: none;
  font-size: 18px;
  line-height: 28px;
}

#charaComposeResult .resultInner .inner .statusWrap .arrow {
  width: 18px;
  height: 24px;
  margin: 2px 0 0 5px;
  background: url("/magica/resource/image_web/common/chara/result_arrow.png") left top no-repeat;
  display: none;
}

#charaComposeResult .resultInner .inner .statusWrap .title {
  width: 142px;
  margin: 0 0 0 10px;
  background: #b28750;
  color: #ffffff;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  -webkit-border-radius: 5px 0 0 5px;
}

#charaComposeResult .resultInner .inner .statusWrap .rare span {
  width: 22px;
  height: 22px;
}

#charaComposeResult .resultInner .inner .statusWrap.equip .before {
  width: 150px;
}

#charaComposeResult .resultInner .inner .statusWrap.equip .icon {
  width: 26px;
  height: 26px;
  margin: 1px 2px 0 0;
  background: url("/magica/resource/image_web/common/chara/result_icon_equip.png") left top no-repeat;
  background-size: 26px 26px;
  display: block;
  position: relative;
  -webkit-filter: grayscale(100%);
}

#charaComposeResult .resultInner .inner .statusWrap.equip .icon.on {
  -webkit-filter: none;
}

#charaComposeResult .resultInner .inner .statusWrap.equip .icon.on:after {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 30px;
  color: #e52c66;
  font-size: 16px;
  line-height: 28px;
  content: "+1";
  text-shadow: 0 0;
}

#charaComposeResult.show {
  display: block;
}

#charaComposeResult.show .resultChara {
  -webkit-animation: compose_result_frame_in_chara .4s ease-out 0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#charaComposeResult.show .resultInner {
  -webkit-animation: compose_result_frame_in .4s ease-out 0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes compose_result_frame_in {
  0% {
    -webkit-transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

@-webkit-keyframes compose_result_frame_in_chara {
  0% {
    -webkit-transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

/* charaListWrap ------------------------------------------------------------ */
#charaListWrap {
  width: 1024px;
  height: 108px;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 10000;
}

#charaListWrap .touch {
  -webkit-filter: brightness(120%);
}

#charaListWrap #charaList {
  width: 1034px;
  height: 115px;
  background: url("/magica/resource/image_web/common/chara/bg_chara_list_a.png") left top no-repeat;
  position: absolute;
  top: 0;
  left: -10px;
  overflow: hidden;
}

#charaListWrap #charaList .charaListCaution {
  width: 350px;
  height: 30px;
  position: absolute;
  top: -webkit-calc(50% - 12px);
  left: -webkit-calc(50% - 175px);
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}

#charaListWrap #charaList .charaListCaution.hide {
  display: none;
}

#charaListWrap #charaList #charaListScrollWrap {
  width: 830px;
  height: 108px;
  padding: 18px 0 0;
  position: relative;
  left: 28px;
  overflow: hidden;
}

#charaListWrap #charaList .list {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

#charaListWrap #charaList .list .hide {
  display: none !important;
}

#charaListWrap #charaList .list .prm {
  display: none;
}

#charaListWrap #charaList .list li {
  width: 78px;
  height: 78px;
  margin: 0 5px 0 0;
  display: block;
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

#charaListWrap #charaList .list li.death:before {
  width: 74px;
  height: 74px;
  background: -webkit-radial-gradient(50% 50%, cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.8));
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  content: "";
  -webkit-border-radius: 39px;
  z-index: 8;
}

#charaListWrap #charaList .list li.death .att:before {
  width: 80px;
  height: 24px;
  background: url("/magica/resource/image_web/regularEvent/accomplish/common/deck/icon_chara_list_die.png") left top no-repeat;
  display: block;
  position: absolute;
  bottom: -5px;
  left: 0;
  content: "";
  z-index: 100;
}

#charaListWrap #charaList .list li .gauge {
  display: block;
  width: 60px;
  height: 16px;
  position: absolute;
  top: -16px;
  left: -webkit-calc(50% - 30px);
}

#charaListWrap #charaList .list li .gauge .hpGauge, #charaListWrap #charaList .list li .gauge .mpGauge {
  width: 60px;
  height: 8px;
  background: url("/magica/resource/image_web/event/accomplish/common/deck/bg_gauge.png") left top no-repeat;
  position: relative;
}

#charaListWrap #charaList .list li .gauge .hpGauge .gaugeInner01, #charaListWrap #charaList .list li .gauge .hpGauge .gaugeInner02, #charaListWrap #charaList .list li .gauge .mpGauge .gaugeInner01, #charaListWrap #charaList .list li .gauge .mpGauge .gaugeInner02 {
  width: 48px;
  height: 4px;
  position: absolute;
  top: 2px;
  left: 6px;
}

#charaListWrap #charaList .list li .gauge .hpGauge .gaugeInner01 .gaugeBg, #charaListWrap #charaList .list li .gauge .hpGauge .gaugeInner02 .gaugeBg, #charaListWrap #charaList .list li .gauge .mpGauge .gaugeInner01 .gaugeBg, #charaListWrap #charaList .list li .gauge .mpGauge .gaugeInner02 .gaugeBg {
  width: 0%;
  height: 100%;
}

#charaListWrap #charaList .list li .gauge .hpGauge .gaugeInner01 {
  z-index: 2;
}

#charaListWrap #charaList .list li .gauge .hpGauge .gaugeInner01 .gaugeBg {
  background: url("/magica/resource/image_web/event/accomplish/common/deck/gauge_hp.png") left bottom repeat-x;
}

#charaListWrap #charaList .list li .gauge .hpGauge .gaugeInner02 {
  z-index: 1;
}

#charaListWrap #charaList .list li .gauge .hpGauge .gaugeInner02 .gaugeBg {
  background: url("/magica/resource/image_web/event/accomplish/common/deck/gauge_hp_memoria.png") left bottom repeat-x;
}

#charaListWrap #charaList .list li .gauge .mpGauge .gaugeInner01 {
  z-index: 2;
}

#charaListWrap #charaList .list li .gauge .mpGauge .gaugeInner01 .gaugeBg {
  background: url("/magica/resource/image_web/event/accomplish/common/deck/gauge_doppel.png") left bottom repeat-x;
}

#charaListWrap #charaList .list li .gauge .mpGauge .gaugeInner02 {
  z-index: 1;
}

#charaListWrap #charaList .list li .gauge .mpGauge .gaugeInner02 .gaugeBg {
  background: url("/magica/resource/image_web/event/accomplish/common/deck/gauge_magia.png") left bottom repeat-x;
}

#charaListWrap #charaList .list li.eventChara .eventIcon {
  width: 28px;
  height: 28px;
  background: url("/magica/resource/image_web/page/formation_2/icon_training_charalist.png") left top no-repeat;
  display: block;
  position: absolute;
  top: 16px;
  right: 0;
  z-index: 100000;
}

#charaListWrap #charaList .list li.formationCurrent, #charaListWrap #charaList .list li.exterminationSet, #charaListWrap #charaList .list li.startedPatrol {
  display: block;
}

#charaListWrap #charaList .list li.formationCurrent .att:before, #charaListWrap #charaList .list li.exterminationSet .att:before, #charaListWrap #charaList .list li.startedPatrol .att:before {
  width: 80px;
  height: 24px;
  background: url("/magica/resource/image_web/page/formation/icon_chara_list_entry.png") left top no-repeat;
  display: block;
  position: absolute;
  bottom: -5px;
  left: 0;
  content: "";
  z-index: 100;
}

#charaListWrap #charaList .list li.exterminationSet .att:before {
  background: url("/magica/resource/image_web/page/formation/icon_chara_list_entry_2.png") left top no-repeat;
}

#charaListWrap #charaList .list li.exterminationSet.conquered {
  -webkit-filter: brightness(50%);
          filter: brightness(50%);
  pointer-events: none;
}

#charaListWrap #charaList .list li.startedPatrol .att:before {
  background: url("/magica/resource/image_web/page/formation/icon_chara_list_entry_3.png") left top no-repeat;
}

#charaListWrap #charaList .list li.formationRemove {
  display: block !important;
}

#charaListWrap #charaList .list li.formationRemove .att:before {
  width: 80px;
  height: 24px;
  background: url("/magica/resource/image_web/page/formation/icon_chara_list_quit.png") left top no-repeat;
  display: block;
  position: absolute;
  bottom: -5px;
  left: 0;
  content: "";
  z-index: 100;
}

#charaListWrap #charaList .list li.select:after {
  width: 53px;
  height: 40px;
  background: url("/magica/resource/image_web/common/chara/icon_select.png") left top no-repeat;
  display: block;
  position: absolute;
  top: -webkit-calc(50% - 20px);
  left: -webkit-calc(50% - 26px);
  content: "";
  z-index: 10;
}

#charaListWrap #charaList .list li.select:before {
  width: 74px;
  height: 74px;
  background: -webkit-radial-gradient(50% 50%, cover, rgba(255, 49, 74, 0.3), rgba(255, 49, 74, 0.6));
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  color: #ffffff;
  font-size: 20px;
  line-height: 74px;
  text-align: center;
  content: "";
  -webkit-border-radius: 39px;
  z-index: 8;
}

#charaListWrap #sortPopup, #charaListWrap #sortBtn {
  width: 166px;
  height: 45px;
  padding: 0 0 0 20px;
  background: url("/magica/resource/image_web/common/chara/btn_chara_list_a.png") left top no-repeat;
  display: block;
  position: absolute;
  font-size: 15px;
  line-height: 42px;
  text-align: left;
  z-index: 100;
}

#charaListWrap #sortBtn {
  padding: 1px 0 0 16px;
  top: 12px;
  right: -22px;
  font-size: 13px;
  line-height: 39px;
}

#charaListWrap .orderBtn {
  width: 52px;
  height: 54px;
  display: block;
  position: absolute;
  right: 0px;
  bottom: 61px;
  content: "";
  z-index: 1000;
}

#charaListWrap .orderBtn.asc {
  background: url("/magica/resource/image_web/common/filter/btn_chara_ascending_a.png") left top no-repeat;
}

#charaListWrap .orderBtn.desc {
  background: url("/magica/resource/image_web/common/filter/btn_chara_descending_b.png") left top no-repeat;
}

#charaListWrap #sortPopup {
  right: -22px;
  bottom: 6px;
}

#charaListWrap #sortPopup:after {
  width: 44px;
  height: 24px;
  background: url("/magica/resource/image_web/common/filter/icon_filter_off.png") left top no-repeat;
  display: block;
  position: absolute;
  top: 9px;
  right: 26px;
  content: "";
}

#charaListWrap #sortPopup.filterOn:after {
  background: url("/magica/resource/image_web/common/filter/icon_filter_on.png") left top no-repeat;
}

#charaListWrap.FIRE .userCharaIcon {
  display: none !important;
}

#charaListWrap.FIRE .userCharaIcon.FIRE {
  display: inline-block !important;
}

#charaListWrap.WATER .userCharaIcon {
  display: none !important;
}

#charaListWrap.WATER .userCharaIcon.WATER {
  display: inline-block !important;
}

#charaListWrap.TIMBER .userCharaIcon {
  display: none !important;
}

#charaListWrap.TIMBER .userCharaIcon.TIMBER {
  display: inline-block !important;
}

#charaListWrap.LIGHT .userCharaIcon {
  display: none !important;
}

#charaListWrap.LIGHT .userCharaIcon.LIGHT {
  display: inline-block !important;
}

#charaListWrap.DARK .userCharaIcon {
  display: none !important;
}

#charaListWrap.DARK .userCharaIcon.DARK {
  display: inline-block !important;
}

#charaListWrap.VOID .userCharaIcon {
  display: none !important;
}

#charaListWrap.VOID .userCharaIcon.DARK {
  display: inline-block !important;
}

/* myProfile ---------------------------------------------------------------- */
.userProfile .closeDefault {
  top: -18px !important;
  right: -18px !important;
}

.userProfile .popupInner {
  background-color: transparent !important;
  border-width: 0 !important;
  -webkit-border-image: none !important;
}

.userProfile .porfBgWrap {
  width: 901px;
  height: 538px;
  background-image: url("/magica/resource/image_web/page/profile/userProfile_window_M.png");
  background-repeat: repeat-x;
  position: absolute;
  top: 0;
  left: 43px;
  z-index: 1;
}

.userProfile .porfBgWrap:before, .userProfile .porfBgWrap:after {
  width: 64px;
  height: 538px;
  display: block;
  position: absolute;
  top: 0;
  content: "";
}

.userProfile .porfBgWrap:before {
  background: url("/magica/resource/image_web/page/profile/userProfile_window_L.png") right top no-repeat;
  left: -63px;
}

.userProfile .porfBgWrap:after {
  background: url("/magica/resource/image_web/page/profile/userProfile_window_R.png") left top no-repeat;
  right: -63px;
}

#myProfile {
  position: relative;
  z-index: 2;
}

#myProfile .profBtn {
  width: 80px;
  height: 42px;
  padding: 0 10px;
  background: url(/magica/resource/image_web/common/btn/btn_s_gold_02_c.png) center center no-repeat;
  background-size: 48px 24px;
  display: inline-block;
  position: relative;
  color: #a47122;
  font-size: 13px;
  line-height: 42px;
  text-align: center;
}

#myProfile .profBtn:before, #myProfile .profBtn:after {
  width: 6px;
  height: 42px;
  display: block;
  position: absolute;
  top: 0px;
  content: "";
}

#myProfile .profBtn:before {
  background: url("/magica/resource/image_web/common/btn/btn_s_gold_02_l.png") left center no-repeat;
  background-size: 6px 24px;
  left: 10px;
}

#myProfile .profBtn:after {
  background: url("/magica/resource/image_web/common/btn/btn_s_gold_02_r.png") left center no-repeat;
  background-size: 6px 24px;
  right: 10px;
}

#myProfile .touch {
  -webkit-transform: scale(0.95) !important;
}

#myProfile #debugArenaBtn {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000000000;
}

#myProfile .noneDisp {
  display: none !important;
}

#myProfile #followImageWrap {
  width: 970px;
  height: 532px;
  position: relative;
  top: 6px;
  left: 6px;
  overflow: hidden;
  -webkit-clip-path: polygon(10px 0px, 960px 0px, 970px 10px, 970px 517px, 960px 532px, 15px 532px, 0px 517px, 0px 10px);
  clip-path: polygon(10px 0px, 960px 0px, 970px 10px, 970px 517px, 960px 532px, 15px 532px, 0px 517px, 0px 10px);
}

#myProfile #followImageWrap .leaderChangeBtn {
  width: 118px;
  height: 50px;
  background-image: url("/magica/resource/image_web/page/profile/btn_chara_change.png");
  position: absolute;
  top: 322px;
  left: 318px;
  z-index: 10;
}

#myProfile #followImageWrap .bgChangeBtn {
  width: 118px;
  height: 50px;
  background-image: url("/magica/resource/image_web/page/profile/btn_background_change.png");
  position: absolute;
  top: 260px;
  left: 318px;
  z-index: 10;
}

#myProfile #followImageWrap .charaImage {
  position: absolute;
  top: -webkit-calc(50% - 314px);
  left: -296px;
}

#myProfile #followImageWrap .messageWrap {
  width: 410px;
  height: auto;
  padding: 50px 0px 19px;
  background: url("/magica/resource/image_web/page/profile/profile_message_t.png") 0px 1px, url("/magica/resource/image_web/page/profile/profile_message_b.png") left bottom;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  bottom: 15px;
  left: 26px;
}

#myProfile #followImageWrap .messageWrap .messageInner {
  width: 410px;
  max-height: 97px;
  padding: 0 20px 30px;
  background-image: url("/magica/resource/image_web/page/profile/profile_message_c.png");
  background-repeat: repeat-y;
  display: block;
  position: relative;
  overflow: hidden;
  color: #555555;
  font-size: 18px;
  text-align: left;
  word-wrap: break-word;
  text-shadow: 0 0;
}

#myProfile #followImageWrap .miniBtn {
  position: absolute;
  bottom: 14px;
  left: 357px;
}

#myProfile #followerParamDetail {
  width: 486px;
  height: 476px;
  position: absolute;
  bottom: 8px;
  right: 42px;
  font-size: 16px;
  text-align: left;
}

#myProfile #followerParamDetail #myProfStone {
  width: 100px;
  display: inline-block;
  text-align: right;
  position: absolute;
  right: 204px;
  top: -36px;
}

#myProfile #followerParamDetail #myProfStone .pointWrap {
  width: 100px;
  padding-right: 15px;
  display: inline-block;
  line-height: 24px;
  text-align: right;
}

#myProfile #followerParamDetail #myProfStone .plusBtn {
  display: none;
}

#myProfile #followerParamDetail #myProfStone:before {
  width: 30px;
  height: 30px;
  background-image: url("/magica/resource/image_web/common/icon/icon_money_f.png");
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  position: absolute;
  top: -3px;
  left: -14px;
  content: "";
  z-index: 2;
}

#myProfile #followerParamDetail #myProfHasRiche {
  width: 175px;
  display: inline-block;
  position: absolute;
  right: -4px;
  top: -36px;
  text-align: right;
}

#myProfile #followerParamDetail #myProfHasRiche .pointWrap {
  width: 175px;
  padding-right: 15px;
  display: inline-block;
  line-height: 24px;
  text-align: right;
}

#myProfile #followerParamDetail #myProfHasRiche:before {
  width: 30px;
  height: 30px;
  background-image: url("/magica/resource/image_web/common/icon/icon_cursechip_f.png");
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  position: absolute;
  top: -3px;
  left: -14px;
  content: "";
  z-index: 2;
}

#myProfile #followerParamDetail .detailMainWrap {
  position: absolute;
  top: 0;
  right: 0;
}

#myProfile #followerParamDetail .detailMainWrap .userTitle_m {
  position: absolute;
  top: 6px;
  right: 12px;
}

#myProfile #followerParamDetail .detailMainWrap .titleChangeBtn {
  position: absolute;
  top: 24px;
  right: 2px;
}

#myProfile #followerParamDetail .detailMainWrap .userName {
  display: block;
  position: absolute;
  top: 0;
  left: 28px;
  font-size: 22px;
  line-height: 50px;
  color: #ffffff;
  text-shadow: -1px -1px 2px #ff4f92, 1px -1px 2px #ff4f92, -1px 1px 2px #ff4f92, 1px 1px 2px #ff4f92, -1px -1px 2px #ff4f92, 1px -1px 2px #ff4f92, -1px 1px 2px #ff4f92, 1px 1px 2px #ff4f92;
}

#myProfile #followerParamDetail .detailMainWrap .userLevel {
  font-size: 20px;
  height: 26px;
  padding-left: 92px;
  display: block;
  position: absolute;
  top: 52px;
  left: 14px;
  width: 462px;
  height: 34px;
  border-bottom: 1px solid #eddbb8;
  color: #444444;
  line-height: 34px;
  text-shadow: none;
}

#myProfile #followerParamDetail .detailMainWrap .userLevel:before {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 34px;
  color: #b28750;
  font-size: 16px;
  content: "Rank";
}

#myProfile #followerParamDetail .detailMainWrap .reachingAccomplish {
  display: block;
  position: absolute;
  top: 52px;
  left: 220px;
  width: 250px;
  height: 34px;
  padding-left: 84px;
  color: #444;
  font-size: 18px;
  border-bottom: 1px solid #eddbb8;
  line-height: 36px;
  text-shadow: none;
}

#myProfile #followerParamDetail .detailMainWrap .reachingAccomplish:before {
  position: absolute;
  bottom: 4px;
  left: 0;
  content: "";
  background: url("/magica/resource/image_web/page/mypage/icon_battlemuseum_01.png") no-repeat;
  width: 24px;
  height: 24px;
}

#myProfile #followerParamDetail .detailMainWrap .reachingAccomplish:after {
  position: absolute;
  bottom: -1px;
  left: 25px;
  line-height: 34px;
  color: #b28750;
  font-size: 16px;
  content: "Stage";
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap1, #myProfile #followerParamDetail .detailMainWrap .detailWrap2, #myProfile #followerParamDetail .detailMainWrap .totalForcesWrap, #myProfile #followerParamDetail .detailMainWrap .helperWrap {
  width: 482px;
  position: relative;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap1 h2, #myProfile #followerParamDetail .detailMainWrap .detailWrap2 h2, #myProfile #followerParamDetail .detailMainWrap .totalForcesWrap h2, #myProfile #followerParamDetail .detailMainWrap .helperWrap h2 {
  background: url("/magica/resource/image_web/page/profile/bg_title_m.png") left top no-repeat;
  border-radius: 0;
  width: 486px;
  background-size: 482px 24px;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap1 {
  height: 86px;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap1 h1 {
  width: 478px;
  height: 50px;
  background: #000000;
  background: url("/magica/resource/image_web/page/profile/bg_title_l.png") left top no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 50px;
  color: #ffffff;
  font-size: 22px;
  padding-left: 28px;
  text-shadow: -1px -1px 2px #ff4f92, 1px -1px 2px #ff4f92, -1px 1px 2px #ff4f92, 1px 1px 2px #ff4f92, -1px -1px 2px #ff4f92, 1px -1px 2px #ff4f92, -1px 1px 2px #ff4f92, 1px 1px 2px #ff4f92;
}

#myProfile #followerParamDetail .detailMainWrap .totalForcesWrap {
  height: 70px;
}

#myProfile #followerParamDetail .detailMainWrap .totalForcesWrap #totalForces {
  font-size: 20px;
  height: 26px;
  padding-left: 92px;
  background-repeat: no-repeat;
  background-position: 0 0;
  display: block;
  position: absolute;
  bottom: 35px;
  left: 14px;
  color: #444444;
  line-height: 24px;
  text-shadow: none;
}

#myProfile #followerParamDetail .detailMainWrap .totalForcesWrap #totalForces:before {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #b28750;
  font-size: 16px;
  content: "総合戦力値";
}

#myProfile #followerParamDetail .detailMainWrap .totalForcesWrap .totalForcesHelpBtn {
  position: absolute;
  bottom: 35px;
  left: 254px;
  width: 30px;
  height: 30px;
  background: url("/magica/resource/image_web/page/profile/btn_help_s.png") left top no-repeat;
}

#myProfile #followerParamDetail .detailMainWrap .totalForcesWrap .totalForcesRanking {
  position: absolute;
  bottom: 35px;
  right: 12px;
  margin: 0;
}

#myProfile #followerParamDetail .detailMainWrap .totalForcesWrap .totalForcesRanking dt {
  width: 63px;
}

#myProfile #followerParamDetail .detailMainWrap .totalForcesWrap .totalForcesRanking dd {
  width: 117px;
  line-height: 22px;
  text-align: right;
  padding-right: 20px;
}

#myProfile #followerParamDetail .detailMainWrap .totalForcesWrap #totalForcesRequire {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: 14px;
}

#myProfile #followerParamDetail .detailMainWrap .friendWrap {
  height: 59px;
  position: relative;
  width: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .friendWrap:before {
  content: "";
  position: absolute;
  top: 0;
  right: 6px;
  width: 470px;
  height: 44px;
  background: #eddbb8;
  border-radius: 5px;
}

#myProfile #followerParamDetail .detailMainWrap .friendWrap .userFollow, #myProfile #followerParamDetail .detailMainWrap .friendWrap .userFollower {
  color: #555555;
  text-shadow: 0 0;
}

#myProfile #followerParamDetail .detailMainWrap .friendWrap .userFollow {
  width: 90px;
  height: 28px;
  padding-left: 32px;
  background-image: url("/magica/resource/image_web/page/follow/iconFollow.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  display: block;
  position: absolute;
  top: 8px;
  left: 20px;
  line-height: 26px;
}

#myProfile #followerParamDetail .detailMainWrap .friendWrap .userFollower {
  width: 90px;
  height: 28px;
  padding-left: 32px;
  background-image: url("/magica/resource/image_web/page/follow/iconRecived.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  display: block;
  position: absolute;
  top: 8px;
  left: 110px;
  line-height: 26px;
}

#myProfile #followerParamDetail .detailMainWrap .friendWrap .lastLogin {
  font-size: 16px;
  height: 46px;
  text-align: right;
  display: block;
  position: absolute;
  top: 0px;
  right: 16px;
  color: #515151;
  width: 100px;
  line-height: 46px;
}

#myProfile #followerParamDetail .detailMainWrap .friendWrap .lastLogin:before {
  position: absolute;
  bottom: 0;
  right: 85px;
  width: 200px;
  color: #b28750;
  font-size: 14px;
  content: "最終ログイン";
}

#myProfile #followerParamDetail .detailMainWrap .friendWrap .myprofUserId {
  position: absolute;
  top: 10px;
  left: 200px;
}

#myProfile #followerParamDetail .detailMainWrap .friendWrap .myprofUserId dt {
  width: 100px;
  font-size: 14px;
}

#myProfile #followerParamDetail .detailMainWrap .friendWrap .myprofUserId dd {
  width: 130px;
  background: #fff;
  padding-left: 5px;
}

#myProfile #followerParamDetail .detailMainWrap .friendWrap .userIdCopyBtn {
  position: absolute;
  top: 1px;
  right: 8px;
}

#myProfile #followerParamDetail .detailMainWrap .wrapTitle {
  padding-bottom: 4px;
  display: inline-block;
  color: #ffffff;
  text-shadow: 2px 0 2px #b28750, -2px 0 2px #b28750, 0 2px 2px #b28750, 0 -2px 2px #b28750, 2px 2px 2px #b28750, -2px 2px 2px #b28750, 2px -2px 2px #b28750, -2px -2px 2px #b28750;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 {
  height: 126px;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .arenaHelpBtn {
  position: absolute;
  top: -4px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: url("/magica/resource/image_web/page/profile/btn_help_s.png") left top no-repeat;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .arenaFreeTitle {
  position: absolute;
  left: 21px;
  top: 31px;
  font-size: 14px;
  color: #ff4f92;
  text-shadow: none;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .arenaRankingTitle {
  position: absolute;
  left: 309px;
  top: 31px;
  font-size: 14px;
  color: #ff4f92;
  text-shadow: none;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .arenaSettingPopupBtn {
  position: absolute;
  right: 50px;
  top: -9px;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap {
  height: 50px;
  line-height: 50px;
  text-align: center;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.freeRank {
  background: url("/magica/resource/image_web/page/arena/infinite_diamond.png") center center;
  background-repeat: no-repeat;
  background-size: 50px 50px;
  position: absolute;
  left: 221px;
  bottom: 18px;
  color: #ffffff;
  font-size: 16px;
  text-shadow: 3px 0px 3px #0e91ce, -3px 0px 3px #0e91ce, 0px 3px 3px #0e91ce, 0px -3px 3px #0e91ce, 3px 3px 3px #0e91ce, -3px 3px 3px #0e91ce, 3px -3px 3px #0e91ce, -3px -3px 3px #0e91ce;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking, #myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.rankMatch {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_null.png");
  background-size: 100%;
  position: absolute;
  bottom: 2px;
  right: 8px;
  display: block;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking.onGoing, #myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.rankMatch.onGoing {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_ongoing.png");
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking {
  width: 130px;
  height: 130px;
  width: 99px;
  height: 99px;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking.idle {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_idle.png") left top no-repeat;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking.rankS {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_s_0.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking.rankS1 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_s_1.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking.rankS2 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_s_2.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking.rankS3 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_s_3.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking.rankA {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_a_0.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking.rankA1 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_a_1.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking.rankA2 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_a_2.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking.rankA3 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_a_3.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking.rankB {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_b_0.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking.rankB1 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_b_1.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking.rankB2 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_b_2.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.ranking.rankB3 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_b_3.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.rankMatch {
  width: 130px;
  height: 130px;
  width: 99px;
  height: 99px;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.rankMatch.rankS {
  background: url("/magica/resource/image_web/event/arenaRankMatch/common/emblem/emblem_s.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.rankMatch.rankA {
  background: url("/magica/resource/image_web/event/arenaRankMatch/common/emblem/emblem_a.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.rankMatch.rankB {
  background: url("/magica/resource/image_web/event/arenaRankMatch/common/emblem/emblem_b.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking {
  width: 130px;
  height: 130px;
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_null.png") left top no-repeat;
  width: 99px;
  height: 99px;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.idle {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_idle.png") left top no-repeat;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankS {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_s_0.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankS1 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_s_1.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankS2 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_s_2.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankS3 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_s_3.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankA {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_a_0.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankA1 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_a_1.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankA2 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_a_2.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankA3 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_a_3.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankB {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_b_0.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankB1 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_b_1.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankB2 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_b_2.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankB3 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_b_3.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankC {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_c_0.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankC1 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_c_1.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankC2 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_c_2.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankC3 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_c_3.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankD {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_d_0.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankD1 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_d_1.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankD2 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_d_2.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.ranking.rankD3 {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_d_3.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.rankMatch {
  width: 130px;
  height: 130px;
  background: url("/magica/resource/image_web/event/arenaRankMatch/common/emblem/emblem_null.png") left top no-repeat;
  width: 99px;
  height: 99px;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.rankMatch.rankS {
  background: url("/magica/resource/image_web/event/arenaRankMatch/common/emblem/emblem_s.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.rankMatch.rankA {
  background: url("/magica/resource/image_web/event/arenaRankMatch/common/emblem/emblem_a.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.rankMatch.rankB {
  background: url("/magica/resource/image_web/event/arenaRankMatch/common/emblem/emblem_b.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.rankMatch.rankC {
  background: url("/magica/resource/image_web/event/arenaRankMatch/common/emblem/emblem_c.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.rankMatch.rankD {
  background: url("/magica/resource/image_web/event/arenaRankMatch/common/emblem/emblem_d.png") left top no-repeat;
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .markWrap.myself.onGoing {
  background: url("/magica/resource/image_web/event/arenaranking/common/emblem/emblem_ongoing.png");
  background-size: 100%;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .arenaParams {
  position: absolute;
  left: 21px;
  bottom: 12px;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .arenaParams .common_dl {
  width: 188px;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .arenaParams .common_dl .colName {
  width: 92px;
  display: block;
  font-size: 14px;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2 .arenaParams .common_dl .colValue {
  width: 94px;
  text-align: right;
  display: block;
}

#myProfile #followerParamDetail .detailMainWrap .detailWrap2.none {
  display: none;
}

#myProfile #followerParamDetail .detailMainWrap .smallCol {
  font-size: 14px;
}

#myProfile #followerParamDetail .detailMainWrap .rowWrap {
  margin: 0px 0px 6px;
  position: relative;
  font-size: 16px;
}

#myProfile #followerParamDetail .detailMainWrap .rowWrap.userItems {
  width: 168px;
  height: 28px;
  padding: 4px 0;
  position: absolute;
  top: -38px;
  right: 8px;
}

#myProfile #followerParamDetail .detailMainWrap .rowWrap .colName {
  width: 112px;
  height: 24px;
  padding: 0 5px;
  line-height: 24px;
}

#myProfile #followerParamDetail .detailMainWrap .rowWrap .colValue {
  width: 152px;
  height: 24px;
  padding: 0 10px;
  line-height: 24px;
}

#myProfile #followerParamDetail .helperWrap {
  width: 482px;
  height: 136px;
  padding: 10px 20px;
  position: absolute;
  right: 0;
  bottom: 0;
}

#myProfile #followerParamDetail .helperWrap .wrapTitle {
  padding-bottom: 4px;
  display: inline-block;
  color: #ffffff;
  text-shadow: 2px 0 2px #b28750, -2px 0 2px #b28750, 0 2px 2px #b28750, 0 -2px 2px #b28750, 2px 2px 2px #b28750, -2px 2px 2px #b28750, 2px -2px 2px #b28750, -2px -2px 2px #b28750;
}

#myProfile #followerParamDetail .helperWrap .helperList {
  width: 449px;
  height: 68px;
  background: url("/magica/resource/image_web/page/profile/profile_support.png");
  background-repeat: none;
  display: block;
  position: absolute;
  top: 32px;
  left: 17px;
}

#myProfile #followerParamDetail .helperWrap .helperList li {
  width: 68px;
  height: 68px;
  position: absolute;
  top: 0;
}

#myProfile #followerParamDetail .helperWrap .helperList li img {
  max-width: 66px;
  max-height: 66px;
}

#myProfile #followerParamDetail .helperWrap .helperList li span {
  max-width: 68px;
  max-height: 68px;
  background-size: 68px 68px;
}

#myProfile #followerParamDetail .helperWrap .helperList li .lv {
  top: -6px;
  right: -2px;
  font-size: 16px;
}

#myProfile #followerParamDetail .helperWrap .helperList li .lv:before {
  font-size: 14px;
}

#myProfile #followerParamDetail .helperWrap .helperList .ALL {
  left: 0;
}

#myProfile #followerParamDetail .helperWrap .helperList .FIRE {
  left: 76px;
}

#myProfile #followerParamDetail .helperWrap .helperList .WATER {
  left: 152px;
}

#myProfile #followerParamDetail .helperWrap .helperList .TIMBER {
  left: 228px;
}

#myProfile #followerParamDetail .helperWrap .helperList .LIGHT {
  left: 304px;
}

#myProfile #followerParamDetail .helperWrap .helperList .DARK {
  left: 380px;
}

#myProfile #followerParamDetail .helperWrap .helpBtnWrap {
  position: absolute;
  bottom: -2px;
  right: 2px;
}

.followerPop #followImageWrap .messageInner {
  padding: 0px 20px 0px !important;
}

.followerPop #followerParamDetail {
  height: 490px !important;
}

.followerPop .rowWrap {
  z-index: 1;
}

.followerPop .noneDisp {
  display: none !important;
}

.followerPop .detailWrap1 .detailWrap1Bg {
  width: 462px;
  height: 48px;
  background-color: #ebe5df;
  position: absolute;
  top: 135px;
  left: 10px;
  font-size: 14px;
  padding-left: 14px;
  border-radius: 5px;
  z-index: 1;
  font-size: 14px;
  padding-left: 14px;
  line-height: 48px;
}

.followerPop .friendWrap {
  height: 125px !important;
}

.followerPop .friendWrap:before {
  height: 110px !important;
}

.followerPop .friendWrap .detailUtilPanel {
  display: block;
  position: absolute;
  left: 14px;
  top: 48px;
  width: 454px;
  height: 54px;
  z-index: 2;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
}

.followerPop .friendWrap .detailUtilPanel .detailWrap1Bg {
  position: absolute;
  left: 13px;
  line-height: 54px;
  font-size: 14px;
  color: #777777;
}

.followerPop .friendWrap .detailUtilPanel .followerBtn {
  position: absolute;
  right: 11px;
  top: 11px;
  -webkit-text-decoration: 11px;
          text-decoration: 11px;
  width: 103px;
  height: 35px;
  display: inline-block;
  color: #a47122;
  font-size: 16px;
  line-height: 35px !important;
  text-align: center;
  vertical-align: middle;
}

.followerPop .friendWrap .detailUtilPanel .followerBtn.unBlock, .followerPop .friendWrap .detailUtilPanel .followerBtn.disFollow {
  font-size: 12px;
}

.followerPop .detailWrap2 {
  height: 141px !important;
}

.followerPop .detailWrap2 .arenaFreeTitle {
  top: 38px !important;
}

.followerPop .detailWrap2 .arenaRankingTitle {
  top: 38px !important;
}

.followerPop .arenaRank {
  left: -18px;
}

.followerPop .arenaRank .rankingIcon {
  top: 0 !important;
}

.followerPop .arenaRank .nowRanking {
  top: 86px !important;
}

.followerPop .userLevel {
  border-bottom: none !important;
}

.followerPop .userFollow {
  top: 10px !important;
  left: 18px !important;
}

.followerPop .userFollower {
  top: 10px !important;
  left: 108px !important;
}

.followerPop #followIcons {
  width: 110px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 14px;
  left: 100px;
  z-index: 2;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.followerPop #followIcons .followIcon, .followerPop #followIcons .followerIcon, .followerPop #followIcons .blockIcon {
  width: 28px;
  height: 28px;
  display: block;
}

.followerPop #followIcons .followIcon {
  background-image: url("/magica/resource/image_web/page/follow/iconFollow.png");
}

.followerPop #followIcons .followerIcon {
  background-image: url("/magica/resource/image_web/page/follow/iconRecived.png");
}

.followerPop #followIcons .blockIcon {
  background-image: url("/magica/resource/image_web/page/follow/iconBlockActive.png");
}

.profileChange #commentInput {
  width: 500px;
  height: 120px;
  margin-top: 10px;
  padding: 10px 15px;
  display: inline-block;
  font-size: 20px;
  text-align: left;
  word-wrap: break-word;
  border: 2px solid #c6a882;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  text-shadow: 0 0;
}

.profileChange .textCount, .profileChange #textCount {
  font-size: 18px;
  text-shadow: 0 0;
}

.profileChange .commentNotis {
  font-size: 20px;
  text-shadow: 0 0;
}

.profileChange .textCount {
  width: 200px;
  position: absolute;
  top: 190px;
  right: 30px;
  text-align: right;
}

.profileChange .commentCancel {
  display: inline-block;
}

.profileChange #commentDecide {
  margin: 15px auto 0;
}

.titleChangePop.popupContent .popupInner .popupTextArea {
  width: 100%;
  height: 460px;
  display: block;
  position: relative;
}

.titleChangePop #titleListWrap {
  width: 650px;
  height: 427px;
  position: absolute;
  top: 20px;
  left: 12px;
}

.titleChangePop #titleListWrap #titleListScrollOuter {
  width: 642px;
  height: 419px;
  overflow: hidden;
  position: absolute;
  top: 4px;
  left: 4px;
}

.titleChangePop #titleListWrap .titleListWrapInner {
  width: 100%;
  height: auto;
  min-height: 100%;
  position: relative;
  padding: 20px 0px 20px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}

.titleChangePop #titleListWrap .userTitle_m {
  margin: 0px 8px 34px;
}

.titleChangePop #titleListWrap .userTitle_m.selected:before {
  content: "";
  border: 3px solid #ff4f9e;
  border-radius: 15px;
  width: 203px;
  height: 39px;
  position: absolute;
  top: -8px;
  left: -7px;
}

.titleChangePop #nowTitleWrap {
  width: 256px;
  height: 117px;
  position: absolute;
  right: 12px;
  top: 20px;
}

.titleChangePop #nowTitleWrap p {
  padding-top: 5px;
  texta-lign: center;
  font-size: 16px;
}

.titleChangePop #nowTitleWrap .nowTitleWrap {
  width: 100%;
  height: 85px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.titleChangePop .arrow {
  width: 16px;
  height: 20px;
  position: absolute;
  top: 148px;
  right: 126px;
  -webkit-transform: rotate(90deg);
  background: url("/magica/resource/image_web/common/icon/ap_pop_arrow.png") left top no-repeat;
}

.titleChangePop #afterTitleWrap {
  width: 256px;
  height: 179px;
  position: absolute;
  right: 12px;
  top: 179px;
  margin: 0;
}

.titleChangePop #afterTitleWrap p {
  padding-top: 5px;
  texta-lign: center;
  font-size: 16px;
}

.titleChangePop #afterTitleWrap .titleInfo {
  width: 225px;
  height: 129px;
  position: absolute;
  left: 15px;
  bottom: 9px;
  background-color: #e1d3bd;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.titleChangePop #afterTitleWrap .titleInfo .userTitle_s {
  margin-top: 12px;
}

.titleChangePop #afterTitleWrap .titleInfo #targetTitleDesc {
  width: 100%;
  height: 44px;
  margin-top: 6px;
  padding: 0px 15px;
  overflow: hidden;
  font-size: 12px;
}

.titleChangePop #titleChangeDecide {
  position: absolute;
  bottom: 8px;
  right: 42px;
}

.titleChangePop #titleChangeDecide.off {
  pointer-events: none;
}

/* etcPopup -------------------------------------------- */
.etcPop .etcPopInner {
  width: 564px;
  height: 370px;
  position: absolute;
  top: -webkit-calc(50% - 174px);
  left: -webkit-calc(50% - 282px);
}

.etcPop .etcPopInner .popupCloseBtn {
  width: 52px;
  height: 51px;
  background: url(/magica/resource/image_web/common/popup/popup_close.png) left top no-repeat;
  display: inline-block;
  position: absolute;
  top: -20px;
  right: -20px;
  z-index: 20;
}

.etcPop .popupTitle {
  width: 325px !important;
  margin: 14px auto 0;
  background: url(/magica/resource/image_web/common/popup/bg_popup_title_c.png) left top repeat;
  position: relative;
  color: #ffffff;
  font-size: 22px;
  line-height: 43px;
  text-align: center;
}

.etcPop .popupTitle:before, .etcPop .popupTitle:after {
  width: 40px;
  height: 43px;
  position: absolute;
  top: 0;
  content: "";
}

.etcPop .popupTitle:before {
  background: url("/magica/resource/image_web/common/popup/bg_popup_title_l.png") left top repeat;
  left: -38px;
}

.etcPop .popupTitle:after {
  background: url("/magica/resource/image_web/common/popup/bg_popup_title_r.png") left top repeat;
  right: -38px;
}

.etcPop .etcPopWrap {
  width: 500px;
  margin: 0 auto;
  padding-top: 25px;
  position: relative;
}

.etcPop .etcPopWrap .collectionBtn, .etcPop .etcPopWrap .itemBtn, .etcPop .etcPopWrap .friendBtn, .etcPop .etcPopWrap .etcHelpBtn, .etcPop .etcPopWrap .configBtn, .etcPop .etcPopWrap .eventRecordBtn {
  width: 117px;
  height: 113px;
  display: block;
  position: absolute;
}

.etcPop .etcPopWrap .collectionBtn, .etcPop .etcPopWrap .eventRecordBtn {
  left: 37px;
}

.etcPop .etcPopWrap .itemBtn, .etcPop .etcPopWrap .etcHelpBtn {
  left: 193px;
}

.etcPop .etcPopWrap .configBtn, .etcPop .etcPopWrap .friendBtn {
  left: 349px;
}

.etcPop .etcPopWrap .collectionBtn, .etcPop .etcPopWrap .itemBtn, .etcPop .etcPopWrap .friendBtn {
  top: 26px;
}

.etcPop .etcPopWrap .configBtn, .etcPop .etcPopWrap .etcHelpBtn, .etcPop .etcPopWrap .eventRecordBtn {
  top: 151px;
}

.etcPop .etcPopWrap .collectionBtn {
  background-image: url("/magica/resource/image_web/page/mypage/otherpop_collection.png");
}

.etcPop .etcPopWrap .itemBtn {
  background-image: url("/magica/resource/image_web/page/mypage/otherpop_item.png");
}

.etcPop .etcPopWrap .friendBtn {
  background-image: url("/magica/resource/image_web/page/mypage/otherpop_friend.png");
}

.etcPop .etcPopWrap .friendBtn.limited {
  pointer-events: none;
}

.etcPop .etcPopWrap .friendBtn.limited:after {
  width: 90px;
  height: 40px;
  background: url("/magica/resource/image_web/common/closed/condition_01.png");
  display: block;
  position: absolute;
  top: -10px;
  right: -6px;
  content: "";
}

.etcPop .etcPopWrap .eventRecordBtn {
  background-image: url("/magica/resource/image_web/page/mypage/otherpop_record.png");
}

.etcPop .etcPopWrap .etcHelpBtn {
  background-image: url("/magica/resource/image_web/page/mypage/otherpop_help.png");
}

.etcPop .etcPopWrap .configBtn {
  background-image: url("/magica/resource/image_web/page/mypage/otherpop_config.png");
}

.etcPop .backDoorBtn {
  width: 80px !important;
  height: 45px !important;
  top: 315px !important;
  right: 13px !important;
}

.etcPop .backDoorBtn2 {
  width: 80px !important;
  height: 45px !important;
  top: 315px !important;
  right: 110px !important;
  position: absolute;
}

.etcPop #backDoorCurrentTimeArea {
  display: inline-block;
  padding: 0rem 1rem 0rem 2rem;
  color: #fff;
  border-radius: 100vh;
  background: #ff4f92;
  position: absolute;
  top: 335px;
  right: 200px;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.etcPop #backDoorCurrentTimeArea:before {
  position: absolute;
  top: calc(50% - 7px);
  left: 10px;
  width: 14px;
  height: 14px;
  content: '';
  border-radius: 50%;
  background: #fff;
}

/* PurchasePopup ----------------------------------------- */
.purchasePop #PurchaseTop {
  height: 460px;
  position: relative;
}

.purchasePop #PurchaseTop .purchaseScrollOuter {
  width: 900px;
  height: 392px;
  position: absolute;
  top: 14px;
  left: 24px;
  overflow: hidden;
  text-align: center;
  padding: 120px 0 0 0;
}

.purchasePop #PurchaseTop .purchaseScrollOuter .cautionText {
  display: inline-block;
  text-align: left;
  margin: 12px 0 0 0;
}

.purchasePop #PurchaseTop #PurchaseListWrap {
  width: auto;
  height: 355px;
  margin: 10px auto 20px;
  white-space: nowrap;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap {
  width: 236px;
  height: 370px;
  margin: 0 7px;
  background-size: 100% 100%;
  display: inline-block;
  position: relative;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .ribbonWrap {
  display: none;
  pointer-events: none;
  z-index: 10;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .ribbonWrap.ONCE, .purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .ribbonWrap.ONCE2, .purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .ribbonWrap.DAILY, .purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .ribbonWrap.LIMITED {
  width: 72px;
  height: 92px;
  display: block;
  position: absolute;
  top: -12px;
  left: 10px;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .ribbonWrap.ONCE {
  background: url("/magica/resource/image_web/common/purchase/limited_first.png") left top no-repeat;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .ribbonWrap.ONCE2 {
  background: url("/magica/resource/image_web/common/purchase/limited_once.png") left top no-repeat;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .ribbonWrap.DAILY {
  background: url("/magica/resource/image_web/common/purchase/limited_daily.png") left top no-repeat;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .ribbonWrap.LIMITED {
  background: url("/magica/resource/image_web/common/purchase/limited_span.png") left top no-repeat;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .ribbonWrap.pos2 {
  left: 92px;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .ribbonWrap.small {
  width: 50px;
  background-size: contain;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .ribbonWrap.small.pos2 {
  left: 70px;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .itemWrap {
  position: absolute;
  top: 8px;
  left: 38px;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .itemWrap img {
  width: 160px;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .nameWrap {
  width: 100%;
  position: absolute;
  top: 170px;
  left: 0px;
  font-size: 20px;
  text-align: center;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .descWrap {
  width: 232px;
  height: 40px;
  max-height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 198px;
  left: 2px;
  overflow: hidden;
  font-size: 16px;
  text-align: center;
  white-space: normal;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-items: center;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .priceWrap {
  width: 100%;
  position: absolute;
  top: 243px;
  left: 0px;
  font-size: 18px;
  text-align: center;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .priceWrap .pointFrame {
  width: 150px;
  margin-bottom: 5px;
  font-size: 16px;
  line-height: 24px;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .priceWrap .pointPostfix {
  font-size: 16px;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .purchaseConfirmBtn {
  width: 140px;
  position: absolute;
  bottom: 20px;
  left: 47px;
  font-size: 16px;
}

.purchasePop #PurchaseTop #PurchaseListWrap .stoneWrap .purchaseConfirmBtn.hold {
  background-color: rgba(0, 0, 0, 0.255);
  -webkit-filter: brightness(75%);
          filter: brightness(75%);
}

.purchasePop #PurchaseTop .purchaseLawBtn {
  width: 282px;
  position: absolute;
  bottom: 0;
  left: 22px;
}

.purchasePop #PurchaseTop .purchaseRuleBtn {
  width: 154px;
  position: absolute;
  right: 20px;
  bottom: 10px;
  font-size: 12px;
}

.purchasePop #PurchaseTop .purchaseLawBtn, .purchasePop #PurchaseTop .purchaseRuleBtn {
  font-size: 14px;
  line-height: 32px;
}

.purchasePop #PurchaseTop .purchasePopStoneWrap {
  width: 150px;
  display: block;
  position: absolute;
  right: 275px;
  bottom: 4px;
  text-align: right;
  z-index: 4;
}

.purchasePop #PurchaseTop .purchasePopStoneWrap .pointWrap {
  width: 150px;
  padding-right: 15px;
  display: inline-block;
  font-size: 16px;
  line-height: 24px;
  text-align: right;
}

.purchasePop #PurchaseTop .purchasePopStoneWrap .plusBtn {
  display: none;
}

.purchasePop #PurchaseTop .purchasePopStoneWrap:before {
  width: 34px;
  height: 34px;
  background-image: url("/magica/resource/image_web/common/icon/icon_money_f.png");
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  position: absolute;
  top: 4px;
  left: -6px;
  content: "";
  z-index: 2;
}

.purchasePop #PurchaseTop .purchasePopStoneWrap .titleWrapStone {
  position: absolute;
  top: 10px;
  left: 38px;
  font-size: 16px;
  z-index: 4;
}

.purchasePop #PurchaseTop .purchasePopStoneWrap2, .purchasePop #PurchaseTop .purchasePopFreeStoneWrap {
  line-height: 19px;
}

.purchasePop #PurchaseTop .purchasePopStoneWrap2 span, .purchasePop #PurchaseTop .purchasePopFreeStoneWrap span {
  font-size: 16px;
}

.purchasePop #PurchaseTop .purchasePopStoneWrap2 .titleWrapStone, .purchasePop #PurchaseTop .purchasePopFreeStoneWrap .titleWrapStone {
  width: 40px;
  position: absolute;
  top: 3px;
  z-index: 2;
}

.purchasePop #PurchaseTop .purchasePopStoneWrap2 {
  width: 132px;
  height: 24px;
  padding-right: 15px;
  background: url("/magica/resource/image_web/common/frame/point_frame_lb_bg.png");
  background-repeat: repeat-x;
  display: block;
  position: absolute;
  right: 150px;
  bottom: 5px;
  text-align: right;
}

.purchasePop #PurchaseTop .purchasePopStoneWrap2 .titleWrapStone {
  left: 5px;
}

.purchasePop #PurchaseTop .purchasePopFreeStoneWrap {
  width: 124px;
  height: 24px;
  padding-right: 15px;
  background: url("/magica/resource/image_web/common/frame/point_frame_lb_bg.png") top left, url("/magica/resource/image_web/common/frame/point_frame_lb_r.png") top right;
  background-repeat: no-repeat;
  background-size: 113px 24px,12px 24px;
  display: block;
  position: absolute;
  right: 23px;
  bottom: 5px;
  text-align: right;
}

.purchasePop #PurchaseTop .purchasePopFreeStoneWrap .titleWrapStone {
  left: 5px;
}

.purchasePop #checkBirth {
  margin: 20px auto;
}

.purchasePop #birthCheck, .purchasePop #birthDecide {
  position: absolute;
  bottom: 20px;
  left: 320px;
}

.purchasePop select {
  height: 36px;
  padding-left: 10px;
  background-color: #ffffff;
  position: relative;
  text-align: left;
  border: 2px solid #b28750;
  border-radius: 5px;
  -webkit-appearance: none;
}

.purchasePop select#year {
  width: 198px;
}

.purchasePop select#day {
  width: 198px;
}

.purchasePop .birthTriangle1, .purchasePop .birthTriangle2 {
  width: 64px;
  height: 38px;
  background: -webkit-linear-gradient(top, #e5b271 0%, #b28750 100%);
  position: absolute;
  top: 201px;
  pointer-events: none;
  border: 2px solid #b28750;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 2px;
}

.purchasePop .birthTriangle1:before, .purchasePop .birthTriangle2:before {
  width: 25px;
  height: 18px;
  background-image: url("/magica/resource/image_web/common/icon/icon_select_triangle.png");
  display: block;
  position: absolute;
  top: 8px;
  right: 16px;
  content: "";
  pointer-events: none;
  z-index: 3;
}

.purchasePop .birthTriangle1 {
  left: 340px;
}

.purchasePop .birthTriangle2 {
  right: 173px;
}

.cantPurchasePop #cantPurchase {
  position: absolute;
  bottom: 20px;
  left: 320px;
}

.purchaseError .popupTextArea {
  height: 238px !important;
}

/* announcePopup --------------------------------------- */
@-webkit-keyframes newsNewMark {
  0%, 40%, 60%, 100% {
    -webkit-filter: brightness(100%);
  }
  50% {
    -webkit-filter: brightness(300%);
  }
}

/* MaintenanceAnnouncePop ------------------------------ */
/* announcePopup --------------------------------------- */
.announcementPopup {
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  background-color: #f7f7f7;
  position: absolute;
  top: 0 !important;
  left: 0 !important;
}

.announcementPopup .announceClose {
  top: 0;
  right: -webkit-calc((100% - 1024px) / 2);
}

.announcementPopup .newsCloseMini {
  top: 0;
  right: -4px;
}

.announcementPopup .popupInner {
  width: 100% !important;
  height: 100% !important;
  background: none !important;
  position: absolute;
  top: 0  !important;
  left: 0 !important;
  overflow: hidden;
  border-width: 0 !important;
  border-radius: 0 !important;
  -webkit-border-image: none;
}

.announcementPopup .popupInner .popupTextArea {
  width: 1024px !important;
  height: -webkit-calc(100% - 60px) !important;
  display: relative;
  display: block !important;
}

.announcementPopup .popupInner .popupTitle {
  width: 100% !important;
  height: 44px !important;
  background: url("/magica/resource/image_web/common/popup/bg_popup_title_c.png") top center repeat;
  display: block;
  color: #99641f !important;
  line-height: 44px !important;
  letter-spacing: 14px;
}

.announcementPopup .popupInner .popupTitle:before, .announcementPopup .popupInner .popupTitle:after {
  display: none;
}

.announcementPopup .popupInner #popupInfoDetailTitle {
  margin: 0 auto 15px;
  background-image: url("/magica/resource/image_web/page/announce/announce_titlebar.png");
}

.announcementPopup .popupInner #announceLeftImage {
  width: 104px;
  height: 256px;
  background-image: url("/magica/resource/image_web/page/announce/announce_bg_l.png");
  position: absolute;
  top: 44px;
  left: 0px;
}

.announcementPopup .popupInner #announceRightImage {
  width: 104px;
  height: 256px;
  background-image: url("/magica/resource/image_web/page/announce/announce_bg_r.png");
  position: absolute;
  top: 44px;
  right: 0px;
}

.announcementPopup .popupInner .announceList {
  width: 100%;
  height: 100%;
  position: absolute;
}

.announcementPopup .popupInner .announceList.none {
  display: none !important;
}

.announcementPopup .popupInner .announceScroll1 {
  width: 486px;
  height: -webkit-calc(100% + 26px);
  position: absolute;
  top: -15px;
  left: 0px;
  overflow: hidden;
}

.announcementPopup .popupInner .announceScroll1 .scrollIndicator {
  right: -8px;
}

.announcementPopup .popupInner .announceScroll1 #announceBannerArea {
  height: auto;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 10px;
}

.announcementPopup .popupInner .announceScroll1 .pickUpEvent {
  height: auto;
  min-height: 110px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.announcementPopup .popupInner .announceScroll1 .pickUpEvent img {
  width: 452px;
  margin-left: 2px;
  height: 120px;
}

.announcementPopup .popupInner .announceScroll1 .pickUpEvent .bannerText {
  width: 468px;
  height: 24px;
  position: relative;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 5px;
}

.announcementPopup .popupInner .announceScroll1 .pickUpEvent.startDashCp img, .announcementPopup .popupInner .announceScroll1 .pickUpEvent.announcePassport img {
  height: 110px;
}

.announcementPopup .popupInner .announceScroll1 .scrollBar {
  width: 472px;
  height: auto;
  min-height: 100%;
  padding-top: 20px;
  padding-bottom: 50px;
}

.announcementPopup .popupInner .announceRightBg {
  width: 518px;
  height: -webkit-calc(100% - 90px);
  position: fixed;
  top: 76px;
  right: -webkit-calc(50% - 495px);
  z-index: 1;
}

.announcementPopup .popupInner ul#announceTab {
  width: 482px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 36px;
  right: 25px;
  z-index: 2;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.announcementPopup .popupInner ul#announceTab li {
  width: 150px;
  min-width: 150px !important;
  height: 60px;
  margin-right: 3px;
  display: block;
  position: relative;
  font-size: 15px;
  line-height: 60px !important;
}

.announcementPopup .popupInner ul#announceTab li .newMark {
  display: none;
}

.announcementPopup .popupInner ul#announceTab li.newIcon .newMark {
  width: 57.6px;
  height: 20.8px;
  background-image: url("/magica/resource/image_web/page/gacha/gacha_new.png");
  background-size: contain;
  display: block;
  position: absolute;
  top: -10px;
  left: 22px;
  -webkit-animation: newsNewMark 4s linear 0s infinite normal;
  z-index: 102;
}

.announcementPopup .popupInner .announceScroll2 {
  width: 495px;
  height: -webkit-calc(100% - 132px);
  position: absolute;
  top: 104px;
  right: 24px;
  overflow: hidden;
  z-index: 2;
}

.announcementPopup .popupInner .announceScroll2 .scrollIndicator {
  right: 5px;
}

.announcementPopup .popupInner .announceTitle {
  width: 486px;
  height: auto;
  min-height: 100%;
  padding: 6px 0 6px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.announcementPopup .popupInner .announceTitle.off {
  display: none !important;
}

.announcementPopup .popupInner .announceTitle li {
  width: 480px;
  min-height: 54px;
  margin: 0 auto 10px;
  padding: 12px 0 14px 13px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  text-align: left;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
}

.announcementPopup .popupInner .announceTitle li .newMark {
  display: none;
}

.announcementPopup .popupInner .announceTitle li:after {
  width: 22px;
  height: 12px;
  background-image: url("/magica/resource/image_web/page/announce/announce_listicon.png");
  display: block;
  position: absolute;
  top: -webkit-calc(50% - 6px);
  right: 10px;
  content: "";
}

.announcementPopup .popupInner .announceTitle li.newIcon {
  height: 76px;
}

.announcementPopup .popupInner .announceTitle li.newIcon .announceDate {
  height: 78px;
}

.announcementPopup .popupInner .announceTitle li.newIcon .newMark {
  width: 66px;
  height: 22px;
  background-image: url("/magica/resource/image_web/page/announce/icon_new_a.png");
  display: block;
  position: absolute;
  top: -webkit-calc(50% - 33px);
  left: 0;
  color: #fced02;
  font-size: 12px;
  content: "";
}

.announcementPopup .popupInner .announceTitle li.more {
  display: none;
}

.announcementPopup .popupInner .announceTitle li.moreBtn {
  text-align: center;
}

.announcementPopup .popupInner .announceTitle li .announceDate {
  width: 66px;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 4px;
}

.announcementPopup .popupInner .announceTitle li .announceDate .dates {
  display: block;
  position: absolute;
  top: -webkit-calc(50% - 10px);
  right: 1px;
  font-size: 16px;
  text-align: right;
}

.announcementPopup .popupInner .announceTitle li .announceMultiLine {
  width: 344px;
  max-height: 50px;
  margin-left: 58px;
  padding: 2px 0 0 10px;
  display: -webkit-box;
  overflow: hidden;
  font-size: 18px;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.announcementPopup .popupInner .announceText {
  width: 884px;
  height: 100%;
  margin-top: 20px;
  margin-left: 70px;
  display: block;
}

.announcementPopup .popupInner .announceText.none {
  display: none !important;
}

.announcementPopup .popupInner .announceText .scrollBar {
  height: auto;
}

.announcementPopup .popupInner .announceDebug {
  width: 884px;
  height: 100%;
  margin-top: 20px;
  margin-left: 70px;
  display: block;
}

.announcementPopup .popupInner .announceDebug.none {
  display: none !important;
}

.announcementPopup .popupInner .announceDebug .scrollBar {
  height: auto;
}

.announcementPopup .popupInner .announceScroll3 {
  width: 100%;
  height: -webkit-calc(100% - 0px);
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 3;
}

.announcementPopup .popupInner .announceScroll3 #categoryBanner {
  width: 116px;
  height: 24px;
  padding-right: 10px;
  background: url("/magica/resource/image_web/page/announce/announce_caption_base.png");
  position: absolute;
  top: -14px;
  left: -4px;
  color: #ffffff;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

.announcementPopup .popupInner .announceScroll3 #innerDate {
  margin-top: 10px;
  margin-right: 15px;
  display: block;
  position: absolute;
  top: 5px;
  left: 15px;
  font-size: 18px;
}

.announcementPopup .popupInner .announceScroll3 .announceTextsTitle {
  width: 768px;
  min-height: 60px;
  margin: 10px auto;
  padding: 13px 10px 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  text-align: left;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
}

.announcementPopup .popupInner .announceScroll3 .announceTextsTitle .newMark {
  display: none;
}

.announcementPopup .popupInner .announceScroll3 .announceTextsTitle.newIcon .newMark {
  width: 80px;
  height: 22px;
  margin: 5px 10px;
  background-image: url("/magica/resource/image_web/page/announce/icon_new_a.png");
  display: block;
  color: #fced02;
  font-size: 12px;
  content: "";
}

.announcementPopup .popupInner .announceScroll3 .announceTextsTitle.more {
  display: none;
}

.announcementPopup .popupInner .announceScroll3 .announceTextsTitle.moreBtn {
  text-align: center;
}

.announcementPopup .popupInner .announceScroll3 .announceTextsTitle .announceDate {
  padding: 2px 20px 0 0;
  display: inline-block;
  font-size: 16px;
}

.announcementPopup .popupInner .announceScroll3 .announceTextsTitle .announceMultiLine {
  width: 720px;
  max-height: 52px;
  padding: 2px 0 0 110px;
  display: -webkit-box;
  overflow: hidden;
  font-size: 18px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.announcementPopup .popupInner .announceScroll3 #scrollTextWrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.announcementPopup .popupInner .announceScroll3 .newsField {
  width: 100%;
  height: auto;
  min-height: 100%;
  padding-top: 30px;
  padding-right: 119px;
  padding-bottom: 30px;
  padding-left: 119px;
  display: block;
  position: relative;
  text-align: left;
  will-change: transform;
}

.announcementPopup .popupInner .announceScroll3 .newsField .newsTextField {
  width: 100%;
  padding: 10px 0px 50px;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.7;
  text-align: left;
  text-shadow: 0 0 0;
}

.announcementPopup .popupInner .announceScroll3 .newsField .newsTextField .announceTextLink {
  color: #0645ad;
  text-decoration: underline;
}

.announcementPopup .popupInner .announceScroll3 .newsField .newsTextField .announceTextLink.btn {
  margin: 5px auto;
  display: block;
  font-family: "motoya",sans-serif;
  line-height: 63px;
}

/*-- メンテのお知らせ、マイペのお知らせ両方で使うものはこちらに追加していく --*/
.announcementPopup .newsCloseMini, .announcementPopupMainte .newsCloseMini {
  width: 66px;
  height: 70px;
  display: none;
  position: absolute;
  z-index: 10001;
}

.announcementPopup .newsCloseMini.on, .announcementPopupMainte .newsCloseMini.on {
  display: block;
}

.announcementPopup .announceClose, .announcementPopupMainte .announceClose {
  width: 64px;
  height: 69px;
  background-image: url("/magica/resource/image_web/common/popup/popup_close.png");
  display: block;
  position: absolute;
  z-index: 10000;
}

.announcementPopup .popupInner .announceTitle.NEW .MNT, .announcementPopup .popupInner .announceTitle.NEW .UPD, .announcementPopup .popupInner .announceTitle.NEW .FIX, .announcementPopup .popupInner .announceTitle.NEW .moreMNT, .announcementPopup .popupInner .announceTitle.NEW .moreFIX, .announcementPopup .popupInner .announceTitle.NEW .moreUPD, .announcementPopupMainte .popupInner .announceTitle.NEW .MNT, .announcementPopupMainte .popupInner .announceTitle.NEW .UPD, .announcementPopupMainte .popupInner .announceTitle.NEW .FIX, .announcementPopupMainte .popupInner .announceTitle.NEW .moreMNT, .announcementPopupMainte .popupInner .announceTitle.NEW .moreFIX, .announcementPopupMainte .popupInner .announceTitle.NEW .moreUPD {
  display: none;
}

.announcementPopup .popupInner .announceTitle.NEW.moreDisp .NEW, .announcementPopupMainte .popupInner .announceTitle.NEW.moreDisp .NEW {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.announcementPopup .popupInner .announceTitle.NEW.moreDisp .moreNEW, .announcementPopupMainte .popupInner .announceTitle.NEW.moreDisp .moreNEW {
  display: none;
}

.announcementPopup .popupInner .announceTitle.MNT .NEW, .announcementPopup .popupInner .announceTitle.MNT .UPD, .announcementPopup .popupInner .announceTitle.MNT .FIX, .announcementPopup .popupInner .announceTitle.MNT .moreNEW, .announcementPopup .popupInner .announceTitle.MNT .moreFIX, .announcementPopup .popupInner .announceTitle.MNT .moreUPD, .announcementPopupMainte .popupInner .announceTitle.MNT .NEW, .announcementPopupMainte .popupInner .announceTitle.MNT .UPD, .announcementPopupMainte .popupInner .announceTitle.MNT .FIX, .announcementPopupMainte .popupInner .announceTitle.MNT .moreNEW, .announcementPopupMainte .popupInner .announceTitle.MNT .moreFIX, .announcementPopupMainte .popupInner .announceTitle.MNT .moreUPD {
  display: none;
}

.announcementPopup .popupInner .announceTitle.MNT.moreDisp .MNT, .announcementPopupMainte .popupInner .announceTitle.MNT.moreDisp .MNT {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.announcementPopup .popupInner .announceTitle.MNT.moreDisp .moreMNT, .announcementPopupMainte .popupInner .announceTitle.MNT.moreDisp .moreMNT {
  display: none !important;
}

.announcementPopup .popupInner .announceTitle.UPD .NEW, .announcementPopup .popupInner .announceTitle.UPD .MNT, .announcementPopup .popupInner .announceTitle.UPD .FIX, .announcementPopup .popupInner .announceTitle.UPD .moreNEW, .announcementPopup .popupInner .announceTitle.UPD .moreMNT, .announcementPopup .popupInner .announceTitle.UPD .moreFIX, .announcementPopupMainte .popupInner .announceTitle.UPD .NEW, .announcementPopupMainte .popupInner .announceTitle.UPD .MNT, .announcementPopupMainte .popupInner .announceTitle.UPD .FIX, .announcementPopupMainte .popupInner .announceTitle.UPD .moreNEW, .announcementPopupMainte .popupInner .announceTitle.UPD .moreMNT, .announcementPopupMainte .popupInner .announceTitle.UPD .moreFIX {
  display: none;
}

.announcementPopup .popupInner .announceTitle.UPD.moreDisp .UPD, .announcementPopupMainte .popupInner .announceTitle.UPD.moreDisp .UPD {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.announcementPopup .popupInner .announceTitle.UPD.moreDisp .moreUPD, .announcementPopupMainte .popupInner .announceTitle.UPD.moreDisp .moreUPD {
  display: none;
}

.announcementPopup .popupInner .announceTitle.FIX .NEW, .announcementPopup .popupInner .announceTitle.FIX .MNT, .announcementPopup .popupInner .announceTitle.FIX .UPD, .announcementPopup .popupInner .announceTitle.FIX .moreNEW, .announcementPopup .popupInner .announceTitle.FIX .moreMNT, .announcementPopup .popupInner .announceTitle.FIX .moreUPD, .announcementPopupMainte .popupInner .announceTitle.FIX .NEW, .announcementPopupMainte .popupInner .announceTitle.FIX .MNT, .announcementPopupMainte .popupInner .announceTitle.FIX .UPD, .announcementPopupMainte .popupInner .announceTitle.FIX .moreNEW, .announcementPopupMainte .popupInner .announceTitle.FIX .moreMNT, .announcementPopupMainte .popupInner .announceTitle.FIX .moreUPD {
  display: none;
}

.announcementPopup .popupInner .announceTitle.FIX.moreDisp .FIX, .announcementPopupMainte .popupInner .announceTitle.FIX.moreDisp .FIX {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.announcementPopup .popupInner .announceTitle.FIX.moreDisp .moreFIX, .announcementPopupMainte .popupInner .announceTitle.FIX.moreDisp .moreFIX {
  display: none;
}

.announcementPopup .popupInner .announceTitle .notFirstView, .announcementPopupMainte .popupInner .announceTitle .notFirstView {
  display: none;
}

.announcementPopup .popupInner .announceTitle .andMoreBtn span, .announcementPopupMainte .popupInner .announceTitle .andMoreBtn span {
  margin: 3px auto;
  font-size: 20px;
  text-align: center;
}

.announcementPopup .newsClose, .announcementPopup .eventClose, .announcementPopupMainte .newsClose, .announcementPopupMainte .eventClose {
  width: 190px;
  margin: 20px auto;
  display: block;
}

.announcementPopup .otherNews, .announcementPopupMainte .otherNews {
  color: #0645ad;
  text-decoration: underline;
}

.announcementPopup .otherNews.btn, .announcementPopupMainte .otherNews.btn {
  margin: 5px auto;
  display: block;
  font-family: "motoya",sans-serif;
  line-height: 63px;
}

.announcementPopup .announceOuterLink, .announcementPopup .separateOuterLink, .announcementPopupMainte .announceOuterLink, .announcementPopupMainte .separateOuterLink {
  color: #0645ad;
  text-decoration: underline;
}

.announcementPopup .announceOuterLink.btn, .announcementPopup .separateOuterLink.btn, .announcementPopupMainte .announceOuterLink.btn, .announcementPopupMainte .separateOuterLink.btn {
  margin: 5px auto;
  display: block;
  font-family: "motoya",sans-serif;
  line-height: 63px !important;
}

.announcementPopup .notDMM.hide, .announcementPopupMainte .notDMM.hide {
  display: none !important;
}

.announcementPopup .newsImage, .announcementPopupMainte .newsImage {
  width: 100%;
  height: 240px;
  padding-bottom: 10px;
}

.announcementPopup .newsImage img, .announcementPopupMainte .newsImage img {
  margin: 0 auto;
  display: block;
}

.announcementPopup .newsCenterImage, .announcementPopupMainte .newsCenterImage {
  margin: 10px auto;
  display: block;
}

.announcementPopup .newsTextBanner, .announcementPopupMainte .newsTextBanner {
  width: 618px;
  height: 163px;
  margin: 0 auto;
  display: block;
}

.announcementPopup .newsHead, .announcementPopupMainte .newsHead {
  width: 100%;
  height: 33px;
  margin-bottom: 8px;
  padding: 5px 10px 5px 32px;
  background: -webkit-linear-gradient(left, #ff549c 0%, #ff549c 15%, rgba(255, 248, 192, 0.4) 100%);
  position: relative;
  color: #ffffff;
  font-family: "motoya",sans-serif;
  text-shadow: -1px -1px 2px #ff4f92, 1px -1px 2px #ff4f92, -1px 1px 2px #ff4f92, 1px 1px 2px #ff4f92, -1px -1px 2px #ff4f92, 1px -1px 2px #ff4f92, -1px 1px 2px #ff4f92, 1px 1px 2px #ff4f92;
}

.announcementPopup .newsHead:before, .announcementPopupMainte .newsHead:before {
  position: absolute;
  top: 5px;
  left: 10px;
  color: #ffffff;
  content: "◆";
}

.announcementPopup .newsHeadUnder, .announcementPopupMainte .newsHeadUnder {
  height: 28px;
  margin-bottom: 8px;
  padding-bottom: 5px;
  padding-left: 5px;
  position: relative;
  color: #ff549c;
  font-family: "motoya",sans-serif;
  font-size: 18px;
}

.announcementPopup .newsHeadUnder:after, .announcementPopupMainte .newsHeadUnder:after {
  width: 100%;
  height: 3px;
  background: -webkit-linear-gradient(left, #ff549c 0%, #ff549c 15%, rgba(255, 248, 192, 0.4) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  text-shadow: -1px -1px 2px #ff4f92, 1px -1px 2px #ff4f92, -1px 1px 2px #ff4f92, 1px 1px 2px #ff4f92, -1px -1px 2px #ff4f92, 1px -1px 2px #ff4f92, -1px 1px 2px #ff4f92, 1px 1px 2px #ff4f92;
}

.announcementPopup .newsHeadSmall, .announcementPopupMainte .newsHeadSmall {
  color: #ff4f9e;
  font-family: "motoya",sans-serif;
}

.announcementPopup .newsCardList, .announcementPopupMainte .newsCardList {
  width: 768px;
  height: 376px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

.announcementPopup .newsCardList .cardWrap, .announcementPopupMainte .newsCardList .cardWrap {
  width: 242px;
  height: auto;
  margin: 5px;
  position: relative;
}

.announcementPopup .newsCardList .cardWrap img.card, .announcementPopupMainte .newsCardList .cardWrap img.card {
  width: 240px;
  height: 364px;
  margin: 1px;
  position: relative;
  z-index: 1;
}

.announcementPopup .newsCardList .cardWrap .frame, .announcementPopupMainte .newsCardList .cardWrap .frame {
  width: 242px;
  height: 366px;
  background-size: 100% 100%;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
}

.announcementPopup .newsTextList, .announcementPopupMainte .newsTextList {
  width: 100%;
  padding: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
}

.announcementPopup .newsTextList .text, .announcementPopupMainte .newsTextList .text {
  text-align: left;
}

.announcementPopup .newsTextList.col2 .text, .announcementPopupMainte .newsTextList.col2 .text {
  min-width: -webkit-calc(100% / 2);
}

.announcementPopup .newsTextList.col3 .text, .announcementPopupMainte .newsTextList.col3 .text {
  min-width: -webkit-calc(100% / 3);
}

.announcementPopup .newsTextList.col4 .text, .announcementPopupMainte .newsTextList.col4 .text {
  min-width: -webkit-calc(100% / 4);
}

.announcementPopup .newsTextList.col5 .text, .announcementPopupMainte .newsTextList.col5 .text {
  min-width: -webkit-calc(100% / 5);
}

.announcementPopup .newsItemList, .announcementPopupMainte .newsItemList {
  width: 100%;
  height: 180px;
  padding: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

.announcementPopup .newsItemList .itemWrap, .announcementPopupMainte .newsItemList .itemWrap {
  min-width: 180px;
  height: 150px;
  min-height: 170px;
  margin: 7px;
  position: relative;
  text-align: center;
}

.announcementPopup .newsItemList .itemWrap img, .announcementPopupMainte .newsItemList .itemWrap img {
  width: 100px;
  height: 100px;
  margin: 10px auto 10px;
  position: relative;
  z-index: 1;
  z-index: 1;
}

.announcementPopup .newsItemList .itemWrap .quantity, .announcementPopupMainte .newsItemList .itemWrap .quantity {
  position: absolute;
  top: 90px;
  right: 34px;
  z-index: 2;
}

.announcementPopup .newsItemList .itemWrap .itemName, .announcementPopupMainte .newsItemList .itemWrap .itemName {
  min-width: 174px;
  min-height: 40px;
  margin: 0px 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  font-size: 16px;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.announcementPopup .newsItemList .itemWrap .itemName div, .announcementPopupMainte .newsItemList .itemWrap .itemName div {
  display: block;
  line-height: 20px;
}

.announcementPopup .newsItemList .itemWrap .live2d, .announcementPopupMainte .newsItemList .itemWrap .live2d {
  width: 100px;
  height: 100px;
  margin: 10px auto 10px;
  position: relative;
  z-index: 1;
  z-index: 1;
}

.announcementPopup .newsItemList .itemWrap .live2d .l2dIcon, .announcementPopupMainte .newsItemList .itemWrap .live2d .l2dIcon {
  margin: 0px auto;
}

.announcementPopup .newsItemList .itemWrap .live2d .charaIcon, .announcementPopupMainte .newsItemList .itemWrap .live2d .charaIcon {
  width: 58px;
  height: 52px;
  position: absolute;
  right: -12px;
  bottom: 5px;
}

.announcementPopup .newsItemList .itemWrap .live2d .charaIcon:before, .announcementPopupMainte .newsItemList .itemWrap .live2d .charaIcon:before {
  width: 58px;
  height: 52px;
  background: url("/magica/resource/image_web/common/chara/chara_frame_S.png") left top no-repeat;
  background-size: 100% 100%;
  display: block;
  position: absolute;
  top: 0;
  left: -webkit-calc(50% - 29px);
  content: "";
  z-index: 100;
}

.announcementPopup .newsItemList .itemWrap .live2d .charaIcon:after, .announcementPopupMainte .newsItemList .itemWrap .live2d .charaIcon:after {
  width: 58px;
  height: 52px;
  background: url("/magica/resource/image_web/common/chara/chara_base_S.png") left top no-repeat;
  background-size: 100% 100%;
  display: block;
  position: absolute;
  top: 0;
  left: -webkit-calc(50% - 29px);
  content: "";
  z-index: 80;
}

.announcementPopup .newsItemList .itemWrap .live2d .charaIcon .maskWrap, .announcementPopupMainte .newsItemList .itemWrap .live2d .charaIcon .maskWrap {
  width: 52px;
  height: 52px;
  position: absolute;
  top: 0;
  left: -webkit-calc(50% - 26px);
  overflow: hidden;
  border-radius: 26px;
  z-index: 90;
}

.announcementPopup .newsItemList .itemWrap .live2d .charaIcon .maskWrap img, .announcementPopupMainte .newsItemList .itemWrap .live2d .charaIcon .maskWrap img {
  width: 60px;
  height: auto;
  position: absolute;
  top: -8px;
  left: -webkit-calc(50% - 34px);
}

.announcementPopup .pickUpDetail, .announcementPopupMainte .pickUpDetail {
  width: 100%;
  margin: 10px 0px 20px;
  position: relative;
}

.announcementPopup .pickUpDetail *, .announcementPopupMainte .pickUpDetail * {
  font-family: "motoya",sans-serif;
}

.announcementPopup .pickUpDetail .pickUpCard, .announcementPopupMainte .pickUpDetail .pickUpCard {
  width: 264px;
  height: 100%;
  margin: 0px 10px;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}

.announcementPopup .pickUpDetail .detailWrap, .announcementPopupMainte .pickUpDetail .detailWrap {
  width: 482px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 16px;
}

.announcementPopup .pickUpDetail .rarity, .announcementPopupMainte .pickUpDetail .rarity {
  width: 120px;
  height: 26px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 10px;
  right: 8px;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: right;
      -ms-flex-align: right;
          align-items: right;
}

.announcementPopup .pickUpDetail .limitedIcon, .announcementPopupMainte .pickUpDetail .limitedIcon {
  width: 94px;
  height: 24px;
  margin: 0px 0px -3px 20px;
  background: url("/magica/resource/image_web/page/announce/icon_limited_announce.png") no-repeat;
  display: inline-block;
  position: relative;
}

.announcementPopup .pickUpDetail.CARD, .announcementPopupMainte .pickUpDetail.CARD {
  height: 370px;
}

.announcementPopup .pickUpDetail.CARD .pickUpCard .pickUpCardFrame, .announcementPopupMainte .pickUpDetail.CARD .pickUpCard .pickUpCardFrame {
  width: 244px;
  height: 370px;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 10px;
  z-index: 2;
}

.announcementPopup .pickUpDetail.CARD .pickUpCard .pickUpCardImage, .announcementPopupMainte .pickUpDetail.CARD .pickUpCard .pickUpCardImage {
  width: 242px;
  margin: 1px 10px;
}

.announcementPopup .pickUpDetail.CARD .attribute, .announcementPopupMainte .pickUpDetail.CARD .attribute {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 0;
}

.announcementPopup .pickUpDetail.CARD .attribute .attIcon, .announcementPopupMainte .pickUpDetail.CARD .attribute .attIcon {
  width: 100%;
  height: 100%;
}

.announcementPopup .pickUpDetail.CARD .charaName, .announcementPopupMainte .pickUpDetail.CARD .charaName {
  width: 292px;
  height: 40px;
  position: absolute;
  top: 0px;
  left: 53px;
  font-size: 24px;
  line-height: 40px;
}

.announcementPopup .pickUpDetail.CARD .subName, .announcementPopupMainte .pickUpDetail.CARD .subName {
  width: 292px;
  height: 18px;
  position: absolute;
  top: 33px;
  left: 53px;
  font-size: 16px;
  line-height: 18px;
}

.announcementPopup .pickUpDetail.CARD .rarity .stars, .announcementPopupMainte .pickUpDetail.CARD .rarity .stars {
  width: 26px;
  height: 26px;
  margin-left: -3px;
  background: url("/magica/resource/image_web/common/chara/star_off.png") left top no-repeat;
  background-size: 26px 26px;
  position: relative;
}

.announcementPopup .pickUpDetail.CARD .rarity.MAX_1 .star2, .announcementPopup .pickUpDetail.CARD .rarity.MAX_1 .star3, .announcementPopup .pickUpDetail.CARD .rarity.MAX_1 .star4, .announcementPopup .pickUpDetail.CARD .rarity.MAX_1 .star5, .announcementPopupMainte .pickUpDetail.CARD .rarity.MAX_1 .star2, .announcementPopupMainte .pickUpDetail.CARD .rarity.MAX_1 .star3, .announcementPopupMainte .pickUpDetail.CARD .rarity.MAX_1 .star4, .announcementPopupMainte .pickUpDetail.CARD .rarity.MAX_1 .star5 {
  display: none;
}

.announcementPopup .pickUpDetail.CARD .rarity.MAX_2 .star3, .announcementPopup .pickUpDetail.CARD .rarity.MAX_2 .star4, .announcementPopup .pickUpDetail.CARD .rarity.MAX_2 .star5, .announcementPopupMainte .pickUpDetail.CARD .rarity.MAX_2 .star3, .announcementPopupMainte .pickUpDetail.CARD .rarity.MAX_2 .star4, .announcementPopupMainte .pickUpDetail.CARD .rarity.MAX_2 .star5 {
  display: none;
}

.announcementPopup .pickUpDetail.CARD .rarity.MAX_3 .star4, .announcementPopup .pickUpDetail.CARD .rarity.MAX_3 .star5, .announcementPopupMainte .pickUpDetail.CARD .rarity.MAX_3 .star4, .announcementPopupMainte .pickUpDetail.CARD .rarity.MAX_3 .star5 {
  display: none;
}

.announcementPopup .pickUpDetail.CARD .rarity.MAX_4 .star5, .announcementPopupMainte .pickUpDetail.CARD .rarity.MAX_4 .star5 {
  display: none;
}

.announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_1 .star1, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_1 .star1 {
  background: url("/magica/resource/image_web/common/chara/star_on.png") left top no-repeat;
  background-size: 26px 26px;
}

.announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_2 .star1, .announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_2 .star2, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_2 .star1, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_2 .star2 {
  background: url("/magica/resource/image_web/common/chara/star_on.png") left top no-repeat;
  background-size: 26px 26px;
}

.announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_3 .star1, .announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_3 .star2, .announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_3 .star3, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_3 .star1, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_3 .star2, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_3 .star3 {
  background: url("/magica/resource/image_web/common/chara/star_on.png") left top no-repeat;
  background-size: 26px 26px;
}

.announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_4 .star1, .announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_4 .star2, .announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_4 .star3, .announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_4 .star4, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_4 .star1, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_4 .star2, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_4 .star3, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_4 .star4 {
  background: url("/magica/resource/image_web/common/chara/star_on.png") left top no-repeat;
  background-size: 26px 26px;
}

.announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_5 .star1, .announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_5 .star2, .announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_5 .star3, .announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_5 .star4, .announcementPopup .pickUpDetail.CARD .rarity.DEFAULT_5 .star5, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_5 .star1, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_5 .star2, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_5 .star3, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_5 .star4, .announcementPopupMainte .pickUpDetail.CARD .rarity.DEFAULT_5 .star5 {
  background: url("/magica/resource/image_web/common/chara/star_on.png") left top no-repeat;
  background-size: 26px 26px;
}

.announcementPopup .pickUpDetail.CARD .status1, .announcementPopup .pickUpDetail.CARD .status2, .announcementPopupMainte .pickUpDetail.CARD .status1, .announcementPopupMainte .pickUpDetail.CARD .status2 {
  width: 255px;
  height: 58px;
  position: absolute;
  top: 56px;
}

.announcementPopup .pickUpDetail.CARD .status1 .common_dl, .announcementPopup .pickUpDetail.CARD .status2 .common_dl, .announcementPopupMainte .pickUpDetail.CARD .status1 .common_dl, .announcementPopupMainte .pickUpDetail.CARD .status2 .common_dl {
  width: 255px;
  height: 25px;
  margin-bottom: 4px;
  position: relative;
}

.announcementPopup .pickUpDetail.CARD .status1 .common_dl dt, .announcementPopup .pickUpDetail.CARD .status1 .common_dl dd, .announcementPopup .pickUpDetail.CARD .status2 .common_dl dt, .announcementPopup .pickUpDetail.CARD .status2 .common_dl dd, .announcementPopupMainte .pickUpDetail.CARD .status1 .common_dl dt, .announcementPopupMainte .pickUpDetail.CARD .status1 .common_dl dd, .announcementPopupMainte .pickUpDetail.CARD .status2 .common_dl dt, .announcementPopupMainte .pickUpDetail.CARD .status2 .common_dl dd {
  line-height: 25px;
}

.announcementPopup .pickUpDetail.CARD .status1 .common_dl dt, .announcementPopup .pickUpDetail.CARD .status2 .common_dl dt, .announcementPopupMainte .pickUpDetail.CARD .status1 .common_dl dt, .announcementPopupMainte .pickUpDetail.CARD .status2 .common_dl dt {
  font-size: 16px;
  width: 105px !important;
}

.announcementPopup .pickUpDetail.CARD .status1 .common_dl dd, .announcementPopup .pickUpDetail.CARD .status2 .common_dl dd, .announcementPopupMainte .pickUpDetail.CARD .status1 .common_dl dd, .announcementPopupMainte .pickUpDetail.CARD .status2 .common_dl dd {
  font-size: 18px;
  width: 150px !important;
  padding-left: 10px;
  text-align: left;
  border: 0px;
}

.announcementPopup .pickUpDetail.CARD .status1 .common_dl dd .add, .announcementPopup .pickUpDetail.CARD .status2 .common_dl dd .add, .announcementPopupMainte .pickUpDetail.CARD .status1 .common_dl dd .add, .announcementPopupMainte .pickUpDetail.CARD .status2 .common_dl dd .add {
  font-size: 14px;
  color: #f00;
  padding-left: 4px;
}

.announcementPopup .pickUpDetail.CARD .status1, .announcementPopupMainte .pickUpDetail.CARD .status1 {
  left: 0px;
}

.announcementPopup .pickUpDetail.CARD .status2, .announcementPopupMainte .pickUpDetail.CARD .status2 {
  left: 248px;
}

.announcementPopup .pickUpDetail.CARD .commandList, .announcementPopupMainte .pickUpDetail.CARD .commandList {
  width: 350px;
  height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 120px;
  left: 0px;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.announcementPopup .pickUpDetail.CARD .commandList li, .announcementPopupMainte .pickUpDetail.CARD .commandList li {
  width: 70px;
  height: 70px;
}

.announcementPopup .pickUpDetail.CARD .commandList li.CHARGE, .announcementPopupMainte .pickUpDetail.CARD .commandList li.CHARGE {
  background: url("/magica/resource/image_web/common/chara/command_charge.png") left top no-repeat;
  background-size: 100% 100%;
}

.announcementPopup .pickUpDetail.CARD .commandList li.MPUP, .announcementPopupMainte .pickUpDetail.CARD .commandList li.MPUP {
  background: url("/magica/resource/image_web/common/chara/command_accele.png") left top no-repeat;
  background-size: 100% 100%;
}

.announcementPopup .pickUpDetail.CARD .commandList li.RANGE_V, .announcementPopupMainte .pickUpDetail.CARD .commandList li.RANGE_V {
  background: url("/magica/resource/image_web/common/chara/command_blast_v.png") left top no-repeat;
  background-size: 100% 100%;
}

.announcementPopup .pickUpDetail.CARD .commandList li.RANGE_H, .announcementPopupMainte .pickUpDetail.CARD .commandList li.RANGE_H {
  background: url("/magica/resource/image_web/common/chara/command_blast_h.png") left top no-repeat;
  background-size: 100% 100%;
}

.announcementPopup .pickUpDetail.CARD .commandList li.RANGE_S, .announcementPopupMainte .pickUpDetail.CARD .commandList li.RANGE_S {
  background: url("/magica/resource/image_web/common/chara/command_range_s.png") left top no-repeat;
  background-size: 100% 100%;
}

.announcementPopup .pickUpDetail.CARD .commandList li.RANGE_B, .announcementPopupMainte .pickUpDetail.CARD .commandList li.RANGE_B {
  background: url("/magica/resource/image_web/common/chara/command_range_b.png") left top no-repeat;
  background-size: 100% 100%;
}

.announcementPopup .pickUpDetail.CARD .connectWrap, .announcementPopup .pickUpDetail.CARD .magiaWrap, .announcementPopupMainte .pickUpDetail.CARD .connectWrap, .announcementPopupMainte .pickUpDetail.CARD .magiaWrap {
  width: 420px;
  height: 100px;
  position: absolute;
  left: 0px;
}

.announcementPopup .pickUpDetail.CARD .connectWrap .common_dl, .announcementPopup .pickUpDetail.CARD .magiaWrap .common_dl, .announcementPopupMainte .pickUpDetail.CARD .connectWrap .common_dl, .announcementPopupMainte .pickUpDetail.CARD .magiaWrap .common_dl {
  width: 100%;
  height: 25px;
}

.announcementPopup .pickUpDetail.CARD .connectWrap .common_dl dt, .announcementPopup .pickUpDetail.CARD .connectWrap .common_dl dd, .announcementPopup .pickUpDetail.CARD .magiaWrap .common_dl dt, .announcementPopup .pickUpDetail.CARD .magiaWrap .common_dl dd, .announcementPopupMainte .pickUpDetail.CARD .connectWrap .common_dl dt, .announcementPopupMainte .pickUpDetail.CARD .connectWrap .common_dl dd, .announcementPopupMainte .pickUpDetail.CARD .magiaWrap .common_dl dt, .announcementPopupMainte .pickUpDetail.CARD .magiaWrap .common_dl dd {
  font-size: 18px;
  line-height: 25px;
}

.announcementPopup .pickUpDetail.CARD .connectWrap .common_dl dt, .announcementPopup .pickUpDetail.CARD .magiaWrap .common_dl dt, .announcementPopupMainte .pickUpDetail.CARD .connectWrap .common_dl dt, .announcementPopupMainte .pickUpDetail.CARD .magiaWrap .common_dl dt {
  width: 112px;
}

.announcementPopup .pickUpDetail.CARD .connectWrap .common_dl dd, .announcementPopup .pickUpDetail.CARD .magiaWrap .common_dl dd, .announcementPopupMainte .pickUpDetail.CARD .connectWrap .common_dl dd, .announcementPopupMainte .pickUpDetail.CARD .magiaWrap .common_dl dd {
  border: 0px;
}

.announcementPopup .pickUpDetail.CARD .connectWrap .description, .announcementPopup .pickUpDetail.CARD .magiaWrap .description, .announcementPopupMainte .pickUpDetail.CARD .connectWrap .description, .announcementPopupMainte .pickUpDetail.CARD .magiaWrap .description {
  height: 52px;
  margin-top: 6px;
  font-size: 18px;
  line-height: 24px;
}

.announcementPopup .pickUpDetail.CARD .connectWrap, .announcementPopupMainte .pickUpDetail.CARD .connectWrap {
  top: 196px;
}

.announcementPopup .pickUpDetail.CARD .magiaWrap, .announcementPopupMainte .pickUpDetail.CARD .magiaWrap {
  top: 288px;
}

.announcementPopup .pickUpDetail.CARD.ENHANCE, .announcementPopupMainte .pickUpDetail.CARD.ENHANCE {
  height: auto;
}

.announcementPopup .pickUpDetail.CARD.ENHANCE .enhancementList, .announcementPopupMainte .pickUpDetail.CARD.ENHANCE .enhancementList {
  padding-top: 375px;
  width: 100%;
  padding-left: 10px;
  height: auto;
  margin-bottom: 8px;
  min-height: auto;
}

.announcementPopup .pickUpDetail.CARD.ENHANCE .enhancementList .skill, .announcementPopup .pickUpDetail.CARD.ENHANCE .enhancementList .ability, .announcementPopupMainte .pickUpDetail.CARD.ENHANCE .enhancementList .skill, .announcementPopupMainte .pickUpDetail.CARD.ENHANCE .enhancementList .ability {
  width: 370px;
  height: 70px;
  display: inline-block;
  position: relative;
}

.announcementPopup .pickUpDetail.CARD.ENHANCE .enhancementList .skill .artIcon, .announcementPopup .pickUpDetail.CARD.ENHANCE .enhancementList .ability .artIcon, .announcementPopupMainte .pickUpDetail.CARD.ENHANCE .enhancementList .skill .artIcon, .announcementPopupMainte .pickUpDetail.CARD.ENHANCE .enhancementList .ability .artIcon {
  width: 68px;
  height: 68px;
  position: absolute;
  top: 18px;
  left: 140px;
}

.announcementPopup .pickUpDetail.CARD.ENHANCE .enhancementList .skill .skillName, .announcementPopup .pickUpDetail.CARD.ENHANCE .enhancementList .ability .skillName, .announcementPopupMainte .pickUpDetail.CARD.ENHANCE .enhancementList .skill .skillName, .announcementPopupMainte .pickUpDetail.CARD.ENHANCE .enhancementList .ability .skillName {
  width: 236px;
  height: 18px;
  position: absolute;
  top: 8px;
  left: 112px;
  font-size: 14px;
  text-align: left;
  overflow: hidden;
}

.announcementPopup .pickUpDetail.CARD.ENHANCE .enhancementList .skill .skillDescription, .announcementPopup .pickUpDetail.CARD.ENHANCE .enhancementList .ability .skillDescription, .announcementPopupMainte .pickUpDetail.CARD.ENHANCE .enhancementList .skill .skillDescription, .announcementPopupMainte .pickUpDetail.CARD.ENHANCE .enhancementList .ability .skillDescription {
  width: 236px;
  height: 32px;
  position: absolute;
  bottom: 5px;
  left: 112px;
  text-align: left;
  font-size: 13px;
  line-height: 1.1;
  overflow: hidden;
}

.announcementPopup .pickUpDetail.CARD.ENHANCE .enhancementList .skill, .announcementPopupMainte .pickUpDetail.CARD.ENHANCE .enhancementList .skill {
  background: url("/magica/resource/image_web/page/chara/tree/bg_skill.png") left top no-repeat;
  background-size: contain;
}

.announcementPopup .pickUpDetail.CARD.ENHANCE .enhancementList .ability, .announcementPopupMainte .pickUpDetail.CARD.ENHANCE .enhancementList .ability {
  background: url("/magica/resource/image_web/page/chara/tree/bg_ability.png") left top no-repeat;
  background-size: contain;
}

.announcementPopup .pickUpDetail.MEMORIA, .announcementPopupMainte .pickUpDetail.MEMORIA {
  height: 282px;
}

.announcementPopup .pickUpDetail.MEMORIA .memoriaTypeIcon, .announcementPopupMainte .pickUpDetail.MEMORIA .memoriaTypeIcon {
  width: 48px;
  height: 49px;
  position: absolute;
  top: 0;
  left: 0;
}

.announcementPopup .pickUpDetail.MEMORIA .memoriaName, .announcementPopupMainte .pickUpDetail.MEMORIA .memoriaName {
  width: 100%;
  position: absolute;
  top: 50px;
  left: 0px;
  font-size: 26px;
}

.announcementPopup .pickUpDetail.MEMORIA .pickUpCard .pickUpCardImage, .announcementPopupMainte .pickUpDetail.MEMORIA .pickUpCard .pickUpCardImage {
  width: 185px;
  height: 100%;
}

.announcementPopup .pickUpDetail.MEMORIA .memoriaTypeName, .announcementPopupMainte .pickUpDetail.MEMORIA .memoriaTypeName {
  width: 150px;
  position: absolute;
  top: 10px;
  left: 58px;
}

.announcementPopup .pickUpDetail.MEMORIA.SKILL .memoriaTypeIcon, .announcementPopupMainte .pickUpDetail.MEMORIA.SKILL .memoriaTypeIcon {
  background: url("/magica/resource/image_web/page/memoria/memoria_pop_skill.png");
}

.announcementPopup .pickUpDetail.MEMORIA.SKILL .memoriaTypeName:before, .announcementPopupMainte .pickUpDetail.MEMORIA.SKILL .memoriaTypeName:before {
  color: #ef638b;
  content: "スキルタイプ";
}

.announcementPopup .pickUpDetail.MEMORIA.SKILL .description .common_dl dt, .announcementPopupMainte .pickUpDetail.MEMORIA.SKILL .description .common_dl dt {
  width: 120px;
}

.announcementPopup .pickUpDetail.MEMORIA.SKILL .description .common_dl dt:before, .announcementPopupMainte .pickUpDetail.MEMORIA.SKILL .description .common_dl dt:before {
  content: "スキル";
}

.announcementPopup .pickUpDetail.MEMORIA.ABILITY .memoriaTypeIcon, .announcementPopupMainte .pickUpDetail.MEMORIA.ABILITY .memoriaTypeIcon {
  background: url("/magica/resource/image_web/page/memoria/memoria_pop_ability.png");
}

.announcementPopup .pickUpDetail.MEMORIA.ABILITY .memoriaTypeName, .announcementPopupMainte .pickUpDetail.MEMORIA.ABILITY .memoriaTypeName {
  letter-spacing: -1px;
}

.announcementPopup .pickUpDetail.MEMORIA.ABILITY .memoriaTypeName:before, .announcementPopupMainte .pickUpDetail.MEMORIA.ABILITY .memoriaTypeName:before {
  color: #3a9abd;
  content: "アビリティタイプ";
}

.announcementPopup .pickUpDetail.MEMORIA.ABILITY .description .common_dl dt, .announcementPopupMainte .pickUpDetail.MEMORIA.ABILITY .description .common_dl dt {
  width: 120px;
}

.announcementPopup .pickUpDetail.MEMORIA.ABILITY .description .common_dl dt:before, .announcementPopupMainte .pickUpDetail.MEMORIA.ABILITY .description .common_dl dt:before {
  content: "アビリティ";
}

.announcementPopup .pickUpDetail.MEMORIA .rarity .stars, .announcementPopupMainte .pickUpDetail.MEMORIA .rarity .stars {
  width: 25px;
  height: 26px;
  background: url("/magica/resource/image_web/page/announce/announce_memoria_rarity.png");
  display: block;
}

.announcementPopup .pickUpDetail.MEMORIA .rarity.DEFAULT_1 .star2, .announcementPopup .pickUpDetail.MEMORIA .rarity.DEFAULT_1 .star3, .announcementPopup .pickUpDetail.MEMORIA .rarity.DEFAULT_1 .star4, .announcementPopup .pickUpDetail.MEMORIA .rarity.DEFAULT_1 .star5, .announcementPopupMainte .pickUpDetail.MEMORIA .rarity.DEFAULT_1 .star2, .announcementPopupMainte .pickUpDetail.MEMORIA .rarity.DEFAULT_1 .star3, .announcementPopupMainte .pickUpDetail.MEMORIA .rarity.DEFAULT_1 .star4, .announcementPopupMainte .pickUpDetail.MEMORIA .rarity.DEFAULT_1 .star5 {
  display: none;
}

.announcementPopup .pickUpDetail.MEMORIA .rarity.DEFAULT_2 .star3, .announcementPopup .pickUpDetail.MEMORIA .rarity.DEFAULT_2 .star4, .announcementPopup .pickUpDetail.MEMORIA .rarity.DEFAULT_2 .star5, .announcementPopupMainte .pickUpDetail.MEMORIA .rarity.DEFAULT_2 .star3, .announcementPopupMainte .pickUpDetail.MEMORIA .rarity.DEFAULT_2 .star4, .announcementPopupMainte .pickUpDetail.MEMORIA .rarity.DEFAULT_2 .star5 {
  display: none;
}

.announcementPopup .pickUpDetail.MEMORIA .rarity.DEFAULT_3 .star4, .announcementPopup .pickUpDetail.MEMORIA .rarity.DEFAULT_3 .star5, .announcementPopupMainte .pickUpDetail.MEMORIA .rarity.DEFAULT_3 .star4, .announcementPopupMainte .pickUpDetail.MEMORIA .rarity.DEFAULT_3 .star5 {
  display: none;
}

.announcementPopup .pickUpDetail.MEMORIA .rarity.DEFAULT_4 .star5, .announcementPopupMainte .pickUpDetail.MEMORIA .rarity.DEFAULT_4 .star5 {
  display: none;
}

.announcementPopup .pickUpDetail.MEMORIA .common_dl, .announcementPopupMainte .pickUpDetail.MEMORIA .common_dl {
  width: 100%;
  height: 25px;
  margin-bottom: 4px;
}

.announcementPopup .pickUpDetail.MEMORIA .common_dl dt, .announcementPopup .pickUpDetail.MEMORIA .common_dl dd, .announcementPopupMainte .pickUpDetail.MEMORIA .common_dl dt, .announcementPopupMainte .pickUpDetail.MEMORIA .common_dl dd {
  font-size: 18px;
  line-height: 25px;
}

.announcementPopup .pickUpDetail.MEMORIA .common_dl dt, .announcementPopupMainte .pickUpDetail.MEMORIA .common_dl dt {
  width: 120px;
}

.announcementPopup .pickUpDetail.MEMORIA .common_dl dd, .announcementPopupMainte .pickUpDetail.MEMORIA .common_dl dd {
  border: 0px;
}

.announcementPopup .pickUpDetail.MEMORIA .memoriaStatus, .announcementPopupMainte .pickUpDetail.MEMORIA .memoriaStatus {
  width: 100%;
  height: 87px;
  position: absolute;
  top: 104px;
  left: 0px;
}

.announcementPopup .pickUpDetail.MEMORIA .description, .announcementPopupMainte .pickUpDetail.MEMORIA .description {
  width: 100%;
  height: 90px;
  position: absolute;
  top: 200px;
  left: 0px;
}

.announcementPopup .pickUpDetail.MEMORIA .description .common_dl, .announcementPopupMainte .pickUpDetail.MEMORIA .description .common_dl {
  width: 100%;
  height: 25px;
}

.announcementPopup .pickUpDetail.MEMORIA .description .common_dl dt, .announcementPopup .pickUpDetail.MEMORIA .description .common_dl dd, .announcementPopupMainte .pickUpDetail.MEMORIA .description .common_dl dt, .announcementPopupMainte .pickUpDetail.MEMORIA .description .common_dl dd {
  font-size: 18px;
  line-height: 25px;
}

.announcementPopup .pickUpDetail.MEMORIA .description .common_dl dt, .announcementPopupMainte .pickUpDetail.MEMORIA .description .common_dl dt {
  width: 112px;
}

.announcementPopup .pickUpDetail.MEMORIA .description .common_dl dd, .announcementPopupMainte .pickUpDetail.MEMORIA .description .common_dl dd {
  border: 0px;
}

.announcementPopup .pickUpDetail.MEMORIA .description .memoriaDetail, .announcementPopupMainte .pickUpDetail.MEMORIA .description .memoriaDetail {
  height: 52px;
  margin-top: 6px;
  font-size: 18px;
  line-height: 24px;
}

/* helpPopup----------------------------------------------------------------- */
#HelpPopup {
  width: 948px;
  height: 430px;
  margin: 10px auto;
  padding: 10px 30px;
}

#HelpPopup .hiddenWrap {
  width: 100%;
  height: 100%;
  padding: 0px 15px;
  overflow: hidden;
}

#HelpPopup .hiddenWrap .scrollInner {
  width: 100%;
  height: auto;
  min-height: 100%;
  padding-top: 10px;
  overflow: hidden;
}

#HelpPopup .helpRows {
  width: 100%;
  padding: 0 10px;
}

#HelpPopup .helpRows .colLow {
  width: 100%;
  height: 62px;
  margin: 0 0 10px 5px;
  padding-left: 80px;
  display: inline-block;
  font-size: 20px;
  line-height: 60px;
  text-align: left;
  z-index: 10;
}

#HelpPopup .helpRows .colLow:before {
  width: 38px;
  height: 38px;
  background-color: #ffb8d1;
  position: absolute;
  top: 12px;
  left: 20px;
  color: #ffffff;
  line-height: 38px;
  text-align: center;
  content: "？";
  border-radius: 19px;
}

#HelpPopup .helpRows .panArrow {
  width: 40px;
  height: 40px;
  background-image: url("/magica/resource/image_web/page/collection/pan_down.png");
  background-size: 100% 100%;
  position: absolute;
  right: 10px;
  bottom: -webkit-calc(50% - 20px);
}

#HelpPopup .helpRows .panArrow.on {
  background-image: url("/magica/resource/image_web/page/collection/pan_up.png");
}

#HelpPopup .helpRows .colText {
  width: 100%;
  margin-bottom: 20px;
  padding: 10px 15px 10px;
  background-color: rgba(255, 255, 255, 0.5);
  display: none;
  font-size: 18px;
  text-align: left;
  z-index: 1;
}

#HelpPopup .helpRows .colText.open {
  display: block;
}

#HelpPopup .helpRows .colText .imageZoom {
  max-width: 100%;
}

/* sidemenu ----------------------------------------------------------------- */
#sideMenu {
  width: 115px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  pointer-events: none;
  z-index: 10000;
}

#sideMenu .noneDisp {
  display: none !important;
  pointer-events: none !important;
}

#sideMenu .gacha .globalBadge.freeRareGacha, #sideMenu .mission .globalBadge.freeRareGacha {
  width: 104px;
  height: 46px;
  background: url("/magica/resource/image_web/common/global/gacha_badge_c.png") left top no-repeat;
  display: block;
  position: absolute;
  top: -18px;
  right: -3px;
  pointer-events: none;
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}

#sideMenu .gacha .globalBadge, #sideMenu .mission .globalBadge {
  display: none;
}

#sideMenu .gacha .globalBadge.on, #sideMenu .mission .globalBadge.on {
  width: auto;
  min-width: 26px;
  height: 26px;
  padding: 0 3px;
  background-color: #d22d78;
  display: inline;
  position: absolute;
  top: 2px;
  right: 2px;
  color: #ffffff;
  font-size: 14px;
  line-height: 23px;
  text-align: center;
  border: 2px solid #ffffff;
  border-radius: 12px;
  text-shadow: none;
}

#sideMenu.anim #mypageBanner {
  -webkit-animation: common_sideMenuBg_open .45s ease .0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim #sideMenuBg {
  -webkit-animation: common_sideMenuBg_open .45s ease .0s 1 alternate;
  pointer-events: auto;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim #menuBtns {
  display: block !important;
}

#sideMenu.anim #menuBtns .defOpen {
  display: block !important;
  opacity: 1;
}

#sideMenu.anim #menuBtns .unit {
  -webkit-animation: common_menu_open .3s ease 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim #menuBtns .innocent {
  -webkit-animation: common_menu_open .3s ease 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim #menuBtns .team {
  -webkit-animation: common_menu_open .3s ease 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim #menuBtns .gacha {
  -webkit-animation: common_menu_open .3s ease 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim #menuBtns .mission {
  -webkit-animation: common_menu_open .3s ease 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim #menuBtns .shop,
#sideMenu.anim #menuBtns .shop2 {
  -webkit-animation: common_menu_open .3s ease 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim #sideBigBtns {
  display: block !important;
  pointer-events: auto;
}

#sideMenu.anim #sideBigBtns .defOpen {
  display: block !important;
  opacity: 1;
}

#sideMenu.anim #sideBigBtns .globalPatrolBtn {
  -webkit-animation: common_globalBig_open .3s ease 0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim #sideBigBtns .globalScene0Btn {
  -webkit-animation: common_globalBig_open .3s ease 0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim #sideBigBtns .globalQuestBtn {
  -webkit-animation: common_globalBig_open .3s ease .03s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim #sideBigBtns .globalBattleBtn {
  -webkit-animation: common_globalBig_open .3s ease .05s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim #sideBigBtns .globalRegularEventBtn {
  -webkit-animation: common_globalBig_open .3s ease .05s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim #sideBigBtns .campaignBadgeWrap {
  -webkit-animation: common_globalBig_open .3s ease .05s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim #sideBigBtns .campaignBanner {
  -webkit-animation: common_globalBig_open .3s ease .05s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim .homeBtn {
  -webkit-animation: common_globalBig_open .45s ease 0s 1 alternate;
  pointer-events: auto;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.anim .eventBanner {
  -webkit-animation: common_globalBig_open .45s ease 0s 1 alternate;
  pointer-events: auto;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #mypageBanner {
  -webkit-animation: common_sideMenuBg_close .45s ease .0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #sideMenuBg {
  -webkit-animation: common_sideMenuBg_close .45s ease .0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #menuBtns {
  display: block !important;
  pointer-events: none !important;
}

#sideMenu.close #menuBtns li {
  -webkit-transform: translateY(0px);
  opacity: 1;
  pointer-events: none !important;
}

#sideMenu.close #menuBtns .unit {
  -webkit-animation: common_menu_close .3s ease 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #menuBtns .innocent {
  -webkit-animation: common_menu_close .3s ease 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #menuBtns .team {
  -webkit-animation: common_menu_close .3s ease 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #menuBtns .gacha {
  -webkit-animation: common_menu_close .3s ease 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #menuBtns .mission {
  -webkit-animation: common_menu_close .3s ease 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #menuBtns .shop {
  -webkit-animation: common_menu_close .3s ease 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #sideBigBtns {
  display: block !important;
  pointer-events: none !important;
}

#sideMenu.close #sideBigBtns .globalBigBtn {
  -webkit-transform: translateY(0px);
  pointer-events: none !important;
  opacity: 1;
}

#sideMenu.close #sideBigBtns .globalPatrolBtn {
  -webkit-animation: common_globalBig_close .3s ease .1s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #sideBigBtns .globalScene0Btn {
  -webkit-animation: common_globalBig_close .3s ease .1s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #sideBigBtns .globalQuestBtn {
  -webkit-animation: common_globalBig_close .3s ease .05s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #sideBigBtns .globalBattleBtn {
  -webkit-animation: common_globalBig_close .3s ease 0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #sideBigBtns .globalRegularEventBtn {
  -webkit-animation: common_globalBig_close .3s ease 0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #sideBigBtns .campaignBadgeWrap {
  -webkit-animation: common_globalBig_close .3s ease 0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #sideBigBtns .eventBadgeWrap {
  -webkit-animation: common_globalBig_close .3s ease 0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close #sideBigBtns .eventBannerWrap {
  -webkit-animation: common_globalBig_close .3s ease 0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu.close .homeBtn {
  -webkit-animation: common_globalBig_close .45s ease .0s 1 alternate;
  pointer-events: none;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu #sideMenuBg {
  width: 800px;
  height: -webkit-calc(100% + 200px);
  background: -webkit-linear-gradient(left, rgba(84, 0, 74, 0) 0%, rgba(25, 15, 21, 0.9) 50%, rgba(25, 15, 21, 0.9) 100%);
  position: absolute;
  top: 0;
  right: -400px;
  opacity: 0;
}

#sideMenu #sideMenuBg:before {
  width: 400px;
  height: 576px;
  position: absolute;
  top: 0;
  right: 0;
  content: "";
}

#sideMenu span#menu, #sideMenu ul#menuBtns li {
  pointer-events: auto;
}

#sideMenu.anim #menu {
  width: 104px;
  height: 48px;
  background-image: url("/magica/resource/image_web/common/global/global_menu.png");
  background-repeat: no-repeat;
  background-size: contain;
}

#sideMenu #menu {
  width: 97px;
  height: 55px;
  background-image: url("/magica/resource/image_web/common/global/global_menu_off.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 11;
}

#sideMenu #menu.overlayOn:before {
  width: 97px;
  height: 55px;
  background-image: url("/magica/resource/image_web/common/global/menu_hover_btn.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  pointer-events: none;
  mix-blend-mode: overlay;
}

#sideMenu #menuBtns {
  width: 95px;
  height: 576px;
  display: none;
  position: absolute;
  top: -18px;
  right: 0;
  text-align: center;
}

#sideMenu #menuBtns li {
  width: 92px;
  height: 98px;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50px;
}

#sideMenu #menuBtns li div {
  width: 92px;
  height: 82px;
  position: absolute;
  top: 3px;
  right: 3px;
  border-radius: 46px;
}

#sideMenu #menuBtns li div.overlayOn:before {
  width: 92px;
  height: 82px;
  background: url("/magica/resource/image_web/common/global/global_menu_hover.png");
  background-size: contain;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  pointer-events: none;
  mix-blend-mode: overlay;
}

#sideMenu #menuBtns .unit {
  background-image: url("/magica/resource/image_web/common/global/update2/global_unit.png");
  background-size: contain;
  top: 57px;
  opacity: 0;
  z-index: 5;
}

#sideMenu #menuBtns .innocent {
  background-image: url("/magica/resource/image_web/common/global/update2/global_memoria.png");
  background-size: contain;
  top: calc(57px - -88px);
  opacity: 0;
  z-index: 6;
}

#sideMenu #menuBtns .team {
  background-image: url("/magica/resource/image_web/common/global/update2/global_team.png");
  background-size: contain;
  top: calc(57px - -88px*2);
  opacity: 0;
  z-index: 6;
}

#sideMenu #menuBtns .gacha {
  background-image: url("/magica/resource/image_web/common/global/update2/global_gacha.png");
  background-size: contain;
  top: calc(57px - -88px*3);
  opacity: 0;
  z-index: 7;
}

#sideMenu #menuBtns .mission {
  background-image: url("/magica/resource/image_web/common/global/update2/global_mission.png");
  background-size: contain;
  top: calc(57px - -88px*4);
  opacity: 0;
  z-index: 8;
}

#sideMenu #menuBtns .shop {
  background-image: url("/magica/resource/image_web/common/global/update2/global_shop.png");
  background-size: contain;
  top: calc(57px - -88px*5);
  opacity: 0;
  z-index: 9;
}

#sideMenu #menuBtns .shop2 {
  background-image: url("/magica/resource/image_web/common/global/update2/global_shop.png");
  background-size: contain;
  top: calc(57px - -88px*6);
  opacity: 0;
  z-index: 9;
}

#sideMenu #sideBigBtns {
  display: none;
}

#sideMenu #sideBigBtns .campaignBanner {
  width: 340px;
  height: 90px;
  position: absolute;
  top: 100px;
  right: 180px;
  opacity: 0;
  z-index: 100000;
}

#sideMenu #sideBigBtns .campaignBanner img {
  width: 100%;
  height: 100%;
}

#sideMenu #sideBigBtns .campaignBadgeWrap {
  width: 186px;
  height: auto;
  min-height: 66px;
  position: absolute;
  right: 90px;
  top: -webkit-calc(100% - 90px);
  pointer-events: none;
  opacity: 0;
  z-index: 10000;
}

#sideMenu #sideBigBtns .campaignBadgeWrap.ARENA {
  width: 186px;
  height: 88px;
  right: 183px;
  top: -webkit-calc(100% - 347px);
}

#sideMenu #sideBigBtns .campaignBadgeWrap.ARENA img {
  width: 170px;
  height: 80px;
}

#sideMenu #sideBigBtns .campaignBadgeWrap .campaignBadge {
  opacity: 0;
}

#sideMenu #sideBigBtns .campaignBadgeWrap .campaignBadge.on {
  -webkit-animation: common_globalBig_campaign_badge_on .5s ease 0s 1 alternate;
  opacity: 0;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu #sideBigBtns .campaignBadgeWrap .campaignBadge.off {
  -webkit-animation: common_globalBig_campaign_badge_off .5s ease 1.5s 1 alternate;
  opacity: 1;
  -webkit-animation-fill-mode: forwards;
}

#sideMenu #sideBigBtns .campaignBadgeWrap .campaignBadge.only {
  opacity: 1;
}

#sideMenu #sideBigBtns .campaignBadgeWrap .campaignBadge.yell {
  width: 186px;
  height: 66px;
  background: url("/magica/resource/image_web/campaign/point_up/common/yell_all_2000.png") left top no-repeat;
  background-size: 186px 66px;
  position: absolute;
  top: 0;
  right: 0;
}

#sideMenu #sideBigBtns .campaignBadgeWrap .campaignBadge.expp {
  width: 186px;
  height: 88px;
  background: url("/magica/resource/image_web/campaign/point_up/common/expp_all_2000.png") left top no-repeat;
  background-size: 186px 88px;
  position: absolute;
  top: 0;
  right: 0;
}

#sideMenu #sideBigBtns .campaignBadgeWrap .campaignBadge.halfAp, #sideMenu #sideBigBtns .campaignBadgeWrap .campaignBadge.dropUp {
  width: 186px;
  height: 88px;
  position: absolute;
  top: 0;
  right: 0;
}

#sideMenu #sideBigBtns .campaignBadgeWrap .campaignBadge.dropUp {
  width: 186px;
  height: 86px;
  background: url("/magica/resource/image_web/campaign/drop_up/common/global_icon.png") left top no-repeat;
  background-size: 186px 68px;
  position: absolute;
  top: 0;
  right: 0;
}

#sideMenu #sideBigBtns .eventBadgeWrap {
  width: 128px;
  height: auto;
  position: absolute;
  right: 92px;
  top: -webkit-calc(100% - 270px);
  z-index: 10000;
}

#sideMenu #sideBigBtns .eventBadgeWrap.arenaranking, #sideMenu #sideBigBtns .eventBadgeWrap.arenarankmatch {
  right: 282px;
  top: -webkit-calc(100% - 360px);
  width: 90px;
}

#sideMenu #sideBigBtns .eventBadgeWrap.arenaranking .endAtText, #sideMenu #sideBigBtns .eventBadgeWrap.arenarankmatch .endAtText {
  display: none;
}

#sideMenu #sideBigBtns .eventBadgeWrap.arenaranking img, #sideMenu #sideBigBtns .eventBadgeWrap.arenarankmatch img {
  width: 90px;
}

#sideMenu #sideBigBtns .eventBadgeWrap.touch {
  -webkit-transform: scale(0.95) !important;
}

#sideMenu #sideBigBtns .eventBadgeWrap .endAtText {
  width: 94px;
  height: 26px;
  position: absolute;
  bottom: 20px;
  left: 17px;
  line-height: 26px;
  text-align: center;
  z-index: 100;
}

#sideMenu #sideBigBtns .eventBadgeWrap.regularevent {
  right: 257px;
  top: -webkit-calc(100% - 172px);
  width: 110px;
}

#sideMenu #sideBigBtns .eventBadgeWrap.regularevent .endAtText {
  width: 118px;
  left: 5px;
  bottom: 8px;
}

#sideMenu #sideBigBtns .eventBadgeWrap.patrol {
  right: 94px;
  top: -webkit-calc(100% - 374px);
  width: 140px;
}

#sideMenu #sideBigBtns .eventBadgeWrap.patrol .endAtText {
  width: 118px;
  left: 12px;
  bottom: 21px;
  font-size: 14px;
}

#sideMenu #sideBigBtns .globalBigBtn {
  width: 176px;
  height: 191px;
  background-repeat: no-repeat;
  position: absolute;
  opacity: 0;
  border-radius: 90px;
}

#sideMenu #sideBigBtns .globalBigBtn div {
  width: 100px;
  height: 110px;
  position: absolute;
  top: 3px;
  left: 2px;
  border-radius: 78px;
}

#sideMenu #sideBigBtns .globalBigBtn div.overlayOn:before {
  width: 100px;
  height: 110px;
  background: url("/magica/resource/image_web/common/global/global_bigBtn_hover.png");
  background-position: 6px 0;
  background-size: contain;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  pointer-events: none;
  mix-blend-mode: overlay;
}

#sideMenu #sideBigBtns .globalBigBtn.globalPatrolBtn {
  width: 100px;
  height: 110px;
  background-image: url("/magica/resource/image_web/common/global/global_patrol_a.png");
  background-size: contain;
  top: -webkit-calc(100% - 350px);
  right: 114px;
  z-index: 20;
}

#sideMenu #sideBigBtns .globalBigBtn.globalBattleBtn {
  width: 100px;
  height: 110px;
  background-image: url("/magica/resource/image_web/common/global/global_battle.png");
  background-size: contain;
  top: -webkit-calc(100% - 320px);
  right: 214px;
  z-index: 20;
}

#sideMenu #sideBigBtns .globalBigBtn.globalBattleBtn div {
  width: 100px;
  height: 110px;
  position: absolute;
  top: 6px;
  left: 5px;
}

#sideMenu #sideBigBtns .globalBigBtn.globalBattleBtn div.overlayOn:before {
  width: 100px;
  height: 110px;
  background: url("/magica/resource/image_web/common/global/global_bigBtn_hover.png");
  background-position: 6px 0;
  background-size: contain;
}

#sideMenu #sideBigBtns .globalBigBtn.globalBattleBtn.limited:before {
  width: 90px;
  height: 40px;
  background: url("/magica/resource/image_web/common/closed/condition_02.png");
  display: block;
  position: absolute;
  top: 24px;
  right: 23px;
  content: "";
}

#sideMenu #sideBigBtns .globalBigBtn.globalBattleBtn.campaignSumo:before {
  width: 98px;
  height: 116px;
  background: url("/magica/resource/image_web/campaign/sumo/event_pop.png");
  display: block;
  position: absolute;
  right: 84px;
  top: -24px;
  content: "";
  background-size: contain;
}

#sideMenu #sideBigBtns .globalBigBtn.globalRegularEventBtn {
  width: 100px;
  height: 110px;
  background-image: url("/magica/resource/image_web/common/global/global_nothing.png");
  background-size: contain;
  top: -webkit-calc(100% - 240px);
  right: 282px;
  z-index: 20;
}

#sideMenu #sideBigBtns .globalBigBtn.globalRegularEventBtn.groupBattle.open {
  background-image: url("/magica/resource/image_web/common/global/global_kimochi_a.png");
}

#sideMenu #sideBigBtns .globalBigBtn.globalRegularEventBtn.groupBattle.close {
  background-image: url("/magica/resource/image_web/common/global/global_kimochi_disable.png");
}

#sideMenu #sideBigBtns .globalBigBtn.globalRegularEventBtn.extermination {
  background-image: url("/magica/resource/image_web/common/global/global_extermination.png");
}

#sideMenu #sideBigBtns .globalBigBtn.globalRegularEventBtn.accomplish {
  background-image: url("/magica/resource/image_web/common/global/global_accomplish.png");
}

#sideMenu #sideBigBtns .globalBigBtn.globalRegularEventBtn.off:before {
  width: 172px;
  height: 172px;
  background: url("/magica/resource/image_web/common/global/global_bigBtn_hover.png");
  background-position: 6px 0;
  background-size: contain;
}

#sideMenu #sideBigBtns .globalBigBtn.globalQuestBtn {
  width: 150px;
  height: 164px;
  background-image: url("/magica/resource/image_web/common/global/global_quest.png");
  background-size: contain;
  top: -webkit-calc(100% - 189px);
  right: 116px;
  z-index: 20;
}

#sideMenu #sideBigBtns .globalBigBtn.globalQuestBtn div {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 6px;
  left: 5px;
}

#sideMenu #sideBigBtns .globalBigBtn.globalQuestBtn div.overlayOn:before {
  width: 150px;
  height: 150px;
  background: url("/magica/resource/image_web/common/global/global_bigBtn_hover.png");
  background-position: 6px 0;
  background-size: contain;
}

#sideMenu #sideBigBtns .globalBigBtn.globalScene0Btn {
  width: 100px;
  height: 110px;
  background-image: url("/magica/resource/image_web/common/global/global_scene0.png");
  background-size: contain;
  top: -webkit-calc(100% - 136px);
  right: 310px;
  z-index: 20;
}

#sideMenu #sideBigBtns .globalBigBtn.globalScene0Btn div.btnOverlay {
  z-index: 21;
}

#sideMenu #sideBigBtns .globalBigBtn.globalScene0Btn .balloon {
  display: none;
  background: url("/magica/resource/image_web/common/global/event_pop.png") left top no-repeat;
  width: 122px;
  height: 52px;
  position: absolute;
  top: 72px;
  left: 14px;
}

#sideMenu #sideBigBtns .globalBigBtn.globalScene0Btn .balloon .text {
  display: inline-block;
  text-align: center;
  width: 122px;
  margin: 16px 0 0 0;
}

#sideMenu .homeBtn {
  width: 102px;
  height: 112px;
  background-image: url("/magica/resource/image_web/common/global/global_home.png");
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  position: absolute;
  top: 5px;
  left: -81px;
  opacity: 0;
  z-index: 10;
}

#sideMenu .homeBtn.overlayOn:before {
  width: 80px;
  height: 88px;
  background-image: url("/magica/resource/image_web/common/global/global_menu_hover.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  display: block;
  position: absolute;
  top: 16px;
  left: 12px;
  content: "";
  pointer-events: none;
  mix-blend-mode: overlay;
}

#sideMenuCurtain {
  width: 1024px;
  height: 576px;
  background-color: #000000;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 999;
}

#sideMenuCurtain.show {
  display: block !important;
  pointer-events: auto !important;
  opacity: .4 !important;
}

@-webkit-keyframes common_banner_animation {
  0% {
    -webkit-transform: translateX(340px);
    opacity: 1;
  }
  10%, 90% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-340px);
    opacity: 1;
  }
}

@-webkit-keyframes common_banner_fadeIn {
  0% {
    -webkit-transform: translateX(340px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

@-webkit-keyframes common_banner_fadeInRevers {
  0% {
    -webkit-transform: translateX(-340px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

@-webkit-keyframes common_banner_stop {
  0% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
}

@-webkit-keyframes common_banner_fadeOut {
  0% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-340px);
    opacity: 1;
  }
}

@-webkit-keyframes common_banner_fadeOutRevers {
  0% {
    -webkit-transform: translateX(0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(340px);
    opacity: 1;
  }
}

@-webkit-keyframes common_menu_open {
  0% {
    -webkit-transform: translate3d(100px, 0, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes common_menu_close {
  0% {
    -webkit-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(100px, 0, 0);
    opacity: 0;
  }
}

@-webkit-keyframes common_globalBig_open {
  0% {
    -webkit-transform: translate3d(0, 100px, 0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translate3d(0, 20px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0px, 0);
    opacity: 1;
  }
}

@-webkit-keyframes common_globalBig_campaign_badge_on {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes common_globalBig_campaign_badge_off {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 0;
  }
}

@-webkit-keyframes common_globalBig_close {
  0% {
    -webkit-transform: translate3d(0, 0px, 0);
    opacity: 1;
  }
  80% {
    -webkit-transform: translate3d(0, 20px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 100px, 0);
    opacity: 0;
  }
}

@-webkit-keyframes common_sideMenuBg_open {
  0% {
    -webkit-transform: translate3d(400px, 0, 0);
    opacity: 0;
  }
  20% {
    -webkit-transform: translate3d(40px, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes common_sideMenuBg_close {
  0% {
    -webkit-transform: translate3d(0px, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(400px, 0, 0);
    opacity: 0;
  }
}

/* margin ------------------------------------------------------------------- */
.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb25 {
  margin-bottom: 25px;
}

/* btn ---------------------------------------------------------------------- */
@-webkit-keyframes btn_tap {
  0% {
    -webkit-transform: translateZ(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0);
    opacity: 1;
  }
}

.touch {
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
      transform: scale(0.95);
}

.touch:not(.off) .b_screen {
  opacity: 1 !important;
}

.b_screen {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4) !important;
  display: block !important;
  position: absolute !important;
  top: 0;
  left: 0;
  pointer-events: none !important;
  opacity: 0 !important;
  -webkit-border-radius: 10px;
  z-index: 1000000 !important;
}

.btn {
  min-width: 190px;
  height: 64px;
  padding: 0 35px;
  display: inline-block;
  position: relative;
  font-size: 20px;
  line-height: 64px;
  text-align: center;
}

.btn:before, .btn:after {
  width: 35px;
  height: 64px;
  display: block;
  position: absolute;
  top: 0;
  content: "";
}

.btn:before {
  left: 0;
}

.btn:after {
  right: 0;
}

.btn.off {
  -webkit-filter: grayscale(100%) brightness(70%);
  filter: grayscale(100%) brightness(70%);
}

.btn span {
  width: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.b_pink {
  background: url("/magica/resource/image_web/common/btn/btn_pink_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 62px) 64px;
}

.b_pink, .b_pink span {
  color: #ffffff;
  text-shadow: -1px -1px 2px #ff5e7c, 1px -1px 2px #ff5e7c, -1px 1px 2px #ff5e7c, 1px 1px 2px #ff5e7c, -1px -1px 2px #ff5e7c, 1px -1px 2px #ff5e7c, -1px 1px 2px #ff5e7c, 1px 1px 2px #ff5e7c;
}

.b_pink:before {
  background: url("/magica/resource/image_web/common/btn/btn_pink_l.png") left top no-repeat;
}

.b_pink:after {
  background: url("/magica/resource/image_web/common/btn/btn_pink_r.png") left top no-repeat;
}

.b_white {
  background: url("/magica/resource/image_web/common/btn/btn_white_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 62px) 64px;
}

.b_white, .b_white span {
  color: #a47122;
}

.b_white:before {
  background: url("/magica/resource/image_web/common/btn/btn_white_l.png") left top no-repeat;
}

.b_white:after {
  background: url("/magica/resource/image_web/common/btn/btn_white_r.png") left top no-repeat;
}

.b_yellow {
  background: url("/magica/resource/image_web/common/btn/btn_yellow_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 62px) 64px;
}

.b_yellow, .b_yellow span {
  color: #a47122;
}

.b_yellow:before {
  background: url("/magica/resource/image_web/common/btn/btn_yellow_l.png") left top no-repeat;
}

.b_yellow:after {
  background: url("/magica/resource/image_web/common/btn/btn_yellow_r.png") left top no-repeat;
}

.b_pale {
  background: url("/magica/resource/image_web/common/btn/btn_pale_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 62px) 64px;
}

.b_pale, .b_pale span {
  color: #ffffff;
  text-shadow: -1px -1px 2px #fc8c8c, 1px -1px 2px #fc8c8c, -1px 1px 2px #fc8c8c, 1px 1px 2px #fc8c8c, -1px -1px 2px #fc8c8c, 1px -1px 2px #fc8c8c, -1px 1px 2px #fc8c8c, 1px 1px 2px #fc8c8c;
}

.b_pale:before {
  background: url("/magica/resource/image_web/common/btn/btn_pale_l.png") left top no-repeat;
}

.b_pale:after {
  background: url("/magica/resource/image_web/common/btn/btn_pale_r.png") left top no-repeat;
}

.b_purple {
  background: url("/magica/resource/image_web/common/btn/btn_purple_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 62px) 64px;
}

.b_purple, .b_purple span {
  color: #ffffff;
  text-shadow: -1px -1px 2px #915bda, 1px -1px 2px #915bda, -1px 1px 2px #915bda, 1px 1px 2px #915bda, -1px -1px 2px #915bda, 1px -1px 2px #915bda, -1px 1px 2px #915bda, 1px 1px 2px #915bda;
}

.b_purple:before {
  background: url("/magica/resource/image_web/common/btn/btn_purple_l.png") left top no-repeat;
}

.b_purple:after {
  background: url("/magica/resource/image_web/common/btn/btn_purple_r.png") left top no-repeat;
}

.b_blue {
  background: url("/magica/resource/image_web/common/btn/btn_blue_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 62px) 64px;
}

.b_blue, .b_blue span {
  color: #ffffff;
  text-shadow: -1px -1px 2px #0e91ce, 1px -1px 2px #0e91ce, -1px 1px 2px #0e91ce, 1px 1px 2px #0e91ce, -1px -1px 2px #0e91ce, 1px -1px 2px #0e91ce, -1px 1px 2px #0e91ce, 1px 1px 2px #0e91ce;
}

.b_blue:before {
  background: url("/magica/resource/image_web/common/btn/btn_blue_l.png") left top no-repeat;
}

.b_blue:after {
  background: url("/magica/resource/image_web/common/btn/btn_blue_r.png") left top no-repeat;
}

.b_green {
  background: url("/magica/resource/image_web/common/btn/btn_green_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 62px) 64px;
}

.b_green, .b_green span {
  color: #ffffff;
  text-shadow: -1px -1px 2px #0aa994, 1px -1px 2px #0aa994, -1px 1px 2px #0aa994, 1px 1px 2px #0aa994, -1px -1px 2px #0aa994, 1px -1px 2px #0aa994, -1px 1px 2px #0aa994, 1px 1px 2px #0aa994;
}

.b_green:before {
  background: url("/magica/resource/image_web/common/btn/btn_green_l.png") left top no-repeat;
}

.b_green:after {
  background: url("/magica/resource/image_web/common/btn/btn_green_r.png") left top no-repeat;
}

.b_puellaHistoria {
  background: url("/magica/resource/image_web/page/quest/puellaHistoria/top/btn_turquoise_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 62px) 64px;
}

.b_puellaHistoria, .b_puellaHistoria span {
  color: #ffffff;
  text-shadow: -1px -1px 2px #008cc9, 1px -1px 2px #008cc9, -1px 1px 2px #008cc9, 1px 1px 2px #008cc9, -1px -1px 2px #008cc9, 1px -1px 2px #008cc9, -1px 1px 2px #008cc9, 1px 1px 2px #008cc9;
}

.b_puellaHistoria:before {
  background: url("/magica/resource/image_web/page/quest/puellaHistoria/top/btn_turquoise_l.png") left top no-repeat;
}

.b_puellaHistoria:after {
  background: url("/magica/resource/image_web/page/quest/puellaHistoria/top/btn_turquoise_r.png") left top no-repeat;
}

.b_scene0 {
  background: url("/magica/resource/image_web/page/quest/scene0/common/btn_green_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 46px) 52px;
}

.b_scene0.btn {
  min-width: 158px;
  height: 52px;
  line-height: 48px;
  font-size: 120%;
}

.b_scene0, .b_scene0 span {
  color: #ffffff;
  text-shadow: -1px -1px 2px #4cc002, 1px -1px 2px #4cc002, -1px 1px 2px #4cc002, 1px 1px 2px #4cc002, -1px -1px 2px #4cc002, 1px -1px 2px #4cc002, -1px 1px 2px #4cc002, 1px 1px 2px #4cc002;
}

.b_scene0:before, .b_scene0:after {
  width: 30px;
  height: 52px;
}

.b_scene0:before {
  background: url("/magica/resource/image_web/page/quest/scene0/common/btn_green_l.png") left top no-repeat;
  background-size: cover;
}

.b_scene0:after {
  background: url("/magica/resource/image_web/page/quest/scene0/common/btn_green_r.png") left top no-repeat;
  background-size: cover;
}

.b_scene0_l {
  background: url("/magica/resource/image_web/page/quest/scene0/common/btn_green_c_a.png") center top no-repeat;
  background-size: -webkit-calc(100% - 62px) 64px;
}

.b_scene0_l, .b_scene0_l span {
  color: #ffffff;
  text-shadow: -1px -1px 2px #4cc002, 1px -1px 2px #4cc002, -1px 1px 2px #4cc002, 1px 1px 2px #4cc002, -1px -1px 2px #4cc002, 1px -1px 2px #4cc002, -1px 1px 2px #4cc002, 1px 1px 2px #4cc002;
}

.b_scene0_l:before {
  background: url("/magica/resource/image_web/page/quest/scene0/common/btn_green_l_a.png") left top no-repeat;
  background-size: cover;
}

.b_scene0_l:after {
  background: url("/magica/resource/image_web/page/quest/scene0/common/btn_green_r_a.png") left top no-repeat;
  background-size: cover;
}

.mb_white, .mb_pink {
  display: inline-block;
  position: relative;
  text-align: center;
  border-width: 12px;
  border-style: solid;
}

.mb_white.selected, .mb_pink.selected {
  background-color: rgba(255, 255, 255, 0.6);
  color: #ff5776;
  -o-border-image: url("/magica/resource/image_web/common/btn/btn_m_selected.png") 12 stretch;
     border-image: url("/magica/resource/image_web/common/btn/btn_m_selected.png") 12 fill stretch;
  text-shadow: 0 0;
}

.mb_white.off, .mb_pink.off {
  background-color: rgba(0, 0, 0, 0.255);
  pointer-events: none;
  -webkit-filter: brightness(75%);
  filter: brightness(75%);
}

.mb_white .b_screen, .mb_pink .b_screen {
  width: -webkit-calc(100% + 22px);
  height: -webkit-calc(100% + 22px);
  position: absolute;
  top: -12px;
  left: -12px;
}

.mb_white {
  background-color: rgba(255, 255, 255, 0.8);
  color: #a47122;
  border-radius: 12px;
  -o-border-image: url("/magica/resource/image_web/common/btn/btn_m_white.png") 12 stretch;
     border-image: url("/magica/resource/image_web/common/btn/btn_m_white.png") 12 fill stretch;
}

.mb_pink {
  background-color: rgba(255, 94, 124, 0.4);
  color: #ffffff;
  border-radius: 12px;
  -o-border-image: url("/magica/resource/image_web/common/btn/btn_m_pink.png") 12 stretch;
     border-image: url("/magica/resource/image_web/common/btn/btn_m_pink.png") 12 fill stretch;
  text-shadow: -1px -1px 2px #ff5e7c, 1px -1px 2px #ff5e7c, -1px 1px 2px #ff5e7c, 1px 1px 2px #ff5e7c, -1px -1px 2px #ff5e7c, 1px -1px 2px #ff5e7c, -1px 1px 2px #ff5e7c, 1px 1px 2px #ff5e7c;
}

.sb_gold_01 {
  min-width: 94px;
  height: 34px;
  padding: 0 16px;
  background: url("/magica/resource/image_web/common/btn/btn_s_gold_01_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 30px) 34px;
  display: inline-block;
  position: relative;
  color: #a47122;
  font-size: 14px;
  line-height: 34px;
  text-align: center;
}

.sb_gold_01:before, .sb_gold_01:after {
  width: 16px;
  height: 34px;
  display: block;
  position: absolute;
  top: 0;
  content: "";
}

.sb_gold_01:before {
  background: url("/magica/resource/image_web/common/btn/btn_s_gold_01_l.png") left top no-repeat;
  left: 0;
}

.sb_gold_01:after {
  background: url("/magica/resource/image_web/common/btn/btn_s_gold_01_r.png") left top no-repeat;
  right: 0;
}

.sb_gold_02 {
  min-width: 94px;
  height: 34px;
  padding: 0 10px;
  background: url("/magica/resource/image_web/common/btn/btn_s_gold_02_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 18px) 34px;
  display: inline-block;
  position: relative;
  color: #a47122;
  font-size: 14px;
  line-height: 34px;
  text-align: center;
}

.sb_gold_02:before, .sb_gold_02:after {
  width: 10px;
  height: 34px;
  display: block;
  position: absolute;
  top: 0;
  content: "";
}

.sb_gold_02:before {
  background: url("/magica/resource/image_web/common/btn/btn_s_gold_02_l.png") left top no-repeat;
  left: 0;
}

.sb_gold_02:after {
  background: url("/magica/resource/image_web/common/btn/btn_s_gold_02_r.png") left top no-repeat;
  right: 0;
}

.sb_gold_02.on, .sb_gold_02.filterOn {
  background: url("/magica/resource/image_web/common/btn/btn_s_gold_03_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 18px) 34px;
  color: #eb2850;
}

.sb_gold_02.on:before, .sb_gold_02.filterOn:before {
  background: url("/magica/resource/image_web/common/btn/btn_s_gold_03_l.png") left top no-repeat;
  left: 0;
}

.sb_gold_02.on:after, .sb_gold_02.filterOn:after {
  background: url("/magica/resource/image_web/common/btn/btn_s_gold_03_r.png") left top no-repeat;
  right: 0;
}

.sb_gold_03 {
  min-width: 94px;
  height: 34px;
  padding: 0 10px;
  background: url("/magica/resource/image_web/common/btn/btn_s_gold_03_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 18px) 34px;
  display: inline-block;
  position: relative;
  color: #eb2850;
  font-size: 14px;
  line-height: 34px;
  text-align: center;
}

.sb_gold_03:before, .sb_gold_03:after {
  width: 10px;
  height: 34px;
  display: block;
  position: absolute;
  top: 0;
  content: "";
}

.sb_gold_03:before {
  background: url("/magica/resource/image_web/common/btn/btn_s_gold_03_l.png") left top no-repeat;
  left: 0;
}

.sb_gold_03:after {
  background: url("/magica/resource/image_web/common/btn/btn_s_gold_03_r.png") left top no-repeat;
  right: 0;
}

.sb_pink {
  min-width: 94px;
  height: 34px;
  padding: 0 10px;
  background: url("/magica/resource/image_web/common/btn/btn_s_pink_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 18px) 34px;
  display: inline-block;
  position: relative;
  color: #fc8c8c;
  font-size: 14px;
  line-height: 34px;
  text-align: center;
}

.sb_pink:before, .sb_pink:after {
  width: 10px;
  height: 34px;
  display: block;
  position: absolute;
  top: 0;
  content: "";
}

.sb_pink:before {
  background: url("/magica/resource/image_web/common/btn/btn_s_pink_l.png") left top no-repeat;
  left: 0;
}

.sb_pink:after {
  background: url("/magica/resource/image_web/common/btn/btn_s_pink_r.png") left top no-repeat;
  right: 0;
}

.sb_pink01 {
  min-width: 106px;
  height: 34px;
  padding: 0 18px;
  background: url("/magica/resource/image_web/common/btn/btn_s_pink_01_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 18px) 34px;
  display: inline-block;
  position: relative;
  color: #FFF;
  text-shadow: -1px -1px 2px #ff5e7c, 1px -1px 2px #ff5e7c, -1px 1px 2px #ff5e7c, 1px 1px 2px #ff5e7c, -1px -1px 2px #ff5e7c, 1px -1px 2px #ff5e7c, -1px 1px 2px #ff5e7c, 1px 1px 2px #ff5e7c;
  font-size: 14px;
  line-height: 34px;
  text-align: center;
}

.sb_pink01:before, .sb_pink01:after {
  width: 16px;
  height: 34px;
  display: block;
  position: absolute;
  top: 0;
  content: "";
}

.sb_pink01:before {
  background: url("/magica/resource/image_web/common/btn/btn_s_pink_01_l.png") left top no-repeat;
  left: 0;
}

.sb_pink01:after {
  background: url("/magica/resource/image_web/common/btn/btn_s_pink_01_r.png") left top no-repeat;
  right: 0;
}

.sb_pink01.off {
  pointer-events: none;
  -webkit-filter: brightness(75%);
  filter: brightness(75%);
}

.common_tab li {
  min-width: 176px;
  height: 60px;
  padding: 0 10px;
  position: relative;
  font-size: 18px;
  line-height: 60px;
  text-align: center;
}

.common_tab li.touch {
  -webkit-filter: brightness(120%);
}

.common_tab li:before, .common_tab li:after {
  width: 32px;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  content: "";
}

.common_tab li:before {
  left: 0;
}

.common_tab li:after {
  right: 0;
}

.common_tab li img {
  width: 36px;
  margin: -4px 0 0;
  -webkit-filter: drop-shadow(0 0 2px #b07422) drop-shadow(0 0 2px #b07422) drop-shadow(0 0 4px #b07422);
}

.common_tab li span {
  width: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  color: #b07422;
  z-index: 100;
}

.common_tab li .b_screen {
  -webkit-border-radius: 100px;
}

.common_tab.t_pink li {
  background: url("/magica/resource/image_web/common/btn/tab_pink_off_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 62px) 100%;
  color: #ffffff;
  text-shadow: -1px -1px 2px #ff5e7c, 1px -1px 2px #ff5e7c, -1px 1px 2px #ff5e7c, 1px 1px 2px #ff5e7c, -1px -1px 2px #ff5e7c, 1px -1px 2px #ff5e7c, -1px 1px 2px #ff5e7c, 1px 1px 2px #ff5e7c;
}

.common_tab.t_pink li:before {
  background: url("/magica/resource/image_web/common/btn/tab_pink_off_l.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_pink li:after {
  background: url("/magica/resource/image_web/common/btn/tab_pink_off_r.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_pink li span {
  color: #ffffff;
}

.common_tab.t_pink li.current {
  background: url("/magica/resource/image_web/common/btn/tab_pink_on_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 64px) 100%;
  color: #ff5e7c;
  text-shadow: 0 0;
}

.common_tab.t_pink li.current:before {
  background: url("/magica/resource/image_web/common/btn/tab_pink_on_l.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_pink li.current:after {
  background: url("/magica/resource/image_web/common/btn/tab_pink_on_r.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_pink li.current span {
  color: #ff5e7c;
}

.common_tab.t_gold li {
  background: url("/magica/resource/image_web/common/btn/tab_gold_off_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 62px) 100%;
  color: #ffffff;
  text-shadow: -1px -1px 2px #b07422, 1px -1px 2px #b07422, -1px 1px 2px #b07422, 1px 1px 2px #b07422, -1px -1px 2px #b07422, 1px -1px 2px #b07422, -1px 1px 2px #b07422, 1px 1px 2px #b07422;
}

.common_tab.t_gold li:before {
  background: url("/magica/resource/image_web/common/btn/tab_gold_off_l.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_gold li:after {
  background: url("/magica/resource/image_web/common/btn/tab_gold_off_r.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_gold li span {
  color: #ffffff;
}

.common_tab.t_gold li.current {
  background: url("/magica/resource/image_web/common/btn/tab_gold_on_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 62px) 100%;
  color: #b07422;
  text-shadow: 0 0;
}

.common_tab.t_gold li.current:before {
  background: url("/magica/resource/image_web/common/btn/tab_gold_on_l.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_gold li.current:after {
  background: url("/magica/resource/image_web/common/btn/tab_gold_on_r.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_gold li.current span {
  color: #b07422;
}

.common_tab.t_gold.ml_tab li {
  min-width: 176px;
  height: 74px;
  padding: 0 10px;
  background: url("/magica/resource/image_web/common/btn/tab_gold_off_b_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 82px) 100%;
  position: relative;
  color: #ffffff;
  font-size: 18px;
  line-height: 74px;
  text-align: center;
  text-shadow: -1px -1px 2px #b07422, 1px -1px 2px #b07422, -1px 1px 2px #b07422, 1px 1px 2px #b07422, -1px -1px 2px #b07422, 1px -1px 2px #b07422, -1px 1px 2px #b07422, 1px 1px 2px #b07422;
}

.common_tab.t_gold.ml_tab li:before, .common_tab.t_gold.ml_tab li:after {
  width: 42px;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  content: "";
}

.common_tab.t_gold.ml_tab li:before {
  background: url("/magica/resource/image_web/common/btn/tab_gold_off_b_l.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_gold.ml_tab li:after {
  background: url("/magica/resource/image_web/common/btn/tab_gold_off_b_r.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_gold.ml_tab li span {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #ffffff;
  line-height: 20px;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.common_tab.t_gold.ml_tab li.current {
  background: url("/magica/resource/image_web/common/btn/tab_gold_on_b_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 82px) 100%;
  color: #b07422;
  text-shadow: 0 0;
}

.common_tab.t_gold.ml_tab li.current:before {
  background: url("/magica/resource/image_web/common/btn/tab_gold_on_b_l.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_gold.ml_tab li.current:after {
  background: url("/magica/resource/image_web/common/btn/tab_gold_on_b_r.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_gold.ml_tab li.current span {
  color: #b07422;
}

.common_tab.t_green.ml_tab li {
  min-width: 176px;
  height: 74px;
  padding: 0 10px;
  background: url("/magica/resource/image_web/common/btn/tab_green_off_b_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 82px) 100%;
  position: relative;
  color: #ffffff;
  font-size: 18px;
  line-height: 74px;
  text-align: center;
  text-shadow: -1px -1px 2px #0aa994, 1px -1px 2px #0aa994, -1px 1px 2px #0aa994, 1px 1px 2px #0aa994, -1px -1px 2px #0aa994, 1px -1px 2px #0aa994, -1px 1px 2px #0aa994, 1px 1px 2px #0aa994;
}

.common_tab.t_green.ml_tab li:before, .common_tab.t_green.ml_tab li:after {
  width: 42px;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  content: "";
}

.common_tab.t_green.ml_tab li:before {
  background: url("/magica/resource/image_web/common/btn/tab_green_off_b_l.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_green.ml_tab li:after {
  background: url("/magica/resource/image_web/common/btn/tab_green_off_b_r.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_green.ml_tab li span {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #ffffff;
  line-height: 20px;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.common_tab.t_green.ml_tab li.current {
  background: url("/magica/resource/image_web/common/btn/tab_green_on_b_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 82px) 100%;
  color: #0aa994;
  text-shadow: 0 0;
}

.common_tab.t_green.ml_tab li.current:before {
  background: url("/magica/resource/image_web/common/btn/tab_green_on_b_l.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_green.ml_tab li.current:after {
  background: url("/magica/resource/image_web/common/btn/tab_green_on_b_r.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab.t_green.ml_tab li.current span {
  color: #0aa994;
}

.common_tab li:before, .common_tab li:after {
  background-size: 100% 100%;
}

.common_tab_s li {
  min-width: 90px;
  height: 35px;
  padding: 0 5px;
  position: relative;
  font-size: 14.5px;
  line-height: 35px;
  text-align: center;
}

.common_tab_s li.touch {
  -webkit-filter: brightness(120%);
}

.common_tab_s li:before, .common_tab_s li:after {
  width: 20px;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  content: "";
}

.common_tab_s li:before {
  left: 0;
}

.common_tab_s li:after {
  right: 0;
}

.common_tab_s li span {
  width: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  color: #b07422;
  z-index: 100;
}

.common_tab_s li .b_screen {
  -webkit-border-radius: 100px;
}

.common_tab_s.t_gold li {
  background: url("/magica/resource/image_web/common/btn/tab_s_gold_off_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 40px) 100%;
  color: #ffffff;
  text-shadow: -1px -1px 2px #b07422, 1px -1px 2px #b07422, -1px 1px 2px #b07422, 1px 1px 2px #b07422, -1px -1px 2px #b07422, 1px -1px 2px #b07422, -1px 1px 2px #b07422, 1px 1px 2px #b07422;
}

.common_tab_s.t_gold li:before {
  background: url("/magica/resource/image_web/common/btn/tab_s_gold_off_l.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab_s.t_gold li:after {
  background: url("/magica/resource/image_web/common/btn/tab_s_gold_off_r.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab_s.t_gold li span {
  color: #ffffff;
}

.common_tab_s.t_gold li.current {
  background: url("/magica/resource/image_web/common/btn/tab_s_gold_on_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 40px) 100%;
  color: #b07422;
  text-shadow: 0 0;
}

.common_tab_s.t_gold li.current:before {
  background: url("/magica/resource/image_web/common/btn/tab_s_gold_on_l.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab_s.t_gold li.current:after {
  background: url("/magica/resource/image_web/common/btn/tab_s_gold_on_r.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_tab_s.t_gold li.current span {
  color: #b07422;
}

/* rare --------------------------------------------------------------------- */
#rare, .rare {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#rare span, .rare span {
  width: 30px;
  height: 30px;
  margin: 0 -1px;
  background: url("/magica/resource/image_web/common/chara/star_off.png") left top no-repeat;
  background-size: contain;
  display: block;
  position: relative;
  z-index: 1;
  -webkit-filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.4));
}

#rare.RANK_1 span:nth-child(1), .rare.RANK_1 span:nth-child(1) {
  background: url("/magica/resource/image_web/common/chara/star_on.png") left top no-repeat;
  background-size: 100% 100%;
  z-index: 10;
}

#rare.RANK_2 span:nth-child(1), #rare.RANK_2 span:nth-child(2), .rare.RANK_2 span:nth-child(1), .rare.RANK_2 span:nth-child(2) {
  background: url("/magica/resource/image_web/common/chara/star_on.png") left top no-repeat;
  background-size: 100% 100%;
  z-index: 10;
}

#rare.RANK_3 span:nth-child(1), #rare.RANK_3 span:nth-child(2), #rare.RANK_3 span:nth-child(3), .rare.RANK_3 span:nth-child(1), .rare.RANK_3 span:nth-child(2), .rare.RANK_3 span:nth-child(3) {
  background: url("/magica/resource/image_web/common/chara/star_on.png") left top no-repeat;
  background-size: 100% 100%;
  z-index: 10;
}

#rare.RANK_4 span:nth-child(1), #rare.RANK_4 span:nth-child(2), #rare.RANK_4 span:nth-child(3), #rare.RANK_4 span:nth-child(4), .rare.RANK_4 span:nth-child(1), .rare.RANK_4 span:nth-child(2), .rare.RANK_4 span:nth-child(3), .rare.RANK_4 span:nth-child(4) {
  background: url("/magica/resource/image_web/common/chara/star_on.png") left top no-repeat;
  background-size: 100% 100%;
  z-index: 10;
}

#rare.RANK_5 span:nth-child(1), #rare.RANK_5 span:nth-child(2), #rare.RANK_5 span:nth-child(3), #rare.RANK_5 span:nth-child(4), #rare.RANK_5 span:nth-child(5), .rare.RANK_5 span:nth-child(1), .rare.RANK_5 span:nth-child(2), .rare.RANK_5 span:nth-child(3), .rare.RANK_5 span:nth-child(4), .rare.RANK_5 span:nth-child(5) {
  background: url("/magica/resource/image_web/common/chara/star_on.png") left top no-repeat;
  background-size: 100% 100%;
  z-index: 10;
}

.revisionIcon {
  margin: 0 0 0 8px;
}

.revisionIcon li {
  width: 18px;
  height: 18px;
  background: url("/magica/resource/image_web/common/chara/icon_lb_off.png") left top no-repeat;
  background-size: 100% 100%;
}

.revisionIcon li:not(:last-child) {
  margin-right: 4px;
}

.revisionIcon li.on {
  background: url("/magica/resource/image_web/common/chara/icon_lb_on.png") left top no-repeat;
}

.magiaLvIcon {
  margin: 0 0 0 8px;
}

.magiaLvIcon li {
  width: 18px;
  height: 20px;
  background: url("/magica/resource/image_web/common/chara/icon_magia_off.png") left top no-repeat;
  background-size: 100% 100%;
}

.magiaLvIcon li:not(:last-child) {
  margin-right: 4px;
}

.magiaLvIcon li.on {
  background: url("/magica/resource/image_web/common/chara/icon_magia_on.png") left top no-repeat;
  background-size: 100% 100%;
}

.magiaLvIcon li.none {
  background: url("/magica/resource/image_web/common/chara/icon_magia_none.png") left top no-repeat;
  background-size: 100% 100%;
}

/* attribute ---------------------------------------------------------------- */
#attribute, .attribute {
  width: 40px;
  height: 40px;
  display: block;
  /* 無属性 */
}

#attribute .FIRE, .attribute .FIRE {
  background: url("/magica/resource/image_web/common/chara/att_fire.png") left top no-repeat;
  background-size: 100% 100%;
}

#attribute .FIRE.type_f, .attribute .FIRE.type_f {
  background: url("/magica/resource/image_web/common/chara/att_fire_f.png") left top no-repeat;
  background-size: 100% 100%;
}

#attribute .WATER, .attribute .WATER {
  background: url("/magica/resource/image_web/common/chara/att_water.png") left top no-repeat;
  background-size: 100% 100%;
}

#attribute .WATER.type_f, .attribute .WATER.type_f {
  background: url("/magica/resource/image_web/common/chara/att_water_f.png") left top no-repeat;
  background-size: 100% 100%;
}

#attribute .TIMBER, .attribute .TIMBER {
  background: url("/magica/resource/image_web/common/chara/att_timber.png") left top no-repeat;
  background-size: 100% 100%;
}

#attribute .TIMBER.type_f, .attribute .TIMBER.type_f {
  background: url("/magica/resource/image_web/common/chara/att_timber_f.png") left top no-repeat;
  background-size: 100% 100%;
}

#attribute .LIGHT, .attribute .LIGHT {
  background: url("/magica/resource/image_web/common/chara/att_light.png") left top no-repeat;
  background-size: 100% 100%;
}

#attribute .LIGHT.type_f, .attribute .LIGHT.type_f {
  background: url("/magica/resource/image_web/common/chara/att_light_f.png") left top no-repeat;
  background-size: 100% 100%;
}

#attribute .DARK, .attribute .DARK {
  background: url("/magica/resource/image_web/common/chara/att_dark.png") left top no-repeat;
  background-size: 100% 100%;
}

#attribute .DARK.type_f, .attribute .DARK.type_f {
  background: url("/magica/resource/image_web/common/chara/att_dark_f.png") left top no-repeat;
  background-size: 100% 100%;
}

#attribute .VOID, .attribute .VOID {
  background: url("/magica/resource/image_web/common/chara/att_void.png") left top no-repeat;
  background-size: 100% 100%;
}

#attribute .VOID.type_f, .attribute .VOID.type_f {
  background: url("/magica/resource/image_web/common/chara/att_void_f.png") left top no-repeat;
  background-size: 100% 100%;
}

#attribute .ALL, .attribute .ALL {
  background: url("/magica/resource/image_web/common/chara/att_all.png") left top no-repeat;
  background-size: 100% 100%;
}

#attribute .ALL.type_f, .attribute .ALL.type_f {
  background: url("/magica/resource/image_web/common/chara/att_all_f.png") left top no-repeat;
  background-size: 100% 100%;
}

#attribute span, .attribute span {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: block;
}

/* sort --------------------------------------------------------------------- */
#sortfilter #filterAttList .FIRE:after, #sortfilter #filterAttList .WATER:after, #sortfilter #filterAttList .TIMBER:after, #sortfilter #filterAttList .LIGHT:after, #sortfilter #filterAttList .DARK:after, #sortfilter #filterAttList .VOID:after {
  width: 32px;
  height: 32px;
  display: inline-block;
  content: "";
  pointer-events: none;
}

#sortfilter #filterAttList .FIRE:after {
  background: url("/magica/resource/image_web/common/chara/att_fire_f.png") left top no-repeat;
  background-size: 32px 32px;
}

#sortfilter #filterAttList .WATER:after {
  background: url("/magica/resource/image_web/common/chara/att_water_f.png") left top no-repeat;
  background-size: 32px 32px;
}

#sortfilter #filterAttList .TIMBER:after {
  background: url("/magica/resource/image_web/common/chara/att_timber_f.png") left top no-repeat;
  background-size: 32px 32px;
}

#sortfilter #filterAttList .LIGHT:after {
  background: url("/magica/resource/image_web/common/chara/att_light_f.png") left top no-repeat;
  background-size: 32px 32px;
}

#sortfilter #filterAttList .DARK:after {
  background: url("/magica/resource/image_web/common/chara/att_dark_f.png") left top no-repeat;
  background-size: 32px 32px;
}

#sortfilter #filterAttList .VOID:after {
  background: url("/magica/resource/image_web/common/chara/att_void_f.png") left top no-repeat;
  background-size: 32px 32px;
}

#sortfilter .filterText {
  margin-top: 8px;
}

#sortfilter.chara .current .checkBox:before {
  top: 6px;
  left: 3px;
}

#sortfilter.chara #cardSortBtnsArea {
  width: 100%;
  pointer-events: none;
  position: absolute;
  left: 0;
  bottom: 20px;
}

#sortfilter.chara #cardSortBtnsArea .btn {
  pointer-events: auto;
}

#sortfilter.chara .filterText, #sortfilter.chara #filterAttList, #sortfilter.chara #filterRankList, #sortfilter.chara #filterEnhanceList, #sortfilter.chara #filterInitialList {
  position: absolute;
  font-size: 22px;
}

#sortfilter.chara .filterText .flexBox, #sortfilter.chara #filterAttList .flexBox, #sortfilter.chara #filterRankList .flexBox, #sortfilter.chara #filterEnhanceList .flexBox, #sortfilter.chara #filterInitialList .flexBox {
  width: 690px;
  margin: 0 0 0 18px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#sortfilter.chara .filterText {
  width: 100%;
  text-align: center;
  top: 20px;
  left: 0px;
}

#sortfilter.chara #filterAttList, #sortfilter.chara #filterRankList {
  width: 508px;
  left: 32px;
}

#sortfilter.chara #filterAttList {
  top: 92px;
}

#sortfilter.chara #filterRankList {
  top: 215px;
}

#sortfilter.chara #filterEnhanceList, #sortfilter.chara #filterInitialList {
  width: 342px;
  right: 32px;
}

#sortfilter.chara #filterEnhanceList .filterBar, #sortfilter.chara #filterInitialList .filterBar {
  background: url("/magica/resource/image_web/common/filter/filter_header_s_03.png") left top no-repeat;
  width: 342px;
}

#sortfilter.chara #filterEnhanceList .flexBox .filterEnhance, #sortfilter.chara #filterEnhanceList .flexBox .filterInitial, #sortfilter.chara #filterInitialList .flexBox .filterEnhance, #sortfilter.chara #filterInitialList .flexBox .filterInitial {
  font-size: 22px;
}

#sortfilter.chara #filterEnhanceList {
  top: 92px;
}

#sortfilter.chara #filterInitialList {
  top: 215px;
}

#sortfilter.chara #filterInitialList .flexBox {
  width: 342px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#sortfilter.chara #filterInitialList .flexBox .filterInitial {
  width: 156px;
  font-size: 18px;
  margin-bottom: 14px;
}

#sortfilter.chara #filterAttList .flexBox {
  width: 486px;
}

#sortfilter.chara #filterRankList .flexBox {
  width: 486px;
}

#sortfilter.chara #filterRankList .flexBox .filterRank {
  width: 140px;
}

#sortfilter.chara #filterRankList {
  margin: 0 0 28px;
}

#sortfilter .filterAtt, #sortfilter .filterRank, #sortfilter .filterEnhance, #sortfilter .filterInitial {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#sortfilter .filterBar {
  width: 508px;
  height: 44px;
  margin: 0 auto 16px;
  padding-right: 23px;
  padding-left: 76px;
  background: url("/magica/resource/image_web/common/filter/filter_header_s_04.png") left top no-repeat;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#sortfilter .filterBar .filterAtt, #sortfilter .filterBar .filterRank, #sortfilter .filterBar .filterEnhance, #sortfilter .filterBar .filterInitial {
  font-size: 20px;
  width: auto;
}

#sortfilter .filterBar .filterAtt, #sortfilter .filterBar .filterRank {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#sortfilter .filterBar .checkBox {
  margin-right: 11px;
}

#sortfilter .filterBar p {
  color: #ffffff;
}

#sortfilter.chara .filterBar {
  padding-left: 66px;
}

#sortfilter.chara .filterBar p:before {
  width: 50px;
  height: 54px;
  background: url("/magica/resource/image_web/common/filter/filter_icon_chara.png") left top no-repeat;
  display: block;
  position: absolute;
  top: -9px;
  left: 18px;
  content: "";
}

#sortfilter .filterAtt, #sortfilter .filterRank, #sortfilter .filterEnhance, #sortfilter .filterInitial {
  width: 136px;
}

#sortfilter .filterAtt .checkBox, #sortfilter .filterRank .checkBox, #sortfilter .filterEnhance .checkBox, #sortfilter .filterInitial .checkBox {
  margin-right: 8px;
}

#sortfilter .filterAtt .star, #sortfilter .filterRank .star, #sortfilter .filterEnhance .star, #sortfilter .filterInitial .star {
  width: 30px;
  height: 30px;
  background: url("/magica/resource/image_web/common/icon/icon_rarity_chara.png") left top no-repeat;
  background-size: 30px 30px;
  display: inline-block;
  margin-right: 5px;
}

#sortfilter .checkBox {
  width: 32px;
  height: 32px;
  background-image: url("/magica/resource/image_web/common/icon/icon_checkbox.png");
  background-size: 32px 32px;
  display: block;
  position: relative;
}

#sortfilter .current .checkBox:before {
  width: 27px;
  height: 21px;
  background-image: url("/magica/resource/image_web/common/icon/icon_checkbox_check.png");
  background-repeat: no-repeat;
  position: absolute;
  top: 9px;
  left: 6px;
  content: "";
}

#sortfilter.memoria {
  width: 914px;
  height: 480px;
  margin-left: 16px;
  position: relative;
}

#sortfilter.memoria .filterText {
  font-size: 24px;
  margin-top: 30px;
}

#sortfilter.memoria .filterList {
  display: inline-block;
  width: 428px;
  height: 90px;
  margin: 20px 0 0;
  position: relative;
}

#sortfilter.memoria .filterList:nth-child(even) {
  margin-left: 22px;
}

#sortfilter.memoria .filterList .filterBtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 140px;
  font-size: 18px;
  margin-bottom: 16px;
}

#sortfilter.memoria .filterList .filterBtn .checkBox {
  width: 36px;
  height: 36px;
  background-size: 36px 36px;
  margin-right: 6px;
}

#sortfilter.memoria .filterList .filterBtn .checkBox:before {
  width: 24px;
  height: 19px;
  background-size: 24px 19px;
}

#sortfilter.memoria .filterList .filterBtn.ALL {
  margin-bottom: 0;
  padding-right: 0;
  font-size: 17px;
  width: 120px;
}

#sortfilter.memoria .filterList .filterBtn.ALL .checkBox {
  width: 29px;
  height: 29px;
  background-size: 29px 29px;
  margin-right: 6px;
}

#sortfilter.memoria .filterList .filterBtn.ALL .checkBox:before {
  width: 20px;
  height: 15px;
  background-size: 20px 15px;
  top: 7px;
  left: 5px;
}

#sortfilter.memoria .filterList .filterBtn .star {
  width: 22px;
  height: 24px;
  background: url("/magica/resource/image_web/common/icon/icon_rarity_chara.png") left top no-repeat;
  background-size: 22px 24px;
  display: inline-block;
  margin-right: 5px;
}

#sortfilter.memoria .filterList .filterBar {
  padding-left: 75px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 428px;
  height: 40px;
  background: url("/magica/resource/image_web/common/filter/filter_header_left_01.png") left top no-repeat, url("/magica/resource/image_web/common/filter/filter_header_right_01.png") right top no-repeat, url("/magica/resource/image_web/common/filter/filter_header_center.png") 17px top no-repeat;
  background-size: 18px 40px, 160px 40px, -webkit-calc(100% - 17px - 160px) 40px;
}

#sortfilter.memoria .filterList .filterBar p {
  font-size: 20px;
}

#sortfilter.memoria .filterList .filterBar p:before {
  width: 43px;
  height: 45px;
  background: url("/magica/resource/image_web/common/filter/filter_icon_memoria.png") left top no-repeat;
  background-size: 43px 45px;
  display: block;
  position: absolute;
  top: -10px;
  left: 18px;
  content: "";
}

#sortfilter.memoria .filterList .filterBar .checkBox {
  width: 32px;
  height: 32px;
  background-size: 32px 32px;
  margin-right: 10px;
}

#sortfilter.memoria .filterList .flexBox {
  width: 485px;
  margin-left: 17px;
  position: absolute;
  top: 56px;
  left: 0px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#sortfilter.memoria .filterList#filterSpecialList {
  width: 888px;
}

#sortfilter.memoria .filterList#filterSpecialList .filterBar {
  width: 888px;
}

#sortfilter.memoria #filterAttList .flexBox .filterBtn:nth-child(2) {
  width: 112px;
}

#sortfilter.memoria #filterEffectList {
  width: 878px;
}

#sortfilter.memoria #filterEffectList .filterBar {
  width: 878px;
}

#sortfilter.memoria #filterEffectList .flexBox {
  width: 878px;
}

#sortfilter.memoria #filterEffectList .flexBox .filterBtn:nth-child(1) {
  width: 174px;
}

#sortfilter.memoria #filterEffectList .flexBox .filterBtn:nth-child(2) {
  width: 112px;
}

#sortfilter.memoria #filterComposeList .flexBox .filterBtn:nth-child(2) {
  width: 160px;
}

#sortfilter.memoria #filterRankList .flexBox .filterBtn {
  width: 98px;
}

#sortfilter.memoria #filterRankList .star {
  background: url("/magica/resource/image_web/common/icon/icon_rarity_memoria.png") left top no-repeat;
  background-size: 22px 22px;
  background-position: 0px 1px;
}

#sortfilter.memoria #cardSortBtnsArea {
  width: 100%;
  position: absolute;
  bottom: 20px;
  left: 0;
}

#sortfilter.memoria.bulkSelect #filterEventList {
  width: 878px;
}

#sortfilter.memoria.bulkSelect #filterEventList .filterBar {
  width: 878px;
}

#sortfilter.memoria.bulkSelect #filterEventList .flexBox {
  width: 878px;
}

/* popup -------------------------------------------------------------------- */
@-webkit-keyframes popup_open {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes popup_close {
  0% {
    -webkit-transform: translate3d(0, 0px, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, 20px, 0);
    opacity: 0;
  }
}

@-webkit-keyframes popup_simple_open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes popup_simple_close {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#popupArea {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1000000;
}

#popupArea #popupCurtain {
  width: 100%;
  height: 100%;
  background-color: #000000;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  opacity: 0;
  z-index: 901;
  /*popupCurtain*/
}

#popupArea #popupCurtain.show {
  display: block;
  opacity: .4;
}

.popupContent {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: auto;
  z-index: 100001;
}

.popupContent.open {
  -webkit-animation: popup_open .3s ease 0s 1 alternate;
}

.popupContent.open.simpleAppear {
  -webkit-animation: popup_simple_open .2s ease 0s 1 alternate;
}

.popupContent.close {
  -webkit-animation: popup_close .2s ease 0s 1 alternate;
}

.popupContent.close.simpleAppear {
  -webkit-animation: popup_simple_close .2s ease 0s 1 alternate;
}

.popupContent .popupInner {
  -webkit-box-sizing: border-box;
  background-color: #ffffff;
  display: block;
  text-align: center;
  border-width: 20px;
  border-style: solid;
  border-radius: 22px;
  -o-border-image: url("/magica/resource/image_web/common/popup/bg_popup.png") 22 stretch;
     border-image: url("/magica/resource/image_web/common/popup/bg_popup.png") 22 fill stretch;
  text-shadow: none;
  z-index: 902;
}

.popupContent .popupInner .closeDefault {
  width: 85px;
  height: 85px;
  background-image: url("/magica/resource/image_web/common/popup/popup_close.png");
  background-position: 29px 6px;
  background-size: 52px 51px;
  display: inline-block;
  position: absolute;
  top: -40px;
  right: -40px;
  z-index: 20;
}

.popupContent .popupInner .popupTitle {
  width: 532px;
  margin: 0 auto 0;
  background: url("/magica/resource/image_web/common/popup/bg_popup_title_c.png") left top repeat;
  position: relative;
  color: #ffffff;
  font-size: 22px;
  line-height: 43px;
  text-align: center;
}

.popupContent .popupInner .popupTitle:before, .popupContent .popupInner .popupTitle:after {
  width: 40px;
  height: 43px;
  position: absolute;
  top: 0;
  content: "";
}

.popupContent .popupInner .popupTitle:before {
  background: url("/magica/resource/image_web/common/popup/bg_popup_title_l.png") left top repeat;
  left: -38px;
}

.popupContent .popupInner .popupTitle:after {
  background: url("/magica/resource/image_web/common/popup/bg_popup_title_r.png") left top repeat;
  right: -38px;
}

.popupContent .popupInner .popupTextArea {
  width: 988px;
  height: 340px;
  margin: 0 auto;
  display: table-cell;
  overflow: hidden;
  font-size: 26px;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
  text-shadow: 0 0 0;
}

.popupContent .popupInner .popupTextArea p, .popupContent .popupInner .popupTextArea li {
  line-height: 1.3;
}

.popupContent .popupInner .popupBtnArea {
  margin: 0 auto;
  text-align: center;
}

.popupContent .popupInner .popupBtnArea td {
  padding: 0 20px;
}

.popupContent.tutorial .popupInner {
  -webkit-box-sizing: border-box;
  width: 100%;
  height: 518px;
  padding-top: 10px;
  background: url("/magica/resource/image_web/page/tutorial/popup/navi_bg.png") left top repeat-x;
  background-color: #ffffff;
  position: absolute;
  top: -webkit-calc(50% - 268px);
  left: 0;
  border-width: 0;
  border-style: solid;
  border-radius: 0;
  -webkit-border-image: none;
  text-shadow: none;
  z-index: 902;
}

.popupContent.tutorial .popupInner .popupTextArea {
  display: none;
}

.popupContent.tutorial .popupInner #naviCarousel {
  width: 1024px;
  height: 530px;
  margin-left: -webkit-calc((100% - 1024px) / 2);
  position: relative;
  opacity: 0;
  overflow: hidden;
}

.popupContent.tutorial .popupInner #naviCarousel.show {
  -webkit-animation: common_fade_in .3s ease 0s 1 alternate;
  -webkit-animation-fill-mode: forwards;
}

.popupContent.tutorial .popupInner #naviCarousel .indicatorWrap {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: -37px;
  left: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.popupContent.tutorial .popupInner #naviCarousel .indicatorWrap.hide {
  display: none;
}

.popupContent.tutorial .popupInner #naviCarousel .indicatorWrap .indiIcon {
  width: 16px;
  height: 16px;
  background: url("/magica/resource/image_web/page/mypage/indicator_off.png");
  position: relative;
}

.popupContent.tutorial .popupInner #naviCarousel .indicatorWrap .indiIcon.on {
  background: url("/magica/resource/image_web/page/mypage/indicator_on.png");
}

.popupContent.tutorial .popupInner #naviCarousel .imgWrap {
  height: 498px;
  position: relative;
  overflow: hidden;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  z-index: 10;
}

.popupContent.tutorial .popupInner #naviCarousel .imgWrap .elm {
  width: 1024px;
  min-width: 1024px;
  float: left;
  position: relative;
}

.popupContent.tutorial .popupInner #naviCarousel #eventDetailBtn {
  width: 140px;
  position: absolute;
  right: 13px;
  bottom: 0px;
  z-index: 100000;
}

.popupContent.tutorial .popupInner #naviCarousel .arrow {
  width: 72px;
  height: 88px;
  position: absolute;
  top: 252px;
  z-index: 100;
}

.popupContent.tutorial .popupInner #naviCarousel .arrow.hide {
  display: none;
}

.popupContent.tutorial .popupInner #naviCarousel .arrow.left {
  background: url("/magica/resource/image_web/page/tutorial/popup/navi_arrow_l.png") left top no-repeat;
  left: 8px;
}

.popupContent.tutorial .popupInner #naviCarousel .arrow.right {
  background: url("/magica/resource/image_web/page/tutorial/popup/navi_arrow_r.png") left top no-repeat;
  right: 8px;
}

.popupContent.tutorial .closeDefault {
  top: -20px;
  right: -webkit-calc((100% - 1024px) / 2);
}

.popupContent.typeA .popupInner {
  width: 868px;
  height: 460px;
  position: absolute;
  top: -webkit-calc(50% - 230px);
  left: -webkit-calc((100% - 868px) / 2);
}

.popupContent.typeA .popupInner .popupTextArea {
  width: 825px;
  height: 290px;
}

.popupContent.typeB .popupTitle {
  width: 862px !important;
}

.popupContent.typeB .popupInner {
  width: 988px;
  height: 540px;
  position: absolute;
  top: -webkit-calc(50% - 270px);
  left: -webkit-calc((100% - 988px) / 2);
}

.popupContent.typeC .popupInner {
  width: 655px;
  height: 348px;
  position: absolute;
  top: -webkit-calc(50% - 174px);
  left: -webkit-calc((100% - 655px) / 2);
}

.popupContent.typeC .popupInner .popupTextArea {
  height: 196px;
}

.popupContent.typeD .popupTitle {
  width: 93% !important;
}

.popupContent.typeD .popupInner {
  width: 477px !important;
  height: 508px !important;
  position: absolute;
  top: -webkit-calc(50% - 254px) !important;
  left: -webkit-calc((100% - 477px) / 2) !important;
}

.popupContent.typeD .popupInner .popupTextArea {
  height: 436px !important;
}

.popupContent.typeE .popupTitle {
  width: 400px !important;
}

.popupContent.typeE .popupInner {
  width: 550px;
  height: 508px;
  position: absolute;
  top: -webkit-calc(50% - 254px);
  left: -webkit-calc((100% - 550px) / 2);
}

.popupContent.typeE .popupInner .popupTextArea {
  height: 196px;
}

.expGaugeWrap {
  width: 206px;
  height: 18px;
  padding: 4px 9px;
  position: relative;
}

.expGaugeWrap .expGaugeInner, .expGaugeWrap .episodeGaugeInner {
  height: 10px;
  background: url("/magica/resource/image_web/page/chara/exp_gauge_l.png") left top no-repeat, url("/magica/resource/image_web/page/chara/exp_gauge_r.png") right top no-repeat, url("/magica/resource/image_web/page/chara/exp_gauge_c.png") left top repeat-x;
  position: relative;
  z-index: 100;
}

.expGaugeWrap .expGaugeInner2, .expGaugeWrap .episodeGaugeInner2, .expGaugeWrap .expGaugeInner4 {
  height: 10px;
  margin-top: -10px;
  background: url("/magica/resource/image_web/page/chara/exp_gauge_up_l.png") left top no-repeat, url("/magica/resource/image_web/page/chara/exp_gauge_up_r.png") right top no-repeat, url("/magica/resource/image_web/page/chara/exp_gauge_up_c.png") left top repeat-x;
  position: relative;
  z-index: 90;
}

.expGaugeWrap .expGaugeInner3 {
  height: 10px;
  background: url("/magica/resource/image_web/common/chara/eplv_gauge_l.png") left top no-repeat, url("/magica/resource/image_web/common/chara/eplv_gauge_r.png") right top no-repeat, url("/magica/resource/image_web/common/chara/eplv_gauge_c.png") left top repeat-x;
  position: relative;
  z-index: 100;
}

.expGaugeWrap:before, .expGaugeWrap:after {
  width: 16px;
  height: 18px;
  display: block;
  position: absolute;
  top: 0;
  content: "";
  z-index: 2;
}

.expGaugeWrap:before {
  background: url("/magica/resource/image_web/page/chara/bg_exp_gauge_l.png") left top no-repeat;
  left: 0;
}

.expGaugeWrap:after {
  background: url("/magica/resource/image_web/page/chara/bg_exp_gauge_r.png") left top no-repeat;
  right: 0;
}

.expGaugeWrap .bg {
  width: -webkit-calc(100% - 28px);
  height: 18px;
  margin: 0 auto;
  background: url("/magica/resource/image_web/page/chara/bg_exp_gauge_c.png") left top repeat-x;
  position: absolute;
  top: 0;
  left: 14px;
  z-index: 1;
}

/* common frame ------------------------------------------------------------- */
.commonFrame1 h2, .commonFrame3 h2 {
  width: 458px;
  background: #000000;
  background: url("/magica/resource/image_web/common/frame/frame_title.png") left top no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  color: #ffffff;
  text-shadow: -1px -1px 2px #ff4f92, 1px -1px 2px #ff4f92, -1px 1px 2px #ff4f92, 1px 1px 2px #ff4f92, -1px -1px 2px #ff4f92, 1px -1px 2px #ff4f92, -1px 1px 2px #ff4f92, 1px 1px 2px #ff4f92;
}

.commonFrame1 {
  min-width: 60px;
  min-height: 60px;
  padding: 10px;
  background: -webkit-linear-gradient(bottom, #f0efed 0%, white 100%);
  position: relative;
  border-radius: 25px;
}

.commonFrame1 .hiddenWrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.commonFrame1 .hiddenWrap .scrollInner {
  height: 100%;
}

.commonFrame1 h2 {
  padding: 0 20px;
  background-size: 458px 32px;
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 18px;
  line-height: 32px;
  border-radius: 10px 0 0 0;
  z-index: 1;
}

.commonFrame1:after {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  pointer-events: none;
  border-width: 20px;
  border-style: solid;
  -o-border-image: url("/magica/resource/image_web/common/frame/common_frame.png") 22 stretch;
     border-image: url("/magica/resource/image_web/common/frame/common_frame.png") 22 fill stretch;
  z-index: 2;
  -webkit-filter: drop-shadow(0 0 3px #c6a882);
}

.commonFrame2 {
  min-width: 60px;
  min-height: 60px;
  padding: 10px;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.65) 100%);
  position: relative;
  border-radius: 25px;
}

.commonFrame2:after {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  pointer-events: none;
  border-width: 20px;
  border-style: solid;
  -o-border-image: url("/magica/resource/image_web/common/frame/common_frame.png") 22 stretch;
     border-image: url("/magica/resource/image_web/common/frame/common_frame.png") 22 fill stretch;
  -webkit-filter: drop-shadow(0 0 3px #c6a882);
}

.commonFrame2 .hiddenWrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.commonFrame2 .hiddenWrap .scrollInner {
  height: 100%;
}

.commonFrame3 {
  margin: 2px;
  background: #ffffff;
  position: relative;
  border: 2px solid #ffffff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0 0 2px #c6a882,0 0 5px #eee9e0 inset;
          box-shadow: 0 0 0 2px #c6a882,0 0 5px #eee9e0 inset;
}

.commonFrame3 h2 {
  padding: 0 10px;
  background-size: 458px 24px;
  top: 0;
  left: 0;
  font-size: 16px;
  line-height: 24px;
  border-radius: 6px 0 0 0;
}

.commonFrame3 h3 {
  padding: 0 0 0 20px;
  position: relative;
  color: #ff4f9e;
  font-size: 14px;
  line-height: 14px;
}

.commonFrame3 h3:before {
  width: 14px;
  height: 14px;
  background: url("/magica/resource/image_web/common/frame/title_icon.png") left top no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}

.commonFrame4 {
  margin: 2px;
  background: #fdfbf7;
  background: -webkit-linear-gradient(bottom, #f8f2e6 0%, white 100%);
  position: relative;
  border: 2px solid #ffffff;
  border-radius: 6px;
  -webkit-box-shadow: 0 0 0 2px #c6a882,0 0 5px #e1c08d inset;
          box-shadow: 0 0 0 2px #c6a882,0 0 5px #e1c08d inset;
}

.commonFrame4 h3 {
  padding: 0 0 0 20px;
  position: relative;
  color: #ff4f9e;
  font-size: 14px;
  line-height: 14px;
}

.commonFrame4 h3:before {
  width: 14px;
  height: 14px;
  background: url("/magica/resource/image_web/common/frame/title_icon.png") left top no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}

.commonFrame5 {
  min-width: 60px;
  min-height: 60px;
  padding: 10px;
  background: -webkit-linear-gradient(bottom, #f0efed 0%, white 100%);
  position: relative;
  border-radius: 25px;
}

.commonFrame5 .hiddenWrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.commonFrame5 .hiddenWrap .scrollInner {
  height: 100%;
}

.commonFrame5 h2 {
  padding: 0 20px;
  background-size: 458px 32px;
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 18px;
  line-height: 32px;
  border-radius: 10px 0 0 0;
  z-index: 1;
}

.commonFrame5:after {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  pointer-events: none;
  border-width: 20px;
  border-style: solid;
  -o-border-image: url("/magica/resource/image_web/common/frame/common_frame_01.png") 22 stretch;
     border-image: url("/magica/resource/image_web/common/frame/common_frame_01.png") 22 fill stretch;
  z-index: 2;
}

.pointFrame {
  min-height: 24px;
  padding: 0 12px;
  background: url("/magica/resource/image_web/common/frame/point_frame_bg.png") center top no-repeat;
  background-size: -webkit-calc(100% - 20px) 100%;
  display: inline-block;
  position: relative;
  color: #ffffff;
  text-align: center;
}

.pointFrame > * {
  color: #ffffff;
}

.pointFrame:before, .pointFrame:after {
  width: 12px;
  height: 24px;
  display: block;
  position: absolute;
  top: 0;
  content: "";
}

.pointFrame:before {
  background: url("/magica/resource/image_web/common/frame/point_frame_l.png") left top no-repeat;
  left: 0;
}

.pointFrame:after {
  background: url("/magica/resource/image_web/common/frame/point_frame_r.png") left top no-repeat;
  right: 0;
}

.pointFrame.type_b {
  background: url("/magica/resource/image_web/common/frame/point_frame_b_bg.png") center top no-repeat;
  background-size: -webkit-calc(100% - 20px) 100%;
}

.pointFrame.type_b:before {
  background: url("/magica/resource/image_web/common/frame/point_frame_b_l.png") left top no-repeat;
  left: 0;
}

.pointFrame.type_b:after {
  background: url("/magica/resource/image_web/common/frame/point_frame_b_r.png") left top no-repeat;
  right: 0;
}

.pointFrame.type_lb {
  background: url("/magica/resource/image_web/common/frame/point_frame_lb_bg.png") center top no-repeat;
  background-size: -webkit-calc(100% - 20px) 100%;
}

.pointFrame.type_lb, .pointFrame.type_lb * {
  color: #5b5b5b;
}

.pointFrame.type_lb:before {
  background: url("/magica/resource/image_web/common/frame/point_frame_lb_l.png") left top no-repeat;
  left: 0;
}

.pointFrame.type_lb:after {
  background: url("/magica/resource/image_web/common/frame/point_frame_lb_r.png") left top no-repeat;
  right: 0;
}

.pointFrame.type_r {
  background: url("/magica/resource/image_web/common/frame/point_frame_r_bg.png") center top no-repeat;
  background-size: -webkit-calc(100% - 20px) 100%;
}

.pointFrame.type_r:before {
  background: url("/magica/resource/image_web/common/frame/point_frame_r_l.png") left top no-repeat;
  left: 0;
}

.pointFrame.type_r:after {
  background: url("/magica/resource/image_web/common/frame/point_frame_r_r.png") left top no-repeat;
  right: 0;
}

.pointFrame02 {
  min-height: 44px;
  padding: 0 16px;
  background: url("/magica/resource/image_web/common/frame/point_frame02_bg.png") center top no-repeat;
  background-size: -webkit-calc(100% - 20px) 100%;
  display: inline-block;
  position: relative;
  color: #ffffff;
  text-align: center;
}

.pointFrame02 > * {
  color: #ffffff;
}

.pointFrame02:before, .pointFrame02:after {
  width: 16px;
  height: 44px;
  display: block;
  position: absolute;
  top: 0;
  content: "";
}

.pointFrame02:before {
  background: url("/magica/resource/image_web/common/frame/point_frame02_l.png") left top no-repeat;
  left: -5px;
}

.pointFrame02:after {
  background: url("/magica/resource/image_web/common/frame/point_frame02_r.png") left top no-repeat;
  right: -5px;
}

.common_dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.common_dl dt {
  padding: 0 10px;
  background: #b28750;
  color: #ffffff;
  text-align: center;
  border: 1px solid #b28750;
  border-radius: 5px 0 0 5px;
}

.common_dl dd {
  padding: 0 10px;
  border-top: 1px solid #eadecc;
  border-right: 1px solid #eadecc;
  border-bottom: 1px solid #eadecc;
  border-radius: 0 5px 5px 0;
}

.common_title_frame {
  min-width: 138px;
  min-height: 28px;
  padding: 0 34px;
  background: url("/magica/resource/image_web/common/frame/title_frame_c.png") center top no-repeat;
  background-size: -webkit-calc(100% - 64px) 100%;
  display: inline-block;
  position: relative;
  color: #ffffff;
  line-height: 28px;
  text-align: center;
}

.common_title_frame:before, .common_title_frame:after {
  width: 34px;
  height: 28px;
  display: block;
  position: absolute;
  top: 0;
  content: "";
}

.common_title_frame:before {
  background: url("/magica/resource/image_web/common/frame/title_frame_l.png") left top no-repeat;
  left: 0;
}

.common_title_frame:after {
  background: url("/magica/resource/image_web/common/frame/title_frame_r.png") left top no-repeat;
  right: 0;
}

.commandList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.commandList li {
  width: 84px;
  height: 84px;
}

.commandList li.CHARGE {
  background: url("/magica/resource/image_web/common/chara/command_charge.png") left top no-repeat;
  background-size: 100% 100%;
}

.commandList li.MPUP {
  background: url("/magica/resource/image_web/common/chara/command_accele.png") left top no-repeat;
  background-size: 100% 100%;
}

.commandList li.RANGE_V {
  background: url("/magica/resource/image_web/common/chara/command_blast_v.png") left top no-repeat;
  background-size: 100% 100%;
}

.commandList li.RANGE_H {
  background: url("/magica/resource/image_web/common/chara/command_blast_h.png") left top no-repeat;
  background-size: 100% 100%;
}

.commandList li.RANGE_S {
  background: url("/magica/resource/image_web/common/chara/command_range_s.png") left top no-repeat;
  background-size: 100% 100%;
}

.commandList li.RANGE_B {
  background: url("/magica/resource/image_web/common/chara/command_range_b.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_line {
  width: 100%;
  height: 2px;
  margin: 10px auto;
  background: #000000;
  position: relative;
}

.common_line:before, .common_line:after {
  width: 18px;
  height: 12px;
  position: absolute;
  top: -5px;
  content: "";
}

.common_line:before {
  left: -10px;
}

.common_line:after {
  right: -10px;
}

.common_line.lc_beige {
  background: #e0d2bb;
}

.common_line.lc_beige:before {
  background: url("/magica/resource/image_web/common/frame/icon_line01_l.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_line.lc_beige:after {
  background: url("/magica/resource/image_web/common/frame/icon_line01_l.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_line.lc_gold {
  background: #b28750;
}

.common_line.lc_gold:before {
  background: url("/magica/resource/image_web/common/frame/icon_line02_l.png") left top no-repeat;
  background-size: 100% 100%;
}

.common_line.lc_gold:after {
  background: url("/magica/resource/image_web/common/frame/icon_line02_l.png") left top no-repeat;
  background-size: 100% 100%;
}

.flexBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* fontColor fontShadow ----------------------------------------------------- */
.c_white {
  color: #ffffff;
}

.c_gold {
  color: #a47122;
}

.c_red {
  color: #ff403b;
}

.c_purple {
  color: #5b3072;
}

.c_pink {
  color: #ff4f9e;
}

.c_blue {
  color: #5165e8;
}

.ts_gold {
  color: #ffffff;
  text-shadow: -1px -1px 1px #8a5f29, 1px -1px 1px #8a5f29, -1px 1px 1px #8a5f29, 1px 1px 1px #8a5f29, -1px -1px #8a5f29, 1px -1px #8a5f29, -1px 1px #8a5f29, 1px 1px #8a5f29, -1px -1px 2px #8a5f29, 1px -1px 2px #8a5f29, -1px 1px 2px #8a5f29, 1px 1px 2px #8a5f29, -1px -1px 2px #8a5f29, 1px -1px 2px #8a5f29, -1px 1px 2px #8a5f29, 1px 1px 2px #8a5f29, -1px -1px 3px #8a5f29, 1px -1px 3px #8a5f29, -1px 1px 3px #8a5f29, 1px 1px 3px #8a5f29;
}

.ts_pink {
  color: #ffffff;
  text-shadow: -1px -1px 1px #ff5e7c, 1px -1px 1px #ff5e7c, -1px 1px 1px #ff5e7c, 1px 1px 1px #ff5e7c, -1px -1px #ff5e7c, 1px -1px #ff5e7c, -1px 1px #ff5e7c, 1px 1px #ff5e7c, -1px -1px 2px #ff5e7c, 1px -1px 2px #ff5e7c, -1px 1px 2px #ff5e7c, 1px 1px 2px #ff5e7c, -1px -1px 2px #ff5e7c, 1px -1px 2px #ff5e7c, -1px 1px 2px #ff5e7c, 1px 1px 2px #ff5e7c, -1px -1px 3px #ff5e7c, 1px -1px 3px #ff5e7c, -1px 1px 3px #ff5e7c, 1px 1px 3px #ff5e7c;
}

.ts_pink02 {
  color: #ffffff;
  text-shadow: -1px -1px 1px #ff403b, 1px -1px 1px #ff403b, -1px 1px 1px #ff403b, 1px 1px 1px #ff403b, -1px -1px #ff403b, 1px -1px #ff403b, -1px 1px #ff403b, 1px 1px #ff403b, -1px -1px 2px #ff403b, 1px -1px 2px #ff403b, -1px 1px 2px #ff403b, 1px 1px 2px #ff403b, -1px -1px 2px #ff403b, 1px -1px 2px #ff403b, -1px 1px 2px #ff403b, 1px 1px 2px #ff403b, -1px -1px 3px #ff403b, 1px -1px 3px #ff403b, -1px 1px 3px #ff403b, 1px 1px 3px #ff403b;
}

.ts_purple {
  color: #ffffff;
  text-shadow: -1px -1px 1px #5b3072, 1px -1px 1px #5b3072, -1px 1px 1px #5b3072, 1px 1px 1px #5b3072, -1px -1px #5b3072, 1px -1px #5b3072, -1px 1px #5b3072, 1px 1px #5b3072, -1px -1px 2px #5b3072, 1px -1px 2px #5b3072, -1px 1px 2px #5b3072, 1px 1px 2px #5b3072, -1px -1px 2px #5b3072, 1px -1px 2px #5b3072, -1px 1px 2px #5b3072, 1px 1px 2px #5b3072, -1px -1px 3px #5b3072, 1px -1px 3px #5b3072, -1px 1px 3px #5b3072, 1px 1px 3px #5b3072;
}

.ts_white {
  text-shadow: -1px -1px 1px #ffffff, 1px -1px 1px #ffffff, -1px 1px 1px #ffffff, 1px 1px 1px #ffffff, -1px -1px #ffffff, 1px -1px #ffffff, -1px 1px #ffffff, 1px 1px #ffffff, -1px -1px 2px #ffffff, 1px -1px 2px #ffffff, -1px 1px 2px #ffffff, 1px 1px 2px #ffffff, -1px -1px 2px #ffffff, 1px -1px 2px #ffffff, -1px 1px 2px #ffffff, 1px 1px 2px #ffffff, -1px -1px 3px #ffffff, 1px -1px 3px #ffffff, -1px 1px 3px #ffffff, 1px 1px 3px #ffffff;
}

.ts_brown {
  color: #ffffff;
  text-shadow: -1px -1px 1px #594e42, 1px -1px 1px #594e42, -1px 1px 1px #594e42, 1px 1px 1px #594e42, -1px -1px #594e42, 1px -1px #594e42, -1px 1px #594e42, 1px 1px #594e42, -1px -1px 2px #594e42, 1px -1px 2px #594e42, -1px 1px 2px #594e42, 1px 1px 2px #594e42, -1px -1px 2px #594e42, 1px -1px 2px #594e42, -1px 1px 2px #594e42, 1px 1px 2px #594e42, -1px -1px 3px #594e42, 1px -1px 3px #594e42, -1px 1px 3px #594e42, 1px 1px 3px #594e42;
}

.ts_black {
  text-shadow: -1px -1px 1px #000000, 1px -1px 1px #000000, -1px 1px 1px #000000, 1px 1px 1px #000000, -1px -1px #000000, 1px -1px #000000, -1px 1px #000000, 1px 1px #000000, -1px -1px 2px #000000, 1px -1px 2px #000000, -1px 1px 2px #000000, 1px 1px 2px #000000, -1px -1px 2px #000000, 1px -1px 2px #000000, -1px 1px 2px #000000, 1px 1px 2px #000000, -1px -1px 3px #000000, 1px -1px 3px #000000, -1px 1px 3px #000000, 1px 1px 3px #000000;
}

/* cardDetail --------------------------------------------------------------- */
#cardDetail {
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

#cardDetail.showLive2dFullscreen #detailCardName, #cardDetail.showLive2dFullscreen #detailTab, #cardDetail.showLive2dFullscreen #cardDetailWrap, #cardDetail.showLive2dFullscreen .collectionBack {
  display: none;
}

#cardDetail.showLive2dFullscreen .fullScreenBack {
  width: 92px;
  height: 43px;
  background-image: url("/magica/resource/image_web/common/global/global_back.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 9px;
  left: 7px;
  z-index: 50;
}

#cardDetail.showLive2dFullscreen .fullScreenBack span {
  width: 100%;
  height: 100%;
  display: block;
}

#cardDetail.showLive2dFullscreen .drawerBtn {
  width: 128px;
  height: 54px;
  padding: 0;
  background: url("/magica/resource/image_web/common/chara/bg_detail_name.png") left top no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 54px;
}

#cardDetail.showLive2dFullscreen .drawerBtn .soundIcon {
  width: 38px;
  height: 38px;
  background: url("/magica/resource/image_web/page/collection/voice_sound_icon.png") left top no-repeat;
  position: absolute;
  top: 8px;
  left: 32px;
}

#cardDetail.showLive2dFullscreen .drawerBtn .drawerIcon {
  width: 40px;
  height: 40px;
  background-image: url("/magica/resource/image_web/page/collection/pan_up.png");
  background-size: 100% 100%;
  position: absolute;
  top: 5px;
  right: 10px;
}

#cardDetail .moviePlayBtn {
  width: 100px;
  height: 54px;
  background: url("/magica/resource/image_web/page/collection/btn_movie_a.png") left top no-repeat;
  display: block;
  position: fixed;
  bottom: 22px;
  left: -28px;
  z-index: 100;
}

#cardDetail .moviePlayBtn.touch {
  -webkit-filter: brightness(120%);
}

#cardDetail .voicePlayBtn {
  width: 100px;
  height: 54px;
  background: url("/magica/resource/image_web/page/collection/btn_voice_a.png") left top no-repeat;
  display: block;
  position: fixed;
  bottom: 84px;
  left: -28px;
  z-index: 100;
}

#cardDetail .voicePlayBtn.touch {
  -webkit-filter: brightness(120%);
}

#cardDetail .thStyle {
  height: 28px;
  margin-right: 4px;
  background: #b28750;
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  -webkit-border-radius: 6px 0 0 6px;
}

#cardDetail .tdStyle {
  height: 28px;
  margin: 0 4px 0 0;
  padding: 0 0 0 8px;
  background: #fff;
  display: block;
  overflow: hidden;
  font-size: 18px;
  line-height: 28px;
}

#cardDetail .hiddenWrap {
  width: 640px;
  height: 100%;
  overflow: hidden;
}

#cardDetail .hiddenWrap .scrollInner {
  width: 640px;
  height: auto;
  min-height: 100%;
  overflow: inherit;
}

#cardDetail .collectionBack {
  width: 92px;
  height: 43px;
  background-image: url("/magica/resource/image_web/common/global/global_back.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 9px;
  left: 7px;
  z-index: 50;
}

#cardDetail .collectionBack span {
  width: 100%;
  height: 100%;
  display: block;
}

#cardDetail #detailCardName {
  width: 652px;
  height: 54px;
  padding: 0 0 0 64px;
  background: url("/magica/resource/image_web/common/chara/bg_detail_name.png") left top no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 54px;
}

#cardDetail #detailCardName .charaName {
  color: #fff;
  font-size: 26px;
}

#cardDetail #detailCardName .charaName .title {
  color: #fff;
  font-size: 16px;
}

#cardDetail #detailCardName .charaKana {
  width: 230px;
  height: 24px;
  background: #fff;
  position: absolute;
  top: 18px;
  right: 0;
  color: #ef638b;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  border-radius: 12px 0 0 12px;
}

#cardDetail #detailCardName #att {
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  top: 7px;
  left: 19px;
}

#cardDetail #detailCardName #att.fire {
  background: url("/magica/resource/image_web/common/chara/att_fire_f.png") left top no-repeat;
  background-size: contain;
}

#cardDetail #detailCardName #att.water {
  background: url("/magica/resource/image_web/common/chara/att_water_f.png") left top no-repeat;
  background-size: contain;
}

#cardDetail #detailCardName #att.timber {
  background: url("/magica/resource/image_web/common/chara/att_timber_f.png") left top no-repeat;
  background-size: contain;
}

#cardDetail #detailCardName #att.light {
  background: url("/magica/resource/image_web/common/chara/att_light_f.png") left top no-repeat;
  background-size: contain;
}

#cardDetail #detailCardName #att.dark {
  background: url("/magica/resource/image_web/common/chara/att_dark_f.png") left top no-repeat;
  background-size: contain;
}

#cardDetail #detailCardName #att.void {
  background: url("/magica/resource/image_web/common/chara/att_void_f.png") left top no-repeat;
  background-size: contain;
}

#cardDetail #detailCardImage {
  min-height: 508px;
  position: absolute;
  top: -webkit-calc(50% - 227px);
  left: -webkit-calc(50% - 465px);
}

#cardDetail #detailCardImage .zoomImg {
  display: none;
}

#cardDetail #detailCardImage.hide {
  display: none;
}

#cardDetail #detailCardImage.zoom {
  width: 200%;
  height: 150%;
  background: rgba(0, 0, 0, 0.9);
  position: fixed;
  top: -25%;
  left: -50%;
  z-index: 1000;
}

#cardDetail #detailCardImage.zoom .moviePlayBtn,
#cardDetail #detailCardImage.zoom .voicePlayBtn {
  display: none;
}

#cardDetail #detailCardImage.zoom .cardImg,
#cardDetail #detailCardImage.zoom .cardFrame {
  display: none;
}

#cardDetail #detailCardImage.zoom .zoomImg {
  width: 578px;
  display: block;
  position: absolute;
  top: -webkit-calc(50% - 440px);
  left: -webkit-calc(50% - 289px);
  -webkit-transform: rotate(-90deg) translateZ(0);
  -ms-transform: rotate(-90deg) translateZ(0);
  transform: rotate(-90deg) translateZ(0);
  border: 0;
  -webkit-box-shadow: 0 0;
          box-shadow: 0 0;
}

#cardDetail #detailCardImage.zoom .zoomImg img {
  width: 578px;
}

#cardDetail #detailCardImage.zoom .zoomImg .zoomProfile {
  position: absolute;
  bottom: 25px;
  left: -webkit-calc(50% - 384px);
  background: rgba(0, 0, 0, 0.5);
  width: 768px;
}

#cardDetail #detailCardImage.zoom .zoomImg .zoomProfile p {
  padding: 38px 25px;
  width: 576px;
  display: none;
  margin: 0 auto;
  color: #FFF;
}

#cardDetail #detailCardImage.zoom .zoomImg .zoomProfile.show p {
  display: block;
}

#cardDetail #detailCardImage.zoom .zoomImg .sb_gold_02 {
  position: absolute;
  bottom: -79px;
  right: -webkit-calc(50% - 278px);
}

#cardDetail #detailCardImage.zoom .zoomImg .cardNameSpecialZoom {
  width: 100%;
  text-align: center;
  position: absolute;
  color: #fff;
  left: 0;
  bottom: 75px;
  font-size: 22px;
  text-shadow: 2px 2px 2px #000;
}

#cardDetail #detailCardImage .cardFrame {
  width: 334px !important;
  display: block;
}

#cardDetail #detailCardImage .cardImg {
  width: 332px !important;
  margin: 1px 0 0 1px;
  display: block;
}

#cardDetail #detailCardImage .cardImg {
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-filter: drop-shadow(0 0 2px #ffffe1, 0 0 2px #ffffe1, 0 0 12px #ffffe1, 0 0 12px #ffffe1);
}

#cardDetail #detailCardImage .cardNameSpecial {
  width: 100%;
  text-align: center;
  position: absolute;
  color: #fff;
  left: 0;
  bottom: 45px;
  text-shadow: 2px 2px 2px #000;
}

#cardDetail #detailTab {
  width: 594px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 62px;
  right: -webkit-calc(50% - 513px);
  z-index: 10;
}

#cardDetail #detailTab li {
  min-width: 148px;
  height: 54px;
  margin: 0 -8px 0 0;
  background-size: -webkit-calc(100% - 56px) 100%;
  position: relative;
  font-size: 15px;
  line-height: 54px;
  z-index: 10;
}

#cardDetail #detailTab li:before, #cardDetail #detailTab li:after {
  width: 29px;
  height: 54px;
}

#cardDetail #detailTab li.off {
  pointer-events: none;
  z-index: 1;
  -webkit-filter: brightness(50%) grayscale(100%);
}

#cardDetail #cardDetailWrap {
  width: 640px;
  height: -webkit-calc(100% - 117px);
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(10%, rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0.6)));
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 10%, rgba(255, 255, 255, 0.6) 100%);
  position: fixed;
  top: 117px;
  right: 0;
  z-index: 5;
}

#cardDetail #cardDetailWrap #charaStatus,
#cardDetail #cardDetailWrap #charaSkill,
#cardDetail #cardDetailWrap #charaVoice,
#cardDetail #cardDetailWrap #charaProfile,
#cardDetail #cardDetailWrap #charaMemoria,
#cardDetail #cardDetailWrap #charaIllust,
#cardDetail #cardDetailWrap #charaSetting {
  display: none;
}

#cardDetail #cardDetailWrap.status #charaStatus {
  display: block;
}

#cardDetail #cardDetailWrap.skill #charaSkill {
  display: block;
}

#cardDetail #cardDetailWrap.memoria #charaMemoria {
  display: block;
}

#cardDetail #cardDetailWrap.voice #charaVoice {
  display: block;
}

#cardDetail #cardDetailWrap.profile #charaProfile {
  display: block;
}

#cardDetail #cardDetailWrap.setting #charaSetting {
  display: block;
}

#cardDetail #cardDetailWrap.illust #charaIllust {
  display: block;
}

#cardDetail #cardDetailWrap #charaStatus {
  padding: 7px 0 0 52px;
}

#cardDetail #cardDetailWrap #charaStatus .status {
  position: relative;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap {
  width: 310px;
  margin-bottom: 10px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .level {
  margin-bottom: 6px;
  position: relative;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .level .gauge {
  position: absolute;
  right: 25px;
  bottom: 7px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .level .gauge .expGaugeWrap {
  width: 200px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .level .gauge span {
  position: absolute;
  top: -21px;
  right: 10px;
  font-size: 14px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .level .gauge .levelMax {
  width: 54px;
  height: 16px;
  background: url("/magica/resource/image_web/common/chara/lv_max.png") left top no-repeat;
  background-size: 54px 16px;
  position: absolute;
  top: -17px;
  right: 10px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .common_line {
  width: 256px;
  margin: 10px auto;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap #detailLv {
  height: 56px;
  padding: 4px 0 0 20px;
  font-size: 23px;
  line-height: 1.1;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap #detailLv .currentLv {
  font-size: 24px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap #detailLv .sla {
  margin-left: -8px;
  letter-spacing: -8px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap #detailLv .sla,
#cardDetail #cardDetailWrap #charaStatus .statusWrap #detailLv .maxLv {
  font-size: 18px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .thStyle {
  width: 138px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .level .thStyle {
  width: 72px;
  height: 56px;
  line-height: 56px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .type,
#cardDetail #cardDetailWrap #charaStatus .statusWrap .revision,
#cardDetail #cardDetailWrap #charaStatus .statusWrap .magiaLv {
  margin-bottom: 2px;
  position: relative;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .revisionIcon {
  position: absolute;
  top: 5px;
  left: 146px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .magiaLvIcon {
  position: absolute;
  top: 4px;
  left: 147px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .tdStyle {
  width: 226px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .epLv {
  height: 42px;
  position: relative;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .epLv span {
  height: 42px;
  line-height: 42px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .epLv .epExpRequire {
  height: 14px;
  font-size: 14px;
  line-height: 14px;
  text-align: right;
  position: absolute;
  top: 4px;
  right: 25px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .epLv .epLevelMax {
  width: 54px;
  height: 16px;
  background: url("/magica/resource/image_web/common/chara/lv_max.png") left top no-repeat;
  background-size: 54px 16px;
  position: absolute;
  top: 2px;
  right: 25px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .epLv .gauge {
  position: absolute;
  left: 155px;
  bottom: 5px;
}

#cardDetail #cardDetailWrap #charaStatus .statusWrap .epLv .gauge .expGaugeWrap {
  width: 140px;
}

#cardDetail #cardDetailWrap #charaStatus #popupCharaStatus {
  margin-bottom: 20px;
  text-align: center;
}

#cardDetail #cardDetailWrap #charaStatus #popupCharaStatus .flexBox {
  margin: 2px 0 0;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

#cardDetail #cardDetailWrap #charaStatus #popupCharaStatus .flexBox.mt0 {
  margin: 0;
}

#cardDetail #cardDetailWrap #charaStatus #popupCharaStatus .thStyle {
  width: 88px;
  height: 24px;
  line-height: 24px;
}

#cardDetail #cardDetailWrap #charaStatus #popupCharaStatus .tdStyle {
  width: 88px;
  height: 24px;
  line-height: 24px;
}

#cardDetail #cardDetailWrap #charaStatus #popupCharaStatus .statusTitle {
  margin: 0 0 0 88px;
}

#cardDetail #cardDetailWrap #charaStatus #popupCharaStatus .statusTitle .tdStyle {
  margin-bottom: 2px;
  background: #ebe1d4;
}

#cardDetail #cardDetailWrap #charaStatus #popupCustomize .flexBox {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

#cardDetail #cardDetailWrap #charaStatus #popupCustomize > .flexBox {
  width: 456px;
}

#cardDetail #cardDetailWrap #charaStatus #popupCustomize .thStyle {
  width: 114px;
  height: 64px;
  line-height: 22px;
  padding-top: 10px;
}

#cardDetail #cardDetailWrap #charaStatus #popupCustomize .customizeStatus {
  width: 148px;
  height: 24px;
  margin: 0 4px 2px 0;
}

#cardDetail #cardDetailWrap #charaStatus #popupCustomize .customizeStatus .tdStyle {
  width: 94px;
  height: 24px;
  margin: 0;
  line-height: 24px;
}

#cardDetail #cardDetailWrap #charaStatus #popupCustomize .customizeStatus .title.tdStyle {
  width: 54px;
  height: 24px;
  margin: 0;
  padding: 0;
  background: #ebe1d4;
  line-height: 24px;
  text-align: center;
}

#cardDetail #cardDetailWrap #charaStatus #popupCustomize .customizeCommand {
  width: 148px;
  height: 38px;
  margin: 0 4px 0 0;
  padding: 0 0 0 54px;
  position: relative;
  font-size: 15px;
  line-height: 38px;
}

#cardDetail #cardDetailWrap #charaStatus #popupCustomize .customizeCommand:before {
  width: 38px;
  height: 38px;
  display: block;
  position: absolute;
  top: 0;
  left: 10px;
  content: '';
}

#cardDetail #cardDetailWrap #charaStatus #popupCustomize .customizeCommand.accele:before {
  background: url("/magica/resource/image_web/common/chara/command_accele.png") left top no-repeat;
  background-size: 100% 100%;
}

#cardDetail #cardDetailWrap #charaStatus #popupCustomize .customizeCommand.blast:before {
  background: url("/magica/resource/image_web/common/chara/command_blast.png") left top no-repeat;
  background-size: 100% 100%;
}

#cardDetail #cardDetailWrap #charaStatus #popupCustomize .customizeCommand.charge:before {
  background: url("/magica/resource/image_web/common/chara/command_charge.png") left top no-repeat;
  background-size: 100% 100%;
}

#cardDetail #cardDetailWrap #charaStatus #popupCustomize .customizeCommand .addendPrm {
  font-size: 14px;
}

#cardDetail #cardDetailWrap #charaStatus .composeLinks {
  margin: 17px 0 0;
  padding: 0 0 0 3px;
}

#cardDetail #cardDetailWrap #charaStatus .composeLinks.off .mb_pink {
  background-color: rgba(0, 0, 0, 0.255);
  pointer-events: none;
  -webkit-filter: grayscale(100%) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
  filter: grayscale(100%) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

#cardDetail #cardDetailWrap #charaStatus .composeLinks .mb_pink {
  width: 130px;
  height: 40px;
  margin: 0 6px 0 0;
  line-height: 16px;
}

#cardDetail #cardDetailWrap #charaStatus #cardDetailMiniChara {
  width: 300px;
  height: 300px;
  position: absolute;
  top: -115px;
  right: -5px;
  pointer-events: none;
  z-index: 100;
}

#cardDetail #cardDetailWrap #charaStatus #cardDetailMiniChara img {
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: none;
  z-index: 10;
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(10%, rgba(0, 0, 0, 0)), color-stop(11%, black), color-stop(100%, black));
}

#cardDetail #cardDetailWrap #charaStatus #cardDetailMiniChara .bg {
  width: 148px;
  height: 72px;
  background: url("/magica/resource/image_web/page/chara/chara_sheet.png") left top no-repeat;
  background-size: 100% 100%;
  display: block;
  position: absolute;
  bottom: -15px;
  left: -webkit-calc(50% - 74px);
  pointer-events: none;
  z-index: 1;
}

#cardDetail #cardDetailWrap #charaStatus #cardDetailMiniChara #rare {
  width: 100%;
  position: absolute;
  top: 45px;
  left: 0;
  pointer-events: none;
  z-index: 5;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#cardDetail #cardDetailWrap #charaStatus #cardDetailMiniChara #rare span {
  width: 22px;
  height: 24px;
}

#cardDetail #cardDetailWrap #charaStatus .profileWrap .thStyle {
  width: 134px;
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  -webkit-border-radius: 0;
  text-align: left;
  padding-left: 12px;
  background: url("/magica/resource/image_web/page/collection/profile_header.png") left top no-repeat;
}

#cardDetail #cardDetailWrap #charaStatus .profileWrap .commonFrame3 {
  width: 564px;
  -webkit-border-radius: 0 6px 6px 6px;
  font-size: 16px;
  padding: 12px 25px;
}

#cardDetail #cardDetailWrap #charaStatus .exProfile1 .thStyle,
#cardDetail #cardDetailWrap #charaStatus .exProfile2 .thStyle {
  width: 174px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
}

#cardDetail #cardDetailWrap #charaStatus .exProfile1 .tdStyle,
#cardDetail #cardDetailWrap #charaStatus .exProfile2 .tdStyle {
  width: 390px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
}

#cardDetail #cardDetailWrap #charaStatus .exProfile1 {
  margin: 8px 0;
}

#cardDetail #cardDetailWrap #charaStatus .exProfile2 {
  padding-bottom: 30px;
}

#cardDetail #cardDetailWrap #charaStatus .exProfile2 .flexBox {
  margin-bottom: 2px;
}

#cardDetail #charaSkill {
  padding: 10px 0 10px 40px;
}

#cardDetail #charaSkill .commandList {
  padding: 5px 19px 2px 0;
}

#cardDetail #charaSkill .commandList li {
  width: 73px;
  height: 73px;
  margin: 0 0 0 3px;
}

#cardDetail #charaSkill .common_title_frame {
  position: absolute;
  top: 8px;
  left: -32px;
}

#cardDetail #charaSkill .commonFrame3 {
  width: 530px;
  margin: 2px auto 2px 35px;
}

#cardDetail #charaSkill .commonFrame3 .img {
  width: 68px;
  height: 68px;
  margin: 0 15px 0 0;
  position: relative;
  border-radius: 100%;
  z-index: 100;
}

#cardDetail #charaSkill .commonFrame3 .img:not(.doppel) {
  background: #e0d2bb;
}

#cardDetail #charaSkill .commonFrame3 .img img {
  width: 100%;
  height: 100%;
}

#cardDetail #charaSkill .commonFrame3 .common_line {
  position: absolute;
  top: 0;
  left: 0;
}

#cardDetail #charaSkill .commonFrame3 .detailWrap {
  width: 310px;
  position: relative;
}

#cardDetail #charaSkill .commonFrame3 .detailWrap .name {
  font-size: 17px;
}

#cardDetail #charaSkill .commonFrame3 .detailWrap .detail {
  margin: 9px 0 0;
  font-size: 14px;
}

#cardDetail #charaSkill .commonFrame3 .detailWrap .common_line {
  width: 345px;
  position: absolute;
  top: 15px;
  left: -40px;
}

#cardDetail #charaSkill .command {
  height: 88px;
}

#cardDetail #charaSkill .connect,
#cardDetail #charaSkill .magia {
  padding: 6px 0 6px 117px;
}

#cardDetail #charaSkill .connect .img {
  margin-top: 4px;
}

#cardDetail #charaSkill .magia {
  position: relative;
}

#cardDetail #charaSkill .magia .border {
  width: 412px;
  height: 2px;
  background: #e0d2bb;
  position: absolute;
  top: 41px;
  right: -2px;
}

#cardDetail #charaSkill .magia .magiaLevel {
  margin: 6px 0 22px;
  font-size: 15px;
}

#cardDetail #charaSkill .magia .magiaLevel .magiaLvIcon {
  margin-left: 13px;
}

#cardDetail #charaSkill .magia .magiaLevel .magiaLvIcon li {
  width: 16px;
  height: 18px;
}

#cardDetail #charaSkill .enhance {
  padding-top: 48px;
}

#cardDetail #charaSkill .enhance .getWrap {
  width: 507px;
  height: 93px;
  margin-bottom: 8px;
  margin-left: 10px;
  position: relative;
}

#cardDetail #charaSkill .enhance .getWrap.skill {
  background: url("/magica/resource/image_web/page/chara/tree/bg_skill.png") left top no-repeat;
  background-size: 100% 100%;
}

#cardDetail #charaSkill .enhance .getWrap.ability {
  background: url("/magica/resource/image_web/page/chara/tree/bg_ability.png") left top no-repeat;
  background-size: 100% 100%;
}

#cardDetail #charaSkill .enhance .getWrap .artIcon {
  width: 61px;
  height: 61px;
  position: absolute;
  top: 16px;
  left: 126px;
}

#cardDetail #charaSkill .enhance .getWrap .skillName {
  width: 277px;
  position: absolute;
  top: 13px;
  left: 198px;
  text-align: left;
  overflow: hidden;
}

#cardDetail #charaSkill .enhance .getWrap .skillDescription {
  width: 277px;
  height: 38px;
  position: absolute;
  bottom: 13px;
  left: 198px;
  text-align: left;
  font-size: 14px;
  overflow: hidden;
}

#cardDetail #charaSkill .doppelDetail {
  margin-top: 24px;
  margin-bottom: 12px;
}

#cardDetail #charaSkill .doppelDetail .common_line {
  width: 302px !important;
}

#cardDetail #charaSkill .doppelDetail .img:not(.doppel):before {
  width: 80px;
  height: 80px;
  background: url("/magica/resource/image_web/common/chara/icon_doppel.png") left top no-repeat;
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
  content: '';
}

#cardDetail #charaSkill .doppelDetail .img.doppel {
  height: 74px;
  position: relative;
  top: 4px;
  left: -10px;
  border-radius: 0;
}

#cardDetail #charaSkill .doppelDetail .img.doppel:before {
  width: 62px;
  height: 20px;
  background: url("/magica/resource/image_web/common/chara/text_doppel.png") left top no-repeat;
  background-size: 100% 100%;
  display: block;
  position: absolute;
  bottom: 2px;
  left: 14px;
  content: '';
  z-index: 100;
}

#cardDetail #charaSkill .doppelDetail .img.doppel img {
  width: 68px;
  height: 105px;
  position: absolute;
  top: -18px;
  left: 9px;
  z-index: 10;
}

#cardDetail #charaSkill .doppelDetail .img.doppel .bg {
  width: 79px;
  height: 74px;
  background: url("/magica/resource/image_web/common/chara/frame_doppel.png") left top no-repeat;
  background-size: 100% 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#cardDetail #charaSkill .doppelDetail .img.doppel #attribute {
  width: 16px;
  height: 16px;
  position: absolute;
  bottom: 17px;
  left: 17px;
  z-index: 99;
}

#cardDetail #charaSkill .doppelDetail .img.doppel #attribute span {
  width: 16px;
  height: 16px;
}

#cardDetail #charaSkill .commonFrame3:not(:last-child) {
  margin-bottom: 8px;
}

#cardDetail #charaMemoria {
  padding: 10px 0 0 24px;
}

#cardDetail #charaMemoria #equipWrap {
  width: 600px;
}

#cardDetail #charaMemoria #equipWrap.rental .memoriaWrap {
  width: 600px;
  height: 100px;
  margin-bottom: 10px;
  background: url(/magica/resource/image_web/common/chara/bg_chara_memoria_rantal.png);
  position: relative;
}

#cardDetail #charaMemoria #equipWrap.rental .memoriaWrap .name {
  text-shadow: -1px -1px 1px #731c72, 1px -1px 1px #731c72, -1px 1px 1px #731c72, 1px 1px 1px #731c72, -1px -1px #731c72, 1px -1px #731c72, -1px 1px #731c72, 1px 1px #731c72, -1px -1px 2px #731c72, 1px -1px 2px #731c72, -1px 1px 2px #731c72, 1px 1px 2px #731c72, -1px -1px 2px #731c72, 1px -1px 2px #731c72, -1px 1px 2px #731c72, 1px 1px 2px #731c72, -1px -1px 3px #731c72, 1px -1px 3px #731c72, -1px 1px 3px #731c72, 1px 1px 3px #731c72;
}

#cardDetail #charaMemoria .outerWrap {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#cardDetail #charaMemoria .common_title_frame {
  margin: 10px auto 10px;
  display: block;
}

#cardDetail #charaVoice {
  padding: 7px 0 0 36px;
}

#cardDetail #charaVoice .voiceDisplaySwitch {
  height: 40px;
  padding: 0px 0px 0px 32px;
  vertical-align: middle;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 41px;
}

#cardDetail #charaVoice .voiceDisplaySwitch .voiceCheck {
  width: 40px;
  height: 40px;
  background-image: url("/magica/resource/image_web/common/icon/icon_checkbox.png");
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -2px;
  left: 6px;
}

#cardDetail #charaVoice .voiceDisplaySwitch .voiceCheck.on:before {
  width: 27px;
  height: 21px;
  content: "";
  background-image: url("/magica/resource/image_web/common/icon/icon_checkbox_check.png");
  background-repeat: no-repeat;
  position: absolute;
  top: 9px;
  left: 6px;
}

#cardDetail #charaVoice .voiceDisplaySwitch .gemIcon {
  width: 37px;
  height: 37px;
  background-image: url("/magica/resource/image_web/page/collection/voice_girl_icon.png");
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -2px;
  left: 8px;
}

#cardDetail #charaVoice .common_title_frame {
  position: absolute;
  top: 8px;
  left: -32px;
}

#cardDetail #charaVoice .commonFrame3 {
  width: 530px;
  margin: 2px auto 10px 35px;
  padding-top: 50px;
}

#cardDetail #charaVoice .commonFrame3.hide {
  display: none;
}

#cardDetail #charaVoice .voiceBtn {
  height: 52px;
  margin-right: 26px;
  margin-bottom: 10px;
  margin-left: 26px;
  padding-left: 54px;
  position: relative;
  color: #864d16;
  font-size: 20px;
  line-height: 48px;
}

#cardDetail #charaVoice .voiceBtn.current {
  -webkit-box-shadow: 0 0 0 2px #ff3b81, 0 0 5px #e1c08d inset !important;
          box-shadow: 0 0 0 2px #ff3b81, 0 0 5px #e1c08d inset !important;
}

#cardDetail #charaVoice .voiceBtn.current:after {
  -webkit-filter: brightness(60%);
}

#cardDetail #charaVoice .voiceBtn:before, #cardDetail #charaVoice .voiceBtn:after {
  display: block;
  position: absolute;
  content: '';
}

#cardDetail #charaVoice .voiceBtn:before {
  width: 34px;
  height: 28px;
  background: url("/magica/resource/image_web/common/chara/icon_voice.png") left top no-repeat;
  top: 10px;
  left: 10px;
}

#cardDetail #charaVoice .voiceBtn:after {
  width: 73px;
  height: 40px;
  background: url("/magica/resource/image_web/common/btn/btn_voice.png") left top no-repeat;
  top: 5px;
  right: 5px;
}

#cardDetail #charaVoice .voiceBtn.off {
  display: none;
}

#cardDetail #charaIllust,
#cardDetail #charaSetting {
  padding: 10px 0 0 40px;
}

#cardDetail #charaIllust .common_title_frame,
#cardDetail #charaSetting .common_title_frame {
  position: absolute;
  top: 8px;
  left: -32px;
}

#cardDetail #charaIllust .commonFrame3,
#cardDetail #charaSetting .commonFrame3 {
  width: 530px;
  margin: 2px auto 15px 35px;
  padding-top: 54px;
  padding-bottom: 10px;
}

#cardDetail #charaIllust .commonFrame3 .live2dChangeBtn,
#cardDetail #charaSetting .commonFrame3 .live2dChangeBtn {
  width: 472px;
  height: 52px;
  margin: 0 auto;
  padding-left: 52px;
  font-size: 20px;
  line-height: 48px;
}

#cardDetail #charaIllust .commonFrame3 .live2dChangeBtn:not(:last-child),
#cardDetail #charaSetting .commonFrame3 .live2dChangeBtn:not(:last-child) {
  margin-bottom: 12px;
}

#cardDetail #charaIllust .commonFrame3 .live2dChangeBtn:before,
#cardDetail #charaSetting .commonFrame3 .live2dChangeBtn:before {
  width: 32px;
  height: 32px;
  background: url("/magica/resource/image_web/common/chara/icon_live2d.png") left top no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -webkit-calc(50% - 16px);
  left: 12px;
  content: '';
}

#cardDetail #charaIllust .commonFrame3 .live2dChangeBtn.current:after,
#cardDetail #charaSetting .commonFrame3 .live2dChangeBtn.current:after {
  width: 476px;
  height: 56px;
  background: url("/magica/resource/image_web/common/chara/frame_live2d_select.png") left top no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -4px;
  left: -4px;
  content: '';
}

#cardDetail #charaIllust .commonFrame3.discSetting,
#cardDetail #charaSetting .commonFrame3.discSetting {
  padding-top: 24px;
}

#cardDetail #charaIllust .commonFrame3 .mb_pink,
#cardDetail #charaSetting .commonFrame3 .mb_pink {
  width: 78px;
  height: 40px;
  font-size: 18px;
  line-height: 1;
}

#cardDetail #charaIllust .commonFrame3 .common_line,
#cardDetail #charaSetting .commonFrame3 .common_line {
  width: 490px;
  margin: 10px auto;
}

#cardDetail #charaIllust .commonFrame3 .flexBox,
#cardDetail #charaSetting .commonFrame3 .flexBox {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#cardDetail #charaIllust .commonFrame3 .miniCharaBtn .mb_pink:not(:last-child),
#cardDetail #charaSetting .commonFrame3 .miniCharaBtn .mb_pink:not(:last-child) {
  margin-right: 5px;
}

#cardDetail #charaIllust .commonFrame3 .cardIllustWrap,
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap {
  margin-bottom: 8px;
}

#cardDetail #charaIllust .commonFrame3 .cardIllustWrap:not(:last-child),
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap:not(:last-child) {
  margin-right: 15px;
}

#cardDetail #charaIllust .commonFrame3 .cardIllustWrap .offIcon,
#cardDetail #charaIllust .commonFrame3 .cardIllustWrap .userCharaIcon,
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap .offIcon,
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap .userCharaIcon {
  margin-bottom: 10px;
  width: 82px;
  height: 82px;
}

#cardDetail #charaIllust .commonFrame3 .cardIllustWrap .offIcon .att,
#cardDetail #charaIllust .commonFrame3 .cardIllustWrap .offIcon .rank,
#cardDetail #charaIllust .commonFrame3 .cardIllustWrap .offIcon .star,
#cardDetail #charaIllust .commonFrame3 .cardIllustWrap .offIcon .bg,
#cardDetail #charaIllust .commonFrame3 .cardIllustWrap .userCharaIcon .att,
#cardDetail #charaIllust .commonFrame3 .cardIllustWrap .userCharaIcon .rank,
#cardDetail #charaIllust .commonFrame3 .cardIllustWrap .userCharaIcon .star,
#cardDetail #charaIllust .commonFrame3 .cardIllustWrap .userCharaIcon .bg,
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap .offIcon .att,
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap .offIcon .rank,
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap .offIcon .star,
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap .offIcon .bg,
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap .userCharaIcon .att,
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap .userCharaIcon .rank,
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap .userCharaIcon .star,
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap .userCharaIcon .bg {
  width: 82px;
  height: 82px;
  background-size: 82px 82px;
}

#cardDetail #charaIllust .commonFrame3 .cardIllustWrap .offIcon img,
#cardDetail #charaIllust .commonFrame3 .cardIllustWrap .userCharaIcon img,
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap .offIcon img,
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap .userCharaIcon img {
  width: 78px;
  height: 78px;
}

#cardDetail #charaIllust .commonFrame3 .cardIllustWrap.off .offIcon,
#cardDetail #charaSetting .commonFrame3 .cardIllustWrap.off .offIcon {
  width: 82px;
  height: 82px;
  background: url("/magica/resource/image_web/common/chara/icon_chara_off.png") left top no-repeat;
  background-size: 82px 82px;
}

#cardDetail #charaIllust .discPreview,
#cardDetail #charaSetting .discPreview {
  padding-right: 20px;
}

#cardDetail #charaIllust .discPreview.flexBox,
#cardDetail #charaSetting .discPreview.flexBox {
  -webkit-box-pack: end !important;
      -ms-flex-pack: end !important;
          justify-content: flex-end !important;
}

#cardDetail #charaIllust .discPreview .discWrap,
#cardDetail #charaSetting .discPreview .discWrap {
  width: 78px;
  height: 72px;
  margin-left: 2px;
  position: relative;
}

#cardDetail #charaIllust .discPreview .discWrap img,
#cardDetail #charaSetting .discPreview .discWrap img {
  width: 85px;
  height: 94px;
  position: absolute;
  bottom: -6px;
  left: -2px;
}

#cardDetail #charaIllust .discPreview .discWrap .attribute,
#cardDetail #charaSetting .discPreview .discWrap .attribute {
  width: 16px;
  height: 16px;
  position: absolute;
  top: 41px;
  left: 12px;
  z-index: 100;
}

#cardDetail #charaIllust .discPreview .discWrap .discText,
#cardDetail #charaSetting .discPreview .discWrap .discText {
  z-index: 1000;
}

#cardDetail #charaIllust .discPreview .discWrap.MPUP,
#cardDetail #charaSetting .discPreview .discWrap.MPUP {
  background: url("/magica/resource/image_web/common/chara/bg_disc_accele.png") center center no-repeat;
  background-size: contain;
}

#cardDetail #charaIllust .discPreview .discWrap.MPUP .discText,
#cardDetail #charaSetting .discPreview .discWrap.MPUP .discText {
  width: 109px;
  height: 36px;
  background: url("/magica/resource/image_web/common/chara/disc_accele_text.png") center center no-repeat;
  background-size: 65% 65%;
  position: absolute;
  right: -webkit-calc(50% - 58px);
  bottom: -12px;
}

#cardDetail #charaIllust .discPreview .discWrap.RANGE_H, #cardDetail #charaIllust .discPreview .discWrap.RANGE_V,
#cardDetail #charaSetting .discPreview .discWrap.RANGE_H,
#cardDetail #charaSetting .discPreview .discWrap.RANGE_V {
  background: url("/magica/resource/image_web/common/chara/bg_disc_blast.png") center center no-repeat;
  background-size: contain;
}

#cardDetail #charaIllust .discPreview .discWrap.RANGE_H .discText, #cardDetail #charaIllust .discPreview .discWrap.RANGE_V .discText,
#cardDetail #charaSetting .discPreview .discWrap.RANGE_H .discText,
#cardDetail #charaSetting .discPreview .discWrap.RANGE_V .discText {
  width: 108px;
  height: 72px;
  position: absolute;
  right: -webkit-calc(50% - 58px);
  bottom: -31px;
}

#cardDetail #charaIllust .discPreview .discWrap.RANGE_H .discText,
#cardDetail #charaSetting .discPreview .discWrap.RANGE_H .discText {
  background: url("/magica/resource/image_web/common/chara/disc_blast_h_text.png") center center no-repeat;
  background-size: 65% 65%;
}

#cardDetail #charaIllust .discPreview .discWrap.RANGE_V .discText,
#cardDetail #charaSetting .discPreview .discWrap.RANGE_V .discText {
  background: url("/magica/resource/image_web/common/chara/disc_blast_v_text.png") center center no-repeat;
  background-size: 65% 65%;
}

#cardDetail #charaIllust .discPreview .discWrap.CHARGE,
#cardDetail #charaSetting .discPreview .discWrap.CHARGE {
  background: url("/magica/resource/image_web/common/chara/bg_disc_charge.png") center center no-repeat;
  background-size: contain;
}

#cardDetail #charaIllust .discPreview .discWrap.CHARGE .discText,
#cardDetail #charaSetting .discPreview .discWrap.CHARGE .discText {
  width: 116px;
  height: 36px;
  background: url("/magica/resource/image_web/common/chara/disc_charge_text.png") center center no-repeat;
  background-size: 65% 65%;
  position: absolute;
  right: -webkit-calc(50% - 61px);
  bottom: -12px;
}

#cardDetail #charaIllust .discPreview .discWrap.RANGE_S, #cardDetail #charaIllust .discPreview .discWrap.RANGE_B,
#cardDetail #charaSetting .discPreview .discWrap.RANGE_S,
#cardDetail #charaSetting .discPreview .discWrap.RANGE_B {
  background: url("/magica/resource/image_web/common/chara/bg_disc_blast.png") center center no-repeat;
  background-size: contain;
}

#cardDetail #charaIllust .discPreview .discWrap.RANGE_S .discText, #cardDetail #charaIllust .discPreview .discWrap.RANGE_B .discText,
#cardDetail #charaSetting .discPreview .discWrap.RANGE_S .discText,
#cardDetail #charaSetting .discPreview .discWrap.RANGE_B .discText {
  width: 108px;
  height: 72px;
  position: absolute;
  right: -webkit-calc(50% - 64px);
  bottom: -27px;
}

#cardDetail #charaIllust .discPreview .discWrap.RANGE_S .discText,
#cardDetail #charaSetting .discPreview .discWrap.RANGE_S .discText {
  background: url("/magica/resource/image_web/common/chara/disc_range_s_text.png") center center no-repeat;
  background-size: 71px 34px;
}

#cardDetail #charaIllust .discPreview .discWrap.RANGE_B .discText,
#cardDetail #charaSetting .discPreview .discWrap.RANGE_B .discText {
  background: url("/magica/resource/image_web/common/chara/disc_range_b_text.png") center center no-repeat;
  background-size: 71px 34px;
}

#outline .charaImg {
  position: absolute;
  top: -webkit-calc(50% - 350px);
  left: -310px;
  z-index: 1;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), color-stop(98%, black), to(rgba(0, 0, 0, 0)));
}

#outline .charaImg img {
  height: 660px;
}

#outline .popupTitle {
  width: 460px;
  margin-top: 14px;
  margin-bottom: 15px;
}

#outline .outlineWrap {
  width: 572px;
  height: 408px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
}

#outline .outlineWrap .outline {
  height: 326px;
  padding: 0 46px 0;
  overflow: hidden;
  font-size: 18px;
  line-height: 27px;
  text-align: justify;
}

/* rulesPopup --------------------------------------------------------------- */
#rulesBase {
  width: 948px;
  height: 462px;
  padding: 20px 40px;
  position: relative;
  overflow: hidden;
}

#rulesBase .rulesPop {
  width: 100%;
  height: auto;
  min-height: 100%;
  padding-bottom: 80px;
  position: relative;
  font-size: 18px;
  line-height: 30px;
  text-align: left;
}

#rulesBase .rulesPop .linkText {
  color: #0645ad;
  text-decoration: underline;
}

#rulesBase .rulesPop .ruleTab {
  width: 100%;
  margin-bottom: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#rulesBase .rulesPop .ruleTab li {
  width: 410px;
  line-height: 60px;
}

#rulesBase .rulesPop .ruleTab li span {
  font-size: 16px;
}

#rulesBase .rulesPop .ruleTab .ruleDisp {
  margin-right: 10px;
  display: inline-block;
}

#rulesBase .rulesPop .ruleTab .thirteenDisp {
  display: inline-block;
}

#rulesBase .rulesPop p {
  margin-top: 10px;
  font-size: 20px;
  text-align: center;
}

#rulesBase.rule .thirteen {
  display: none;
}

#rulesBase.thirteen .rule {
  display: none;
}

/* warningPop --------------------------------------------------------------- */
.warningPop .popupTextArea {
  display: block !important;
  position: relative;
  overflow: hidden;
  font-size: 20px !important;
}

.warningPop .popupTextArea .scrollInnerWrap {
  width: 100%;
  height: auto;
  min-height: 100%;
  padding: 20px 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.warningPop .popupBtnArea {
  margin-top: 18px !important;
}

/* form --------------------------------------------------------------------- */
.commonInput {
  min-width: 200px;
  padding: 0 10px;
  background: #ffffff;
  line-height: 1.8;
  border: 2px solid #dccab3;
  -webkit-border-radius: 5px;
  -webkit-box-shadow: 3px 3px 3px 3px #f3f1f0 inset;
}

@-webkit-keyframes common_fade_in {
  0% {
    -webkit-transform: translateZ(0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
    opacity: 1;
  }
}

@-webkit-keyframes common_fade_out {
  0% {
    -webkit-transform: translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0);
    opacity: 0;
  }
}

@-webkit-keyframes common_fade_in_out {
  0% {
    -webkit-transform: translateZ(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateZ(0);
    opacity: .8;
  }
  100% {
    -webkit-transform: translateZ(0);
    opacity: 0;
  }
}

@-webkit-keyframes common_fade_in_out2 {
  0% {
    -webkit-transform: translateZ(0);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateZ(0);
    opacity: .5;
  }
  100% {
    -webkit-transform: translateZ(0);
    opacity: 0;
  }
}

/* imageZoomView --------------------------------------------------------------- */
#overImageZoom {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 902;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#overImageZoom img {
  max-width: 100%;
  max-height: 100%;
}

/* convertGemPopup --------------------------------------------------------------- */
.itemSalePop .itemSalePopup {
  width: 100%;
  height: 401px;
  position: absolute;
  top: 55px;
  left: 0px;
}

.itemSalePop .itemSalePopup .messageWrap {
  width: 420px;
  display: inline-block;
  position: absolute;
  top: 2px;
  left: 45px;
  font-size: 20px;
  text-align: center;
}

.itemSalePop .itemSalePopup .messageWrap.isCrystal {
  top: -6px;
  font-size: 18px;
}

.itemSalePop .itemSalePopup .crystalCaution {
  width: 440px;
  font-size: 14px;
  position: absolute;
  top: 19px;
  left: 35px;
}

.itemSalePop .itemSalePopup .itemPopMiniWrap {
  width: 220px;
  height: 174px;
  position: absolute;
  top: 141px;
  left: 143px;
}

.itemSalePop .itemSalePopup .itemPopMiniWrap.isCrystal {
  width: 446px;
  left: 30px;
}

.itemSalePop .itemSalePopup .itemPopMiniWrap.isCrystal .partition {
  width: 16px;
  height: 158px;
  background: url("/magica/resource/image_web/page/item/partition.png") left top no-repeat;
  position: absolute;
  top: 6px;
  left: 213px;
}

.itemSalePop .itemSalePopup .itemPopMiniWrap.isCrystal .crystal.itemImg {
  right: 70px;
  left: auto;
}

.itemSalePop .itemSalePopup .itemPopMiniWrap.isCrystal .crystal.hasCount {
  right: 0px;
  left: auto;
}

.itemSalePop .itemSalePopup .itemPopMiniWrap.isCrystal .crystal.popNameMiniWrap {
  right: 0px;
  left: auto;
}

.itemSalePop .itemSalePopup .itemPopMiniWrap.isCrystal .crystal.afterPoint {
  right: 38px;
  left: auto;
}

.itemSalePop .itemSalePopup .itemPopMiniWrap .itemImg {
  width: 76px;
  height: 76px;
  display: block;
  position: absolute;
  top: 14px;
  left: 70px;
}

.itemSalePop .itemSalePopup .itemPopMiniWrap .itemImg img {
  width: 76px;
}

.itemSalePop .itemSalePopup .itemPopMiniWrap .hasCount {
  width: 220px;
  position: absolute;
  bottom: 6px;
  left: 0px;
  font-size: 14px;
  text-align: center;
}

.itemSalePop .itemSalePopup .itemPopMiniWrap .popNameMiniWrap {
  width: 220px;
  position: absolute;
  top: 96px;
  left: 0px;
  font-size: 16px;
  text-align: center;
}

.itemSalePop .itemSalePopup .itemPopMiniWrap .afterPoint {
  width: 138px;
  position: absolute;
  top: 121px;
  left: 38px;
  color: #ffffff;
  font-size: 16px;
  text-align: right;
  z-index: 3;
}

.itemSalePop .itemSalePopup .itemPopMiniWrap .afterPoint .pointFrame {
  width: 138px;
  padding-right: 15px;
  font-size: 18px;
  line-height: 24px;
  text-align: right;
}

.itemSalePop .itemSalePopup .itemPopMiniWrap .afterPoint .pointFrame:before {
  width: 100px;
  padding-left: 15px;
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 16px;
  text-align: left;
  content: "入手数";
  z-index: 2;
}

.itemSalePop .itemSalePopup .arrowMark {
  width: 34px;
  height: 14px;
  background: url("/magica/resource/image_web/page/item/arrow.png");
  position: absolute;
  top: 127px;
  left: 238px;
}

.itemSalePop .itemSalePopup #saleSelectWrap {
  width: 446px;
  height: 83px;
  position: absolute;
  top: 40px;
  left: 30px;
}

.itemSalePop .itemSalePopup #saleSelectWrap .gemImage {
  width: 64px;
  height: 64px;
  position: absolute;
  top: 8px;
  left: 72px;
  z-index: 2;
}

.itemSalePop .itemSalePopup #saleSelectWrap .gemImage img {
  width: 64px;
}

.itemSalePop .itemSalePopup #saleSelectWrap #itemNumSelectWrap {
  width: 270px;
  height: 42px;
  position: absolute;
  top: 19px;
  left: 30px;
}

.itemSalePop .itemSalePopup #saleSelectWrap #itemNumSelectWrap .minusBtn, .itemSalePop .itemSalePopup #saleSelectWrap #itemNumSelectWrap .plusBtn {
  width: 42px;
  height: 42px;
  padding: 0;
  position: absolute;
  top: 0px;
  z-index: 2;
}

.itemSalePop .itemSalePopup #saleSelectWrap #itemNumSelectWrap .minusBtn.grayScale, .itemSalePop .itemSalePopup #saleSelectWrap #itemNumSelectWrap .plusBtn.grayScale {
  pointer-events: none;
}

.itemSalePop .itemSalePopup #saleSelectWrap #itemNumSelectWrap .minusBtn {
  background: url("/magica/resource/image_web/page/shop/btn_minus.png");
  left: 0px;
}

.itemSalePop .itemSalePopup #saleSelectWrap #itemNumSelectWrap .plusBtn {
  background: url("/magica/resource/image_web/page/shop/btn_plus.png");
  right: 0px;
}

.itemSalePop .itemSalePopup #saleSelectWrap #itemNumSelectWrap .selectNumberWrap {
  width: 258px;
  padding-left: 52px;
  position: absolute;
  top: 7px;
  left: 0px;
  font-size: 20px;
  text-align: center;
}

.itemSalePop .itemSalePopup #saleSelectWrap .maxBtn {
  width: 102px;
  position: absolute;
  top: 23px;
  right: 26px;
}

.itemSalePop .itemSalePopup #saleSelectWrap .maxBtn.grayScale {
  pointer-events: none;
}

.itemSalePop .itemSalePopup .hasAmount {
  width: 230px;
  height: 26px;
  position: absolute;
  top: 242px;
  left: 145px;
  color: #ffffff;
  font-size: 16px;
  line-height: 28px;
  text-align: right;
}

.itemSalePop .itemSalePopup .hasAmount .pointFrame {
  width: 230px;
  height: 24px;
  padding-right: 15px;
  font-size: 18px;
  line-height: 24px;
  text-align: right;
}

.itemSalePop .itemSalePopup .hasAmount:before {
  width: 76px;
  height: 33px;
  padding-left: 40px;
  background-image: url("/magica/resource/image_web/common/icon/icon_prism_f.png");
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  background-size: 34px 34px;
  position: absolute;
  top: -2px;
  left: -4px;
  color: #ffffff;
  font-size: 16px;
  line-height: 33px;
  text-align: left;
  content: "所持";
  z-index: 2;
}

.itemSalePop .itemSalePopup .saleCancel {
  position: absolute;
  bottom: 0px;
  left: 47px;
}

.itemSalePop .itemSalePopup #saleDecide {
  position: absolute;
  right: 47px;
  bottom: 0px;
}

.saleComplete.crystal .popupInner .popupTextArea {
  padding-top: 11px;
  line-height: 31px;
}

.saleComplete.crystal .prismWrap {
  margin: 11px auto 8px 21px;
}

.saleComplete.crystal .crystalWrap {
  margin: 0px auto 6px 21px;
}

.saleComplete .popupInner .popupTextArea {
  width: 100%;
  height: 348px !important;
  padding-top: 40px;
  display: block;
  position: relative;
  font-size: 22px;
  line-height: 30px;
}

.saleComplete .afterText {
  font-size: 18px;
}

.saleComplete .prismWrap, .saleComplete .crystalWrap {
  width: 470px;
  height: 106px;
  margin: 42px auto 35px 21px;
  position: relative;
}

.saleComplete .prismWrap .itemImg, .saleComplete .crystalWrap .itemImg {
  display: block;
  position: absolute;
  top: 11px;
  left: 11px;
}

.saleComplete .prismWrap .itemImg img, .saleComplete .crystalWrap .itemImg img {
  width: 80px;
}

.saleComplete .prismWrap .hasCount, .saleComplete .crystalWrap .hasCount {
  height: 24px;
  position: absolute;
  bottom: 11px;
  left: 104px;
  font-size: 18px;
  line-height: 24px;
}

.saleComplete .prismWrap .hasCount .hasLeft, .saleComplete .crystalWrap .hasCount .hasLeft {
  width: 78px;
  height: 24px;
  background-color: #b28750;
  display: inline-block;
  color: #ffffff;
  border-radius: 5px 0 0 5px;
}

.saleComplete .prismWrap .hasCount .hasQuantity, .saleComplete .crystalWrap .hasCount .hasQuantity {
  height: 24px;
  margin-left: 10px;
  display: inline-block;
}

.saleComplete .prismWrap .popNameMiniWrap, .saleComplete .crystalWrap .popNameMiniWrap {
  width: 364px;
  position: absolute;
  top: 8px;
  left: 104px;
  font-size: 20px;
  text-align: left;
}

.saleComplete .prismWrap .popDescription, .saleComplete .crystalWrap .popDescription {
  width: 360px;
  height: 40px;
  display: block;
  position: absolute;
  top: 33px;
  left: 104px;
  font-size: 16px;
  text-align: left;
}

/* ios11対策を分離(Androidの負荷が高すぎる) */
body.ios #memoriaDetailWrap #memoriaDetailPopup .popupDetailWrap .infoWrap {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios #charaComposeResult .resultInner .inner .statusWrap.equip .icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios #charaListWrap {
  -webkit-transform: translateZ(0);
}

body.ios #charaListWrap .touch {
  -webkit-transform: translateZ(0);
}

body.ios #charaListWrap #charaList {
  -webkit-transform: translateZ(0);
}

body.ios #charaListWrap #charaList .list {
  -webkit-transform: translateZ(0);
}

body.ios .commonEffect .effect01, body.ios .commonEffect .effect02, body.ios .commonEffect .effect03 {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios #followImageWrap {
  -webkit-transform: translateZ(0);
}

body.ios #sideMenu {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios #sideMenu #menu.overlayOn:before {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios #sideMenu #menuBtns li div.overlayOn:before {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios #sideMenu #sideBigBtns div.overlayOn:before {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios #sideMenu .homeBtn.overlayOn:before {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios .touch {
  -webkit-transform: scale(0.95) translateZ(0);
  transform: scale(0.95) translateZ(0);
}

body.ios .btn.off {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios .mb_white, body.ios .mb_pink {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios .common_tab li.touch {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios .common_tab img {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios #rare span, body.ios .rare span {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios .expGaugeWrap .expGaugeInner {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios .expGaugeWrap .expGaugeInner2 {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios .expGaugeWrap .expGaugeInner3 {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios .episodeGaugeWrap .episodeGaugeInner {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios .episodeGaugeWrap .episodeGaugeInner2 {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios .commonFrame1:after {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios .commonFrame2:after {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body.ios .commonFrame4 {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}