@charset "UTF-8";
@font-face {
  font-family: "iconfont";
  src: url("../font/iconfont.eot?20181191017");
  src: url("../font/iconfont.eot?#iefix&20181191017") format("eot"), url("../font/iconfont.woff2?20181191017") format("woff2"), url(__WOFF_BASE64__) format("woff"), url("../font/iconfont.ttf?20181191017") format("truetype"), url("../font/iconfont.svg#iconfont&?20181191017") format("svg"); }

.icon-adjust:before, .icon-bell:before, .icon-card_share:before, .icon-character:before, .icon-chr_comment:before, .icon-circle_close:before, .icon-cmn_more:before, .icon-contents:before, .icon-dispatch:before, .icon-exbattle:before, .icon-facebook:before, .icon-follow_respect:before, .icon-follow_rival:before, .icon-game-offline:before, .icon-game-online:before, .icon-global_en:before, .icon-global_ja:before, .icon-home:before, .icon-infomation:before, .icon-link-about:before, .icon-link-arrow1:before, .icon-link-arrow_down:before, .icon-link-arrow_left:before, .icon-link-arrow_right:before, .icon-link-arrow_up:before, .icon-link-drop_down:before, .icon-link-drop_up:before, .icon-link-external:before, .icon-link-external2:before, .icon-link-manage:before, .icon-link-pdf:before, .icon-link-popup:before, .icon-logo_pc:before, .icon-logo_ps:before, .icon-logo_steam:before, .icon-megafon:before, .icon-music:before, .icon-new_arrow:before, .icon-news:before, .icon-operation-info-arrow:before, .icon-others:before, .icon-pagetop:before, .icon-plus:before, .icon-prof-setting:before, .icon-qanda:before, .icon-ryu:before, .icon-search:before, .icon-share:before, .icon-signin:before, .icon-site-info-announce:before, .icon-site-info-failure:before, .icon-site-info-maintenance:before, .icon-site-info-site-update:before, .icon-site-info-update:before, .icon-statistics:before, .icon-stats:before, .icon-submit-search:before, .icon-support:before, .icon-twitter:before, .icon-usr-form-ng:before, .icon-usr-form-ok:before, .icon-usr-login:before, .icon-usr-logout:before, .icon-usr-mylist:before, .icon-usr-setting:before, section.fightersBlock div.playerStatus .useDevice p.ps:before, section.fightersBlock div.playerStatus .useDevice p.pc:before, section.fightersBlock div.shareButton label ul li.fb a:before, section.fightersBlock div.shareButton label ul li.tw a:before, section.profileBlock div.profileWrap div.followButton:before, section.profileBlock div.profileWrap div.followButton.respect:before, section.profileBlock div.profileWrap div.followButton.rival:before, section.profileBlock div.profileWrap ul.followLink li:before, section.profileBlock div.profileWrap ul.followLink li.respectBtn:before, section.profileBlock div.profileWrap ul.followLink li.rivalBtn:before, section.profileBlock div.profileWrap div.infoWrap a.rankingButton:after, section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt.respect:before, section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt.rival:before, section.battleBlock div.battleWrap li.battleType div.battleHistory p.resultTtl span:after, section.battleBlock div.battlePastdata a:after, #modal.modalZone .mContent.no02 .tab li label span.icon:before, #modal.modalZone .mContent.no02 .tab li.respect span.icon:before, #modal.modalZone .mContent.no02 .tab li.rival span.icon:before, #modal.modalZone .mContent.no01 div.sharebox ul li.fb a:before, #modal.modalZone .mContent.no01 div.sharebox ul li.tw a:before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none; }

.icon-adjust:before {
  content: ""; }

.icon-bell:before {
  content: ""; }

.icon-card_share:before {
  content: ""; }

.icon-character:before {
  content: ""; }

.icon-chr_comment:before {
  content: ""; }

.icon-circle_close:before {
  content: ""; }

.icon-cmn_more:before {
  content: ""; }

.icon-contents:before {
  content: ""; }

.icon-dispatch:before {
  content: ""; }

.icon-exbattle:before {
  content: ""; }

.icon-facebook:before {
  content: ""; }

.icon-follow_respect:before {
  content: ""; }

.icon-follow_rival:before {
  content: ""; }

.icon-game-offline:before {
  content: ""; }

.icon-game-online:before {
  content: ""; }

.icon-global_en:before {
  content: ""; }

.icon-global_ja:before {
  content: ""; }

.icon-home:before {
  content: ""; }

.icon-infomation:before {
  content: ""; }

.icon-link-about:before {
  content: ""; }

.icon-link-arrow1:before {
  content: ""; }

.icon-link-arrow_down:before {
  content: ""; }

.icon-link-arrow_left:before {
  content: ""; }

.icon-link-arrow_right:before {
  content: ""; }

.icon-link-arrow_up:before {
  content: ""; }

.icon-link-drop_down:before {
  content: ""; }

.icon-link-drop_up:before {
  content: ""; }

.icon-link-external:before {
  content: ""; }

.icon-link-external2:before {
  content: ""; }

.icon-link-manage:before {
  content: ""; }

.icon-link-pdf:before {
  content: ""; }

.icon-link-popup:before {
  content: ""; }

.icon-logo_pc:before {
  content: ""; }

.icon-logo_ps:before {
  content: ""; }

.icon-logo_steam:before {
  content: ""; }

.icon-megafon:before {
  content: ""; }

.icon-music:before {
  content: ""; }

.icon-new_arrow:before {
  content: ""; }

.icon-news:before {
  content: ""; }

.icon-operation-info-arrow:before {
  content: ""; }

.icon-others:before {
  content: ""; }

.icon-pagetop:before {
  content: ""; }

.icon-plus:before {
  content: ""; }

.icon-prof-setting:before {
  content: ""; }

.icon-qanda:before {
  content: ""; }

.icon-ryu:before {
  content: ""; }

.icon-search:before {
  content: ""; }

.icon-share:before {
  content: ""; }

.icon-signin:before {
  content: ""; }

.icon-site-info-announce:before {
  content: ""; }

.icon-site-info-failure:before {
  content: ""; }

.icon-site-info-maintenance:before {
  content: ""; }

.icon-site-info-site-update:before {
  content: ""; }

.icon-site-info-update:before {
  content: ""; }

.icon-statistics:before {
  content: ""; }

.icon-stats:before {
  content: ""; }

.icon-submit-search:before {
  content: ""; }

.icon-support:before {
  content: ""; }

.icon-twitter:before {
  content: ""; }

.icon-usr-form-ng:before {
  content: ""; }

.icon-usr-form-ok:before {
  content: ""; }

.icon-usr-login:before {
  content: ""; }

.icon-usr-logout:before {
  content: ""; }

.icon-usr-mylist:before {
  content: ""; }

.icon-usr-setting:before {
  content: ""; }

body#profile {
  font-family: 'Oswald' !important;
  letter-spacing: 0.01em;
  font-weight: normal !important; }
  body#profile div#wrapper {
    background: none;
    z-index: 1; }
    @media screen and (min-width: 961px) {
      body#profile div#wrapper {
        margin: 0 0 0 0px;
        width: calc(100% - 0px - 0px); } }

main.profile {
  position: relative;
  font-style: italic;
  overflow: hidden; }

@media screen and (min-width: 961px) {
  main.profile {
    min-width: 1100px; }
  section.fightersBlock {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 0; }
    section.fightersBlock:before {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -2;
      display: block;
      content: "";
      background-color: rgba(0, 0, 0, 0.3); }
    section.fightersBlock:after {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -2;
      display: block;
      content: "";
      background: url(../../../as/img/profile/mv_bg.png?h=6b4a153254423530f7ce6af2641b6370); }
    section.fightersBlock div.playerStatus {
      position: absolute;
      top: 20px;
      left: 0;
      color: #fff;
      font-size: 11px;
      font-size: 1.1rem; }
      section.fightersBlock div.playerStatus div {
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: skewX(-30deg);
        -moz-transform: skewX(-30deg);
        -ms-transform: skewX(-30deg);
        -o-transform: skewX(-30deg);
        transform: skewX(-30deg);
        padding: 7px 0px 0px 24px;
        height: 27px; }
        section.fightersBlock div.playerStatus div p {
          margin: 0;
          font-style: normal;
          -webkit-transform-origin: 0 0;
          -moz-transform-origin: 0 0;
          transform-origin: 0 0;
          -webkit-transform: skewX(30deg);
          -moz-transform: skewX(30deg);
          -ms-transform: skewX(30deg);
          -o-transform: skewX(30deg);
          transform: skewX(30deg); }
          section.fightersBlock div.playerStatus div p:before {
            vertical-align: middle;
            margin: 0 8px 0 0;
            font-size: 19px;
            font-size: 1.9rem;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -ms-border-radius: 15px;
            border-radius: 15px; }
      section.fightersBlock div.playerStatus .useDevice {
        background: rgba(0, 0, 0, 0.7);
        width: 150px; }
        section.fightersBlock div.playerStatus .useDevice p.ps:before {
          content: ""; }
        section.fightersBlock div.playerStatus .useDevice p.ps:before {
          background: #31ade0;
          padding: 2px; }
        section.fightersBlock div.playerStatus .useDevice p.pc:before {
          content: ""; }
        section.fightersBlock div.playerStatus .useDevice p.pc:before {
          background: #333;
          padding: 2px; }
      section.fightersBlock div.playerStatus .nowStatus {
        width: 130px;
        padding-left: 26px; }
        section.fightersBlock div.playerStatus .nowStatus p {
          position: relative; }
          section.fightersBlock div.playerStatus .nowStatus p:before {
            position: relative;
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px; }
          section.fightersBlock div.playerStatus .nowStatus p:after {
            position: absolute;
            top: 4px;
            left: 4px;
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -ms-border-radius: 15px;
            border-radius: 15px; }
        section.fightersBlock div.playerStatus .nowStatus.online {
          background: rgba(85, 0, 0, 0.7); }
          section.fightersBlock div.playerStatus .nowStatus.online p:before {
            background: rgba(212, 6, 6, 0.5); }
          section.fightersBlock div.playerStatus .nowStatus.online p:after {
            background: #d40606; }
        section.fightersBlock div.playerStatus .nowStatus.offline {
          background: rgba(51, 51, 51, 0.7); }
          section.fightersBlock div.playerStatus .nowStatus.offline p:before {
            background: transparent; }
          section.fightersBlock div.playerStatus .nowStatus.offline p:after {
            background: #888888; }
    section.fightersBlock div.shareButton label {
      display: block;
      position: absolute;
      top: -59px;
      right: -59px;
      width: 118px;
      height: 113px;
      padding: 0 0 5px 0;
      cursor: pointer;
      color: #fff;
      background: rgba(56, 194, 219, 0.7);
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flexbox;
      display: -moz-flexbox;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-box-lines: single;
      -moz-box-lines: single;
      -webkit-flex-wrap: nowrap;
      -moz-flex-wrap: nowrap;
      -ms-flex-wrap: none;
      flex-wrap: nowrap;
      align-items: flex-end;
      justify-content: center;
      -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
      box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      font-size: 15px;
      font-size: 1.5rem;
      font-style: normal;
      font-weight: normal;
      letter-spacing: 1px;
      z-index: 10;
      cursor: pointer;
      transition: all 0.3s ease; }
      section.fightersBlock div.shareButton label:after {
        position: absolute;
        top: 55%;
        left: 44%;
        content: "";
        display: block;
        border-style: solid;
        border-width: 0 6px 6px 6px;
        border-color: transparent transparent #fff transparent;
        transition: all 0.3s ease; }
      section.fightersBlock div.shareButton label:hover {
        background: #38c2db; }
      section.fightersBlock div.shareButton label ul {
        position: absolute;
        top: 15px;
        right: 80px;
        transition: all 0.3s ease; }
        section.fightersBlock div.shareButton label ul li {
          position: absolute;
          top: 0;
          left: -30px;
          transition: all 0.3s ease;
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          transform: rotate(-45deg); }
          section.fightersBlock div.shareButton label ul li a {
            display: block;
            width: 30px;
            height: 30px;
            transition: opacity 0.3s ease; }
            section.fightersBlock div.shareButton label ul li a:before {
              color: #fff;
              font-size: 30px; }
            section.fightersBlock div.shareButton label ul li a:hover {
              opacity: 0.7; }
          section.fightersBlock div.shareButton label ul li.fb a:before {
            content: ""; }
          section.fightersBlock div.shareButton label ul li.tw a:before {
            content: ""; }
          section.fightersBlock div.shareButton label ul li:last-child {
            left: 30px; }
    section.fightersBlock div.shareButton #share-toggle:checked ~ label {
      top: -40px;
      right: -95px;
      width: 268px;
      height: 153px; }
      section.fightersBlock div.shareButton #share-toggle:checked ~ label:after {
        top: 22%;
        left: 47%;
        border-width: 6px 6px 0 6px;
        border-color: #ffffff transparent transparent transparent; }
      section.fightersBlock div.shareButton #share-toggle:checked ~ label ul {
        position: absolute;
        top: 65px;
        right: 150px; }
        section.fightersBlock div.shareButton #share-toggle:checked ~ label ul li {
          position: absolute;
          top: 0;
          left: -30px; }
          section.fightersBlock div.shareButton #share-toggle:checked ~ label ul li:last-child {
            left: 30px; }
    section.fightersBlock div.fightersWrap {
      margin: 0 auto;
      position: relative;
      height: 700px; } }
    @media screen and (min-width: 961px) and (max-width: 600px) {
      section.fightersBlock div.fightersWrap {
        width: 100%; } }
    @media screen and (min-width: 961px) and (min-width: 601px) and (max-width: 960px) {
      section.fightersBlock div.fightersWrap {
        width: 100%; } }
    @media screen and (min-width: 961px) and (min-width: 961px) and (max-width: 1400px) {
      section.fightersBlock div.fightersWrap {
        width: 1100px; } }
    @media screen and (min-width: 961px) and (min-width: 1401px) {
      section.fightersBlock div.fightersWrap {
        width: 1100px; } }

@media screen and (min-width: 961px) {
      section.fightersBlock div.fightersWrap div.fighterInfo {
        position: absolute;
        top: 228px;
        left: 30px;
        z-index: 0; }
        section.fightersBlock div.fightersWrap div.fighterInfo dl.fightersId {
          color: #fff;
          -webkit-text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5), -1px 1px 15px rgba(0, 0, 0, 0.5), 1px -1px 15px rgba(0, 0, 0, 0.5), -1px -1px 15px rgba(0, 0, 0, 0.5);
          -moz-text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5), -1px 1px 15px rgba(0, 0, 0, 0.5), 1px -1px 15px rgba(0, 0, 0, 0.5), -1px -1px 15px rgba(0, 0, 0, 0.5);
          text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5), -1px 1px 15px rgba(0, 0, 0, 0.5), 1px -1px 15px rgba(0, 0, 0, 0.5), -1px -1px 15px rgba(0, 0, 0, 0.5); }
          section.fightersBlock div.fightersWrap div.fighterInfo dl.fightersId dt {
            font-size: 14px;
            font-size: 1.4rem;
            color: #ccc; }
          section.fightersBlock div.fightersWrap div.fighterInfo dl.fightersId dd {
            font-size: 57px;
            font-size: 5.7rem;
            margin: -5px 0 0 0; }
        section.fightersBlock div.fightersWrap div.fighterInfo p {
          margin: 0;
          padding: 0;
          color: #fff; }
        section.fightersBlock div.fightersWrap div.fighterInfo p.rating {
          padding: 18px 0 12px 6px;
          font-weight: bold;
          font-size: 24px;
          font-size: 2.4rem;
          -webkit-text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5), -1px 1px 15px rgba(0, 0, 0, 0.5), 1px -1px 15px rgba(0, 0, 0, 0.5), -1px -1px 15px rgba(0, 0, 0, 0.5);
          -moz-text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5), -1px 1px 15px rgba(0, 0, 0, 0.5), 1px -1px 15px rgba(0, 0, 0, 0.5), -1px -1px 15px rgba(0, 0, 0, 0.5);
          text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5), -1px 1px 15px rgba(0, 0, 0, 0.5), 1px -1px 15px rgba(0, 0, 0, 0.5), -1px -1px 15px rgba(0, 0, 0, 0.5); }
          section.fightersBlock div.fightersWrap div.fighterInfo p.rating img {
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: skewX(-20deg);
            -moz-transform: skewX(-20deg);
            -ms-transform: skewX(-20deg);
            -o-transform: skewX(-20deg);
            transform: skewX(-20deg);
            width: 44px;
            height: auto;
            display: inline-block; }
        section.fightersBlock div.fightersWrap div.fighterInfo p.title {
          position: relative;
          display: block;
          width: 200px;
          line-height: 0; }
          section.fightersBlock div.fightersWrap div.fighterInfo p.title img {
            width: 100%;
            height: auto;
            display: inline-block; }
          section.fightersBlock div.fightersWrap div.fighterInfo p.title span {
            position: absolute;
            white-space: nowrap;
            text-align: center;
            font-size: 11px;
            font-size: 1.1rem;
            letter-spacing: 0.3px;
            position: absolute;
            top: 47%;
            left: 50%;
            -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
            -webkit-text-shadow: 1px 1px 10px #000, -1px 1px 10px #000, 1px -1px 10px #000, -1px -1px 10px #000;
            -moz-text-shadow: 1px 1px 10px #000, -1px 1px 10px #000, 1px -1px 10px #000, -1px -1px 10px #000;
            text-shadow: 1px 1px 10px #000, -1px 1px 10px #000, 1px -1px 10px #000, -1px -1px 10px #000; }
      section.fightersBlock div.fightersWrap div.shainBox {
        width: 273px;
        height: 150px;
        position: absolute;
        top: 350px;
        left: 210px; }
        section.fightersBlock div.fightersWrap div.shainBox:before {
          content: "";
          display: block;
          position: absolute;
          bottom: 18px;
          left: 0%;
          width: 100%;
          height: 50px;
          background: #B31CBF;
          -webkit-transform: rotate(-7deg);
          -moz-transform: rotate(-7deg);
          -ms-transform: rotate(-7deg);
          -o-transform: rotate(-7deg);
          transform: rotate(-7deg); }
        section.fightersBlock div.fightersWrap div.shainBox div.cardBg {
          position: absolute;
          top: 15px;
          left: 125px; }
        section.fightersBlock div.fightersWrap div.shainBox div.cardTitle {
          position: absolute;
          top: 77px;
          left: 15px;
          -webkit-transform: rotate(2deg);
          -moz-transform: rotate(2deg);
          -ms-transform: rotate(2deg);
          -o-transform: rotate(2deg);
          transform: rotate(2deg); }
          section.fightersBlock div.fightersWrap div.shainBox div.cardTitle img {
            width: 140px; }
        section.fightersBlock div.fightersWrap div.shainBox div.smallCard {
          position: absolute;
          top: -205px;
          left: -380px;
          cursor: pointer;
          transition: all 0.2s linear;
          -webkit-transform: rotate(18deg);
          -moz-transform: rotate(18deg);
          -ms-transform: rotate(18deg);
          -o-transform: rotate(18deg);
          transform: rotate(18deg); }
          section.fightersBlock div.fightersWrap div.shainBox div.smallCard.animate {
            top: 60px;
            left: 160px;
            animation: 0.2s ease 0.25s cardAnimation; }
          section.fightersBlock div.fightersWrap div.shainBox div.smallCard img {
            -webkit-box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.5);
            box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.5);
            line-height: 0;
            padding: 0;
            margin: 0; }
      section.fightersBlock div.fightersWrap div.fighterVisual {
        position: absolute;
        top: 10px;
        right: 0;
        z-index: -1;
        -webkit-filter: drop-shadow(12px 0px 0px rgba(0, 0, 0, 0.2));
        -moz-filter: drop-shadow(12px 0px 0px rgba(0, 0, 0, 0.2));
        filter: drop-shadow(12px 0px 0px rgba(0, 0, 0, 0.2)); }
  section.profileBlock {
    position: relative;
    z-index: 1;
    background: url(../../../as/img/profile/fighters_info_bg.png?h=2a64f25dbe08a08270b55665e9447edd) no-repeat center center;
    height: 790px;
    margin: -389px 0 0 0;
    pointer-events: none; } }
  @media screen and (min-width: 961px) and (min-width: 2080px) {
    section.profileBlock {
      background-size: 100% 100%; } }

@media screen and (min-width: 961px) {
    section.profileBlock div.profileWrap {
      margin: 0 auto;
      position: relative;
      padding: 150px 0 0 0; } }
    @media screen and (min-width: 961px) and (max-width: 600px) {
      section.profileBlock div.profileWrap {
        width: 100%; } }
    @media screen and (min-width: 961px) and (min-width: 601px) and (max-width: 960px) {
      section.profileBlock div.profileWrap {
        width: 100%; } }
    @media screen and (min-width: 961px) and (min-width: 961px) and (max-width: 1400px) {
      section.profileBlock div.profileWrap {
        width: 1100px; } }
    @media screen and (min-width: 961px) and (min-width: 1401px) {
      section.profileBlock div.profileWrap {
        width: 1100px; } }

@media screen and (min-width: 961px) {
      section.profileBlock div.profileWrap div.followButton {
        pointer-events: auto;
        position: absolute;
        top: 30px;
        right: 25px;
        z-index: 1;
        width: 84px;
        height: 84px;
        background: #ccc;
        background: #1fa6c8;
        color: #fff;
        text-align: center;
        cursor: pointer;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        font-size: 14px;
        font-size: 1.4rem;
        -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
        -webkit-border-radius: 150px;
        -moz-border-radius: 150px;
        -ms-border-radius: 150px;
        border-radius: 150px; }
        section.profileBlock div.profileWrap div.followButton:before {
          content: ""; }
        section.profileBlock div.profileWrap div.followButton:before {
          font-size: 34px;
          font-size: 3.4rem;
          display: block;
          height: 43px;
          padding: 12px 0 0 0;
          margin: 0; }
        section.profileBlock div.profileWrap div.followButton:hover {
          background: #26cbf5; }
        section.profileBlock div.profileWrap div.followButton.open {
          background: #ccc; }
          section.profileBlock div.profileWrap div.followButton.open:before {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg); }
          section.profileBlock div.profileWrap div.followButton.open span {
            color: #fff; }
            section.profileBlock div.profileWrap div.followButton.open span.hover {
              display: none; }
        section.profileBlock div.profileWrap div.followButton.respect {
          background: #e3be0f; }
          section.profileBlock div.profileWrap div.followButton.respect:before {
            content: ""; }
          section.profileBlock div.profileWrap div.followButton.respect:hover {
            background: #ccc; }
            section.profileBlock div.profileWrap div.followButton.respect:hover span {
              display: none; }
              section.profileBlock div.profileWrap div.followButton.respect:hover span.hover {
                display: block; }
          section.profileBlock div.profileWrap div.followButton.respect a {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 84px;
            height: 29px;
            padding: 55px 0 0 0;
            color: #fff; }
            section.profileBlock div.profileWrap div.followButton.respect a span.hover {
              display: none; }
        section.profileBlock div.profileWrap div.followButton.rival {
          background: #e85933; }
          section.profileBlock div.profileWrap div.followButton.rival:before {
            content: ""; }
          section.profileBlock div.profileWrap div.followButton.rival:hover {
            background: #ccc; }
            section.profileBlock div.profileWrap div.followButton.rival:hover span {
              display: none; }
              section.profileBlock div.profileWrap div.followButton.rival:hover span.hover {
                display: block; }
          section.profileBlock div.profileWrap div.followButton.rival a {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 84px;
            height: 29px;
            padding: 55px 0 0 0;
            color: #fff; }
            section.profileBlock div.profileWrap div.followButton.rival a span.hover {
              display: none; }
      section.profileBlock div.profileWrap ul.followLink {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 0;
        pointer-events: auto; }
        section.profileBlock div.profileWrap ul.followLink li {
          width: 64px;
          height: 64px;
          color: #fff;
          text-align: center;
          position: absolute;
          user-select: none;
          -moz-user-select: none;
          -webkit-user-select: none;
          -ms-user-select: none;
          -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
          -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
          -webkit-border-radius: 64px;
          -moz-border-radius: 64px;
          -ms-border-radius: 64px;
          border-radius: 64px;
          font-size: 11px;
          font-size: 1.1rem; }
          section.profileBlock div.profileWrap ul.followLink li:before {
            content: ""; }
          section.profileBlock div.profileWrap ul.followLink li:before {
            font-size: 34px;
            font-size: 3.4rem;
            display: block;
            height: 43px;
            padding: 5px 0 0 0;
            margin: 0px 0 -4px 0; }
          section.profileBlock div.profileWrap ul.followLink li.respectBtn {
            background: #e3be0f;
            top: 25px;
            left: -100px; }
            section.profileBlock div.profileWrap ul.followLink li.respectBtn:before {
              content: ""; }
            section.profileBlock div.profileWrap ul.followLink li.respectBtn:hover {
              background: #fbd212; }
              section.profileBlock div.profileWrap ul.followLink li.respectBtn:hover span {
                display: block;
                opacity: 1; }
            section.profileBlock div.profileWrap ul.followLink li.respectBtn.cancel {
              background: #aaa; }
              section.profileBlock div.profileWrap ul.followLink li.respectBtn.cancel:hover {
                background: #ccc; }
                section.profileBlock div.profileWrap ul.followLink li.respectBtn.cancel:hover span {
                  display: block;
                  opacity: 1;
                  z-index: 1; }
          section.profileBlock div.profileWrap ul.followLink li.rivalBtn {
            background: #e85933;
            top: 25px;
            left: -100px; }
            section.profileBlock div.profileWrap ul.followLink li.rivalBtn:before {
              content: ""; }
            section.profileBlock div.profileWrap ul.followLink li.rivalBtn:hover {
              background: #fc6138; }
            section.profileBlock div.profileWrap ul.followLink li.rivalBtn.cancel {
              background: #aaa; }
              section.profileBlock div.profileWrap ul.followLink li.rivalBtn.cancel:hover {
                background: #ccc; }
                section.profileBlock div.profileWrap ul.followLink li.rivalBtn.cancel:hover span {
                  display: block;
                  opacity: 1;
                  z-index: 1; }
          section.profileBlock div.profileWrap ul.followLink li a {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 64px;
            height: 22px;
            padding: 42px 0 0 0;
            color: #fff;
            text-align: center; }
          section.profileBlock div.profileWrap ul.followLink li span {
            display: none;
            position: absolute;
            top: -85px;
            left: -56px;
            width: 150px;
            padding: 15px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.8);
            box-sizing: border-box;
            color: #555;
            font-size: 12px;
            text-align: left;
            line-height: 1.5;
            opacity: 0;
            transition: all 0.3s ease; }
            section.profileBlock div.profileWrap ul.followLink li span:after {
              display: block;
              content: '';
              position: absolute;
              bottom: -8px;
              left: 50%;
              border-style: solid;
              border-width: 8px 10px 0 10px;
              border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent; }
      section.profileBlock div.profileWrap .flexBox {
        pointer-events: none;
        position: relative; }
        section.profileBlock div.profileWrap .flexBox .layOne {
          pointer-events: auto;
          width: 190px;
          position: absolute;
          top: 145px;
          left: 31px; }
        section.profileBlock div.profileWrap .flexBox .layTwo {
          pointer-events: auto;
          width: 45%;
          position: absolute;
          top: 0;
          right: 0; }
        section.profileBlock div.profileWrap .flexBox .layThree {
          pointer-events: auto;
          width: 31%;
          position: absolute;
          top: 0;
          left: 22%; }
        section.profileBlock div.profileWrap .flexBox .layFour {
          pointer-events: auto;
          width: 44%;
          position: absolute;
          top: 160px;
          right: 0; }
      section.profileBlock div.profileWrap div.fightersIcon {
        width: 190px;
        margin: 0 0 0 31px;
        position: absolute;
        top: 105px;
        left: 0;
        pointer-events: none; }
        section.profileBlock div.profileWrap div.fightersIcon img {
          width: 190px;
          box-shadow: 0px 3px 13px rgba(0, 0, 0, 0.5);
          -moz-box-shadow: 0px 3px 13px rgba(0, 0, 0, 0.5);
          -webkit-box-shadow: 0px 3px 13px rgba(0, 0, 0, 0.5); }
      section.profileBlock div.profileWrap div.playData dl {
        margin: 13px 0 0 0;
        font-size: 12px;
        font-size: 1.2rem;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flexbox;
        display: -moz-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        section.profileBlock div.profileWrap div.playData dl dt {
          color: #888;
          width: 48%;
          text-align: left;
          margin: 0 0 0px 0;
          padding: 0;
          vertical-align: middle; }
        section.profileBlock div.profileWrap div.playData dl dd {
          display: inline-block;
          vertical-align: middle;
          color: #555;
          width: 49%;
          text-align: right;
          padding: 0;
          font-weight: bold; }
          section.profileBlock div.profileWrap div.playData dl dd img {
            vertical-align: middle;
            width: 28px;
            height: auto;
            margin: -4px -5px 0 -5px;
            display: inline-block; }
      section.profileBlock div.profileWrap div.leagueWrap {
        color: #555; }
        section.profileBlock div.profileWrap div.leagueWrap div.characterInfo {
          margin: 0 36px 0 40px; }
          section.profileBlock div.profileWrap div.leagueWrap div.characterInfo dl.characterName {
            text-align: right;
            min-height: 90px; }
            section.profileBlock div.profileWrap div.leagueWrap div.characterInfo dl.characterName dt {
              font-size: 15px;
              font-size: 1.5rem;
              color: #888; }
            section.profileBlock div.profileWrap div.leagueWrap div.characterInfo dl.characterName dd {
              font-size: 74px;
              font-size: 7.4rem;
              margin: -10px 0 0 0;
              color: #555; }
              section.profileBlock div.profileWrap div.leagueWrap div.characterInfo dl.characterName dd a {
                color: #1fa6c8; }
                section.profileBlock div.profileWrap div.leagueWrap div.characterInfo dl.characterName dd a:hover {
                  color: #24c1e8; }
          section.profileBlock div.profileWrap div.leagueWrap div.characterInfo div.characterLevel {
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flexbox;
            display: -moz-flexbox;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: -moz-flex;
            display: flex;
            -webkit-box-lines: single;
            -moz-box-lines: single;
            -webkit-flex-wrap: nowrap;
            -moz-flex-wrap: nowrap;
            -ms-flex-wrap: none;
            flex-wrap: nowrap; }
            section.profileBlock div.profileWrap div.leagueWrap div.characterInfo div.characterLevel dl.level {
              display: -webkit-box;
              display: -moz-box;
              display: -webkit-flexbox;
              display: -moz-flexbox;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: -moz-flex;
              display: flex;
              -webkit-box-lines: single;
              -moz-box-lines: single;
              -webkit-flex-wrap: nowrap;
              -moz-flex-wrap: nowrap;
              -ms-flex-wrap: none;
              flex-wrap: nowrap;
              align-items: baseline; }
              section.profileBlock div.profileWrap div.leagueWrap div.characterInfo div.characterLevel dl.level dt {
                font-size: 28px;
                font-size: 2.8rem;
                color: #888; }
              section.profileBlock div.profileWrap div.leagueWrap div.characterInfo div.characterLevel dl.level dd {
                font-size: 49px;
                font-size: 4.9rem;
                color: #555; }
            section.profileBlock div.profileWrap div.leagueWrap div.characterInfo div.characterLevel div.progressBar {
              position: relative;
              width: 100%;
              height: 28px;
              margin: 15px 0 0 30px;
              padding: 0 0 0 0;
              background: url(../../../as/img/profile/lp_bar_bg.png?h=6430d86c6cc2fa312378aa355c37bd15) no-repeat left bottom; }
              section.profileBlock div.profileWrap div.leagueWrap div.characterInfo div.characterLevel div.progressBar .bar {
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 0%;
                height: 100%;
                -webkit-transform-origin: 0 0;
                -moz-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: skewX(-30deg);
                -moz-transform: skewX(-30deg);
                -ms-transform: skewX(-30deg);
                -o-transform: skewX(-30deg);
                transform: skewX(-30deg);
                -webkit-box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
                -moz-box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
                box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
                background: #3e56af;
                background: -moz-linear-gradient(left, #3e56af 0%, #2ea9fa 100%);
                background: -webkit-linear-gradient(left, #3e56af 0%, #2ea9fa 100%);
                background: linear-gradient(to right, #3e56af 0%, #2ea9fa 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e56af', endColorstr='#2ea9fa',GradientType=1 ); }
                section.profileBlock div.profileWrap div.leagueWrap div.characterInfo div.characterLevel div.progressBar .bar:after {
                  position: absolute;
                  bottom: 0;
                  content: "";
                  display: block;
                  width: 100%;
                  height: 50%;
                  background: rgba(0, 0, 0, 0.1); }
          section.profileBlock div.profileWrap div.leagueWrap div.characterInfo p.progressTxt {
            display: block;
            margin: -5px 0 0 0;
            text-align: right;
            font-size: 16px;
            font-size: 1.6rem; }
      section.profileBlock div.profileWrap div.infoWrap {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flexbox;
        display: -moz-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin: 35px 0 0 0; }
        section.profileBlock div.profileWrap div.infoWrap div.leagueInfo, section.profileBlock div.profileWrap div.infoWrap div.playerInfo {
          width: 49%; }
          section.profileBlock div.profileWrap div.infoWrap div.leagueInfo dl, section.profileBlock div.profileWrap div.infoWrap div.playerInfo dl {
            text-align: center;
            height: 110px;
            padding: 21px 0 0 0; }
            section.profileBlock div.profileWrap div.infoWrap div.leagueInfo dl dt, section.profileBlock div.profileWrap div.infoWrap div.playerInfo dl dt {
              font-size: 15px;
              font-size: 1.5rem;
              color: #888; }
            section.profileBlock div.profileWrap div.infoWrap div.leagueInfo dl dd, section.profileBlock div.profileWrap div.infoWrap div.playerInfo dl dd {
              margin: 6px 0 0 0;
              font-size: 54px;
              font-size: 5.4rem;
              color: #555; }
              section.profileBlock div.profileWrap div.infoWrap div.leagueInfo dl dd span, section.profileBlock div.profileWrap div.infoWrap div.playerInfo dl dd span {
                font-size: 28px;
                font-size: 2.8rem; }
              section.profileBlock div.profileWrap div.infoWrap div.leagueInfo dl dd img, section.profileBlock div.profileWrap div.infoWrap div.playerInfo dl dd img {
                width: 196px;
                margin: 0 auto; }
        section.profileBlock div.profileWrap div.infoWrap div.leagueInfo {
          position: relative; }
          section.profileBlock div.profileWrap div.infoWrap div.leagueInfo:after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            right: -20px;
            height: 100%;
            border: 1px solid #ccc; }
        section.profileBlock div.profileWrap div.infoWrap a.rankingButton {
          display: block;
          background: #1fa6c8;
          color: #fff;
          text-align: center;
          margin: -12px 30px 0 0;
          padding: 8px 0 8px 0;
          width: 150px;
          position: relative;
          font-size: 16px;
          font-size: 1.6rem;
          -webkit-border-radius: 50px;
          -moz-border-radius: 50px;
          -ms-border-radius: 50px;
          border-radius: 50px;
          -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
          -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); }
          section.profileBlock div.profileWrap div.infoWrap a.rankingButton:after {
            content: ""; }
          section.profileBlock div.profileWrap div.infoWrap a.rankingButton:after {
            color: #fff;
            margin: 0 0 0 15px;
            display: block;
            position: absolute;
            top: 25%;
            right: 10px;
            font-weight: bold; }
          section.profileBlock div.profileWrap div.infoWrap a.rankingButton:hover {
            background: #24c1e8; }
      section.profileBlock div.profileWrap div.followWrap {
        padding: 60px 0 0 0;
        position: relative; }
        section.profileBlock div.profileWrap div.followWrap:before {
          position: absolute;
          top: 30px;
          right: 0px;
          content: "";
          border-right: 1px solid #aaa;
          height: 450px; }
        section.profileBlock div.profileWrap div.followWrap div.followInfo {
          height: 205px; }
          section.profileBlock div.profileWrap div.followWrap div.followInfo p {
            font-size: 30px;
            font-size: 3rem;
            margin: 10px 0;
            text-align: center;
            color: #504f4f; }
          section.profileBlock div.profileWrap div.followWrap div.followInfo dl {
            width: 48%;
            display: inline-block;
            text-align: center; }
            section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt {
              display: block;
              color: #fff;
              width: 70px;
              margin: auto;
              position: relative;
              -webkit-transform-origin: 0 0;
              -moz-transform-origin: 0 0;
              transform-origin: 0 0;
              -webkit-transform: skewX(-20deg);
              -moz-transform: skewX(-20deg);
              -ms-transform: skewX(-20deg);
              -o-transform: skewX(-20deg);
              transform: skewX(-20deg);
              font-size: 15px;
              font-size: 1.5rem;
              font-weight: normal; }
              section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt span {
                text-align: center;
                display: block;
                padding: 2px;
                margin: 9px 0 20px 0;
                -webkit-transform-origin: 0 0;
                -moz-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: skewX(20deg);
                -moz-transform: skewX(20deg);
                -ms-transform: skewX(20deg);
                -o-transform: skewX(20deg);
                transform: skewX(20deg);
                width: 60px; }
              section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt:before {
                display: block;
                padding: 0px;
                position: absolute;
                top: -16px;
                -webkit-transform-origin: 0 0;
                -moz-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: skewX(20deg);
                -moz-transform: skewX(20deg);
                -ms-transform: skewX(20deg);
                -o-transform: skewX(20deg);
                transform: skewX(20deg);
                font-size: 28px;
                font-size: 2.8rem; }
              section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt.respect {
                background: #e3be0f; }
                section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt.respect:before {
                  content: ""; }
                section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt.respect:before {
                  color: #e3be0f;
                  left: -34px; }
              section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt.rival {
                background: #e85933; }
                section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt.rival:before {
                  content: ""; }
                section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt.rival:before {
                  color: #e85933;
                  right: -24px; }
            section.profileBlock div.profileWrap div.followWrap div.followInfo dl dd {
              font-size: 45px;
              font-size: 4.5rem;
              margin: -14px 0 0 -10px;
              color: #555; }
              section.profileBlock div.profileWrap div.followWrap div.followInfo dl dd img {
                margin: 12px 0 0 0;
                width: 44px;
                box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.3);
                display: inline-block; }
              section.profileBlock div.profileWrap div.followWrap div.followInfo dl dd span {
                display: block;
                font-size: 14px;
                font-size: 1.4rem;
                margin: 4px 0 0 0;
                color: #555; }
              section.profileBlock div.profileWrap div.followWrap div.followInfo dl dd a {
                display: block;
                font-size: 14px;
                font-size: 1.4rem;
                color: #1fa6c8; }
                section.profileBlock div.profileWrap div.followWrap div.followInfo dl dd a span {
                  display: block;
                  color: #1fa6c8; }
                  section.profileBlock div.profileWrap div.followWrap div.followInfo dl dd a span:hover {
                    color: #24c1e8; }
        section.profileBlock div.profileWrap div.followWrap.followWrap .followInfo:nth-of-type(2) dl dd {
          margin: -14px 0 0 -30px; }
          section.profileBlock div.profileWrap div.followWrap.followWrap .followInfo:nth-of-type(2) dl dd span {
            display: inline;
            font-size: 54px;
            font-size: 5.4rem;
            color: #555; }
          section.profileBlock div.profileWrap div.followWrap.followWrap .followInfo:nth-of-type(2) dl dd label {
            display: inline;
            font-size: 54px;
            font-size: 5.4rem;
            color: #1fa6c8;
            cursor: pointer; }
            section.profileBlock div.profileWrap div.followWrap.followWrap .followInfo:nth-of-type(2) dl dd label:hover {
              color: #24c1e8; }
  section.battleBlock {
    background-image: url(../../../as/img/profile/recent_bg.jpg?h=41734d0a7548708e433d1f68b1a3aa34), url(../../../as/img/profile/recent_bg_repeat.jpg?h=ebb5b187da09bb02151346983a2ec980);
    background-repeat: no-repeat, repeat;
    background-position: top center, bottom center;
    margin: -295px 0 0 0;
    padding: 0 0 0px 0; }
    section.battleBlock div.battleWrap {
      margin: 0 auto;
      color: #fff;
      padding: 260px 0 0 0; } }
    @media screen and (min-width: 961px) and (max-width: 600px) {
      section.battleBlock div.battleWrap {
        width: 100%; } }
    @media screen and (min-width: 961px) and (min-width: 601px) and (max-width: 960px) {
      section.battleBlock div.battleWrap {
        width: 100%; } }
    @media screen and (min-width: 961px) and (min-width: 961px) and (max-width: 1400px) {
      section.battleBlock div.battleWrap {
        width: 1100px; } }
    @media screen and (min-width: 961px) and (min-width: 1401px) {
      section.battleBlock div.battleWrap {
        width: 1100px; } }

@media screen and (min-width: 961px) {
      section.battleBlock div.battleWrap h2 {
        margin: 0;
        padding: 0 0 0 24px;
        font-weight: normal;
        font-size: 58px;
        font-size: 5.8rem;
        -webkit-text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.3), 2px 4px 2px rgba(0, 0, 0, 0.3), 4px 2px 2px rgba(0, 0, 0, 0.3), 2px 2px 2px rgba(0, 0, 0, 0.3);
        -moz-text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.3), 2px 4px 2px rgba(0, 0, 0, 0.3), 4px 2px 2px rgba(0, 0, 0, 0.3), 2px 2px 2px rgba(0, 0, 0, 0.3);
        text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.3), 2px 4px 2px rgba(0, 0, 0, 0.3), 4px 2px 2px rgba(0, 0, 0, 0.3), 2px 2px 2px rgba(0, 0, 0, 0.3); }
      section.battleBlock div.battleWrap ul#battleTypeSelect {
        float: right;
        width: 47%;
        margin: -55px 25px 0 0;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flexbox;
        display: -moz-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-box-lines: single;
        -moz-box-lines: single;
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: none;
        flex-wrap: nowrap;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: skewX(-23deg);
        -moz-transform: skewX(-23deg);
        -ms-transform: skewX(-23deg);
        -o-transform: skewX(-23deg);
        transform: skewX(-23deg); }
        section.battleBlock div.battleWrap ul#battleTypeSelect li {
          position: relative;
          cursor: pointer;
          -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
          -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
          width: 33%;
          margin: 10px 2px;
          background: #3d55ae;
          color: #fff;
          line-height: 2.4;
          text-align: center;
          font-size: 17px;
          font-size: 1.7rem; }
          section.battleBlock div.battleWrap ul#battleTypeSelect li.select {
            background: #fff;
            color: #3d55ae; }
          section.battleBlock div.battleWrap ul#battleTypeSelect li:hover {
            -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
            z-index: 10;
            background: #4660c4;
            color: #fff; }
          section.battleBlock div.battleWrap ul#battleTypeSelect li span {
            display: inline-block;
            margin: 0 0 0 -30px;
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: skewX(23deg);
            -moz-transform: skewX(23deg);
            -ms-transform: skewX(23deg);
            -o-transform: skewX(23deg);
            transform: skewX(23deg); }
      section.battleBlock div.battleWrap ul.historyVisualBox {
        clear: both;
        padding: 60px 0 0 0;
        position: relative;
        min-height: 130px; }
      section.battleBlock div.battleWrap li.battleType {
        position: absolute;
        width: 100%;
        display: none; }
        section.battleBlock div.battleWrap li.battleType div.battleHistory {
          width: 36%;
          margin: 0 0 0 75px;
          -webkit-box-ordinal-group: 1;
          -ms-flex-order: 1;
          -webkit-order: 1;
          order: 1; }
          section.battleBlock div.battleWrap li.battleType div.battleHistory p.resultTtl {
            margin: 0 0 7px 0;
            padding: 0;
            position: relative; }
            section.battleBlock div.battleWrap li.battleType div.battleHistory p.resultTtl span {
              position: absolute;
              bottom: 0;
              right: 76px;
              display: inline-block; }
              section.battleBlock div.battleWrap li.battleType div.battleHistory p.resultTtl span:after {
                content: ""; }
              section.battleBlock div.battleWrap li.battleType div.battleHistory p.resultTtl span:after {
                position: relative;
                bottom: -7px;
                left: 3px;
                font-size: 20px;
                font-size: 2rem;
                display: inline-block;
                margin: 15px 0 -15px 0; }
          section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph {
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flexbox;
            display: -moz-flexbox;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: -moz-flex;
            display: flex;
            -webkit-box-lines: single;
            -moz-box-lines: single;
            -webkit-flex-wrap: nowrap;
            -moz-flex-wrap: nowrap;
            -ms-flex-wrap: none;
            flex-wrap: nowrap;
            align-items: stretch;
            margin: 0 0 3px 0;
            border-right: 1px solid rgba(170, 170, 170, 0.2); }
            section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph.win p.ttl {
              background: #3d55ae; }
            section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph.win li.on {
              background: #2a6dd7; }
            section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph.lose {
              margin: 0 0 0 -15px; }
              section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph.lose p.ttl {
                background: #af413e; }
              section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph.lose li.on {
                background: #c83c3a; }
              section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph.lose li.draw {
                background: #c2a818; }
            section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph p.ttl {
              -webkit-transform-origin: 0 0;
              -moz-transform-origin: 0 0;
              transform-origin: 0 0;
              -webkit-transform: skewX(-16deg);
              -moz-transform: skewX(-16deg);
              -ms-transform: skewX(-16deg);
              -o-transform: skewX(-16deg);
              transform: skewX(-16deg);
              -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
              -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
              box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
              margin: 0;
              height: 35px;
              width: 59px;
              text-align: center;
              margin-right: 5px;
              font-style: normal;
              padding: 17px 0 0 0;
              display: table-cell;
              vertical-align: middle;
              justify-content: center; }
            section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph ul {
              height: 52px;
              margin: 0;
              display: -webkit-box;
              display: -moz-box;
              display: -webkit-flexbox;
              display: -moz-flexbox;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: -moz-flex;
              display: flex;
              -webkit-box-lines: single;
              -moz-box-lines: single;
              -webkit-flex-wrap: nowrap;
              -moz-flex-wrap: nowrap;
              -ms-flex-wrap: none;
              flex-wrap: nowrap; }
              section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph ul li {
                width: 6px;
                height: 100%;
                background: rgba(169, 209, 209, 0.2);
                margin: 0 6px 0 0;
                -webkit-transform-origin: 0 0;
                -moz-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: skewX(-16deg);
                -moz-transform: skewX(-16deg);
                -ms-transform: skewX(-16deg);
                -o-transform: skewX(-16deg);
                transform: skewX(-16deg);
                -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
                -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
                box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); }
            section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph p.total {
              font-size: 40px;
              font-size: 4rem;
              margin: 0 0 0 5px;
              padding: 0;
              justify-content: center;
              vertical-align: baseline; }
        section.battleBlock div.battleWrap li.battleType div.battleNumber {
          width: 26%;
          margin: 0 0 0 8%;
          -webkit-box-ordinal-group: 2;
          -ms-flex-order: 2;
          -webkit-order: 2;
          order: 2; }
          section.battleBlock div.battleWrap li.battleType div.battleNumber dl {
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flexbox;
            display: -moz-flexbox;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: -moz-flex;
            display: flex;
            -webkit-box-lines: single;
            -moz-box-lines: single;
            -webkit-flex-wrap: nowrap;
            -moz-flex-wrap: nowrap;
            -ms-flex-wrap: none;
            flex-wrap: nowrap;
            align-content: space-between;
            align-items: baseline;
            padding: 0 0 19px 0; }
            section.battleBlock div.battleWrap li.battleType div.battleNumber dl dt {
              font-size: 16px;
              font-size: 1.6rem;
              width: 50%; }
            section.battleBlock div.battleWrap li.battleType div.battleNumber dl dd {
              font-size: 28px;
              font-size: 2.8rem;
              width: 50%;
              text-align: right; }
        section.battleBlock div.battleWrap li.battleType div.chartBox {
          position: relative;
          pointer-events: none;
          margin: -90px 0 0 0;
          width: 30%;
          -webkit-box-ordinal-group: 3;
          -ms-flex-order: 3;
          -webkit-order: 3;
          order: 3; }
          section.battleBlock div.battleWrap li.battleType div.chartBox div#donutchartRank, section.battleBlock div.battleWrap li.battleType div.chartBox div#donutchartCasual, section.battleBlock div.battleWrap li.battleType div.chartBox div#donutchartLounge {
            width: 300px;
            height: 300px;
            position: absolute; }
            section.battleBlock div.battleWrap li.battleType div.chartBox div#donutchartRank:before, section.battleBlock div.battleWrap li.battleType div.chartBox div#donutchartCasual:before, section.battleBlock div.battleWrap li.battleType div.chartBox div#donutchartLounge:before {
              position: absolute;
              top: 60px;
              left: 60px;
              content: "";
              display: block;
              width: 180px;
              height: 180px;
              background: rgba(255, 255, 255, 0.2);
              -webkit-border-radius: 100px;
              -moz-border-radius: 100px;
              -ms-border-radius: 100px;
              border-radius: 100px; }
            section.battleBlock div.battleWrap li.battleType div.chartBox div#donutchartRank svg, section.battleBlock div.battleWrap li.battleType div.chartBox div#donutchartCasual svg, section.battleBlock div.battleWrap li.battleType div.chartBox div#donutchartLounge svg {
              -webkit-filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.8));
              -moz-filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.8));
              filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.8)); }
              section.battleBlock div.battleWrap li.battleType div.chartBox div#donutchartRank svg g path, section.battleBlock div.battleWrap li.battleType div.chartBox div#donutchartCasual svg g path, section.battleBlock div.battleWrap li.battleType div.chartBox div#donutchartLounge svg g path {
                stroke-width: 0 !important; }
          section.battleBlock div.battleWrap li.battleType div.chartBox dl {
            position: absolute;
            top: 45%;
            width: 100%;
            display: block;
            text-align: center;
            -webkit-text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5), 1px 3px 3px rgba(0, 0, 0, 0.5), 3px 1px 3px rgba(0, 0, 0, 0.5), 1px 1px 3px rgba(0, 0, 0, 0.5);
            -moz-text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5), 1px 3px 3px rgba(0, 0, 0, 0.5), 3px 1px 3px rgba(0, 0, 0, 0.5), 1px 1px 3px rgba(0, 0, 0, 0.5);
            text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5), 1px 3px 3px rgba(0, 0, 0, 0.5), 3px 1px 3px rgba(0, 0, 0, 0.5), 1px 1px 3px rgba(0, 0, 0, 0.5); }
            section.battleBlock div.battleWrap li.battleType div.chartBox dl dt {
              font-size: 16px;
              font-size: 1.6rem;
              letter-spacing: 2px;
              font-style: normal; }
            section.battleBlock div.battleWrap li.battleType div.chartBox dl dd span.percent {
              font-size: 48px;
              font-size: 4.8rem; }
            section.battleBlock div.battleWrap li.battleType div.chartBox dl dd span.code {
              font-size: 28px;
              font-size: 2.8rem; }
      section.battleBlock div.battleWrap div.battleHistoryBox {
        padding: 85px 0 30px 0; }
        section.battleBlock div.battleWrap div.battleHistoryBox h3 {
          position: relative;
          text-align: center;
          margin: 0;
          font-size: 38px;
          font-size: 3.8rem;
          font-weight: normal;
          width: 100%;
          vertical-align: middle;
          -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
          -moz-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
          filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); }
          section.battleBlock div.battleWrap div.battleHistoryBox h3:before {
            content: "";
            display: inline-block;
            border-style: solid;
            border-width: 2px 170px 2px 0;
            border-color: transparent #fff transparent transparent;
            margin: 0 20px 5px 0;
            vertical-align: middle; }
          section.battleBlock div.battleWrap div.battleHistoryBox h3:after {
            content: "";
            display: inline-block;
            border-style: solid;
            border-width: 2px 0 2px 170px;
            border-color: transparent transparent transparent #fff;
            margin: 0 0 5px 20px;
            vertical-align: middle; }
        section.battleBlock div.battleWrap div.battleHistoryBox ul {
          padding: 95px 0 0 0; }
          section.battleBlock div.battleWrap div.battleHistoryBox ul li {
            margin: 0 0 55px 95px; }
            section.battleBlock div.battleWrap div.battleHistoryBox ul li:nth-child(even) {
              position: relative;
              left: 180px; }
            section.battleBlock div.battleWrap div.battleHistoryBox ul li a {
              position: relative;
              z-index: 1;
              display: block;
              background: rgba(0, 0, 0, 0.5);
              width: 77%;
              padding: 10px 0 0 0;
              -webkit-transform-origin: 0 0;
              -moz-transform-origin: 0 0;
              transform-origin: 0 0;
              -webkit-transform: skewX(-20deg);
              -moz-transform: skewX(-20deg);
              -ms-transform: skewX(-20deg);
              -o-transform: skewX(-20deg);
              transform: skewX(-20deg);
              -webkit-box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
              -moz-box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
              box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3); }
              section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox {
                -webkit-transform-origin: 0 0;
                -moz-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: skewX(20deg);
                -moz-transform: skewX(20deg);
                -ms-transform: skewX(20deg);
                -o-transform: skewX(20deg);
                transform: skewX(20deg);
                display: -webkit-box;
                display: -moz-box;
                display: -webkit-flexbox;
                display: -moz-flexbox;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: -moz-flex;
                display: flex;
                -webkit-box-lines: single;
                -moz-box-lines: single;
                -webkit-flex-wrap: nowrap;
                -moz-flex-wrap: nowrap;
                -ms-flex-wrap: none;
                flex-wrap: nowrap;
                position: relative; }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox p.icon {
                  margin: 0 20px 0 30px;
                  min-height: 64px; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox p.icon img {
                    width: 56px; }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox dl {
                  margin: 0; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox dl.fId {
                    width: 32%; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox dl.league {
                    width: 18%; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox dl.fav {
                    width: 18%; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox dl dt {
                    color: #888;
                    font-size: 12px;
                    font-size: 1.2rem;
                    margin: 2px 0 8px 0; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox dl dd {
                    color: #fff;
                    font-size: 19px;
                    font-size: 1.9rem; }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox div.fighter {
                  position: absolute;
                  bottom: 0px;
                  right: 20px;
                  line-height: 0;
                  margin: 0;
                  padding: 0; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox div.fighter img {
                    width: auto;
                    height: 128px; }
              section.battleBlock div.battleWrap div.battleHistoryBox ul li a:hover {
                background: rgba(68, 68, 68, 0.5); }
            section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status {
              display: -webkit-box;
              display: -moz-box;
              display: -webkit-flexbox;
              display: -moz-flexbox;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: -moz-flex;
              display: flex;
              -webkit-box-lines: single;
              -moz-box-lines: single;
              -webkit-flex-wrap: nowrap;
              -moz-flex-wrap: nowrap;
              -ms-flex-wrap: none;
              flex-wrap: nowrap;
              margin: 0 0 0 -27px;
              width: 75%; }
              section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus {
                width: 140px;
                height: 25px;
                position: relative; }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus:before {
                  position: absolute;
                  content: "";
                  display: block;
                  width: 75%;
                  border-top: 25px solid rgba(85, 0, 0, 0.7);
                  border-left: 10px solid transparent;
                  border-right: 10px solid transparent; }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus p {
                  margin: 0;
                  position: relative;
                  text-align: center;
                  font-size: 12px;
                  font-size: 1.2rem;
                  line-height: 1.8; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus p:before {
                    position: absolute;
                    top: 4px;
                    left: 15px;
                    content: "";
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    -webkit-border-radius: 15px;
                    -moz-border-radius: 15px;
                    -ms-border-radius: 15px;
                    border-radius: 15px; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus p:after {
                    position: absolute;
                    top: 8px;
                    left: 19px;
                    content: "";
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    -webkit-border-radius: 15px;
                    -moz-border-radius: 15px;
                    -ms-border-radius: 15px;
                    border-radius: 15px; }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus.online:before {
                  border-top: 25px solid rgba(85, 0, 0, 0.7); }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus.online p:before {
                  background: rgba(212, 6, 6, 0.5); }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus.online p:after {
                  background: #d40606; }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus.offline:before {
                  border-top: 25px solid rgba(51, 51, 51, 0.7); }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus.offline p:before {
                  background: #888888; }
              section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status span.time {
                font-size: 12px;
                font-size: 1.2rem;
                position: relative;
                top: 1px;
                color: #b8b5b5;
                margin: 4px 0 0 0; }
    section.battleBlock div.battlePastdata {
      background: rgba(255, 255, 255, 0.1);
      text-align: right; }
      section.battleBlock div.battlePastdata a {
        width: 370px;
        color: #fff;
        display: inline-block;
        line-height: 5;
        margin: 0 -40px 0 0;
        background: rgba(255, 255, 255, 0.1);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: skewX(-30deg);
        -moz-transform: skewX(-30deg);
        -ms-transform: skewX(-30deg);
        -o-transform: skewX(-30deg);
        transform: skewX(-30deg);
        position: relative; }
        section.battleBlock div.battlePastdata a span {
          display: block;
          font-style: italic;
          -webkit-transform-origin: 0 0;
          -moz-transform-origin: 0 0;
          transform-origin: 0 0;
          -webkit-transform: skewX(30deg);
          -moz-transform: skewX(30deg);
          -ms-transform: skewX(30deg);
          -o-transform: skewX(30deg);
          transform: skewX(30deg);
          text-align: left;
          padding: 0 0 0 20px;
          font-size: 14px;
          font-size: 1.4rem; }
        section.battleBlock div.battlePastdata a:after {
          content: ""; }
        section.battleBlock div.battlePastdata a:after {
          display: block;
          -webkit-transform-origin: 0 0;
          -moz-transform-origin: 0 0;
          transform-origin: 0 0;
          -webkit-transform: skewX(30deg);
          -moz-transform: skewX(30deg);
          -ms-transform: skewX(30deg);
          -o-transform: skewX(30deg);
          transform: skewX(30deg);
          position: absolute;
          font-size: 24px;
          font-size: 2.4rem;
          line-height: 3.0;
          top: 0;
          right: 90px; }
        section.battleBlock div.battlePastdata a:hover {
          background: rgba(255, 255, 255, 0.2); }
  footer {
    width: 100%;
    margin: 0px 0 0 0; }
  #modal.modalZone .mContent.no02 {
    position: relative;
    width: 900px;
    margin: 0 auto;
    padding: 40px 30px 50px 30px;
    border-radius: 4px;
    background: rgba(25, 31, 41, 0.8);
    box-sizing: border-box;
    font-style: normal;
    overflow: visible; }
    #modal.modalZone .mContent.no02 .close {
      position: absolute;
      top: -45px;
      right: -35px;
      width: 70px;
      height: 70px;
      border-radius: 50px;
      background: url(../../../as/img/btn_modal_prof_close.png?h=b28c81a8fd2ac6d70584f1ddf157e7be) no-repeat center center #fff;
      cursor: pointer;
      transition: all 0.3s ease; }
      #modal.modalZone .mContent.no02 .close:hover {
        background: url(../../../as/img/btn_modal_prof_close_on.png?h=2f0e8477e49dc388fb0bc1f9a69bcb4d) no-repeat center center #326ac5; }
    #modal.modalZone .mContent.no02 .tab {
      margin: 0; }
      #modal.modalZone .mContent.no02 .tab li {
        position: relative;
        float: left;
        width: 117px;
        height: 60px;
        margin: 0 20px 0 0;
        padding: 0 0 4px 0;
        color: #fff;
        font-size: 24px;
        font-style: italic; }
        #modal.modalZone .mContent.no02 .tab li label {
          display: block;
          width: 117px;
          height: 60px;
          cursor: pointer; }
          #modal.modalZone .mContent.no02 .tab li label span.icon {
            display: inline-block;
            position: relative;
            padding: 40px 15px 0 0;
            font-size: 12px;
            line-height: 1px; }
            #modal.modalZone .mContent.no02 .tab li label span.icon:before {
              content: ""; }
            #modal.modalZone .mContent.no02 .tab li label span.icon:before {
              position: absolute;
              top: 0;
              font-size: 32px;
              line-height: 1; }
          #modal.modalZone .mContent.no02 .tab li label .bar {
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            transition: width 0.3s ease; }
          #modal.modalZone .mContent.no02 .tab li label:hover .bar {
            width: 100%; }
        #modal.modalZone .mContent.no02 .tab li.respect span.icon {
          color: #e3be0f; }
          #modal.modalZone .mContent.no02 .tab li.respect span.icon:before {
            content: ""; }
          #modal.modalZone .mContent.no02 .tab li.respect span.icon:before {
            left: 5px; }
        #modal.modalZone .mContent.no02 .tab li.respect .bar {
          border-bottom: 4px solid #e3be0f; }
        #modal.modalZone .mContent.no02 .tab li.rival span.icon {
          color: #e85933; }
          #modal.modalZone .mContent.no02 .tab li.rival span.icon:before {
            content: ""; }
          #modal.modalZone .mContent.no02 .tab li.rival span.icon:before {
            left: -4px; }
        #modal.modalZone .mContent.no02 .tab li.rival .bar {
          border-bottom: 4px solid #e85933; }
      #modal.modalZone .mContent.no02 .tab:after {
        display: block;
        content: '';
        clear: both; }
    #modal.modalZone .mContent.no02 .mWrap {
      display: none;
      height: 65vh;
      max-height: 785px;
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.3);
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3) inset;
      -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3) inset;
      -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3) inset;
      overflow-y: scroll; }
      #modal.modalZone .mContent.no02 .mWrap ul {
        padding: 0 20px; }
        #modal.modalZone .mContent.no02 .mWrap ul li {
          border-bottom: 1px solid #575c63; }
          #modal.modalZone .mContent.no02 .mWrap ul li a {
            display: block;
            padding: 15px 10px;
            color: #fff;
            font-size: 22px;
            text-align: left; }
            #modal.modalZone .mContent.no02 .mWrap ul li a img {
              width: 30px;
              height: 30px;
              margin: 0 15px 0 0;
              vertical-align: middle; }
    #modal.modalZone .mContent.no02 #followers1:checked ~ .tab .respect .bar,
    #modal.modalZone .mContent.no02 #followers2:checked ~ .tab .rival .bar {
      width: 100%; }
    #modal.modalZone .mContent.no02 #followers1:checked ~ .mWrap.respectList {
      display: block; }
    #modal.modalZone .mContent.no02 #followers2:checked ~ .mWrap.rivalList {
      display: block; } }

@media screen and (min-width: 100px) and (max-width: 960px) {
  section.fightersBlock {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 0; }
    section.fightersBlock:before {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -2;
      display: block;
      content: "";
      background-color: rgba(0, 0, 0, 0.3); }
    section.fightersBlock:after {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -2;
      display: block;
      content: "";
      background: url(../../../as/img/profile/mv_bg.png?h=6b4a153254423530f7ce6af2641b6370); }
    section.fightersBlock div.playerStatus {
      position: absolute;
      top: 0px;
      left: 0;
      color: #fff;
      font-size: 11px;
      font-size: 1.1rem; }
      section.fightersBlock div.playerStatus div {
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: skewX(-30deg);
        -moz-transform: skewX(-30deg);
        -ms-transform: skewX(-30deg);
        -o-transform: skewX(-30deg);
        transform: skewX(-30deg);
        padding: 7px 0px 0px 24px;
        height: 27px; }
        section.fightersBlock div.playerStatus div p {
          margin: 0;
          font-style: normal;
          -webkit-transform-origin: 0 0;
          -moz-transform-origin: 0 0;
          transform-origin: 0 0;
          -webkit-transform: skewX(30deg);
          -moz-transform: skewX(30deg);
          -ms-transform: skewX(30deg);
          -o-transform: skewX(30deg);
          transform: skewX(30deg); }
          section.fightersBlock div.playerStatus div p:before {
            vertical-align: middle;
            margin: 0 8px 0 0;
            font-size: 19px;
            font-size: 1.9rem;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -ms-border-radius: 15px;
            border-radius: 15px; }
      section.fightersBlock div.playerStatus .useDevice {
        background: rgba(0, 0, 0, 0.7);
        width: 120px; }
        section.fightersBlock div.playerStatus .useDevice p.ps:before {
          content: ""; }
        section.fightersBlock div.playerStatus .useDevice p.ps:before {
          background: #31ade0;
          padding: 2px; }
        section.fightersBlock div.playerStatus .useDevice p.pc:before {
          content: ""; }
        section.fightersBlock div.playerStatus .useDevice p.pc:before {
          background: #333;
          padding: 2px; }
      section.fightersBlock div.playerStatus .nowStatus {
        width: 100px;
        padding-left: 20px; }
        section.fightersBlock div.playerStatus .nowStatus p {
          position: relative; }
          section.fightersBlock div.playerStatus .nowStatus p:before {
            position: relative;
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px; }
          section.fightersBlock div.playerStatus .nowStatus p:after {
            position: absolute;
            top: 4px;
            left: 4px;
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -ms-border-radius: 15px;
            border-radius: 15px; }
        section.fightersBlock div.playerStatus .nowStatus.online {
          background: rgba(85, 0, 0, 0.7); }
          section.fightersBlock div.playerStatus .nowStatus.online p:before {
            background: rgba(212, 6, 6, 0.5); }
          section.fightersBlock div.playerStatus .nowStatus.online p:after {
            background: #d40606; }
        section.fightersBlock div.playerStatus .nowStatus.offline {
          background: rgba(51, 51, 51, 0.7); }
          section.fightersBlock div.playerStatus .nowStatus.offline p:before {
            background: transparent; }
          section.fightersBlock div.playerStatus .nowStatus.offline p:after {
            background: #888888; }
    section.fightersBlock div.shareButton label {
      display: block;
      position: absolute;
      top: -59px;
      right: -59px;
      width: 118px;
      height: 113px;
      padding: 0 0 5px 0;
      cursor: pointer;
      color: #fff;
      background: rgba(56, 194, 219, 0.7);
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flexbox;
      display: -moz-flexbox;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-box-lines: single;
      -moz-box-lines: single;
      -webkit-flex-wrap: nowrap;
      -moz-flex-wrap: nowrap;
      -ms-flex-wrap: none;
      flex-wrap: nowrap;
      align-items: flex-end;
      justify-content: center;
      -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
      box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      font-size: 15px;
      font-size: 1.5rem;
      font-style: normal;
      font-weight: normal;
      letter-spacing: 1px;
      z-index: 10;
      cursor: pointer;
      transition: all 0.3s ease; }
      section.fightersBlock div.shareButton label:after {
        position: absolute;
        top: 55%;
        left: 44%;
        content: "";
        display: block;
        border-style: solid;
        border-width: 0 6px 6px 6px;
        border-color: transparent transparent #fff transparent;
        transition: all 0.3s ease; }
      section.fightersBlock div.shareButton label:hover {
        background: #38c2db; }
      section.fightersBlock div.shareButton label ul {
        position: absolute;
        top: 15px;
        right: 80px;
        transition: all 0.3s ease; }
        section.fightersBlock div.shareButton label ul li {
          position: absolute;
          top: 0;
          left: -30px;
          transition: all 0.3s ease;
          -webkit-transform: rotate(-45deg);
          -moz-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          -o-transform: rotate(-45deg);
          transform: rotate(-45deg); }
          section.fightersBlock div.shareButton label ul li a {
            display: block;
            width: 15px;
            height: 15px;
            transition: opacity 0.3s ease; }
            section.fightersBlock div.shareButton label ul li a:before {
              color: #fff;
              font-size: 15px; }
            section.fightersBlock div.shareButton label ul li a:hover {
              opacity: 0.7; }
          section.fightersBlock div.shareButton label ul li.fb a:before {
            content: ""; }
          section.fightersBlock div.shareButton label ul li.tw a:before {
            content: ""; }
          section.fightersBlock div.shareButton label ul li:last-child {
            left: 30px; }
    section.fightersBlock div.shareButton #share-toggle:checked ~ label {
      top: -110px;
      right: -115px;
      width: 218px;
      height: 200px; }
      section.fightersBlock div.shareButton #share-toggle:checked ~ label:after {
        top: 60%;
        left: 48%;
        border-width: 6px 6px 0 6px;
        border-color: #ffffff transparent transparent transparent; }
      section.fightersBlock div.shareButton #share-toggle:checked ~ label ul {
        position: absolute;
        top: 135px;
        right: 120px; }
        section.fightersBlock div.shareButton #share-toggle:checked ~ label ul li {
          position: absolute;
          top: 0;
          left: -15px; }
          section.fightersBlock div.shareButton #share-toggle:checked ~ label ul li:last-child {
            left: 15px; }
    section.fightersBlock div.fightersWrap {
      margin: 0 auto;
      position: relative;
      height: 520px; } }
    @media screen and (min-width: 100px) and (max-width: 960px) and (max-width: 600px) {
      section.fightersBlock div.fightersWrap {
        width: 100%; } }
    @media screen and (min-width: 100px) and (max-width: 960px) and (min-width: 601px) and (max-width: 960px) {
      section.fightersBlock div.fightersWrap {
        width: 100%; } }
    @media screen and (min-width: 100px) and (max-width: 960px) and (min-width: 961px) and (max-width: 1400px) {
      section.fightersBlock div.fightersWrap {
        width: 1100px; } }
    @media screen and (min-width: 100px) and (max-width: 960px) and (min-width: 1401px) {
      section.fightersBlock div.fightersWrap {
        width: 1100px; } }

@media screen and (min-width: 100px) and (max-width: 960px) {
      section.fightersBlock div.fightersWrap div.fighterInfo {
        position: absolute;
        top: 85px;
        left: 15px;
        z-index: 0; }
        section.fightersBlock div.fightersWrap div.fighterInfo dl.fightersId {
          color: #fff;
          -webkit-text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5), -1px 1px 15px rgba(0, 0, 0, 0.5), 1px -1px 15px rgba(0, 0, 0, 0.5), -1px -1px 15px rgba(0, 0, 0, 0.5);
          -moz-text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5), -1px 1px 15px rgba(0, 0, 0, 0.5), 1px -1px 15px rgba(0, 0, 0, 0.5), -1px -1px 15px rgba(0, 0, 0, 0.5);
          text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5), -1px 1px 15px rgba(0, 0, 0, 0.5), 1px -1px 15px rgba(0, 0, 0, 0.5), -1px -1px 15px rgba(0, 0, 0, 0.5); }
          section.fightersBlock div.fightersWrap div.fighterInfo dl.fightersId dt {
            display: none;
            font-size: 14px;
            font-size: 1.4rem;
            color: #ccc; }
          section.fightersBlock div.fightersWrap div.fighterInfo dl.fightersId dd {
            width: 50%;
            font-size: 26px;
            font-size: 2.6rem;
            margin: 0;
            line-height: 1.15; }
        section.fightersBlock div.fightersWrap div.fighterInfo p {
          margin: 0;
          padding: 0;
          color: #fff; }
        section.fightersBlock div.fightersWrap div.fighterInfo p.rating {
          padding: 4px 0 12px 6px;
          font-weight: bold;
          font-size: 12px;
          font-size: 1.2rem;
          -webkit-text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5), -1px 1px 15px rgba(0, 0, 0, 0.5), 1px -1px 15px rgba(0, 0, 0, 0.5), -1px -1px 15px rgba(0, 0, 0, 0.5);
          -moz-text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5), -1px 1px 15px rgba(0, 0, 0, 0.5), 1px -1px 15px rgba(0, 0, 0, 0.5), -1px -1px 15px rgba(0, 0, 0, 0.5);
          text-shadow: 1px 1px 15px rgba(0, 0, 0, 0.5), -1px 1px 15px rgba(0, 0, 0, 0.5), 1px -1px 15px rgba(0, 0, 0, 0.5), -1px -1px 15px rgba(0, 0, 0, 0.5); }
          section.fightersBlock div.fightersWrap div.fighterInfo p.rating img {
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: skewX(-20deg);
            -moz-transform: skewX(-20deg);
            -ms-transform: skewX(-20deg);
            -o-transform: skewX(-20deg);
            transform: skewX(-20deg);
            width: 26px;
            height: auto;
            display: inline-block; }
        section.fightersBlock div.fightersWrap div.fighterInfo p.title {
          position: relative;
          display: block;
          width: 200px;
          line-height: 0; }
          section.fightersBlock div.fightersWrap div.fighterInfo p.title img {
            width: 100%;
            height: auto;
            display: inline-block; }
          section.fightersBlock div.fightersWrap div.fighterInfo p.title span {
            position: absolute;
            white-space: nowrap;
            text-align: center;
            font-size: 11px;
            font-size: 1.1rem;
            letter-spacing: 0.3px;
            position: absolute;
            top: 47%;
            left: 50%;
            -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
            -webkit-text-shadow: 1px 1px 10px #000, -1px 1px 10px #000, 1px -1px 10px #000, -1px -1px 10px #000;
            -moz-text-shadow: 1px 1px 10px #000, -1px 1px 10px #000, 1px -1px 10px #000, -1px -1px 10px #000;
            text-shadow: 1px 1px 10px #000, -1px 1px 10px #000, 1px -1px 10px #000, -1px -1px 10px #000; }
      section.fightersBlock div.fightersWrap div.shainBox {
        position: absolute;
        width: 174px;
        height: 100px;
        top: 180px;
        -webkit-transform: rotate(-7deg);
        -moz-transform: rotate(-7deg);
        -ms-transform: rotate(-7deg);
        -o-transform: rotate(-7deg);
        transform: rotate(-7deg); }
        section.fightersBlock div.fightersWrap div.shainBox:before {
          content: "";
          display: block;
          position: absolute;
          bottom: 0px;
          left: -30px;
          width: 100%;
          height: 30px;
          background: #B31CBF; }
        section.fightersBlock div.fightersWrap div.shainBox img {
          line-height: 0;
          padding: 0;
          margin: 0;
          width: 100%; }
        section.fightersBlock div.fightersWrap div.shainBox div.cardBg {
          position: absolute;
          top: 38px;
          left: 82px;
          width: 100px; }
        section.fightersBlock div.fightersWrap div.shainBox div.cardTitle {
          position: absolute;
          top: 54px;
          left: 10px;
          -webkit-transform: rotate(7deg);
          -moz-transform: rotate(7deg);
          -ms-transform: rotate(7deg);
          -o-transform: rotate(7deg);
          transform: rotate(7deg);
          width: 88px; }
        section.fightersBlock div.fightersWrap div.shainBox div.smallCard {
          position: absolute;
          top: -35px;
          left: -56px;
          width: 60px;
          cursor: pointer;
          transition: all 0.1s linear;
          -webkit-transform: rotate(30deg);
          -moz-transform: rotate(30deg);
          -ms-transform: rotate(30deg);
          -o-transform: rotate(30deg);
          transform: rotate(30deg); }
          section.fightersBlock div.fightersWrap div.shainBox div.smallCard.animate {
            top: 58px;
            left: 105px;
            width: 60px;
            animation: 0.2s ease 0.1s cardAnimation_mb; }
          section.fightersBlock div.fightersWrap div.shainBox div.smallCard img {
            -webkit-box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.5);
            box-shadow: 3px 6px 6px rgba(0, 0, 0, 0.5); }
      section.fightersBlock div.fightersWrap div.fighterVisual {
        position: absolute;
        top: 30px;
        right: -20px;
        z-index: -1;
        -webkit-filter: drop-shadow(12px 0px 0px rgba(0, 0, 0, 0.2));
        -moz-filter: drop-shadow(12px 0px 0px rgba(0, 0, 0, 0.2));
        filter: drop-shadow(12px 0px 0px rgba(0, 0, 0, 0.2)); }
        section.fightersBlock div.fightersWrap div.fighterVisual img {
          width: 270px; }
  section.profileBlock {
    position: relative;
    z-index: 1;
    margin: -340px 0 0 0;
    pointer-events: none; }
    section.profileBlock div.profileWrap {
      margin: 0 auto;
      position: relative;
      padding: 68px 0 0 0;
      width: var(--width);
      height: var(--height);
      background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100px" height="100px" enable-background="new 0 0 100 100" viewBox="0 0 100 100" preserveAspectRatio="none"%3E%3Cdefs%3E%3ClinearGradient id="gradient1"%3E%3Cstop offset="0%" stop-color="%234b83ce" /%3E%3Cstop offset="100%" stop-color="%233e56ae" /%3E%3C/linearGradient%3E%3ClinearGradient id="gradient2"%3E%3Cstop offset="0%" stop-color="%233d55ae" /%3E%3Cstop offset="100%" stop-color="%23e9f7ff" /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon fill-rule="evenodd" clip-rule="evenodd" fill="%23fff" points="0,90, 0,20, 100,8, 100,99.2"/%3E%3Cpolygon fill-rule="evenodd" clip-rule="evenodd" fill="url(%23gradient1)" points="0,21, 0,19.8, 100,6.5, 100,9.5"/%3E%3Cpolygon fill-rule="evenodd" clip-rule="evenodd" fill="url(%23gradient2)" points="0,91, 0,89, 100,99, 100,99.5"/%3E%3C/svg%3E');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 450px;
      margin: 0 0 50px 0; } }
    @media screen and (min-width: 100px) and (max-width: 960px) and (max-width: 600px) {
      section.profileBlock div.profileWrap {
        width: 100%; } }
    @media screen and (min-width: 100px) and (max-width: 960px) and (min-width: 601px) and (max-width: 960px) {
      section.profileBlock div.profileWrap {
        width: 100%; } }
    @media screen and (min-width: 100px) and (max-width: 960px) and (min-width: 961px) and (max-width: 1400px) {
      section.profileBlock div.profileWrap {
        width: 1100px; } }
    @media screen and (min-width: 100px) and (max-width: 960px) and (min-width: 1401px) {
      section.profileBlock div.profileWrap {
        width: 1100px; } }

@media screen and (min-width: 100px) and (max-width: 960px) {
      section.profileBlock div.profileWrap div.followButton {
        pointer-events: auto;
        position: absolute;
        top: -5px;
        right: 18px;
        z-index: 1;
        width: 66px;
        height: 66px;
        background: #1fa6c8;
        color: #fff;
        text-align: center;
        cursor: pointer;
        font-size: 11px;
        font-size: 1.1rem;
        -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);
        -webkit-border-radius: 150px;
        -moz-border-radius: 150px;
        -ms-border-radius: 150px;
        border-radius: 150px; }
        section.profileBlock div.profileWrap div.followButton:before {
          content: ""; }
        section.profileBlock div.profileWrap div.followButton:before {
          font-size: 28px;
          font-size: 2.8rem;
          display: block;
          height: 43px;
          padding: 12px 0 0 0;
          margin: 0 0 -8px 0; }
        section.profileBlock div.profileWrap div.followButton:hover {
          background: #26cbf5; }
        section.profileBlock div.profileWrap div.followButton.open {
          background: #ccc; }
          section.profileBlock div.profileWrap div.followButton.open:before {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg); }
        section.profileBlock div.profileWrap div.followButton.respect {
          background: #e3be0f; }
          section.profileBlock div.profileWrap div.followButton.respect:before {
            content: ""; }
          section.profileBlock div.profileWrap div.followButton.respect:hover {
            background: #ccc; }
            section.profileBlock div.profileWrap div.followButton.respect:hover span {
              display: none; }
              section.profileBlock div.profileWrap div.followButton.respect:hover span.hover {
                display: block; }
          section.profileBlock div.profileWrap div.followButton.respect a {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 66px;
            height: 21px;
            padding: 45px 0 0 0;
            color: #fff; }
            section.profileBlock div.profileWrap div.followButton.respect a span.hover {
              display: none; }
        section.profileBlock div.profileWrap div.followButton.rival {
          background: #e85933; }
          section.profileBlock div.profileWrap div.followButton.rival:before {
            content: ""; }
          section.profileBlock div.profileWrap div.followButton.rival:hover {
            background: #ccc; }
            section.profileBlock div.profileWrap div.followButton.rival:hover span {
              display: none; }
              section.profileBlock div.profileWrap div.followButton.rival:hover span.hover {
                display: block; }
          section.profileBlock div.profileWrap div.followButton.rival a {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 66px;
            height: 21px;
            padding: 45px 0 0 0;
            color: #fff; }
            section.profileBlock div.profileWrap div.followButton.rival a span.hover {
              display: none; }
      section.profileBlock div.profileWrap ul.followLink {
        position: absolute;
        top: -43px;
        right: -17px;
        z-index: 0;
        pointer-events: auto; }
        section.profileBlock div.profileWrap ul.followLink li {
          width: 64px;
          height: 64px;
          color: #fff;
          text-align: center;
          position: absolute;
          cursor: pointer;
          -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
          -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
          -webkit-border-radius: 64px;
          -moz-border-radius: 64px;
          -ms-border-radius: 64px;
          border-radius: 64px;
          font-size: 11px;
          font-size: 1.1rem; }
          section.profileBlock div.profileWrap ul.followLink li:before {
            font-size: 28px;
            font-size: 2.8rem;
            display: block;
            height: 43px;
            padding: 5px 0 0 0;
            margin: 0px 0 -6px 0; }
          section.profileBlock div.profileWrap ul.followLink li.respectBtn {
            background: #e3be0f;
            top: 25px;
            left: -100px; }
            section.profileBlock div.profileWrap ul.followLink li.respectBtn:before {
              content: ""; }
            section.profileBlock div.profileWrap ul.followLink li.respectBtn:hover {
              background: #fbd212; }
            section.profileBlock div.profileWrap ul.followLink li.respectBtn.cancel {
              background: #aaa; }
              section.profileBlock div.profileWrap ul.followLink li.respectBtn.cancel:hover {
                background: #ccc; }
                section.profileBlock div.profileWrap ul.followLink li.respectBtn.cancel:hover span {
                  display: block;
                  opacity: 1; }
          section.profileBlock div.profileWrap ul.followLink li.rivalBtn {
            background: #e85933;
            top: 25px;
            left: -100px; }
            section.profileBlock div.profileWrap ul.followLink li.rivalBtn:before {
              content: ""; }
            section.profileBlock div.profileWrap ul.followLink li.rivalBtn:hover {
              background: #fc6138; }
            section.profileBlock div.profileWrap ul.followLink li.rivalBtn.cancel {
              background: #aaa; }
              section.profileBlock div.profileWrap ul.followLink li.rivalBtn.cancel:hover {
                background: #ccc; }
                section.profileBlock div.profileWrap ul.followLink li.rivalBtn.cancel:hover span {
                  display: block;
                  opacity: 1; }
          section.profileBlock div.profileWrap ul.followLink li a {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 64px;
            height: 22px;
            padding: 42px 0 0 0;
            color: #fff;
            text-align: center; }
          section.profileBlock div.profileWrap ul.followLink li span {
            display: none;
            position: absolute;
            top: -85px;
            left: -55px;
            width: 150px;
            padding: 15px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.8);
            box-sizing: border-box;
            color: #555;
            font-size: 12px;
            text-align: left;
            line-height: 1.5;
            opacity: 0;
            transition: all 0.3s ease; }
            section.profileBlock div.profileWrap ul.followLink li span:after {
              display: block;
              content: '';
              position: absolute;
              bottom: -8px;
              left: 50%;
              border-style: solid;
              border-width: 8px 10px 0 10px;
              border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent; }
      section.profileBlock div.profileWrap .flexBox {
        pointer-events: none;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flexbox;
        display: -moz-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: flex-end; }
        section.profileBlock div.profileWrap .flexBox .layOne {
          pointer-events: auto;
          width: 60%;
          -webkit-box-ordinal-group: 2;
          -ms-flex-order: 2;
          -webkit-order: 2;
          order: 2; }
        section.profileBlock div.profileWrap .flexBox .layTwo {
          pointer-events: auto;
          width: 60%;
          justify-content: flex-end;
          -webkit-box-ordinal-group: 1;
          -ms-flex-order: 1;
          -webkit-order: 1;
          order: 1; }
        section.profileBlock div.profileWrap .flexBox .layThree {
          pointer-events: auto;
          width: 100%;
          -webkit-box-ordinal-group: 3;
          -ms-flex-order: 3;
          -webkit-order: 3;
          order: 3; }
        section.profileBlock div.profileWrap .flexBox .layFour {
          pointer-events: auto;
          width: 100%;
          -webkit-box-ordinal-group: 4;
          -ms-flex-order: 4;
          -webkit-order: 4;
          order: 4; }
      section.profileBlock div.profileWrap div.fightersIcon {
        position: absolute;
        width: 110px;
        margin: 30px 0 0 4%;
        pointer-events: none; }
        section.profileBlock div.profileWrap div.fightersIcon img {
          width: 100%;
          padding: 0;
          box-shadow: 0px 3px 13px rgba(0, 0, 0, 0.5);
          -moz-box-shadow: 0px 3px 13px rgba(0, 0, 0, 0.5);
          -webkit-box-shadow: 0px 3px 13px rgba(0, 0, 0, 0.5); }
      section.profileBlock div.profileWrap .playData {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flexbox;
        display: -moz-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-box-lines: single;
        -moz-box-lines: single;
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: none;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin: 18px 0 0 0;
        padding: 0 20px 0 0; }
        section.profileBlock div.profileWrap .playData dl {
          margin: 0;
          font-size: 11px;
          font-size: 1.1rem; }
          section.profileBlock div.profileWrap .playData dl dt {
            white-space: nowrap;
            color: #888;
            margin: 0 0 3px 0;
            padding: 0;
            vertical-align: middle; }
          section.profileBlock div.profileWrap .playData dl dd {
            display: inline-block;
            vertical-align: middle;
            color: #555;
            text-align: right;
            padding: 0;
            font-weight: bold; }
            section.profileBlock div.profileWrap .playData dl dd img {
              display: inline-block;
              vertical-align: middle;
              width: 28px;
              height: auto;
              margin: -4px -5px 0 -5px; }
      section.profileBlock div.profileWrap div.leagueWrap {
        color: #555; }
        section.profileBlock div.profileWrap div.leagueWrap div.characterInfo {
          margin: 0 20px 0 0px; }
          section.profileBlock div.profileWrap div.leagueWrap div.characterInfo dl.characterName {
            text-align: right;
            display: block;
            width: 100%;
            min-height: 30px; }
            section.profileBlock div.profileWrap div.leagueWrap div.characterInfo dl.characterName dt {
              font-size: 10px;
              font-size: 1rem;
              color: #888;
              display: block;
              width: 100%;
              text-align: right;
              margin: 10px 0 0 0; }
            section.profileBlock div.profileWrap div.leagueWrap div.characterInfo dl.characterName dd {
              font-size: 34px;
              font-size: 3.4rem;
              margin: 0 0 0 0;
              color: #555;
              display: block;
              width: 100%; }
              section.profileBlock div.profileWrap div.leagueWrap div.characterInfo dl.characterName dd a {
                color: #1fa6c8; }
                section.profileBlock div.profileWrap div.leagueWrap div.characterInfo dl.characterName dd a:hover {
                  color: #24c1e8; }
          section.profileBlock div.profileWrap div.leagueWrap div.characterInfo div.characterLevel {
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flexbox;
            display: -moz-flexbox;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: -moz-flex;
            display: flex;
            -webkit-box-lines: single;
            -moz-box-lines: single;
            -webkit-flex-wrap: nowrap;
            -moz-flex-wrap: nowrap;
            -ms-flex-wrap: none;
            flex-wrap: nowrap;
            margin: -5px 0 6px 0; }
            section.profileBlock div.profileWrap div.leagueWrap div.characterInfo div.characterLevel dl.level {
              display: -webkit-box;
              display: -moz-box;
              display: -webkit-flexbox;
              display: -moz-flexbox;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: -moz-flex;
              display: flex;
              -webkit-box-lines: single;
              -moz-box-lines: single;
              -webkit-flex-wrap: nowrap;
              -moz-flex-wrap: nowrap;
              -ms-flex-wrap: none;
              flex-wrap: nowrap;
              align-items: baseline; }
              section.profileBlock div.profileWrap div.leagueWrap div.characterInfo div.characterLevel dl.level dt {
                font-size: 18px;
                font-size: 1.8rem;
                color: #888; }
              section.profileBlock div.profileWrap div.leagueWrap div.characterInfo div.characterLevel dl.level dd {
                font-size: 24px;
                font-size: 2.4rem;
                color: #555; }
            section.profileBlock div.profileWrap div.leagueWrap div.characterInfo div.characterLevel div.progressBar {
              position: relative;
              width: 100%;
              height: 16px;
              margin: 6px 0 0 15px;
              padding: 0 0 0 0;
              background: url(../../../as/img/profile/lp_bar_bg.png?h=6430d86c6cc2fa312378aa355c37bd15) repeat-x left bottom;
              background-size: 120%; }
              section.profileBlock div.profileWrap div.leagueWrap div.characterInfo div.characterLevel div.progressBar .bar {
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 0%;
                height: 100%;
                -webkit-transform-origin: 0 0;
                -moz-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: skewX(-30deg);
                -moz-transform: skewX(-30deg);
                -ms-transform: skewX(-30deg);
                -o-transform: skewX(-30deg);
                transform: skewX(-30deg);
                -webkit-box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
                -moz-box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
                box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
                background: #3e56af;
                background: -moz-linear-gradient(left, #3e56af 0%, #2ea9fa 100%);
                background: -webkit-linear-gradient(left, #3e56af 0%, #2ea9fa 100%);
                background: linear-gradient(to right, #3e56af 0%, #2ea9fa 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e56af', endColorstr='#2ea9fa',GradientType=1 ); }
                section.profileBlock div.profileWrap div.leagueWrap div.characterInfo div.characterLevel div.progressBar .bar:after {
                  position: absolute;
                  bottom: 0;
                  content: "";
                  display: block;
                  width: 100%;
                  height: 50%;
                  background: rgba(0, 0, 0, 0.1); }
          section.profileBlock div.profileWrap div.leagueWrap div.characterInfo p.progressTxt {
            display: block;
            margin: -5px 0 0 0;
            text-align: right;
            font-size: 10px;
            font-size: 1rem; }
      section.profileBlock div.profileWrap div.infoWrap {
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flexbox;
        display: -moz-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin: 12px 0 0 0; }
        section.profileBlock div.profileWrap div.infoWrap div.leagueInfo, section.profileBlock div.profileWrap div.infoWrap div.playerInfo {
          width: 50%;
          display: -webkit-box;
          display: -moz-box;
          display: -webkit-flexbox;
          display: -moz-flexbox;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: -moz-flex;
          display: flex;
          -webkit-box-lines: single;
          -moz-box-lines: single;
          -webkit-flex-wrap: nowrap;
          -moz-flex-wrap: nowrap;
          -ms-flex-wrap: none;
          flex-wrap: nowrap; }
          section.profileBlock div.profileWrap div.infoWrap div.leagueInfo dl, section.profileBlock div.profileWrap div.infoWrap div.playerInfo dl {
            width: 50%;
            text-align: center;
            padding: 0;
            color: #555; }
            section.profileBlock div.profileWrap div.infoWrap div.leagueInfo dl dt, section.profileBlock div.profileWrap div.infoWrap div.playerInfo dl dt {
              font-size: 10px;
              font-size: 1rem; }
            section.profileBlock div.profileWrap div.infoWrap div.leagueInfo dl dd, section.profileBlock div.profileWrap div.infoWrap div.playerInfo dl dd {
              margin: 10px 0 0 0;
              font-size: 18px;
              font-size: 1.8rem; }
              section.profileBlock div.profileWrap div.infoWrap div.leagueInfo dl dd span, section.profileBlock div.profileWrap div.infoWrap div.playerInfo dl dd span {
                font-size: 13px;
                font-size: 1.3rem; }
              section.profileBlock div.profileWrap div.infoWrap div.leagueInfo dl dd img, section.profileBlock div.profileWrap div.infoWrap div.playerInfo dl dd img {
                width: 80px;
                margin: 0 auto;
                margin-top: -6px; }
        section.profileBlock div.profileWrap div.infoWrap a.rankingButton {
          display: block;
          background: #1fa6c8;
          color: #fff;
          text-align: center;
          margin: 10px 22px 0 0;
          padding: 8px 0 8px 0;
          width: 150px;
          position: relative;
          font-size: 16px;
          font-size: 1.6rem;
          -webkit-border-radius: 50px;
          -moz-border-radius: 50px;
          -ms-border-radius: 50px;
          border-radius: 50px;
          -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
          -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); }
          section.profileBlock div.profileWrap div.infoWrap a.rankingButton:after {
            content: ""; }
          section.profileBlock div.profileWrap div.infoWrap a.rankingButton:after {
            color: #fff;
            margin: 0 0 0 15px;
            display: block;
            position: absolute;
            top: 25%;
            right: 10px;
            font-weight: bold; }
          section.profileBlock div.profileWrap div.infoWrap a.rankingButton:hover {
            background: #24c1e8; }
      section.profileBlock div.profileWrap div.followWrap {
        margin: 2px 0;
        padding: 3px 0 10px 0;
        position: relative;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flexbox;
        display: -moz-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-box-lines: single;
        -moz-box-lines: single;
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: none;
        flex-wrap: nowrap;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee; }
        section.profileBlock div.profileWrap div.followWrap div.followInfo {
          width: 50%;
          padding: 0 20px;
          position: relative;
          text-align: center; }
          section.profileBlock div.profileWrap div.followWrap div.followInfo:first-child:before {
            position: absolute;
            top: 5%;
            right: 0px;
            content: "";
            border-right: 1px solid #eee;
            height: 90%; }
          section.profileBlock div.profileWrap div.followWrap div.followInfo p {
            font-size: 18px;
            font-size: 1.8rem;
            margin: 17px 0 5px 0;
            text-align: center;
            color: #504f4f; }
          section.profileBlock div.profileWrap div.followWrap div.followInfo dl {
            width: 48%;
            display: inline-block; }
            section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt {
              display: block;
              color: #fff;
              width: 50px;
              margin: auto;
              position: relative;
              margin: 0 auto -18px auto;
              -webkit-transform-origin: 0 0;
              -moz-transform-origin: 0 0;
              transform-origin: 0 0;
              -webkit-transform: skewX(-20deg);
              -moz-transform: skewX(-20deg);
              -ms-transform: skewX(-20deg);
              -o-transform: skewX(-20deg);
              transform: skewX(-20deg);
              font-size: 11px;
              font-size: 1.1rem; }
              section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt span {
                text-align: center;
                display: block;
                padding: 2px;
                margin: 9px 0 20px -10px;
                -webkit-transform-origin: 0 0;
                -moz-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: skewX(20deg);
                -moz-transform: skewX(20deg);
                -ms-transform: skewX(20deg);
                -o-transform: skewX(20deg);
                transform: skewX(20deg);
                width: 60px; }
              section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt:before {
                display: block;
                padding: 0px;
                position: absolute;
                top: -5px;
                -webkit-transform-origin: 0 0;
                -moz-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: skewX(20deg);
                -moz-transform: skewX(20deg);
                -ms-transform: skewX(20deg);
                -o-transform: skewX(20deg);
                transform: skewX(20deg);
                font-size: 20px;
                font-size: 2rem; }
              section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt.respect {
                background: #e3be0f; }
                section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt.respect:before {
                  content: ""; }
                section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt.respect:before {
                  color: #e3be0f;
                  left: -34px; }
              section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt.rival {
                background: #e85933; }
                section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt.rival:before {
                  content: ""; }
                section.profileBlock div.profileWrap div.followWrap div.followInfo dl dt.rival:before {
                  color: #e85933;
                  right: -24px; }
            section.profileBlock div.profileWrap div.followWrap div.followInfo dl dd {
              font-size: 25px;
              font-size: 2.5rem;
              color: #555;
              width: 20vw;
              /*width:100px*/
              height: 50px;
              display: table-cell;
              vertical-align: middle; }
              section.profileBlock div.profileWrap div.followWrap div.followInfo dl dd img {
                width: 22px;
                box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.3);
                display: inline-block; }
              section.profileBlock div.profileWrap div.followWrap div.followInfo dl dd span {
                display: block;
                font-size: 10px;
                font-size: 1rem;
                margin: 4px 0 0 0; }
              section.profileBlock div.profileWrap div.followWrap div.followInfo dl dd a {
                display: block;
                margin: 4px 0 0 0;
                font-size: 10px;
                font-size: 1rem;
                color: #1fa6c8; }
                section.profileBlock div.profileWrap div.followWrap div.followInfo dl dd a:hover {
                  color: #24c1e8; }
        section.profileBlock div.profileWrap div.followWrap.followWrap .followInfo:nth-of-type(2) dl dd span {
          display: inline;
          margin: 0 0 0 -20px;
          font-size: 25px;
          font-size: 2.5rem;
          color: #555; }
        section.profileBlock div.profileWrap div.followWrap.followWrap .followInfo:nth-of-type(2) dl dd label {
          display: inline;
          margin: 0 0 0 -20px;
          font-size: 25px;
          font-size: 2.5rem;
          color: #1fa6c8; }
          section.profileBlock div.profileWrap div.followWrap.followWrap .followInfo:nth-of-type(2) dl dd label:hover {
            color: #24c1e8; }
  section.battleBlock {
    background-image: url(../../../as/img/profile/recent_bg.jpg?h=41734d0a7548708e433d1f68b1a3aa34), url(../../../as/img/profile/recent_bg_repeat.jpg?h=ebb5b187da09bb02151346983a2ec980);
    background-repeat: no-repeat, repeat;
    background-position: top center, bottom center;
    margin: -295px 0 0 0; }
    section.battleBlock div.battleWrap {
      margin: 0 auto;
      color: #fff;
      padding: 264px 0 0 0; } }
    @media screen and (min-width: 100px) and (max-width: 960px) and (max-width: 600px) {
      section.battleBlock div.battleWrap {
        width: 100%; } }
    @media screen and (min-width: 100px) and (max-width: 960px) and (min-width: 601px) and (max-width: 960px) {
      section.battleBlock div.battleWrap {
        width: 100%; } }
    @media screen and (min-width: 100px) and (max-width: 960px) and (min-width: 961px) and (max-width: 1400px) {
      section.battleBlock div.battleWrap {
        width: 1100px; } }
    @media screen and (min-width: 100px) and (max-width: 960px) and (min-width: 1401px) {
      section.battleBlock div.battleWrap {
        width: 1100px; } }

@media screen and (min-width: 100px) and (max-width: 960px) {
      section.battleBlock div.battleWrap h2 {
        margin: 0;
        padding: 0 0 40px 24px;
        font-weight: normal;
        font-size: 36px;
        font-size: 3.6rem;
        -webkit-text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.3), 2px 4px 2px rgba(0, 0, 0, 0.3), 4px 2px 2px rgba(0, 0, 0, 0.3), 2px 2px 2px rgba(0, 0, 0, 0.3);
        -moz-text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.3), 2px 4px 2px rgba(0, 0, 0, 0.3), 4px 2px 2px rgba(0, 0, 0, 0.3), 2px 2px 2px rgba(0, 0, 0, 0.3);
        text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.3), 2px 4px 2px rgba(0, 0, 0, 0.3), 4px 2px 2px rgba(0, 0, 0, 0.3), 2px 2px 2px rgba(0, 0, 0, 0.3); }
      section.battleBlock div.battleWrap ul#battleTypeSelect {
        width: 86%;
        margin: 0 auto;
        padding: 0 0 0 24px;
        display: -webkit-box;
        display: -moz-box;
        display: -webkit-flexbox;
        display: -moz-flexbox;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-box-lines: single;
        -moz-box-lines: single;
        -webkit-flex-wrap: nowrap;
        -moz-flex-wrap: nowrap;
        -ms-flex-wrap: none;
        flex-wrap: nowrap;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: skewX(-23deg);
        -moz-transform: skewX(-23deg);
        -ms-transform: skewX(-23deg);
        -o-transform: skewX(-23deg);
        transform: skewX(-23deg); }
        section.battleBlock div.battleWrap ul#battleTypeSelect li {
          position: relative;
          cursor: pointer;
          -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
          -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
          width: 33%;
          margin: 10px 2px 0px 0;
          background: #3d55ae;
          color: #fff;
          line-height: 3.0;
          text-align: center;
          font-size: 12px;
          font-size: 1.2rem; }
          section.battleBlock div.battleWrap ul#battleTypeSelect li.select {
            background: #fff;
            color: #3d55ae; }
          section.battleBlock div.battleWrap ul#battleTypeSelect li:hover {
            -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
            z-index: 10;
            background: #4660c4;
            color: #fff; }
          section.battleBlock div.battleWrap ul#battleTypeSelect li span {
            display: inline-block;
            margin: 0 0 0 -30px;
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: skewX(23deg);
            -moz-transform: skewX(23deg);
            -ms-transform: skewX(23deg);
            -o-transform: skewX(23deg);
            transform: skewX(23deg); }
      section.battleBlock div.battleWrap ul.historyVisualBox {
        padding: 30px 0 0 0;
        position: relative;
        min-height: 600px; }
      section.battleBlock div.battleWrap li.battleType {
        position: absolute;
        width: 100%;
        display: none; }
        section.battleBlock div.battleWrap li.battleType div.battleHistory {
          width: 320px;
          margin: 0 auto; }
          section.battleBlock div.battleWrap li.battleType div.battleHistory p.resultTtl {
            margin: 0 0 13px 0;
            padding: 0 0 0 6%;
            position: relative; }
            section.battleBlock div.battleWrap li.battleType div.battleHistory p.resultTtl span {
              position: absolute;
              bottom: 0;
              right: 18%;
              display: inline-block; }
              section.battleBlock div.battleWrap li.battleType div.battleHistory p.resultTtl span:after {
                content: ""; }
              section.battleBlock div.battleWrap li.battleType div.battleHistory p.resultTtl span:after {
                position: relative;
                bottom: -11px;
                left: 3px;
                font-size: 26px;
                font-size: 2.6rem;
                display: inline-block;
                margin: 15px 0 -15px 0; }
          section.battleBlock div.battleWrap li.battleType div.battleHistory div.graphWrap {
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: skewX(-20deg);
            -moz-transform: skewX(-20deg);
            -ms-transform: skewX(-20deg);
            -o-transform: skewX(-20deg);
            transform: skewX(-20deg); }
          section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph {
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flexbox;
            display: -moz-flexbox;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: -moz-flex;
            display: flex;
            -webkit-box-lines: single;
            -moz-box-lines: single;
            -webkit-flex-wrap: nowrap;
            -moz-flex-wrap: nowrap;
            -ms-flex-wrap: none;
            flex-wrap: nowrap;
            align-items: stretch;
            margin: 0 0 0px 0; }
            section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph.win p.ttl {
              background: #3d55ae; }
            section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph.win li.on {
              background: #2a6dd7; }
            section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph.lose p.ttl {
              background: #af413e; }
            section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph.lose li.on {
              background: #c83c3a; }
            section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph.lose li.draw {
              background: #c2a818; }
            section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph p.ttl {
              -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
              -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
              box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
              margin: 0 0 0 5%;
              height: 25px;
              width: 18%;
              text-align: center;
              margin-right: 5px;
              font-style: normal;
              padding: 15px 0 0 0;
              display: table-cell;
              vertical-align: middle;
              justify-content: center;
              letter-spacing: 1.2px;
              font-size: 12px;
              font-size: 1.2rem; }
            section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph ul {
              height: 40px;
              margin: 0 0 0 0.5%;
              width: 70%;
              padding: 0;
              display: -webkit-box;
              display: -moz-box;
              display: -webkit-flexbox;
              display: -moz-flexbox;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: -moz-flex;
              display: flex;
              -webkit-box-lines: single;
              -moz-box-lines: single;
              -webkit-flex-wrap: nowrap;
              -moz-flex-wrap: nowrap;
              -ms-flex-wrap: none;
              flex-wrap: nowrap; }
              section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph ul li {
                width: 5px;
                height: 100%;
                background: rgba(169, 209, 209, 0.2);
                margin: 0 5px 0 0;
                -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
                -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
                box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); }
            section.battleBlock div.battleWrap li.battleType div.battleHistory div.graph p.total {
              font-size: 40px;
              font-size: 4rem;
              width: 15%;
              margin: 0;
              padding: 0;
              text-align: center;
              justify-content: center;
              vertical-align: baseline;
              -webkit-transform-origin: 0 0;
              -moz-transform-origin: 0 0;
              transform-origin: 0 0;
              -webkit-transform: skewX(20deg);
              -moz-transform: skewX(20deg);
              -ms-transform: skewX(20deg);
              -o-transform: skewX(20deg);
              transform: skewX(20deg); }
        section.battleBlock div.battleWrap li.battleType div.battleNumber {
          width: 90%;
          margin: 0 5%;
          padding: 0 0 30px 0;
          background: url(../../../as/img/profile/report_hr.png?h=61e734c258fe1b3b66e5741784ea3942) repeat-x center bottom;
          background-size: 40%; }
          section.battleBlock div.battleWrap li.battleType div.battleNumber dl {
            display: -webkit-box;
            display: -moz-box;
            display: -webkit-flexbox;
            display: -moz-flexbox;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: -moz-flex;
            display: flex;
            -webkit-box-lines: single;
            -moz-box-lines: single;
            -webkit-flex-wrap: nowrap;
            -moz-flex-wrap: nowrap;
            -ms-flex-wrap: none;
            flex-wrap: nowrap;
            align-content: space-between;
            align-items: baseline;
            padding: 0 5% 19px 5%; }
            section.battleBlock div.battleWrap li.battleType div.battleNumber dl dt {
              font-size: 16px;
              font-size: 1.6rem;
              width: 50%; }
            section.battleBlock div.battleWrap li.battleType div.battleNumber dl dd {
              font-size: 28px;
              font-size: 2.8rem;
              width: 50%;
              text-align: right; }
      section.battleBlock div.battleWrap div.chartBox {
        position: relative;
        pointer-events: none;
        margin: 5px 0 0 0;
        width: 100%; }
        section.battleBlock div.battleWrap div.chartBox div#donutchartRank, section.battleBlock div.battleWrap div.chartBox div#donutchartCasual, section.battleBlock div.battleWrap div.chartBox div#donutchartLounge {
          margin: 0px auto;
          min-height: 320px;
          width: 320px;
          height: 320px; }
          section.battleBlock div.battleWrap div.chartBox div#donutchartRank:before, section.battleBlock div.battleWrap div.chartBox div#donutchartCasual:before, section.battleBlock div.battleWrap div.chartBox div#donutchartLounge:before {
            position: absolute;
            top: 60px;
            left: calc(50% - 100px);
            content: "";
            display: block;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.2);
            -webkit-border-radius: 120px;
            -moz-border-radius: 120px;
            -ms-border-radius: 120px;
            border-radius: 120px; }
          section.battleBlock div.battleWrap div.chartBox div#donutchartRank svg, section.battleBlock div.battleWrap div.chartBox div#donutchartCasual svg, section.battleBlock div.battleWrap div.chartBox div#donutchartLounge svg {
            -webkit-filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.8));
            -moz-filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.8));
            filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.8)); }
            section.battleBlock div.battleWrap div.chartBox div#donutchartRank svg g path, section.battleBlock div.battleWrap div.chartBox div#donutchartCasual svg g path, section.battleBlock div.battleWrap div.chartBox div#donutchartLounge svg g path {
              stroke-width: 0 !important; }
        section.battleBlock div.battleWrap div.chartBox dl {
          position: absolute;
          top: 37%;
          width: 100%;
          display: block;
          text-align: center;
          -webkit-text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5), 1px 3px 3px rgba(0, 0, 0, 0.5), 3px 1px 3px rgba(0, 0, 0, 0.5), 1px 1px 3px rgba(0, 0, 0, 0.5);
          -moz-text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5), 1px 3px 3px rgba(0, 0, 0, 0.5), 3px 1px 3px rgba(0, 0, 0, 0.5), 1px 1px 3px rgba(0, 0, 0, 0.5);
          text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5), 1px 3px 3px rgba(0, 0, 0, 0.5), 3px 1px 3px rgba(0, 0, 0, 0.5), 1px 1px 3px rgba(0, 0, 0, 0.5); }
          section.battleBlock div.battleWrap div.chartBox dl dt {
            font-size: 16px;
            font-size: 1.6rem;
            letter-spacing: 2px;
            font-style: normal; }
          section.battleBlock div.battleWrap div.chartBox dl dd span.percent {
            font-size: 48px;
            font-size: 4.8rem; }
          section.battleBlock div.battleWrap div.chartBox dl dd span.code {
            font-size: 28px;
            font-size: 2.8rem; }
      section.battleBlock div.battleWrap div.battleHistoryBox {
        padding: 65px 0 60px 0; }
        section.battleBlock div.battleWrap div.battleHistoryBox h3 {
          position: relative;
          text-align: center;
          margin: 0;
          padding: 0;
          font-size: 31px;
          font-size: 3.1rem;
          font-weight: normal;
          width: 100%;
          -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
          -moz-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
          filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); }
          section.battleBlock div.battleWrap div.battleHistoryBox h3:after {
            content: "";
            display: block;
            border-style: solid;
            margin: 10px auto 0;
            width: 0;
            border-width: 5px 120px 0 120px;
            border-color: #fff transparent transparent transparent; }
        section.battleBlock div.battleWrap div.battleHistoryBox ul {
          padding: 50px 0 0 0; }
          section.battleBlock div.battleWrap div.battleHistoryBox ul li {
            margin: 0 0 34px 25px; }
            section.battleBlock div.battleWrap div.battleHistoryBox ul li a {
              position: relative;
              z-index: 1;
              display: block;
              background: rgba(0, 0, 0, 0.5);
              width: 90%;
              padding: 10px 0 0 0;
              -webkit-box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
              -moz-box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
              box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3); }
              section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox {
                position: relative; }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox p.icon {
                  position: absolute;
                  margin: 0 20px 10px 10px;
                  width: 64px; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox p.icon img {
                    width: 100%; }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox dl {
                  display: block;
                  margin: 0;
                  width: 75%;
                  margin: 0 0 0 25%;
                  padding: 0 0 8px 0; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox dl dt {
                    color: #888;
                    font-size: 10px;
                    font-size: 1rem;
                    margin: 0px 0 0px 0; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox dl dd {
                    color: #fff;
                    font-size: 12px;
                    font-size: 1.2rem; }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox div.fighter {
                  position: absolute;
                  bottom: 0px;
                  right: 0;
                  line-height: 0;
                  margin: 0;
                  padding: 0; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li a div.recentbox div.fighter img {
                    width: auto;
                    height: 108px; }
              section.battleBlock div.battleWrap div.battleHistoryBox ul li a:hover {
                background: rgba(68, 68, 68, 0.5); }
            section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status {
              display: -webkit-box;
              display: -moz-box;
              display: -webkit-flexbox;
              display: -moz-flexbox;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: -moz-flex;
              display: flex;
              -webkit-box-lines: single;
              -moz-box-lines: single;
              -webkit-flex-wrap: nowrap;
              -moz-flex-wrap: nowrap;
              -ms-flex-wrap: none;
              flex-wrap: nowrap;
              margin: 0 0 0 0px;
              width: 75%; }
              section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus {
                width: 140px;
                height: 25px;
                position: relative; }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus:before {
                  position: absolute;
                  content: "";
                  display: block;
                  width: 75%;
                  border-top: 25px solid rgba(85, 0, 0, 0.7);
                  border-left: 10px solid transparent;
                  border-right: 10px solid transparent; }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus p {
                  margin: 0;
                  position: relative;
                  text-align: center;
                  font-size: 12px;
                  font-size: 1.2rem;
                  line-height: 1.8; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus p:before {
                    position: absolute;
                    top: 4px;
                    left: 15px;
                    content: "";
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    -webkit-border-radius: 15px;
                    -moz-border-radius: 15px;
                    -ms-border-radius: 15px;
                    border-radius: 15px; }
                  section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus p:after {
                    position: absolute;
                    top: 8px;
                    left: 19px;
                    content: "";
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    -webkit-border-radius: 15px;
                    -moz-border-radius: 15px;
                    -ms-border-radius: 15px;
                    border-radius: 15px; }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus.online:before {
                  border-top: 25px solid rgba(85, 0, 0, 0.7); }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus.online p:before {
                  background: rgba(212, 6, 6, 0.5); }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus.online p:after {
                  background: #d40606; }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus.offline:before {
                  border-top: 25px solid rgba(51, 51, 51, 0.7); }
                section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status .nowStatus.offline p:before {
                  background: #888888; }
              section.battleBlock div.battleWrap div.battleHistoryBox ul li div.status span.time {
                font-size: 12px;
                font-size: 1.2rem;
                position: relative;
                top: 1px;
                color: #b8b5b5;
                margin: 4px 0 0 0; }
    section.battleBlock div.battlePastdata {
      background: rgba(255, 255, 255, 0.1); }
      section.battleBlock div.battlePastdata a {
        width: 100%;
        color: #fff;
        display: inline-block;
        line-height: 5;
        position: relative;
        text-align: right; }
        section.battleBlock div.battlePastdata a span {
          display: block;
          font-style: italic;
          padding: 0  50px 0 0;
          font-size: 12px;
          font-size: 1.2rem; }
        section.battleBlock div.battlePastdata a:after {
          content: ""; }
        section.battleBlock div.battlePastdata a:after {
          display: block;
          position: absolute;
          font-size: 20px;
          font-size: 2rem;
          line-height: 3.0;
          top: 0;
          right: 20px; }
        section.battleBlock div.battlePastdata a:hover {
          background: rgba(255, 255, 255, 0.2); }
  footer {
    margin: 0px 0 0 0; }
  #modal.modalZone .mContent.no02 {
    position: relative;
    width: 90%;
    margin: 0 auto;
    padding: 10px 4% 20px 4%;
    border-radius: 4px;
    background: rgba(25, 31, 41, 0.8);
    box-sizing: border-box;
    font-style: normal;
    overflow: visible; }
    #modal.modalZone .mContent.no02 .close {
      position: absolute;
      top: -30px;
      right: -12px;
      width: 44px;
      height: 44px;
      border-radius: 50px;
      background: url(../../../as/img/btn_modal_prof_close.png?h=b28c81a8fd2ac6d70584f1ddf157e7be) no-repeat center center #fff;
      background-size: 16px;
      cursor: pointer; }
    #modal.modalZone .mContent.no02 .tab {
      margin: 0; }
      #modal.modalZone .mContent.no02 .tab li {
        position: relative;
        float: left;
        width: 90px;
        height: 30px;
        margin: 0 10px 0 0;
        padding: 0 0 4px 0;
        color: #fff;
        font-size: 14px;
        font-style: italic; }
        #modal.modalZone .mContent.no02 .tab li label {
          display: block;
          width: 90px;
          height: 30px;
          cursor: pointer; }
          #modal.modalZone .mContent.no02 .tab li label span.icon {
            display: inline-block;
            position: relative;
            padding: 24px 15px 0 0;
            font-size: 10px;
            line-height: 1px; }
            #modal.modalZone .mContent.no02 .tab li label span.icon:before {
              content: ""; }
            #modal.modalZone .mContent.no02 .tab li label span.icon:before {
              position: absolute;
              top: -4px;
              font-size: 20px;
              line-height: 1; }
          #modal.modalZone .mContent.no02 .tab li label .bar {
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            transition: width 0.3s ease; }
        #modal.modalZone .mContent.no02 .tab li.respect span.icon {
          color: #e3be0f; }
          #modal.modalZone .mContent.no02 .tab li.respect span.icon:before {
            content: ""; }
          #modal.modalZone .mContent.no02 .tab li.respect span.icon:before {
            left: 8px; }
        #modal.modalZone .mContent.no02 .tab li.respect .bar {
          border-bottom: 2px solid #e3be0f; }
        #modal.modalZone .mContent.no02 .tab li.rival span.icon {
          color: #e85933; }
          #modal.modalZone .mContent.no02 .tab li.rival span.icon:before {
            content: ""; }
          #modal.modalZone .mContent.no02 .tab li.rival span.icon:before {
            left: 4px; }
        #modal.modalZone .mContent.no02 .tab li.rival .bar {
          border-bottom: 2px solid #e85933; }
      #modal.modalZone .mContent.no02 .tab:after {
        display: block;
        content: '';
        clear: both; }
    #modal.modalZone .mContent.no02 #followers1:checked ~ .tab .respect .bar,
    #modal.modalZone .mContent.no02 #followers2:checked ~ .tab .rival .bar {
      width: 100%; }
    #modal.modalZone .mContent.no02 .mWrap {
      display: none;
      height: 65vh;
      max-height: 450px;
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.3);
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3) inset;
      -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3) inset;
      -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3) inset;
      overflow-y: scroll; }
      #modal.modalZone .mContent.no02 .mWrap ul {
        padding: 0 10px; }
        #modal.modalZone .mContent.no02 .mWrap ul li {
          border-bottom: 1px solid #575c63; }
          #modal.modalZone .mContent.no02 .mWrap ul li a {
            display: block;
            padding: 10px 5px;
            color: #fff;
            font-size: 14px;
            text-align: left; }
            #modal.modalZone .mContent.no02 .mWrap ul li a img {
              width: 30px;
              height: 30px;
              margin: 0 15px 0 0;
              vertical-align: middle; }
    #modal.modalZone .mContent.no02 #followers1:checked ~ .mWrap.respectList {
      display: block; }
    #modal.modalZone .mContent.no02 #followers2:checked ~ .mWrap.rivalList {
      display: block; } }

#modal.modalZone {
  font-style: italic; }
  @media screen and (min-width: 100px) and (max-width: 960px) {
    #modal.modalZone {
      overflow: auto; } }
  #modal.modalZone .modalCoverArea {
    background: url(../../../as/img/profile/card_modal_bg.png?h=7c0da22a3fefe55b8e92ea836856e4c8); }
  #modal.modalZone .modalCloseBtn {
    display: none; }
  #modal.modalZone .mContent.no01 div.ttl {
    margin: 10px auto;
    width: 30vw;
    max-width: 349px; }
    #modal.modalZone .mContent.no01 div.ttl img {
      width: 80%; }
    @media screen and (min-width: 100px) and (max-width: 960px) {
      #modal.modalZone .mContent.no01 div.ttl {
        width: 60vw; } }
  #modal.modalZone .mContent.no01 div.sharebox {
    width: 40vw;
    min-height: 70px;
    margin: auto;
    position: relative;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.3);
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -ms-flex-wrap: none;
    flex-wrap: nowrap;
    justify-content: space-around;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px; }
    @media screen and (min-width: 100px) and (max-width: 960px) {
      #modal.modalZone .mContent.no01 div.sharebox {
        width: 80vw; } }
    #modal.modalZone .mContent.no01 div.sharebox img {
      align-self: center;
      width: 20vw;
      max-width: 252px;
      height: auto;
      vertical-align: middle; }
      @media screen and (min-width: 100px) and (max-width: 960px) {
        #modal.modalZone .mContent.no01 div.sharebox img {
          width: 60vw; } }
    #modal.modalZone .mContent.no01 div.sharebox p {
      font-size: 18px;
      font-size: 1.8rem;
      font-style: normal;
      display: block;
      padding: 6px 0 0 0; }
    #modal.modalZone .mContent.no01 div.sharebox ul {
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: skewX(-20deg);
      -moz-transform: skewX(-20deg);
      -ms-transform: skewX(-20deg);
      -o-transform: skewX(-20deg);
      transform: skewX(-20deg);
      border: 2px solid #000;
      padding: 2px; }
      #modal.modalZone .mContent.no01 div.sharebox ul li {
        display: inline-block;
        width: 7vw;
        height: 99%;
        margin: 0 1px; }
        #modal.modalZone .mContent.no01 div.sharebox ul li a {
          display: block;
          padding: 5px 15px 5px 0; }
          #modal.modalZone .mContent.no01 div.sharebox ul li a:before {
            display: block;
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transform: skewX(20deg);
            -moz-transform: skewX(20deg);
            -ms-transform: skewX(20deg);
            -o-transform: skewX(20deg);
            transform: skewX(20deg);
            font-size: 30px;
            font-size: 3rem; }
          #modal.modalZone .mContent.no01 div.sharebox ul li a:hover {
            background: #aaa;
            color: #fff; }
        #modal.modalZone .mContent.no01 div.sharebox ul li.fb {
          background: #333; }
          #modal.modalZone .mContent.no01 div.sharebox ul li.fb a {
            color: #fff; }
            #modal.modalZone .mContent.no01 div.sharebox ul li.fb a:before {
              content: ""; }
        #modal.modalZone .mContent.no01 div.sharebox ul li.tw a:before {
          content: ""; }
  #modal.modalZone .mContent.no01 p.att {
    font-size: 10px;
    line-height: 1.5; }
  #modal.modalZone .mContent.no01 div.closeBtn {
    margin: 30px auto; }
  @media screen and (max-width: 600px) {
    #modal.modalZone .mContent.no01 div.ttl img {
      width: 60%; }
    #modal.modalZone .mContent.no01 div.sharebox {
      padding: 26px 0;
      display: block; }
      #modal.modalZone .mContent.no01 div.sharebox p {
        margin: 0;
        padding: 10px 0; }
      #modal.modalZone .mContent.no01 div.sharebox ul {
        position: relative;
        left: 4%;
        width: 70%;
        margin: auto; }
        #modal.modalZone .mContent.no01 div.sharebox ul li {
          display: inline-block;
          width: 99%; }
    #modal.modalZone .mContent.no01 div.closeBtn {
      margin: 20px auto; } }

@keyframes cardAnimation {
  0% {
    transform: rotate(15deg); }
  45% {
    transform: rotate(25deg); }
  75% {
    transform: rotate(18deg); }
  100% {
    transform: rotate(20deg); } }

@keyframes cardAnimation_mb {
  0% {
    transform: rotate(25deg); }
  45% {
    transform: rotate(35deg); }
  75% {
    transform: rotate(28deg); }
  100% {
    transform: rotate(30deg); } }