@charset "UTF-8";
@font-face {
  font-family: 'Oswald';
  src: url(../font/oswald.woff2) format("woff2");
  font-display: swap;
  font-weight: 400 500 600 700; }

@font-face {
  font-family: "iconfont";
  src: url("../font/iconfont.eot?2018931140");
  src: url("../font/iconfont.eot?#iefix&2018931140") format("eot"), url("../font/iconfont.woff2?2018931140") format("woff2"), url("../font/iconfont.woff?2018931140") format("woff"), url("../font/iconfont.ttf?2018931140") format("truetype"), url("../font/iconfont.svg#iconfont&?2018931140") 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-dojo-carousel_arrow_left:before, .icon-dojo-carousel_arrow_right:before, .icon-dojo-icon_aplly:before, .icon-dojo-icon_edit:before, .icon-dojo-icon_make:before, .icon-dojo-icon_member:before, .icon-dojo-icon_mylist_regist:before, .icon-dojo-icon_trash:before, .icon-dojo-judge_aplly:before, .icon-dojo-judge_reject:before, .icon-dojo-link_arrow:before, .icon-dojo-link_circle_arrow:before, .icon-dojo-nav_customize:before, .icon-dojo-nav_items:before, .icon-dojo-nav_mydojo:before, .icon-dojo-nav_ranking:before, .icon-dojo-nav_ranking_all:before, .icon-dojo-nav_settings:before, .icon-dojo-send:before, .icon-dojo-sp_menu:before, .icon-dojo-sp_menu_close:before, .icon-dojo-view_btn:before, .icon-dojo_news: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:before, .icon-global_en:before, .icon-global_ja: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-pdf:before, .icon-link-popup:before, .icon-logo_pc:before, .icon-logo_ps:before, .icon-logo_steam:before, .icon-music:before, .icon-new_arrow:before, .icon-operation-info-arrow:before, .icon-others:before, .icon-pagetop:before, .icon-plus:before, .icon-prof-setting:before, .icon-qanda:before, .icon-rank: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-logout:before, .icon-usr-mylist:before, .icon-usr-setting:before, .icon-voice_mail:before, section.characterBlock div.characterAboutBlock nav.characterTab ul li a span.popup:after, section.characterContents.comamnd div.iconBox p.link:after, #main.characterDetail.costume .slickSlide button.slick-arrow:before, main.frame section.characterContents div.loginNotice ul#usrLoginBtn li a.loginPSN:before, main.frame section.characterContents div.loginNotice ul#usrLoginBtn li a.loginSteam:before, main.frame section.characterContents div.loginNotice div.loggedIn a:after {
  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-dojo-carousel_arrow_left:before {
  content: ""; }

.icon-dojo-carousel_arrow_right:before {
  content: ""; }

.icon-dojo-icon_aplly:before {
  content: ""; }

.icon-dojo-icon_edit:before {
  content: ""; }

.icon-dojo-icon_make:before {
  content: ""; }

.icon-dojo-icon_member:before {
  content: ""; }

.icon-dojo-icon_mylist_regist:before {
  content: ""; }

.icon-dojo-icon_trash:before {
  content: ""; }

.icon-dojo-judge_aplly:before {
  content: ""; }

.icon-dojo-judge_reject:before {
  content: ""; }

.icon-dojo-link_arrow:before {
  content: ""; }

.icon-dojo-link_circle_arrow:before {
  content: ""; }

.icon-dojo-nav_customize:before {
  content: ""; }

.icon-dojo-nav_items:before {
  content: ""; }

.icon-dojo-nav_mydojo:before {
  content: ""; }

.icon-dojo-nav_ranking:before {
  content: ""; }

.icon-dojo-nav_ranking_all:before {
  content: ""; }

.icon-dojo-nav_settings:before {
  content: ""; }

.icon-dojo-send:before {
  content: ""; }

.icon-dojo-sp_menu:before {
  content: ""; }

.icon-dojo-sp_menu_close:before {
  content: ""; }

.icon-dojo-view_btn:before {
  content: ""; }

.icon-dojo_news: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:before {
  content: ""; }

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

.icon-global_ja: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-pdf:before {
  content: ""; }

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

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

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

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

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

.icon-new_arrow: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-rank: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-logout:before {
  content: ""; }

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

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

.icon-voice_mail:before {
  content: ""; }

div.characterAboutBlock div.name p {
  top: 130px;
  right: 5px;
  font-size: 185px;
  font-size: 18.5rem; }

@media screen and (min-width: 601px) and (max-width: 960px) {
  div.characterAboutBlock div.name p {
    top: 160px;
    font-size: 140px;
    font-size: 14rem; } }

@media screen and (max-width: 600px) {
  div.characterAboutBlock div.name p {
    top: 150px;
    right: -20px;
    font-size: 80px;
    font-size: 8rem; } }

main#main.characterDetail.ryu div.characterAboutBlock div.name p, main#main.characterDetail.ken div.characterAboutBlock div.name p, main#main.characterDetail.ed div.characterAboutBlock div.name p, main#main.characterDetail.g div.characterAboutBlock div.name p, main#main.characterDetail.dan div.characterAboutBlock div.name p, main#main.characterDetail.oro div.characterAboutBlock div.name p {
  top: 100px;
  font-size: 210px;
  font-size: 21rem; }

@media screen and (min-width: 601px) and (max-width: 960px) {
  main#main.characterDetail.ryu div.characterAboutBlock div.name p, main#main.characterDetail.ken div.characterAboutBlock div.name p, main#main.characterDetail.ed div.characterAboutBlock div.name p, main#main.characterDetail.g div.characterAboutBlock div.name p, main#main.characterDetail.dan div.characterAboutBlock div.name p, main#main.characterDetail.oro div.characterAboutBlock div.name p {
    top: 110px;
    font-size: 210px;
    font-size: 21rem; } }

@media screen and (max-width: 600px) {
  main#main.characterDetail.ryu div.characterAboutBlock div.name p, main#main.characterDetail.ken div.characterAboutBlock div.name p, main#main.characterDetail.ed div.characterAboutBlock div.name p, main#main.characterDetail.g div.characterAboutBlock div.name p, main#main.characterDetail.dan div.characterAboutBlock div.name p, main#main.characterDetail.oro div.characterAboutBlock div.name p {
    top: 120px;
    font-size: 120px;
    font-size: 12rem; } }

main#main.characterDetail.nsh div.characterAboutBlock div.name p, main#main.characterDetail.veg div.characterAboutBlock div.name p, main#main.characterDetail.alx div.characterAboutBlock div.name p, main#main.characterDetail.jri div.characterAboutBlock div.name p, main#main.characterDetail.zku div.characterAboutBlock div.name p, main#main.characterDetail.cdy div.characterAboutBlock div.name p, main#main.characterDetail.kge div.characterAboutBlock div.name p, main#main.characterDetail.gil div.characterAboutBlock div.name p, main#main.characterDetail.sth div.characterAboutBlock div.name p, main#main.characterDetail.rse div.characterAboutBlock div.name p, main#main.characterDetail.lke div.characterAboutBlock div.name p {
  top: 110px;
  font-size: 210px;
  font-size: 21rem; }

@media screen and (min-width: 601px) and (max-width: 960px) {
  main#main.characterDetail.nsh div.characterAboutBlock div.name p, main#main.characterDetail.veg div.characterAboutBlock div.name p, main#main.characterDetail.alx div.characterAboutBlock div.name p, main#main.characterDetail.jri div.characterAboutBlock div.name p, main#main.characterDetail.zku div.characterAboutBlock div.name p, main#main.characterDetail.cdy div.characterAboutBlock div.name p, main#main.characterDetail.kge div.characterAboutBlock div.name p, main#main.characterDetail.gil div.characterAboutBlock div.name p, main#main.characterDetail.sth div.characterAboutBlock div.name p, main#main.characterDetail.rse div.characterAboutBlock div.name p, main#main.characterDetail.lke div.characterAboutBlock div.name p {
    top: 120px;
    font-size: 200px;
    font-size: 20rem; } }

@media screen and (max-width: 600px) {
  main#main.characterDetail.nsh div.characterAboutBlock div.name p, main#main.characterDetail.veg div.characterAboutBlock div.name p, main#main.characterDetail.alx div.characterAboutBlock div.name p, main#main.characterDetail.jri div.characterAboutBlock div.name p, main#main.characterDetail.zku div.characterAboutBlock div.name p, main#main.characterDetail.cdy div.characterAboutBlock div.name p, main#main.characterDetail.kge div.characterAboutBlock div.name p, main#main.characterDetail.gil div.characterAboutBlock div.name p, main#main.characterDetail.sth div.characterAboutBlock div.name p, main#main.characterDetail.rse div.characterAboutBlock div.name p, main#main.characterDetail.lke div.characterAboutBlock div.name p {
    top: 130px;
    font-size: 100px;
    font-size: 10rem; } }

@media screen and (min-width: 601px) and (max-width: 960px) {
  main#main.characterDetail.rmk div.characterAboutBlock div.name p, main#main.characterDetail.gul div.characterAboutBlock div.name p, main#main.characterDetail.ibk div.characterAboutBlock div.name p, main#main.characterDetail.bsn div.characterAboutBlock div.name p, main#main.characterDetail.urn div.characterAboutBlock div.name p, main#main.characterDetail.kln div.characterAboutBlock div.name p, main#main.characterDetail.mnt div.characterAboutBlock div.name p, main#main.characterDetail.skr div.characterAboutBlock div.name p, main#main.characterDetail.blk div.characterAboutBlock div.name p, main#main.characterDetail.flk div.characterAboutBlock div.name p, main#main.characterDetail.sgt div.characterAboutBlock div.name p, main#main.characterDetail.psn div.characterAboutBlock div.name p, main#main.characterDetail.hnd div.characterAboutBlock div.name p, main#main.characterDetail.akr div.characterAboutBlock div.name p {
    top: 110px;
    font-size: 190px;
    font-size: 19rem; } }

@media screen and (max-width: 600px) {
  main#main.characterDetail.rmk div.characterAboutBlock div.name p, main#main.characterDetail.gul div.characterAboutBlock div.name p, main#main.characterDetail.ibk div.characterAboutBlock div.name p, main#main.characterDetail.bsn div.characterAboutBlock div.name p, main#main.characterDetail.urn div.characterAboutBlock div.name p, main#main.characterDetail.kln div.characterAboutBlock div.name p, main#main.characterDetail.mnt div.characterAboutBlock div.name p, main#main.characterDetail.skr div.characterAboutBlock div.name p, main#main.characterDetail.blk div.characterAboutBlock div.name p, main#main.characterDetail.flk div.characterAboutBlock div.name p, main#main.characterDetail.sgt div.characterAboutBlock div.name p, main#main.characterDetail.psn div.characterAboutBlock div.name p, main#main.characterDetail.hnd div.characterAboutBlock div.name p, main#main.characterDetail.akr div.characterAboutBlock div.name p {
    top: 140px;
    font-size: 95px;
    font-size: 9.5rem; } }

@media screen and (min-width: 601px) and (max-width: 960px) {
  main#main.characterDetail.dsm div.characterAboutBlock div.name p, main#main.characterDetail.abg div.characterAboutBlock div.name p, main#main.characterDetail.lca div.characterAboutBlock div.name p {
    top: 120px;
    font-size: 150px;
    font-size: 15rem; } }

@media screen and (max-width: 600px) {
  main#main.characterDetail.dsm div.characterAboutBlock div.name p, main#main.characterDetail.abg div.characterAboutBlock div.name p, main#main.characterDetail.lca div.characterAboutBlock div.name p {
    top: 140px;
    font-size: 85px;
    font-size: 8.5rem; } }

main#main.characterDetail {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 20px;
  margin-bottom: 120px;
  -webkit-border-radius: 0 0 8px 8px;
  -moz-border-radius: 0 0 8px 8px;
  -ms-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
  -webkit-box-shadow: 0px 0px 20px #000;
  -moz-box-shadow: 0px 0px 20px #000;
  box-shadow: 0px 0px 20px #000; }

/* --------------------- ORIGINAL --------------------- */
main#main.characterDetail.ryu div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.cnl div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.nsh div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.veg div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.cmy div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.brd div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.ken div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.ncl div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.blr div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.rmk div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.rsd div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.krn div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.zgf div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.lar div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.dsm div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

main#main.characterDetail.fan div.characterAboutBlock:after {
  border-bottom-color: #0b7898; }

/* --------------------- SEASON 1 --------------------- */
main#main.characterDetail.alx div.characterAboutBlock:after {
  border-bottom-color: #45af9a; }

main#main.characterDetail.gul div.characterAboutBlock:after {
  border-bottom-color: #45af9a; }

main#main.characterDetail.ibk div.characterAboutBlock:after {
  border-bottom-color: #45af9a; }

main#main.characterDetail.bsn div.characterAboutBlock:after {
  border-bottom-color: #45af9a; }

main#main.characterDetail.jri div.characterAboutBlock:after {
  border-bottom-color: #45af9a; }

main#main.characterDetail.urn div.characterAboutBlock:after {
  border-bottom-color: #45af9a; }

/* --------------------- SEASON 2 --------------------- */
main#main.characterDetail.gok div.characterAboutBlock:after {
  border-bottom-color: #323181; }

main#main.characterDetail.kln div.characterAboutBlock:after {
  border-bottom-color: #323181; }

main#main.characterDetail.ed div.characterAboutBlock:after {
  border-bottom-color: #323181; }

main#main.characterDetail.abg div.characterAboutBlock:after {
  border-bottom-color: #323181; }

main#main.characterDetail.mnt div.characterAboutBlock:after {
  border-bottom-color: #323181; }

main#main.characterDetail.zku div.characterAboutBlock:after {
  border-bottom-color: #323181; }

/* --------------------- SEASON 3 --------------------- */
main#main.characterDetail.skr div.characterAboutBlock:after {
  border-bottom-color: #be9941; }

main#main.characterDetail.blk div.characterAboutBlock:after {
  border-bottom-color: #be9941; }

main#main.characterDetail.flk div.characterAboutBlock:after {
  border-bottom-color: #be9941; }

main#main.characterDetail.cdy div.characterAboutBlock:after {
  border-bottom-color: #be9941; }

main#main.characterDetail.g div.characterAboutBlock:after {
  border-bottom-color: #be9941; }

main#main.characterDetail.sgt div.characterAboutBlock:after {
  border-bottom-color: #be9941; }

/* --------------------- SEASON 4 --------------------- */
main#main.characterDetail.kge div.characterAboutBlock:after {
  border-bottom-color: #972f47; }

main#main.characterDetail.psn div.characterAboutBlock:after {
  border-bottom-color: #972f47; }

main#main.characterDetail.hnd div.characterAboutBlock:after {
  border-bottom-color: #972f47; }

main#main.characterDetail.lca div.characterAboutBlock:after {
  border-bottom-color: #972f47; }

main#main.characterDetail.gil div.characterAboutBlock:after {
  border-bottom-color: #972f47; }

main#main.characterDetail.sth div.characterAboutBlock:after {
  border-bottom-color: #972f47; }

main#main.characterDetail.dan div.characterAboutBlock:after {
  border-bottom-color: #774298; }

main#main.characterDetail.rse div.characterAboutBlock:after {
  border-bottom-color: #774298; }

main#main.characterDetail.oro div.characterAboutBlock:after {
  border-bottom-color: #774298; }

main#main.characterDetail.akr div.characterAboutBlock:after {
  border-bottom-color: #774298; }

main#main.characterDetail.lke div.characterAboutBlock:after {
  border-bottom-color: #774298; }

main#main.characterData {
  width: 100%;
  background: none; }

section.cmv h1 {
  text-align: center;
  width: 100%;
  padding: 6.5% 0; }
  section.cmv h1 img {
    margin: 0 auto;
    max-width: 408px;
    width: 70%; }

nav.seasonNav {
  position: absolute;
  top: 0;
  right: 3%; }
  nav.seasonNav ul {
    margin: 30px 0 0 0; }
    nav.seasonNav ul li a {
      display: block;
      width: 78px;
      height: 78px;
      margin: 0 0 5px 0;
      background: url(../../../as/img/character/pc/btn_season_5.png?h=1453602651c4e8e85f13eed28f357682) no-repeat;
      -webkit-filter: drop-shadow(0px 0px 6px #000);
      -moz-filter: drop-shadow(0px 0px 6px #000);
      filter: drop-shadow(0px 0px 6px #000); }
      nav.seasonNav ul li a:hover {
        background-position-x: right; }
      nav.seasonNav ul li a.season4 {
        background-position-y: -79px; }
      nav.seasonNav ul li a.season3 {
        background-position-y: -158px; }
      nav.seasonNav ul li a.season2 {
        background-position-y: -237px; }
      nav.seasonNav ul li a.season1 {
        background-position-y: -316px; }
      nav.seasonNav ul li a.season0 {
        background-position-y: -395px; }
  @media screen and (min-width: 100px) and (max-width: 960px) {
    nav.seasonNav {
      display: none; } }

nav.seasonNavSp {
  display: none;
  width: 100%;
  background: #222;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333; }
  nav.seasonNavSp ul {
    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: 0 auto;
    padding: 0;
    max-width: 480px;
    width: 100%; }
    nav.seasonNavSp ul li {
      width: 25%; }
      nav.seasonNavSp ul li a {
        display: block;
        width: 100%;
        padding: 55% 0 0 0;
        border-left: 1px solid #333;
        border-right: 1px solid #333;
        box-sizing: border-box; }
  nav.seasonNavSp.top {
    margin: -50px 0 30px 0; }
    nav.seasonNavSp.top ul li a.season5 {
      background: #222 url(../../../as/img/character/sp/cate_s5_t.png?h=ee439b813fad9838994be1d25ed4ff65) center center/50% no-repeat; }
      nav.seasonNavSp.top ul li a.season5:hover {
        background: #fff url(../../../as/img/character/sp/cate_s5_t_on.png?h=faecd2613c08f9b1c38b00bb99919654) center center/50% no-repeat; }
    nav.seasonNavSp.top ul li a.season4 {
      background: #222 url(../../../as/img/character/sp/cate_s4_t.png?h=4ed3b78770e1ad75527dd148cfe12361) center center/50% no-repeat; }
      nav.seasonNavSp.top ul li a.season4:hover {
        background: #fff url(../../../as/img/character/sp/cate_s4_t_on.png?h=dc62a03bba8ddb839f4aedba1ab6b103) center center/50% no-repeat; }
    nav.seasonNavSp.top ul li a.season3 {
      background: #222 url(../../../as/img/character/sp/cate_s3_t.png?h=76298c3b3d3e71e64177c7ebc834724d) center center/50% no-repeat; }
      nav.seasonNavSp.top ul li a.season3:hover {
        background: #fff url(../../../as/img/character/sp/cate_s3_t_on.png?h=0f96e934c3852e812c7091b95b6ef877) center center/50% no-repeat; }
    nav.seasonNavSp.top ul li a.season2 {
      background: #222 url(../../../as/img/character/sp/cate_s2_t.png?h=770d1c37af9b692fbd08b2b82e0f5db6) center center/50% no-repeat; }
      nav.seasonNavSp.top ul li a.season2:hover {
        background: #fff url(../../../as/img/character/sp/cate_s2_t_on.png?h=65088b7209e3c6d608af5d77242124fd) center center/50% no-repeat; }
    nav.seasonNavSp.top ul li a.season1 {
      background: #222 url(../../../as/img/character/sp/cate_s1_t.png?h=1302185691031cd4f26fd84fb1a702b6) center center/50% no-repeat; }
      nav.seasonNavSp.top ul li a.season1:hover {
        background: #fff url(../../../as/img/character/sp/cate_s1_t_on.png?h=1269defdae989648653a9708f152bc1d) center center/50% no-repeat; }
    nav.seasonNavSp.top ul li a.season0 {
      background: #222 url(../../../as/img/character/sp/cate_origin_t.png?h=22c26a03b0ae1a3190cc78897dd606e8) center center/50% no-repeat; }
      nav.seasonNavSp.top ul li a.season0:hover {
        background: #fff url(../../../as/img/character/sp/cate_origin_t_on.png?h=4655717a512d9db20d837d45a85e222b) center center/50% no-repeat; }
  nav.seasonNavSp.bottom {
    position: absolute;
    bottom: 0;
    margin: 30px 0 0 0;
    transition: 0.3s; }
    nav.seasonNavSp.bottom ul li a.season5 {
      background: #222 url(../../../as/img/character/sp/cate_s5_b.png?h=5d23abb3fb67badddb0197591bae8e94) center center/50% no-repeat; }
      nav.seasonNavSp.bottom ul li a.season5:hover {
        background: #fff url(../../../as/img/character/sp/cate_s5_b_on.png?h=691cb3be0dd5c618863dbfb50a7af903) center center/50% no-repeat; }
    nav.seasonNavSp.bottom ul li a.season4 {
      background: #222 url(../../../as/img/character/sp/cate_s4_b.png?h=ef7221f45ff44ddb5d40bf52c8db6464) center center/50% no-repeat; }
      nav.seasonNavSp.bottom ul li a.season4:hover {
        background: #fff url(../../../as/img/character/sp/cate_s4_b_on.png?h=912c343a6819b59347fb285eae61eccb) center center/50% no-repeat; }
    nav.seasonNavSp.bottom ul li a.season3 {
      background: #222 url(../../../as/img/character/sp/cate_s3_b.png?h=c478d2ffbf50fe28fe2f8f367127d9e2) center center/50% no-repeat; }
      nav.seasonNavSp.bottom ul li a.season3:hover {
        background: #fff url(../../../as/img/character/sp/cate_s3_b_on.png?h=f28a8e6c4616d0dc78c257e33f75b0fe) center center/50% no-repeat; }
    nav.seasonNavSp.bottom ul li a.season2 {
      background: #222 url(../../../as/img/character/sp/cate_s2_b.png?h=406e1b12e922ce6951afa8b948cd5c92) center center/50% no-repeat; }
      nav.seasonNavSp.bottom ul li a.season2:hover {
        background: #fff url(../../../as/img/character/sp/cate_s2_b_on.png?h=2f0165ab72e365c75a8a77cce2cffcf3) center center/50% no-repeat; }
    nav.seasonNavSp.bottom ul li a.season1 {
      background: #222 url(../../../as/img/character/sp/cate_s1_b.png?h=cf69632a7d9349985d6f7842b928b43c) center center/50% no-repeat; }
      nav.seasonNavSp.bottom ul li a.season1:hover {
        background: #fff url(../../../as/img/character/sp/cate_s1_b_on.png?h=bd8704e2d146d6ea5246c2f6d6fdc302) center center/50% no-repeat; }
    nav.seasonNavSp.bottom ul li a.season0 {
      background: #222 url(../../../as/img/character/sp/cate_origin_b.png?h=2ea1f8fa9ec27723d231ee212dd9608f) center center/50% no-repeat; }
      nav.seasonNavSp.bottom ul li a.season0:hover {
        background: #fff url(../../../as/img/character/sp/cate_origin_b_on.png?h=01b38aa210336e2bbf0af0e1f7379181) center center/50% no-repeat; }
  @media screen and (min-width: 100px) and (max-width: 960px) {
    nav.seasonNavSp {
      display: block; } }

section.characterSelectBlock {
  background: url(../../../as/img/common/pattern_wh.gif?h=281350df9c0679399ab4bf4bb78cd6c9);
  -webkit-box-shadow: 0px 0px 16px black;
  -moz-box-shadow: 0px 0px 16px black;
  box-shadow: 0px 0px 16px black;
  position: relative;
  padding: 50px 0 0 0; }
  section.characterSelectBlock h1 {
    background: -moz-linear-gradient(90deg, #2b2b2b 0%, #414141 100%);
    background: -webkit-linear-gradient(90deg, #2b2b2b 0%, #414141 100%);
    background: -ms-linear-gradient(90deg, #2b2b2b 0%, #414141 100%);
    background: linear-gradient(90deg, #2b2b2b 0%, #414141 100%);
    -webkit-box-shadow: 0px 0px 10px black;
    -moz-box-shadow: 0px 0px 10px black;
    box-shadow: 0px 0px 10px black;
    width: calc( 50% -  256px);
    min-width: 190px;
    text-align: right;
    margin: 0;
    padding: 0;
    line-height: 0;
    height: 40px;
    -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.characterSelectBlock h1 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);
      display: inline-block;
      vertical-align: middle;
      padding-right: 30px; }
  @media screen and (min-width: 100px) and (max-width: 960px) {
    section.characterSelectBlock h1 {
      width: 40%;
      min-width: auto;
      height: 30px; }
      section.characterSelectBlock h1 img {
        height: 100%; } }

ul.characterSelectList {
  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: center;
  width: 100%;
  max-width: 900px;
  margin: 1.5% auto 2% auto;
  box-sizing: border-box; }
  ul.characterSelectList.flexStart {
    justify-content: flex-start; }
  ul.characterSelectList li {
    width: 18.6%;
    margin: 0 -2.2% 0.9% 0; }
    ul.characterSelectList li a {
      margin: 0;
      padding: 0;
      display: block;
      transition: 0.1s; }
      ul.characterSelectList li a:hover {
        transform: scale(1.14);
        opacity: 0.7; }
      ul.characterSelectList li a figure img {
        width: 100%;
        height: auto; }
    ul.characterSelectList li span {
      display: block; }
      ul.characterSelectList li span figure img {
        width: 100%;
        height: auto; }
  @media screen and (min-width: 100px) and (max-width: 960px) {
    ul.characterSelectList {
      justify-content: flex-start;
      padding: 1% 5% 4%; }
      ul.characterSelectList li {
        width: 27%;
        margin: 0 -2.2% 0.9% 0; }
        ul.characterSelectList li a {
          margin: 0;
          padding: 0;
          display: block;
          transition: 0.1s; }
          ul.characterSelectList li a:hover {
            -webkit-filter: brightness(120%) drop-shadow(0px 0px 4px #000);
            filter: brightness(120%) drop-shadow(0px 0px 4px #000);
            transform: scale(1.15); }
          ul.characterSelectList li a figure img {
            width: 100%;
            height: auto; }
        ul.characterSelectList li span {
          display: block; }
          ul.characterSelectList li span figure img {
            width: 100%;
            height: auto; } }

section.characterBlock {
  position: relative;
  top: 0;
  left: 0; }
  section.characterBlock div.pageUtilBlock {
    z-index: 2;
    position: absolute;
    top: 0px;
    right: 15px;
    width: 100px;
    background: transparent; }
    section.characterBlock div.pageUtilBlock li {
      padding: 0 8px; }
  section.characterBlock div.selectCharacterBlock div.pullDownWrap {
    position: absolute;
    z-index: 10;
    top: 390px;
    left: 0; }
  section.characterBlock div.characterAboutBlock {
    z-index: 1;
    position: relative;
    min-height: 390px;
    overflow: hidden;
    border-top: 1px solid #000;
    background-image: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.3)), url(../../../as/img/character/character_about_bg.gif?h=e230d9976e26af577aa2427dde7533fc);
    background-repeat: no-repeat, repeat; }
    section.characterBlock div.characterAboutBlock:after {
      display: block;
      content: "";
      z-index: -1;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 43%;
      border-bottom: 540px solid #555;
      border-left: 340px solid transparent;
      mix-blend-mode: multiply; }
    section.characterBlock div.characterAboutBlock figure.chara {
      position: absolute;
      top: 0; }
      section.characterBlock div.characterAboutBlock figure.chara img {
        height: 540px; }
    section.characterBlock div.characterAboutBlock div.name p {
      position: absolute;
      color: #fff;
      margin: 0;
      font-family: Impact, AvenirNextCondensed-HeavyItalic, Avenir-Black, Helvetica-Bold;
      font-weight: bold;
      display: block;
      vertical-align: middle;
      line-height: 1;
      letter-spacing: -0.01em;
      text-align: right;
      white-space: nowrap;
      -webkit-text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8), -1px 1px 8px rgba(0, 0, 0, 0.8), 1px -1px 8px rgba(0, 0, 0, 0.8), -1px -1px 8px rgba(0, 0, 0, 0.8);
      -moz-text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8), -1px 1px 8px rgba(0, 0, 0, 0.8), 1px -1px 8px rgba(0, 0, 0, 0.8), -1px -1px 8px rgba(0, 0, 0, 0.8);
      text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8), -1px 1px 8px rgba(0, 0, 0, 0.8), 1px -1px 8px rgba(0, 0, 0, 0.8), -1px -1px 8px rgba(0, 0, 0, 0.8);
      -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.characterBlock div.characterAboutBlock nav.characterTab ul {
      position: absolute;
      bottom: 0;
      margin: 0 0 0 3.3%;
      padding: 0;
      width: 70.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; }
      section.characterBlock div.characterAboutBlock nav.characterTab ul li {
        width: 33%;
        margin: 0 3px; }
        section.characterBlock div.characterAboutBlock nav.characterTab ul li a {
          display: block;
          background: rgba(0, 0, 0, 0.7);
          color: #aaa7a5;
          text-align: center;
          line-height: 64px;
          font-weight: bold;
          -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);
          font-size: 14px;
          font-size: 1.4rem; }
          section.characterBlock div.characterAboutBlock nav.characterTab ul li a span {
            display: block;
            margin: 0 0 0 -40px;
            background: url(../../../as/img/character/arrow_nav.png?h=cd29cac06790bf1a07ade7e23781936f) no-repeat 9px 56px;
            background-size: 6px;
            -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.characterBlock div.characterAboutBlock nav.characterTab ul li a span.popup:after {
            content: ""; }
          section.characterBlock div.characterAboutBlock nav.characterTab ul li a span.popup:after {
            font-size: 20px;
            font-size: 2rem;
            vertical-align: bottom; }
          section.characterBlock div.characterAboutBlock nav.characterTab ul li a.current {
            color: #fff;
            background: rgba(61, 80, 173, 0.8);
            position: relative;
            -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.characterBlock div.characterAboutBlock nav.characterTab ul li a:hover {
            color: #fff;
            background: rgba(61, 80, 173, 0.8); }
    section.characterBlock div.characterAboutBlock #characterSelectBtn.toggleBtn {
      position: absolute;
      z-index: 10;
      right: 1.5%;
      bottom: 3%;
      border: none; }
      section.characterBlock div.characterAboutBlock #characterSelectBtn.toggleBtn:hover {
        background: rgba(61, 80, 173, 0.8); }
        section.characterBlock div.characterAboutBlock #characterSelectBtn.toggleBtn:hover::after {
          background: rgba(61, 80, 173, 0.8); }
  @media screen and (max-width: 600px) {
    section.characterBlock div.pageUtilBlock {
      top: 0px;
      right: 0px;
      width: 50%;
      background: #000; }
    section.characterBlock div.selectCharacterBlock div.pullDownWrap {
      top: 50px; }
    section.characterBlock div.characterAboutBlock {
      min-height: 300px;
      overflow: hidden; }
      section.characterBlock div.characterAboutBlock:after {
        width: 35%;
        border-bottom: 300px solid #22245f;
        border-left: 300px solid transparent; }
      section.characterBlock div.characterAboutBlock figure.chara {
        top: 40px; }
        section.characterBlock div.characterAboutBlock figure.chara img {
          height: 260px; }
      section.characterBlock div.characterAboutBlock nav.characterTab ul {
        width: 100%;
        margin: 0 0 0 5%; }
        section.characterBlock div.characterAboutBlock nav.characterTab ul li {
          margin: 0 1px; }
          section.characterBlock div.characterAboutBlock nav.characterTab ul li a {
            line-height: 44px;
            font-size: 11px;
            font-size: 1.1rem; }
            section.characterBlock div.characterAboutBlock nav.characterTab ul li a span {
              margin: 0 0 0 -30px;
              background: url(../../../as/img/character/arrow_nav.png?h=cd29cac06790bf1a07ade7e23781936f) no-repeat 10px 35px;
              background-size: 7px; }
      section.characterBlock div.characterAboutBlock #characterSelectBtn.toggleBtn {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        border: none;
        background: #000;
        padding: 0 0 1px 1%;
        width: 48%;
        height: 48px;
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: skewX(0deg);
        -moz-transform: skewX(0deg);
        -ms-transform: skewX(0deg);
        -o-transform: skewX(0deg);
        transform: skewX(0deg); }
        section.characterBlock div.characterAboutBlock #characterSelectBtn.toggleBtn:after {
          display: none; }
        section.characterBlock div.characterAboutBlock #characterSelectBtn.toggleBtn span {
          font-size: 11px;
          font-size: 1.1rem;
          margin: 0 0 0 10px;
          -webkit-transform-origin: 0 0;
          -moz-transform-origin: 0 0;
          transform-origin: 0 0;
          -webkit-transform: skewX(0deg);
          -moz-transform: skewX(0deg);
          -ms-transform: skewX(0deg);
          -o-transform: skewX(0deg);
          transform: skewX(0deg); } }

section.characterContents {
  min-height: 1000px;
  padding: 0px 0 10px 0; }

.modalTable p.cmdSpHead {
  position: relative;
  background: #333;
  color: #eee;
  padding: 0px 0 0 30px;
  margin: 0;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  font-size: 2rem; }

.modalTable table.cmdSpTable {
  background: #fff;
  border: 1px solid #eee;
  border-collapse: collapse;
  line-height: 1;
  font-size: 14px;
  font-size: 1.4rem; }
  .modalTable table.cmdSpTable th {
    border: 1px solid #666;
    height: 50px;
    width: 20%;
    background: #efefef;
    padding: 0 4%; }
    .modalTable table.cmdSpTable th img {
      margin: 0 auto; }
  .modalTable table.cmdSpTable td {
    border: 1px solid #666;
    height: 50px;
    width: 50%;
    padding: 1% 5%;
    background: #fff; }

@media screen and (min-width: 100px) and (max-width: 960px) {
  .modalTable p.cmdSpHead {
    font-size: 14px;
    font-size: 1.4rem;
    height: 50px;
    line-height: 50px; }
  .modalTable table.cmdSpTable {
    font-size: 12px;
    font-size: 1.2rem; }
    .modalTable table.cmdSpTable th, .modalTable table.cmdSpTable td {
      height: 35px; }
    .modalTable table.cmdSpTable th img {
      width: 40%; } }

.backBtn {
  width: 300px;
  margin: 20px auto 50px;
  transform: skew(-30deg); }
  .backBtn a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 54px;
    background: #3d50ad;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6); }
    .backBtn a:hover {
      background: #3d50ad; }
    .backBtn a span {
      display: inline-block;
      color: #fff;
      font-style: italic;
      font-family: 'Oswald' !important;
      letter-spacing: 0.1em;
      font-weight: normal !important;
      font-size: 18px;
      font-size: 1.8rem;
      transform: skew(30deg);
      letter-spacing: 0; }

#main.characterDetail.summary {
  /* graf block ----------------------------------------------------*/ }
  #main.characterDetail.summary h2 {
    color: #fff;
    font-weight: normal;
    margin: 0;
    font-size: 22px;
    font-size: 2.2rem; }
    #main.characterDetail.summary h2:before {
      display: inline-block;
      content: '';
      background: #fff;
      width: 14px;
      height: 2px;
      vertical-align: middle;
      margin: -5px 10px 0 0; }
  #main.characterDetail.summary figure.bnr {
    padding: 64px 0;
    text-align: center; }
    #main.characterDetail.summary figure.bnr a:hover {
      opacity: 0.6; }
  #main.characterDetail.summary .characterContents {
    padding: 0 55px; }
  #main.characterDetail.summary .profileBlock {
    position: relative;
    width: 100%;
    min-height: 282px;
    margin: 50px auto 50px auto;
    border-top: 3px solid #0063ac;
    background: url(../../../as/img/character/mainbg.jpg?h=eeb9663ab4965e11c9be05c246ee2db7) no-repeat bottom center;
    background-size: cover;
    color: #fff; }
    #main.characterDetail.summary .profileBlock h2 {
      padding: 38px 0 0 20px; }
    #main.characterDetail.summary .profileBlock div.flexBox {
      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; }
    #main.characterDetail.summary .profileBlock div.diaWrap {
      margin: 40px 0 0 30px;
      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; }
      #main.characterDetail.summary .profileBlock div.diaWrap figure.graf {
        width: 186px;
        height: 142px; }
        #main.characterDetail.summary .profileBlock div.diaWrap figure.graf.ja {
          background: url(../../../as/img/character/stats_back_ja.png?h=ef558a7b56fbda40fc52bd135ec65a12) no-repeat top left; }
        #main.characterDetail.summary .profileBlock div.diaWrap figure.graf.en {
          background: url(../../../as/img/character/stats_back_en.png?h=a838efa8811e15a5a91a7ae487c1a82a) no-repeat top left; }
      #main.characterDetail.summary .profileBlock div.diaWrap dl {
        width: 160px;
        height: 100px;
        margin: 30px 0 0 0;
        font-weight: normal;
        white-space: nowrap;
        font-size: 17px;
        font-size: 1.7rem;
        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; }
        #main.characterDetail.summary .profileBlock div.diaWrap dl:before {
          background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
          background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
          background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
          content: "";
          display: block;
          width: 100%;
          height: 1px; }
        #main.characterDetail.summary .profileBlock div.diaWrap dl dt {
          width: 48%;
          text-align: right;
          line-height: 46px; }
          #main.characterDetail.summary .profileBlock div.diaWrap dl dt:after {
            background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
            background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
            content: "";
            display: block;
            width: 200%;
            height: 1px; }
        #main.characterDetail.summary .profileBlock div.diaWrap dl dd {
          width: 40%;
          margin: 0 0 0 10%;
          text-align: left;
          line-height: 46px; }
    #main.characterDetail.summary .profileBlock .commentWrap {
      position: relative;
      width: 100%; }
      #main.characterDetail.summary .profileBlock .commentWrap h3 {
        margin: 0 0 0 31%;
        font-weight: normal;
        font-size: 18px;
        font-size: 1.8rem; }
        #main.characterDetail.summary .profileBlock .commentWrap h3:before {
          background: url(../../../as/img/character/profile_ttl_icon.png?h=c81b644343661ee3e8474956a8e93142) no-repeat;
          display: inline-block;
          content: "";
          width: 30px;
          height: 30px;
          margin: -5px 5px 0 0;
          vertical-align: middle; }
      #main.characterDetail.summary .profileBlock .commentWrap .fukidashi {
        position: relative;
        margin: 0 0 20px 31%;
        padding: 16px;
        width: 59%;
        min-height: 142px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        line-height: 1.4;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        border-radius: 8px;
        font-size: 14px;
        font-size: 1.4rem; }
        #main.characterDetail.summary .profileBlock .commentWrap .fukidashi:before {
          background: url(../../../as/img/character/captain.png?h=ebaaf30a43ebc8b53378d2dac0bdaa2c) no-repeat left bottom;
          display: inline-block;
          content: "";
          width: 340px;
          height: 328px;
          position: absolute;
          bottom: -20px;
          left: -300px; }
        #main.characterDetail.summary .profileBlock .commentWrap .fukidashi:after {
          background: url(../../../as/img/character/fukidashi_arrow.png?h=9a58c928936e0e53460fcdec0cf24aa6) no-repeat;
          width: 37px;
          height: 18px;
          content: "";
          display: block;
          position: absolute;
          top: 25px;
          left: -37px; }
    @media screen and (min-width: 100px) and (max-width: 960px) {
      #main.characterDetail.summary .profileBlock div.flexBox {
        display: block; }
      #main.characterDetail.summary .profileBlock div.diaWrap {
        margin: 40px 0 0 4%;
        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; }
        #main.characterDetail.summary .profileBlock div.diaWrap dl {
          width: 50%;
          font-size: 13px;
          font-size: 1.3rem; }
      #main.characterDetail.summary .profileBlock .commentWrap {
        margin: 30px 0 0 0;
        padding: 0 0 20px 0; }
        #main.characterDetail.summary .profileBlock .commentWrap h3 {
          margin: 0 0 6px 40%; }
        #main.characterDetail.summary .profileBlock .commentWrap .fukidashi {
          width: 50%;
          margin: 0 0 0 40%; }
          #main.characterDetail.summary .profileBlock .commentWrap .fukidashi:before {
            left: -280px; } }
  @media screen and (min-width: 100px) and (max-width: 960px) {
    #main.characterDetail.summary .profileBlock {
      margin-top: 0; }
    #main.characterDetail.summary .characterContents {
      padding: 0; } }
  #main.characterDetail.summary #graf-toggle-0_6:checked ~ .dia__tab ul li.graf-toggle-0_6 label,
  #main.characterDetail.summary #graf-toggle-7_12:checked ~ .dia__tab ul li.graf-toggle-7_12 label,
  #main.characterDetail.summary #graf-toggle-13_99:checked ~ .dia__tab ul li.graf-toggle-13_99 label,
  #main.characterDetail.summary #graf-toggle-17_99:checked ~ .dia__tab ul li.graf-toggle-17_99 label {
    border-bottom: 4px solid #3d50ae;
    color: #3d50ae;
    cursor: default; }
    #main.characterDetail.summary #graf-toggle-0_6:checked ~ .dia__tab ul li.graf-toggle-0_6 label::after,
    #main.characterDetail.summary #graf-toggle-7_12:checked ~ .dia__tab ul li.graf-toggle-7_12 label::after,
    #main.characterDetail.summary #graf-toggle-13_99:checked ~ .dia__tab ul li.graf-toggle-13_99 label::after,
    #main.characterDetail.summary #graf-toggle-17_99:checked ~ .dia__tab ul li.graf-toggle-17_99 label::after {
      content: '';
      position: absolute;
      bottom: -12px;
      right: 50%;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 8px 7.5px 0 7.5px;
      border-color: #3d50ae transparent transparent transparent;
      transform: translateX(50%); }
    #main.characterDetail.summary #graf-toggle-0_6:checked ~ .dia__tab ul li.graf-toggle-0_6 label:hover,
    #main.characterDetail.summary #graf-toggle-7_12:checked ~ .dia__tab ul li.graf-toggle-7_12 label:hover,
    #main.characterDetail.summary #graf-toggle-13_99:checked ~ .dia__tab ul li.graf-toggle-13_99 label:hover,
    #main.characterDetail.summary #graf-toggle-17_99:checked ~ .dia__tab ul li.graf-toggle-17_99 label:hover {
      border-bottom: 4px solid #3d50ae;
      background: none; }
  #main.characterDetail.summary #graf-toggle-0_6:checked ~ .graphBox.graf-toggle-0_6,
  #main.characterDetail.summary #graf-toggle-7_12:checked ~ .graphBox.graf-toggle-7_12,
  #main.characterDetail.summary #graf-toggle-13_99:checked ~ .graphBox.graf-toggle-13_99,
  #main.characterDetail.summary #graf-toggle-17_99:checked ~ .graphBox.graf-toggle-17_99 {
    display: flex; }
  @media screen and (min-width: 100px) and (max-width: 960px) {
    #main.characterDetail.summary #graf-toggle-0_6:checked ~ .graphBox.graf-toggle-0_6,
    #main.characterDetail.summary #graf-toggle-7_12:checked ~ .graphBox.graf-toggle-7_12,
    #main.characterDetail.summary #graf-toggle-13_99:checked ~ .graphBox.graf-toggle-13_99,
    #main.characterDetail.summary #graf-toggle-17_99:checked ~ .graphBox.graf-toggle-17_99 {
      display: block; } }
  #main.characterDetail.summary .graphBlock {
    position: relative;
    width: 100%;
    margin: 0 0 50px;
    /* select tab */
    /* graph box */ }
    #main.characterDetail.summary .graphBlock h2 {
      color: #1c1c1c;
      font-family: 'Oswald' !important;
      letter-spacing: 0.1em;
      font-weight: normal !important;
      font-size: 40px;
      font-size: 4rem;
      font-weight: bold;
      font-style: italic;
      letter-spacing: 0; }
      #main.characterDetail.summary .graphBlock h2::before {
        display: none; }
      #main.characterDetail.summary .graphBlock h2 span {
        display: inline-block;
        font-size: 16px;
        font-size: 1.6rem;
        font-weight: bold;
        padding-left: 0.6em;
        color: #555; }
    #main.characterDetail.summary .graphBlock .link {
      position: absolute;
      top: 5px;
      right: 15px;
      width: 200px;
      margin: 0; }
      #main.characterDetail.summary .graphBlock .link a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 37px;
        background: #3d50ad;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
        transform: skew(-30deg); }
        #main.characterDetail.summary .graphBlock .link a:hover {
          background: #4f6af0; }
        #main.characterDetail.summary .graphBlock .link a span {
          display: inline-block;
          color: #fff;
          font-family: 'Oswald' !important;
          letter-spacing: 0.1em;
          font-weight: normal !important;
          font-size: 14px;
          font-size: 1.4rem;
          transform: skew(30deg);
          font-style: italic; }
    #main.characterDetail.summary .graphBlock .dia__tab {
      width: 990px;
      margin: 25px auto 30px; }
      #main.characterDetail.summary .graphBlock .dia__tab ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 54px; }
        #main.characterDetail.summary .graphBlock .dia__tab ul li {
          width: 240px; }
          #main.characterDetail.summary .graphBlock .dia__tab ul li label {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            position: relative;
            width: 240px;
            height: 50px;
            border-bottom: 2px solid #888;
            color: #747474;
            font-family: 'Oswald' !important;
            letter-spacing: 0.1em;
            font-weight: normal !important;
            font-size: 16px;
            font-size: 1.6rem;
            font-weight: bold;
            cursor: pointer;
            transition: background .3s; }
            #main.characterDetail.summary .graphBlock .dia__tab ul li label:hover {
              border-bottom: 2px solid #3d50ae;
              background: linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0%, transparent 50%); }
    #main.characterDetail.summary .graphBlock .graphBox {
      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;
      display: none; }
      #main.characterDetail.summary .graphBlock .graphBox .detail {
        width: 350px;
        height: 270px;
        padding: 50px 40px 0;
        box-sizing: border-box; }
        #main.characterDetail.summary .graphBlock .graphBox .detail .time {
          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: center;
          align-items: center;
          width: 120px;
          height: 22px;
          margin: 0 auto 20px;
          background: #000;
          transform: skew(-30deg); }
          #main.characterDetail.summary .graphBlock .graphBox .detail .time span {
            display: inline-block;
            color: #fff;
            font-family: 'Oswald' !important;
            letter-spacing: 0.1em;
            font-weight: normal !important;
            font-size: 14px;
            font-size: 1.4rem;
            transform: skew(30deg); }
        #main.characterDetail.summary .graphBlock .graphBox .detail 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;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center; }
          #main.characterDetail.summary .graphBlock .graphBox .detail dl dt {
            position: relative;
            width: 30%;
            margin: 0 0 30px;
            padding: 0 0 0 15px;
            box-sizing: border-box;
            color: #fff;
            font-family: 'Oswald' !important;
            letter-spacing: 0.1em;
            font-weight: normal !important;
            font-size: 24px;
            font-size: 2.4rem;
            font-style: italic; }
            #main.characterDetail.summary .graphBlock .graphBox .detail dl dt::before {
              display: block;
              content: '';
              position: absolute;
              top: 50%;
              left: 0;
              width: 10px;
              height: 10px;
              background: #fff;
              transform: translateY(-50%) rotate(45deg); }
            #main.characterDetail.summary .graphBlock .graphBox .detail dl dt:last-of-type::before {
              border-radius: 50px; }
          #main.characterDetail.summary .graphBlock .graphBox .detail dl dd {
            width: 70%;
            margin: 0 0 30px;
            text-align: right; }
            #main.characterDetail.summary .graphBlock .graphBox .detail dl dd span {
              padding: 0 30px 0 20px;
              color: #fff;
              font-family: 'Oswald' !important;
              letter-spacing: 0.1em;
              font-weight: normal !important;
              font-size: 42px;
              font-size: 4.2rem;
              font-style: italic;
              letter-spacing: 0; }
            #main.characterDetail.summary .graphBlock .graphBox .detail dl dd.up span {
              background: url(../../../as/img/character/icon_up.png?h=325b3120d7eba49d10f341e298fbc123) no-repeat right center; }
            #main.characterDetail.summary .graphBlock .graphBox .detail dl dd.down span {
              background: url(../../../as/img/character/icon_down.png?h=78bd39b1f70348d0f518f374cc5624c0) no-repeat right center; }
            #main.characterDetail.summary .graphBlock .graphBox .detail dl dd.pararel span {
              background: url(../../../as/img/character/icon_pararel.png?h=9153624638c5dc6546f021c563dec812) no-repeat right center; }
      #main.characterDetail.summary .graphBlock .graphBox #diagram,
      #main.characterDetail.summary .graphBlock .graphBox #userate {
        width: 640px;
        background: rgba(0, 0, 0, 0.5); }
    #main.characterDetail.summary .graphBlock.diagram > .graphBox {
      background: url(../../../as/img/character/bg_diagram.png?h=54055050ba5ef14fc4c44bd80c94f97e) no-repeat center top #000; }
    #main.characterDetail.summary .graphBlock.userate > .graphBox {
      display: flex;
      margin: 25px 0 0;
      background: url(../../../as/img/character/bg_userate.png?h=9ee89052c3279074fe0b105d8aa13920) no-repeat center top #000; }
      @media screen and (min-width: 100px) and (max-width: 960px) {
        #main.characterDetail.summary .graphBlock.userate > .graphBox {
          display: block; } }
    @media screen and (min-width: 100px) and (max-width: 960px) {
      #main.characterDetail.summary .graphBlock {
        margin: 0 0 70px;
        /* select tab */
        /* graph box */ }
        #main.characterDetail.summary .graphBlock h2 {
          text-align: center;
          line-height: 0.7; }
        #main.characterDetail.summary .graphBlock .link {
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          top: 0;
          left: 0;
          width: 100%;
          height: 80px;
          background: rgba(69, 69, 69, 0.1); }
        #main.characterDetail.summary .graphBlock .dia__tab {
          width: 98%;
          max-width: 990px;
          margin: 25px auto 20px;
          padding: 0 0 0 2%;
          overflow-x: scroll; }
          #main.characterDetail.summary .graphBlock .dia__tab ul {
            width: 580px;
            height: 65px;
            margin: 0 auto;
            padding: 0 4% 0 0; }
            #main.characterDetail.summary .graphBlock .dia__tab ul li {
              width: 140px; }
              #main.characterDetail.summary .graphBlock .dia__tab ul li label {
                flex-direction: column;
                width: 140px;
                height: 50px;
                text-align: center; }
                #main.characterDetail.summary .graphBlock .dia__tab ul li label:active {
                  border-bottom: 2px solid #3d50ae; }
                #main.characterDetail.summary .graphBlock .dia__tab ul li label span {
                  display: block; }
        #main.characterDetail.summary .graphBlock .graphBox .detail {
          width: 100%;
          height: 200px;
          padding: 20px 10% 20px;
          box-sizing: border-box; }
          #main.characterDetail.summary .graphBlock .graphBox .detail .time {
            width: 120px;
            height: 22px;
            margin: 0 auto 20px;
            border: 1px solid #272727; }
          #main.characterDetail.summary .graphBlock .graphBox .detail 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;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center; }
            #main.characterDetail.summary .graphBlock .graphBox .detail dl dt {
              margin: 0 0 20px; }
            #main.characterDetail.summary .graphBlock .graphBox .detail dl dd {
              margin: 0 0 20px; }
        #main.characterDetail.summary .graphBlock .graphBox #diagram,
        #main.characterDetail.summary .graphBlock .graphBox #userate {
          width: 100%;
          background: rgba(0, 0, 0, 0.5); }
        #main.characterDetail.summary .graphBlock.diagram > .graphBox {
          background: url(../../../as/img/character/bg_diagram.png?h=54055050ba5ef14fc4c44bd80c94f97e) no-repeat 66% top #000;
          background-size: auto 100%; }
        #main.characterDetail.summary .graphBlock.userate > .graphBox {
          background: url(../../../as/img/character/bg_userate_sp.png?h=29e467ab28b1c9cc5c208f9aefdacab9) no-repeat 40% top #000;
          background-size: auto 100%; } }
  #main.characterDetail.summary .relatedLink {
    padding: 45px 0 115px 0;
    background: #232323;
    color: #fff;
    font-weight: normal;
    text-align: center;
    font-size: 20px;
    font-size: 2rem; }
    #main.characterDetail.summary .relatedLink li {
      display: inline-block;
      margin: 0 10px; }

section.characterContents.comamnd .characterContents {
  position: relative;
  z-index: 0; }

section.characterContents.comamnd div.iconBox {
  width: 93%;
  margin: 0 auto;
  padding: 3% 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;
  justify-content: space-between; }
  section.characterContents.comamnd div.iconBox p.annotation {
    margin: 0;
    padding: 0;
    line-height: 2.0;
    color: #666;
    font-size: 14px;
    font-size: 1.4rem; }
  section.characterContents.comamnd div.iconBox p.link {
    margin: 0;
    height: 22px;
    padding: 5px 0 5px 15px;
    color: #aaa;
    display: block;
    background: #000;
    position: relative;
    white-space: nowrap;
    font-size: 12px;
    font-size: 1.2rem;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px; }
    section.characterContents.comamnd div.iconBox p.link:after {
      content: ""; }
    section.characterContents.comamnd div.iconBox p.link:after {
      vertical-align: middle;
      color: #fff;
      margin: 0 5px 0 7px;
      font-size: 22px;
      font-size: 2.2rem; }
    section.characterContents.comamnd div.iconBox p.link:hover {
      opacity: 0.7; }

section.characterContents.comamnd ul.editionSelect {
  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: center;
  border-bottom: 6px solid #222222;
  color: #fff;
  margin: 50px 0 0 0; }
  section.characterContents.comamnd ul.editionSelect li {
    max-width: 380px;
    width: 49%;
    margin: 7px 5px 1px 5px;
    text-align: center;
    pointer-events: all;
    background: #6a6a6a;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -ms-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0; }
    section.characterContents.comamnd ul.editionSelect li.editionSelected {
      margin: 0px 5px 0px 5px;
      padding: 4px 0 0 0;
      pointer-events: none;
      background: #284166;
      -webkit-border-radius: 5px 5px 0 0;
      -moz-border-radius: 5px 5px 0 0;
      -ms-border-radius: 5px 5px 0 0;
      border-radius: 5px 5px 0 0; }
    section.characterContents.comamnd ul.editionSelect li:hover {
      opacity: 0.7; }
    section.characterContents.comamnd ul.editionSelect li a {
      color: #fff;
      display: block;
      padding: 15px 0 11px 0; }

section.characterContents.comamnd .styleConsol {
  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: center;
  background: #dbdbdb;
  margin: 0;
  padding: 20px 0; }
  section.characterContents.comamnd .styleConsol li {
    background-color: #000;
    color: #FFF;
    font-weight: bold;
    display: block;
    padding: 27px 0px;
    margin: 0 4px 15px 4px;
    width: 220px;
    cursor: pointer; }
    section.characterContents.comamnd .styleConsol li span {
      text-align: center;
      display: inline-block;
      width: 50%;
      margin: 0; }
    section.characterContents.comamnd .styleConsol li.old {
      background: url(../../../as/img/character/zku_btn_old.jpg?h=cb01ccf26d240bea5650ce4d7cbf204b) no-repeat top left; }
    section.characterContents.comamnd .styleConsol li.young {
      background: url(../../../as/img/character/zku_btn_young.jpg?h=02b21c328abf94f33b3ace8d8bcc7ea7) no-repeat top left; }
    section.characterContents.comamnd .styleConsol li:hover {
      opacity: 0.7; }
    section.characterContents.comamnd .styleConsol li.styleSelected {
      position: relative; }
      section.characterContents.comamnd .styleConsol li.styleSelected:before {
        content: "";
        display: block;
        position: absolute;
        bottom: -14px;
        left: 49%;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 10px 0 10px;
        border-color: #272727 transparent transparent transparent; }

section.characterContents.comamnd div.commandTable table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  line-height: 1;
  font-size: 16px;
  font-size: 1.6rem; }

section.characterContents.comamnd div.commandTable th {
  border: 1px solid #aaa;
  padding: 16px;
  text-align: left;
  background-color: #284167;
  color: #f8f8f8;
  font-size: 16px;
  font-size: 1.6rem; }

section.characterContents.comamnd div.commandTable td {
  border: 1px solid #aaa;
  padding: 10px;
  vertical-align: middle; }
  section.characterContents.comamnd div.commandTable td:first-child {
    background: #eee;
    width: 30%; }
  section.characterContents.comamnd div.commandTable td span.f90 {
    font-size: 12px;
    font-size: 1.2rem; }
  section.characterContents.comamnd div.commandTable td img.cmdPartsImg {
    width: 30px; }

section.characterContents.comamnd div.commandTable img {
  vertical-align: middle;
  display: inline-block;
  width: 34px;
  margin: -2px 0 0 0; }

section.characterContents.comamnd div.commandTable p {
  margin: 0; }

section.characterContents.comamnd div.commandTable p.keyBlock {
  display: inline-block;
  overflow: hidden;
  height: auto;
  position: relative;
  padding-left: 0;
  vertical-align: middle; }
  section.characterContents.comamnd div.commandTable p.keyBlock img {
    position: relative;
    z-index: 5; }
  section.characterContents.comamnd div.commandTable p.keyBlock span {
    position: relative; }

section.characterContents.comamnd div.commandTable .key-LP, section.characterContents.comamnd div.commandTable .key-MP, section.characterContents.comamnd div.commandTable .key-HP, section.characterContents.comamnd div.commandTable .key-LK, section.characterContents.comamnd div.commandTable .key-MK, section.characterContents.comamnd div.commandTable .key-HK {
  display: inline-block;
  padding: 7px 13px 8px 22px;
  font-weight: bold;
  text-align: center;
  margin: 0px 0 0 -14px; }

section.characterContents.comamnd div.commandTable .key-LP {
  background-color: #ffe893;
  z-index: 3; }

section.characterContents.comamnd div.commandTable .key-MP {
  background-color: #fdd000;
  z-index: 2; }

section.characterContents.comamnd div.commandTable .key-HP {
  background-color: #f39800;
  z-index: 1; }

section.characterContents.comamnd div.commandTable .key-LK {
  background-color: #9fd9f6;
  z-index: 3; }

section.characterContents.comamnd div.commandTable .key-MK {
  background-color: #59c5f1;
  z-index: 2; }

section.characterContents.comamnd div.commandTable .key-HK {
  background-color: #00a3ea;
  z-index: 1; }

section.characterContents.comamnd div.commandTable .cmdPartsText {
  padding: 0 5px; }

section.characterContents.comamnd div.aeMoveTable table tbody tr th {
  background-color: #000 !important; }

@media screen and (min-width: 100px) and (max-width: 960px) {
  section.characterContents.comamnd div.iconBox p.annotation {
    line-height: 1.5;
    font-size: 13px;
    font-size: 1.3rem; }
  section.characterContents.comamnd div.commandTable table {
    font-size: 14px;
    font-size: 1.4rem; }
    section.characterContents.comamnd div.commandTable table th {
      font-size: 18px;
      font-size: 1.8rem;
      font-weight: normal;
      padding: 10px 0; }
  section.characterContents.comamnd div.commandTable img {
    width: 36px; } }

#main.characterDetail.costume .costumeList {
  margin: 20px auto 56px auto;
  text-align: center;
  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: center;
  width: 70%; }
  #main.characterDetail.costume .costumeList li {
    position: relative;
    height: 100%;
    margin: 0 2px;
    border: 3px solid #000; }
    #main.characterDetail.costume .costumeList li:hover {
      border: 3px solid #0063ac;
      opacity: 0.9;
      -webkit-animation: flash 0.4s;
      animation: flash 0.4s;
      cursor: pointer; }
    #main.characterDetail.costume .costumeList li:after {
      display: block;
      content: '';
      position: absolute;
      bottom: -20px;
      left: 50%;
      width: 0;
      height: 0;
      margin: 0;
      border-style: solid;
      border-width: 0px 6px 0 6px;
      border-color: #0063ac transparent transparent transparent; }
    #main.characterDetail.costume .costumeList li.current {
      border: 3px solid #0063ac; }
      #main.characterDetail.costume .costumeList li.current .txt {
        height: 100%;
        -webkit-transition: height 0.2s ease-out;
        -webkit-transition-delay: ease-outs;
        -moz-transition: height 0.2s ease-out ease-outs;
        -o-transition: height 0.2s ease-out ease-outs;
        transition: height 0.2s ease-out ease-outs; }
        #main.characterDetail.costume .costumeList li.current .txt span {
          background: rgba(0, 99, 172, 0.7); }
      #main.characterDetail.costume .costumeList li.current:after {
        border-top: solid 17px #0063ac; }
    #main.characterDetail.costume .costumeList li .img {
      margin: 0;
      line-height: 0; }
      #main.characterDetail.costume .costumeList li .img img {
        width: 100%; }
    #main.characterDetail.costume .costumeList li .txt {
      margin: 0;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 20%; }
      #main.characterDetail.costume .costumeList li .txt span {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #fff;
        background: rgba(0, 0, 0, 0.7); }
    #main.characterDetail.costume .costumeList li.commingsoon {
      overflow: hidden;
      border: 3px solid #fff; }
      #main.characterDetail.costume .costumeList li.commingsoon .txt {
        height: 34%; }
        #main.characterDetail.costume .costumeList li.commingsoon .txt span {
          width: 80%;
          padding: 0 10%;
          font-size: 8px;
          font-size: 0.8rem; }
      #main.characterDetail.costume .costumeList li.commingsoon:hover {
        opacity: 1;
        cursor: default; }

#main.characterDetail.costume .slickSlide {
  position: relative;
  width: 70%;
  margin: 0px auto 0px auto;
  padding: 20px 0 20px 0;
  text-align: center;
  min-height: 100px; }
  #main.characterDetail.costume .slickSlide div.slide {
    position: relative;
    width: 127px;
    height: 100%;
    margin: 0 2px;
    border: 3px solid #000;
    z-index: 1;
    display: none;
    opacity: 1 !important; }
    #main.characterDetail.costume .slickSlide div.slide:hover {
      border: 3px solid #0063ac;
      opacity: 0.9;
      transition: all 200ms 0s ease;
      cursor: pointer; }
    #main.characterDetail.costume .slickSlide div.slide.current {
      border: 3px solid #0063ac; }
      #main.characterDetail.costume .slickSlide div.slide.current .txt {
        height: 100%;
        -webkit-transition: height 0.2s ease-out;
        -webkit-transition-delay: ease-outs;
        -moz-transition: height 0.2s ease-out ease-outs;
        -o-transition: height 0.2s ease-out ease-outs;
        transition: height 0.2s ease-out ease-outs; }
        #main.characterDetail.costume .slickSlide div.slide.current .txt span {
          background: rgba(0, 99, 172, 0.7); }
      #main.characterDetail.costume .slickSlide div.slide.current:after {
        border-top: solid 17px #0063ac; }
    #main.characterDetail.costume .slickSlide div.slide .img {
      margin: 0;
      line-height: 0; }
      #main.characterDetail.costume .slickSlide div.slide .img img {
        width: 100%; }
    #main.characterDetail.costume .slickSlide div.slide .txt {
      margin: 0;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 20%; }
      #main.characterDetail.costume .slickSlide div.slide .txt span {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #fff;
        background: rgba(0, 0, 0, 0.7); }
    #main.characterDetail.costume .slickSlide div.slide.commingsoon {
      overflow: hidden;
      border: 3px solid #fff; }
      #main.characterDetail.costume .slickSlide div.slide.commingsoon .txt span {
        width: 100%;
        font-size: 8px;
        font-size: 0.8rem; }
      #main.characterDetail.costume .slickSlide div.slide.commingsoon:hover {
        opacity: 1;
        cursor: default; }
  #main.characterDetail.costume .slickSlide button {
    background: #555;
    opacity: 0.3; }
    #main.characterDetail.costume .slickSlide button[aria-disabled=false] {
      opacity: 1; }
    #main.characterDetail.costume .slickSlide button.slick-arrow {
      background: none;
      height: 100%;
      height: 65%;
      top: 42%;
      width: 30px; }
      #main.characterDetail.costume .slickSlide button.slick-arrow:before {
        content: ""; }
      #main.characterDetail.costume .slickSlide button.slick-arrow:before {
        display: block;
        color: #000;
        font-size: 30px;
        font-size: 3rem; }
    #main.characterDetail.costume .slickSlide button.slick-next {
      right: -35px; }
      #main.characterDetail.costume .slickSlide button.slick-next:before {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg); }
    #main.characterDetail.costume .slickSlide button.slick-prev {
      left: -30px; }
      #main.characterDetail.costume .slickSlide button.slick-prev:before {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg); }
  #main.characterDetail.costume .slickSlide ul.slick-dots {
    position: static;
    margin: 0px 0 0px 0;
    display: block; }
    #main.characterDetail.costume .slickSlide ul.slick-dots li {
      border: none;
      width: 36px !important;
      height: 34px;
      text-align: center; }
      #main.characterDetail.costume .slickSlide ul.slick-dots li button {
        display: block;
        background: none;
        opacity: 0.6; }
        #main.characterDetail.costume .slickSlide ul.slick-dots li button:before {
          display: block;
          content: "";
          margin: 15px 0 0 0;
          width: 28px;
          height: 3px;
          padding: 0;
          background: #555; }
      #main.characterDetail.costume .slickSlide ul.slick-dots li.slick-active button {
        opacity: 1; }

#main.characterDetail.costume .exTxt {
  position: relative;
  min-height: 180px;
  padding: 30px 0 0 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  background: url(../../../as/img/character/bg_extxt.jpg?h=886047f4cf27fbd17f6a966380fb829e) no-repeat;
  background-size: cover; }
  #main.characterDetail.costume .exTxt h2 {
    position: relative;
    color: #fff;
    font-weight: normal;
    display: inline;
    padding: 1px 0 0 0;
    font-size: 22px;
    font-size: 2.2rem; }
    #main.characterDetail.costume .exTxt h2:before {
      display: block;
      position: absolute;
      top: 10px;
      left: -28px;
      content: '';
      background: #fff;
      width: 14px;
      height: 2px; }
    #main.characterDetail.costume .exTxt h2.rm {
      padding-right: 30px;
      background: url(../../../as/img/character/icon_rm.png?h=917f6b205a18ef3e8443f28be65cf9ea) no-repeat right center;
      background-size: 20px; }
    #main.characterDetail.costume .exTxt h2.fm {
      padding-right: 30px;
      background: url(../../../as/img/character/icon_fm.png?h=2546d3347d6d0a1225fe58003a81bc1f) no-repeat right center;
      background-size: 20px; }
    #main.characterDetail.costume .exTxt h2.rm.fm {
      padding-right: 56px;
      background: url(../../../as/img/character/icon_fm.png?h=2546d3347d6d0a1225fe58003a81bc1f) no-repeat right center, url(../../../as/img/character/icon_rm.png?h=917f6b205a18ef3e8443f28be65cf9ea) no-repeat right 22px center;
      background-size: 20px; }
  #main.characterDetail.costume .exTxt dl {
    margin: 15px 0 0 0; }
    #main.characterDetail.costume .exTxt dl dt {
      margin: 0 0 8px 0;
      color: #4d92c5;
      font-size: 16px;
      font-size: 1.6rem; }
    #main.characterDetail.costume .exTxt dl dd {
      width: calc(100% - 360px);
      color: #fff;
      padding: 0 0 20px 0;
      line-height: 1.2;
      font-size: 12px;
      font-size: 1.2rem; }
      #main.characterDetail.costume .exTxt dl dd img.icon {
        width: 20px;
        height: auto;
        vertical-align: middle; }
      #main.characterDetail.costume .exTxt dl dd span.notes {
        color: #d88400 !important; }
  #main.characterDetail.costume .exTxt a {
    color: #e3cc56;
    text-decoration: underline; }
    #main.characterDetail.costume .exTxt a:hover {
      text-decoration: none; }
  #main.characterDetail.costume .exTxt .comment {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 10px 30px 0 45px;
    width: 373px;
    height: 190px;
    box-sizing: border-box;
    display: none; }
    #main.characterDetail.costume .exTxt .comment p {
      color: #fff;
      line-height: 1.3;
      margin: 0;
      padding: 0;
      font-size: 12px;
      font-size: 1.2rem; }
    #main.characterDetail.costume .exTxt .comment span.name {
      position: absolute;
      bottom: 6px;
      color: #fff;
      text-align: right;
      text-shadow: black 1px 1px 0px, black -1px 1px 0px, black 1px -1px 0px, black -1px -1px 0px; }
      #main.characterDetail.costume .exTxt .comment span.name.ashida {
        right: 40px; }
      #main.characterDetail.costume .exTxt .comment span.name.hosaka {
        right: 210px; }
      #main.characterDetail.costume .exTxt .comment span.name.watanabe {
        right: 80px; }
    #main.characterDetail.costume .exTxt .comment.ashida {
      display: block;
      background: url(../../../as/img/character/bg_member_ashida.png?h=deca29fc1f8fa9bb0673bdc4b2e4e196) no-repeat right bottom; }
      #main.characterDetail.costume .exTxt .comment.ashida span.name.ashida {
        display: block; }
      #main.characterDetail.costume .exTxt .comment.ashida span.name.hosaka {
        display: none; }
      #main.characterDetail.costume .exTxt .comment.ashida span.name.watanabe {
        display: none; }
    #main.characterDetail.costume .exTxt .comment.combi {
      display: block;
      background: url(../../../as/img/character/bg_member_combi.png?h=9a55e194365ab9b570cc46a2dcef84ea) no-repeat right bottom; }
      #main.characterDetail.costume .exTxt .comment.combi span.name.ashida {
        display: none; }
      #main.characterDetail.costume .exTxt .comment.combi span.name.hosaka {
        display: block; }
      #main.characterDetail.costume .exTxt .comment.combi span.name.watanabe {
        display: block; }
    #main.characterDetail.costume .exTxt .comment.hosaka {
      display: block;
      background: url(../../../as/img/character/bg_member_hosaka.png?h=f8ddf3f2936979c9127e97efa243a326) no-repeat right bottom; }
      #main.characterDetail.costume .exTxt .comment.hosaka span.name.ashida {
        display: none; }
      #main.characterDetail.costume .exTxt .comment.hosaka span.name.hosaka {
        display: block; }
      #main.characterDetail.costume .exTxt .comment.hosaka span.name.watanabe {
        display: block;
        opacity: 0.5; }
    #main.characterDetail.costume .exTxt .comment.watanabe {
      display: block;
      background: url(../../../as/img/character/bg_member_watanabe.png?h=35ea866ee79eab769630f79b047014ce) no-repeat right bottom; }
      #main.characterDetail.costume .exTxt .comment.watanabe span.name.ashida {
        display: none; }
      #main.characterDetail.costume .exTxt .comment.watanabe span.name.hosaka {
        display: block;
        opacity: 0.5; }
      #main.characterDetail.costume .exTxt .comment.watanabe span.name.watanabe {
        display: block; }

#main.characterDetail.costume .colorSelectBlock {
  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;
  overflow: hidden;
  position: relative; }

#main.characterDetail.costume #activeColor {
  position: relative;
  z-index: 0;
  width: 50%;
  padding: 10px 0px 86px 0px;
  background: #000;
  height: 750px; }
  #main.characterDetail.costume #activeColor p.img {
    margin: 0;
    text-align: center; }
    #main.characterDetail.costume #activeColor p.img img {
      margin: 20px auto 0;
      width: 500px; }
  #main.characterDetail.costume #activeColor h3 {
    position: relative;
    font-family: Arial,helvetica;
    margin: -140px 0 0px 16px;
    color: #fff;
    font-weight: normal;
    letter-spacing: 4px;
    font-size: 13px;
    font-size: 1.3rem; }
    #main.characterDetail.costume #activeColor h3:after {
      position: absolute;
      top: 12px;
      left: 5px;
      display: block;
      content: '';
      position: relative;
      width: 33px;
      height: 2px;
      background: #fff; }
  #main.characterDetail.costume #activeColor p.num {
    font-family: Arial,helvetica;
    margin: -26px 0 20px 5px;
    padding: 0;
    letter-spacing: -7px;
    height: 195px;
    color: #fff;
    line-height: 1.4;
    display: inline-block;
    font-size: 180px;
    font-size: 18rem; }
    #main.characterDetail.costume #activeColor p.num.rm {
      padding: 0 30px 0 0;
      background: url(../../../as/img/character/icon_rm.png?h=917f6b205a18ef3e8443f28be65cf9ea) no-repeat right bottom; }
    #main.characterDetail.costume #activeColor p.num.fm {
      padding: 0 30px 0 0;
      background: url(../../../as/img/character/icon_fm.png?h=2546d3347d6d0a1225fe58003a81bc1f) no-repeat right bottom; }
    #main.characterDetail.costume #activeColor p.num.rm.fm {
      padding: 0 55px 0 0;
      background: url(../../../as/img/character/icon_fm.png?h=2546d3347d6d0a1225fe58003a81bc1f) no-repeat right bottom, url(../../../as/img/character/icon_rm.png?h=917f6b205a18ef3e8443f28be65cf9ea) no-repeat right 30px bottom; }
  #main.characterDetail.costume #activeColor dl {
    margin: 0 0 10px 30px;
    color: #fff; }
    #main.characterDetail.costume #activeColor dl dt {
      margin: 0 0 15px 0;
      font-size: 21px;
      font-size: 2.1rem; }
    #main.characterDetail.costume #activeColor dl dd {
      width: 94%; }
      #main.characterDetail.costume #activeColor dl dd img.icon {
        width: 20px;
        height: auto;
        vertical-align: middle;
        display: inline-block; }
      #main.characterDetail.costume #activeColor dl dd .notes {
        color: #d88400; }

#main.characterDetail.costume .curtain {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: #000;
  display: none;
  opacity: 0; }

#main.characterDetail.costume #selectColor {
  position: relative;
  z-index: 2;
  background: #333;
  width: 50%;
  height: 846px; }
  #main.characterDetail.costume #selectColor #spToggleBtn {
    width: 10px;
    height: 100%;
    cursor: pointer;
    display: none;
    position: absolute;
    top: 0;
    left: -10px;
    z-index: 1; }
    #main.characterDetail.costume #selectColor #spToggleBtn:hover {
      opacity: 0.8; }
    #main.characterDetail.costume #selectColor #spToggleBtn:before {
      display: block;
      content: "";
      width: 70px;
      height: 139px;
      position: absolute;
      top: 17%;
      left: -61px;
      background: url(../../../as/img/character/colorSelectBtn.png?h=10514c09f86e448014fa734117ac64d9) no-repeat left top; }
    #main.characterDetail.costume #selectColor #spToggleBtn.on:before {
      background: url(../../../as/img/character/colorSelectBtn.png?h=10514c09f86e448014fa734117ac64d9) no-repeat left bottom; }
  #main.characterDetail.costume #selectColor ul.character {
    margin: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    padding: 1px 0 1px 1px;
    height: 846px;
    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;
    align-items: flex-start;
    align-content: flex-start; }
    #main.characterDetail.costume #selectColor ul.character li {
      width: calc(25% - 1px);
      min-height: 120px;
      margin: 0 1px 1px 0;
      position: relative;
      z-index: 0; }
      @media all and (-ms-high-contrast: none) {
        #main.characterDetail.costume #selectColor ul.character li {
          width: 24%;
          margin: 0 0.5% 0.5% 0; } }
      #main.characterDetail.costume #selectColor ul.character li:after {
        position: absolute;
        z-index: 1;
        display: block;
        content: "";
        background: #000;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 2px solid #fff;
        opacity: 0; }
      #main.characterDetail.costume #selectColor ul.character li:hover {
        opacity: 0.5;
        cursor: pointer; }
      #main.characterDetail.costume #selectColor ul.character li:hover + #main.characterDetail.costume #selectColor ul.character li:after {
        opacity: 0.5; }
      #main.characterDetail.costume #selectColor ul.character li.current:after {
        opacity: 0.7; }
      #main.characterDetail.costume #selectColor ul.character li.default {
        background: #797979; }
      #main.characterDetail.costume #selectColor ul.character li.survive {
        background: #28a5cd; }
      #main.characterDetail.costume #selectColor ul.character li.shop {
        background: #cb7129; }
      #main.characterDetail.costume #selectColor ul.character li.limited {
        background: #cd2f28; }
      #main.characterDetail.costume #selectColor ul.character li p.img {
        margin: 0; }
        #main.characterDetail.costume #selectColor ul.character li p.img img {
          width: 100%;
          height: auto; }
      #main.characterDetail.costume #selectColor ul.character li p.num {
        position: relative;
        height: 20px;
        margin: 0; }
        #main.characterDetail.costume #selectColor ul.character li p.num span {
          position: absolute;
          bottom: 1px;
          left: 6px;
          color: #fff;
          font-weight: normal;
          opacity: 0.7;
          font-size: 33px;
          font-size: 3.3rem;
          font-family: Arial,helvetica; }
        #main.characterDetail.costume #selectColor ul.character li p.num.rm {
          padding: 0 45px 0 0;
          background: url(../../../as/img/character/icon_rm.png?h=917f6b205a18ef3e8443f28be65cf9ea) no-repeat right center;
          background-size: 16px; }
        #main.characterDetail.costume #selectColor ul.character li p.num.fm {
          padding: 0 35px 0 0;
          background: url(../../../as/img/character/icon_fm.png?h=2546d3347d6d0a1225fe58003a81bc1f) no-repeat right center;
          background-size: 16px; }
        #main.characterDetail.costume #selectColor ul.character li p.num.rm.fm {
          background: url(../../../as/img/character/icon_fm.png?h=2546d3347d6d0a1225fe58003a81bc1f) no-repeat right 5px top, url(../../../as/img/character/icon_rm.png?h=917f6b205a18ef3e8443f28be65cf9ea) no-repeat right 23px top;
          background-size: 16px; }

#main.characterDetail.costume .noticeArea {
  margin: 20px 0 0 0;
  display: block;
  width: 49%;
  padding: 0 2%;
  font-size: 11px;
  font-size: 1.1rem;
  color: #777;
  line-height: 1.5;
  list-style-type: disc; }
  #main.characterDetail.costume .noticeArea li {
    margin: 0 0 5px 0; }

#main.characterDetail.costume .noticeBlock {
  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;
  padding: 24px 0 16px 0;
  color: #484848;
  background: #efefef; }
  #main.characterDetail.costume .noticeBlock ul.ex {
    width: 50%;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-size: 1.2rem; }
    #main.characterDetail.costume .noticeBlock ul.ex li {
      position: relative;
      margin: 0 0 8px 0;
      padding: 0 0 0 35px; }
      #main.characterDetail.costume .noticeBlock ul.ex li.default:after {
        display: block;
        content: '';
        position: absolute;
        top: 4px;
        left: 0;
        width: 26px;
        height: 6px;
        background: #797979; }
      #main.characterDetail.costume .noticeBlock ul.ex li.survive:after {
        display: block;
        content: '';
        position: absolute;
        top: 4px;
        left: 0;
        width: 26px;
        height: 6px;
        background: #28a5cd; }
      #main.characterDetail.costume .noticeBlock ul.ex li.shop:after {
        display: block;
        content: '';
        position: absolute;
        top: 4px;
        left: 0;
        width: 26px;
        height: 6px;
        background: #cb7129; }
      #main.characterDetail.costume .noticeBlock ul.ex li.limited:after {
        display: block;
        content: '';
        position: absolute;
        top: 4px;
        left: 0;
        width: 26px;
        height: 6px;
        background: #cd2f28; }
  #main.characterDetail.costume .noticeBlock ul.annotation {
    width: 50%;
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-size: 1.2rem; }
    #main.characterDetail.costume .noticeBlock ul.annotation img {
      width: 15px;
      height: auto;
      vertical-align: middle;
      display: inline-block; }
    #main.characterDetail.costume .noticeBlock ul.annotation li {
      position: relative;
      margin: 0 0 5px 0;
      padding: 0 0 0 35px; }
      #main.characterDetail.costume .noticeBlock ul.annotation li:nth-child(1) img, #main.characterDetail.costume .noticeBlock ul.annotation li:nth-child(2) img {
        margin: 0 6px 0 0; }
      #main.characterDetail.costume .noticeBlock ul.annotation li:nth-child(3) img, #main.characterDetail.costume .noticeBlock ul.annotation li:nth-child(4) img {
        width: 20px;
        margin: 0 0 0 -2px; }

@media screen and (min-width: 100px) and (max-width: 960px) {
  #main.characterDetail.costume .costumeList {
    width: 96%; }
    #main.characterDetail.costume .costumeList li {
      position: relative;
      width: 20% !important;
      height: 100%;
      margin: 0 2px;
      border: 3px solid #000; }
      #main.characterDetail.costume .costumeList li:after {
        display: block;
        content: '';
        position: absolute;
        bottom: -17px;
        left: 50%;
        width: 0;
        height: 0;
        margin: 0 0 0 -3px;
        border-style: solid;
        border-width: 0px 6px 0 6px;
        border-color: #0063ac transparent transparent transparent; }
      #main.characterDetail.costume .costumeList li .txt span {
        font-size: 8px;
        font-size: 0.8rem; }
      #main.characterDetail.costume .costumeList li.current {
        border: 3px solid #0063ac; }
        #main.characterDetail.costume .costumeList li.current .txt {
          height: 100%;
          -webkit-transition: height 0.2s ease-out;
          -webkit-transition-delay: ease-outs;
          -moz-transition: height 0.2s ease-out ease-outs;
          -o-transition: height 0.2s ease-out ease-outs;
          transition: height 0.2s ease-out ease-outs; }
          #main.characterDetail.costume .costumeList li.current .txt span {
            background: rgba(0, 99, 172, 0.7); }
        #main.characterDetail.costume .costumeList li.current:after {
          border-top: solid 14px #0063ac; }
  #main.characterDetail.costume .slickSlide {
    width: 85%; }
    #main.characterDetail.costume .slickSlide div.slide .txt span {
      padding: 1px 0 0 0;
      white-space: nowrap;
      font-size: 9px;
      font-size: 0.9rem; }
    #main.characterDetail.costume .slickSlide ul.slick-dots li {
      border: none;
      width: 26px !important;
      height: 30px;
      text-align: center; }
      #main.characterDetail.costume .slickSlide ul.slick-dots li button {
        display: block;
        background: none;
        opacity: 0.6; }
        #main.characterDetail.costume .slickSlide ul.slick-dots li button:before {
          display: block;
          content: "";
          width: 26px;
          height: 2px;
          padding: 0;
          background: #555; }
      #main.characterDetail.costume .slickSlide ul.slick-dots li.slick-active button {
        opacity: 1; }
  #main.characterDetail.costume .exTxt {
    min-height: 180px;
    padding: 30px 0 0 26px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    background: url(../../../as/img/character/bg_extxt.jpg?h=886047f4cf27fbd17f6a966380fb829e) no-repeat;
    background-size: cover; }
    #main.characterDetail.costume .exTxt dl {
      margin: 15px 0 0 0;
      padding: 0 0 15px 0; }
      #main.characterDetail.costume .exTxt dl dt {
        margin: 0 0 8px 0;
        color: #4d92c5;
        font-size: 16px;
        font-size: 1.6rem; }
      #main.characterDetail.costume .exTxt dl dd {
        width: 60%;
        color: #fff;
        font-size: 12px;
        font-size: 1.2rem; }
    #main.characterDetail.costume .exTxt .comment {
      padding: 15px 40px 0 20px;
      width: 277px;
      height: 160px;
      box-sizing: border-box;
      background-size: 40%;
      cursor: pointer;
      display: none; }
      #main.characterDetail.costume .exTxt .comment.show p {
        display: block; }
      #main.characterDetail.costume .exTxt .comment.hide p {
        display: none; }
      #main.characterDetail.costume .exTxt .comment.hide:before {
        position: absolute;
        bottom: 90px;
        right: 60px;
        z-index: 9;
        content: "";
        display: block;
        border-style: solid;
        border-width: 10px 10px 10px 10px;
        border-color: #fff transparent transparent transparent; }
      #main.characterDetail.costume .exTxt .comment.hide:after {
        position: absolute;
        bottom: 110px;
        right: 40px;
        content: "・・・";
        text-align: center;
        color: #333;
        padding: 10px;
        background: #fff;
        display: block;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        border-radius: 5px; }
      #main.characterDetail.costume .exTxt .comment p {
        position: absolute;
        bottom: 110px;
        right: 5px;
        width: 80%;
        background: #fff;
        color: #333;
        padding: 20px;
        line-height: 1.2;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        border-radius: 5px;
        font-size: 12px;
        font-size: 1.2rem;
        -webkit-box-shadow: 0px 0px 16px #000;
        -moz-box-shadow: 0px 0px 16px #000;
        box-shadow: 0px 0px 16px #000; }
        #main.characterDetail.costume .exTxt .comment p:before {
          position: absolute;
          bottom: -19px;
          right: 55px;
          z-index: 100;
          content: "";
          display: block;
          border-style: solid;
          border-width: 10px 10px 10px 10px;
          border-color: #fff transparent transparent transparent; }
        #main.characterDetail.costume .exTxt .comment p:after {
          position: absolute;
          top: 3px;
          right: 3px;
          content: "×";
          text-align: center;
          color: #fff;
          padding: 0px 3px 4px 2px;
          background: #999;
          display: block;
          width: 10px;
          height: 10px;
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
          -ms-border-radius: 3px;
          border-radius: 3px; }
      #main.characterDetail.costume .exTxt .comment span.name {
        right: 20px;
        bottom: 4px;
        font-size: 11px;
        font-size: 1.1rem; }
        #main.characterDetail.costume .exTxt .comment span.name.hosaka {
          right: 100px; }
        #main.characterDetail.costume .exTxt .comment span.name.watanabe {
          right: 10px; }
      #main.characterDetail.costume .exTxt .comment.ashida {
        background: url(../../../as/img/character/bg_member_ashida_sp.png?h=c5091c3d5da12d63de45610e8b47d61e) no-repeat right bottom/50%; }
      #main.characterDetail.costume .exTxt .comment.combi {
        background: url(../../../as/img/character/bg_member_combi_sp.png?h=3b990527664e44cafeeb972744bf1a5c) no-repeat right bottom/50%; }
      #main.characterDetail.costume .exTxt .comment.hosaka {
        background: url(../../../as/img/character/bg_member_hosaka_sp.png?h=3f513cf2823a660d8144199d905f0a43) no-repeat right bottom/50%; }
      #main.characterDetail.costume .exTxt .comment.watanabe {
        background: url(../../../as/img/character/bg_member_watanabe_sp.png?h=9e0e384034ac60073458b7bc612b04ef) no-repeat right bottom/50%; }
  #main.characterDetail.costume .colorSelectBlock {
    display: block;
    position: relative; }
  #main.characterDetail.costume #activeColor {
    width: 100%; }
    #main.characterDetail.costume #activeColor dl {
      margin: 0 0 10px 20px; }
  #main.characterDetail.costume #selectColor {
    width: 100%;
    max-width: 260px;
    position: absolute;
    top: 0;
    left: 0; }
    #main.characterDetail.costume #selectColor #spToggleBtn {
      display: block; }
    #main.characterDetail.costume #selectColor ul.character {
      margin: 0;
      overflow: auto;
      padding: 1px 0 1px 1px;
      width: 100%;
      height: 63%;
      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;
      align-items: flex-start; }
      #main.characterDetail.costume #selectColor ul.character li {
        width: calc(33% - 1px);
        min-height: 100px;
        margin: 0 1px 1px 0;
        position: relative;
        z-index: 0; }
        #main.characterDetail.costume #selectColor ul.character li:after {
          position: absolute;
          z-index: 1;
          display: block;
          content: "";
          background: #000;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          opacity: 0; }
        #main.characterDetail.costume #selectColor ul.character li p.img {
          margin: 0; }
          #main.characterDetail.costume #selectColor ul.character li p.img img {
            width: 100%;
            height: auto; }
        #main.characterDetail.costume #selectColor ul.character li p.num {
          position: relative;
          height: 20px;
          margin: 0; }
          #main.characterDetail.costume #selectColor ul.character li p.num span {
            position: absolute;
            bottom: 1px;
            left: 6px;
            color: #fff;
            font-weight: normal;
            opacity: 0.7;
            font-size: 33px;
            font-size: 3.3rem;
            font-family: Arial,helvetica; }
          #main.characterDetail.costume #selectColor ul.character li p.num.rm {
            padding: 0 45px 0 0;
            background: url(../../../as/img/character/icon_rm.png?h=917f6b205a18ef3e8443f28be65cf9ea) no-repeat right center;
            background-size: 16px; }
          #main.characterDetail.costume #selectColor ul.character li p.num.fm {
            padding: 0 35px 0 0;
            background: url(../../../as/img/character/icon_fm.png?h=2546d3347d6d0a1225fe58003a81bc1f) no-repeat right center;
            background-size: 16px; }
          #main.characterDetail.costume #selectColor ul.character li p.num.rm.fm {
            background: url(../../../as/img/character/icon_fm.png?h=2546d3347d6d0a1225fe58003a81bc1f) no-repeat right 5px top, url(../../../as/img/character/icon_rm.png?h=917f6b205a18ef3e8443f28be65cf9ea) no-repeat right 23px top;
            background-size: 16px; } }

@media screen and (max-width: 600px) {
  #main.characterDetail.costume #activeColor p.img img {
    width: 96%;
    margin-top: 0; }
  #main.characterDetail.costume .noticeBlock {
    display: block; }
    #main.characterDetail.costume .noticeBlock ul.annotation {
      width: 99%; }
    #main.characterDetail.costume .noticeBlock ul.ex {
      width: 87%;
      padding: 20px 0 0 38px; }
  #main.characterDetail.costume p.noticeArea {
    width: 95%; } }

main.frame section.characterContents {
  padding: 20px 0 0 0;
  margin: 0;
  min-height: auto; }
  main.frame section.characterContents div.loginNotice {
    width: 30%;
    margin: 5% auto;
    padding: 2% 5% 5% 5%;
    border-top: 3px solid #000;
    background: #333 url(../../../as/img/character/frame_gate_bg.jpg?h=bb5f0a1d823a30c410b9a199e7c13f9b) no-repeat center center;
    background-blend-mode: overlay;
    text-align: center;
    min-height: 550px; }
    main.frame section.characterContents div.loginNotice div.mark {
      margin: 20px auto 0 auto;
      padding: 20px 0 0 0;
      position: relative;
      width: 40%; }
      main.frame section.characterContents div.loginNotice div.mark img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: auto; }
    main.frame section.characterContents div.loginNotice h3 {
      font-size: 26px;
      font-size: 2.6rem;
      letter-spacing: 1.5px;
      line-height: 1.2;
      position: relative;
      color: #fff;
      margin: 15px 0 0 0; }
      main.frame section.characterContents div.loginNotice h3:before {
        content: "";
        display: inline-block;
        width: 30px;
        height: 1px;
        background: #fff;
        margin: 0 10px 10px 0; }
      main.frame section.characterContents div.loginNotice h3:after {
        content: "";
        display: inline-block;
        width: 30px;
        height: 1px;
        background: #fff;
        margin: 0 0 10px 5px; }
    main.frame section.characterContents div.loginNotice p.discription {
      text-align: center;
      color: #fff;
      font-size: 15px;
      font-size: 1.5rem;
      line-height: 1.6; }
    main.frame section.characterContents div.loginNotice ul#usrLoginBtn {
      margin: 0 auto;
      padding: 14px 0;
      width: 100%; }
      main.frame section.characterContents div.loginNotice ul#usrLoginBtn li {
        margin: 5% 0;
        width: 100%;
        display: block; }
        main.frame section.characterContents div.loginNotice ul#usrLoginBtn li a {
          background: rgba(255, 255, 255, 0.8);
          border: 1px solid #fff;
          color: #000;
          padding: 15px 10px;
          display: block; }
          main.frame section.characterContents div.loginNotice ul#usrLoginBtn li a.loginPSN:before {
            content: ""; }
          main.frame section.characterContents div.loginNotice ul#usrLoginBtn li a.loginSteam:before {
            content: ""; }
          main.frame section.characterContents div.loginNotice ul#usrLoginBtn li a:before {
            display: inline-block;
            vertical-align: middle;
            width: 10%;
            font-size: 25px;
            font-size: 2.5rem;
            text-align: center; }
          main.frame section.characterContents div.loginNotice ul#usrLoginBtn li a:hover {
            background: rgba(0, 0, 0, 0.8);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.2); }
          main.frame section.characterContents div.loginNotice ul#usrLoginBtn li a span {
            display: inline-block;
            margin: 0 0 0 10px;
            vertical-align: middle;
            font-size: 14px;
            font-size: 1.4rem; }
    main.frame section.characterContents div.loginNotice p.notice {
      text-align: left;
      color: #fff;
      font-size: 12px;
      font-size: 1.2rem; }
    main.frame section.characterContents div.loginNotice.in {
      margin: 5% auto;
      padding: 2% 5% 5% 5%;
      background: #fff;
      border: 1px solid gainsboro;
      border-top: 2px solid #000;
      background: #fafafa;
      background: url(../../../as/img/character/frame_gate_bg.jpg?h=bb5f0a1d823a30c410b9a199e7c13f9b) no-repeat center right;
      text-align: center;
      min-height: 450px; }
    main.frame section.characterContents div.loginNotice div.loggedIn {
      margin: 50px 0 0 0; }
      main.frame section.characterContents div.loginNotice div.loggedIn a {
        width: 100%;
        background: rgba(255, 255, 255, 0.8);
        color: #000;
        border: 1px solid #fff;
        padding: 30px 0;
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: 16px;
        font-size: 1.6rem; }
        main.frame section.characterContents div.loginNotice div.loggedIn a:after {
          content: ""; }
        main.frame section.characterContents div.loginNotice div.loggedIn a:after {
          font-size: 26px;
          font-size: 2.6rem;
          vertical-align: top;
          display: inline-block;
          padding: 0px 0 0px 4px;
          margin: -5px 0 0px 0; }
        main.frame section.characterContents div.loginNotice div.loggedIn a:hover {
          background: rgba(0, 0, 0, 0.8);
          color: #fff;
          border: 1px solid rgba(255, 255, 255, 0.2); }
      main.frame section.characterContents div.loginNotice div.loggedIn:before {
        content: "";
        display: inline-block;
        width: 100%;
        height: 1px;
        background: rgba(255, 255, 255, 0.7);
        margin: 0 0px 15px 0; }
      main.frame section.characterContents div.loginNotice div.loggedIn:after {
        content: "";
        display: inline-block;
        width: 100%;
        height: 1px;
        background: rgba(255, 255, 255, 0.7);
        margin: 15px 0 10px 0px; }
    @media screen and (min-width: 100px) and (max-width: 960px) {
      main.frame section.characterContents div.loginNotice {
        width: 75%; } }

main.frame section.characterBlock div.titleBar {
  min-height: 100px;
  min-width: 1400px;
  padding: 0;
  background: #555;
  background: url(../../../as/img/character/frame_gate_bg.jpg?h=bb5f0a1d823a30c410b9a199e7c13f9b) no-repeat center center;
  background-size: cover; }

main.frame section.characterBlock a.logo {
  padding: 15px;
  display: inline-block; }
  main.frame section.characterBlock a.logo img {
    width: 70px; }

main.frame section.characterBlock div.titleName {
  display: inline-block;
  margin: 0px 0 0 0;
  vertical-align: top; }

main.frame section.characterBlock div.titleName p {
  font-size: 22px;
  font-size: 2.2rem;
  display: inline;
  padding: 0;
  margin: 0;
  color: #fff;
  line-height: 4.6; }

main.frame section.characterFrameContents {
  background: url(../../../as/img/common/pattern_wh.gif?h=281350df9c0679399ab4bf4bb78cd6c9) repeat center center;
  width: 100%;
  min-width: 1400px; }
  main.frame section.characterFrameContents div.frameTable {
    min-width: 1400px;
    margin: 0 auto;
    position: relative; }
    main.frame section.characterFrameContents div.frameTable .selectConsol {
      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: center;
      border-bottom: 6px solid #284166;
      color: #fff;
      padding: 30px 0 0 0;
      min-width: 1400px; }
      main.frame section.characterFrameContents div.frameTable .selectConsol span.selectButton {
        max-width: 380px;
        width: 49%;
        margin: 7px 5px 1px 5px;
        text-align: center;
        pointer-events: all;
        background: #6a6a6a;
        display: block;
        line-height: 3.5;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        -ms-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
        cursor: pointer; }
        main.frame section.characterFrameContents div.frameTable .selectConsol span.selectButton.activeButton {
          margin: 0px 5px 0px 5px;
          padding: 4px 0 0 0;
          pointer-events: none;
          background: #284166;
          -webkit-border-radius: 5px 5px 0 0;
          -moz-border-radius: 5px 5px 0 0;
          -ms-border-radius: 5px 5px 0 0;
          border-radius: 5px 5px 0 0; }
        main.frame section.characterFrameContents div.frameTable .selectConsol span.selectButton:hover {
          opacity: 0.7; }
        main.frame section.characterFrameContents div.frameTable .selectConsol span.selectButton a {
          color: #fff;
          display: block;
          padding: 15px 0 11px 0; }
    main.frame section.characterFrameContents div.frameTable .note {
      min-width: 1400px;
      margin: 0 auto;
      background: #333;
      padding: 0.5% 1.5%;
      box-sizing: border-box; }
      main.frame section.characterFrameContents div.frameTable .note p {
        color: #ccc;
        font-size: 12px;
        font-size: 1.2rem; }
    main.frame section.characterFrameContents div.frameTable .fixTableHead {
      z-index: 5;
      position: fixed;
      top: 0;
      left: 0; }
    main.frame section.characterFrameContents div.frameTable table {
      border-collapse: collapse;
      table-layout: fixed;
      min-width: 1400px;
      font-size: 12px;
      font-size: 1.2rem;
      margin: 0px auto;
      background: #fff;
      border-collapse: collapse;
      box-sizing: border-box; }
    main.frame section.characterFrameContents div.frameTable table, main.frame section.characterFrameContents div.frameTable td, main.frame section.characterFrameContents div.frameTable th {
      border: 1px solid #b9b9b9;
      text-align: center; }
      main.frame section.characterFrameContents div.frameTable table img, main.frame section.characterFrameContents div.frameTable td img, main.frame section.characterFrameContents div.frameTable th img {
        display: inline-block; }
    main.frame section.characterFrameContents div.frameTable th.headTtlSkill {
      width: 200px; }
    main.frame section.characterFrameContents div.frameTable th.headTtlframe {
      width: 210px; }
    main.frame section.characterFrameContents div.frameTable th.headTtlStiffness {
      width: 140px; }
    main.frame section.characterFrameContents div.frameTable th.headTtlVCancel {
      width: 200px; }
    main.frame section.characterFrameContents div.frameTable th.headTtlCancel {
      width: 70px; }
    main.frame section.characterFrameContents div.frameTable th.headTtlDamage {
      width: 60px; }
    main.frame section.characterFrameContents div.frameTable th.headTtlStan {
      width: 60px; }
    main.frame section.characterFrameContents div.frameTable th.headTtlGuage {
      width: 80px; }
    main.frame section.characterFrameContents div.frameTable th.headTtlProperties {
      width: 50px; }
    main.frame section.characterFrameContents div.frameTable th.headTtlAirborne {
      width: 50px; }
    main.frame section.characterFrameContents div.frameTable tr.thead .sep3 {
      width: 70px; }
    main.frame section.characterFrameContents div.frameTable tbody th, main.frame section.characterFrameContents div.frameTable tr.thead th {
      background: #6e7a99;
      padding: 10px 0;
      white-space: nowrap;
      color: #fff;
      font-weight: normal; }
    main.frame section.characterFrameContents div.frameTable tbody td {
      padding: 8px 0;
      word-wrap: break-word; }
      main.frame section.characterFrameContents div.frameTable tbody td:first-child, main.frame section.characterFrameContents div.frameTable tbody td:last-child {
        text-align: left;
        padding-right: 10px;
        padding-left: 10px; }
      main.frame section.characterFrameContents div.frameTable tbody td.name p.name {
        display: block;
        margin: 0;
        padding: 0; }
      main.frame section.characterFrameContents div.frameTable tbody td.name span.cmdPartsText {
        padding: 0 0px 0 5px;
        position: relative;
        font-size: 10px;
        font-size: 1rem; }
    main.frame section.characterFrameContents div.frameTable tbody th.type {
      background: #2b3247;
      color: #fff;
      height: 10px;
      padding: 0.5em 1em;
      letter-spacing: 10px;
      text-align: left; }
    main.frame section.characterFrameContents div.frameTable tbody td.skillName {
      text-align: left; }
    main.frame section.characterFrameContents div.frameTable p.keyBlockFrm {
      display: inline-block;
      position: relative;
      padding: 0;
      margin: 3px 2px 1px 0px; }
    main.frame section.characterFrameContents div.frameTable img.cmd-image-s {
      width: 19px;
      height: auto;
      vertical-align: middle;
      position: relative;
      z-index: 5; }
    main.frame section.characterFrameContents div.frameTable .key-LPFrm, main.frame section.characterFrameContents div.frameTable .key-MPFrm, main.frame section.characterFrameContents div.frameTable .key-HPFrm, main.frame section.characterFrameContents div.frameTable .key-LKFrm, main.frame section.characterFrameContents div.frameTable .key-MKFrm, main.frame section.characterFrameContents div.frameTable .key-HKFrm {
      display: inline-block;
      padding: 0 5px 0 9px;
      font-weight: bold;
      vertical-align: top;
      text-align: center;
      margin: 1px 0 0 -8px;
      line-height: 1.5;
      position: relative;
      font-size: 8px;
      font-size: 0.8rem; }
    main.frame section.characterFrameContents div.frameTable .key-LPFrm {
      background-color: #ffe893;
      z-index: 3; }
    main.frame section.characterFrameContents div.frameTable .key-MPFrm {
      background-color: #fdd000;
      z-index: 2; }
    main.frame section.characterFrameContents div.frameTable .key-HPFrm {
      background-color: #f39800;
      z-index: 1; }
    main.frame section.characterFrameContents div.frameTable .key-LKFrm {
      background-color: #9fd9f6;
      z-index: 3; }
    main.frame section.characterFrameContents div.frameTable .key-MKFrm {
      background-color: #59c5f1;
      z-index: 2; }
    main.frame section.characterFrameContents div.frameTable .key-HKFrm {
      background-color: #28ade7;
      z-index: 1; }

main.frame .none {
  background: #b0afaf; }

main.frame .veryGood {
  background: #81e397; }

main.frame .good {
  background: #c5eece; }

main.frame .usually {
  background: #ffeb9c; }

main.frame .bad {
  background: #ffc6cd; }

main.frame .veryBad {
  background: #e87885; }

main.frame .throw {
  background: #ccc1da; }

main.frame .cancelNone {
  background: #585446;
  color: #fff; }

main.frame .blank {
  background: #eee; }

main.frame .super {
  padding: 3px 5px 1px 5px;
  display: inline-block;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  background: #447ef0;
  border: 1px solid #3e6ecc;
  color: #fff; }

main.frame .vt {
  padding: 1px 3px;
  margin: 0 2px 0 0;
  display: inline-block;
  background: #d63d3f;
  border: 1px solid #a83133;
  color: #fff;
  vertical-align: top;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  font-size: 10px;
  font-size: 1rem; }

main.frame .canSuper, main.frame .canSuperAsta, main.frame .canCa, main.frame .canCaAsta, main.frame .canV, main.frame .canVAsta, main.frame .canVS, main.frame .canVSAsta, main.frame .limitedAsta {
  padding: 2px 3.5px 1px 3.5px;
  margin: 1px 0.5px;
  display: inline-block;
  color: #fff;
  vertical-align: top;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  font-size: 10px;
  font-size: 1rem; }

main.frame .canSuper, main.frame .canSuperAsta {
  background: #d9a346; }

main.frame .canCa, main.frame .canCaAsta {
  background: #5e81d9; }

main.frame .canV, main.frame .canVAsta {
  background: #d55456; }

main.frame .canVS, main.frame .canVSAsta {
  background: #d55456; }

main.frame .limitedAsta {
  background: #676767;
  margin: 0px 1px;
  padding: 1px 2px 0 1px;
  vertical-align: middle;
  font-size: 7px;
  font-size: 0.7rem; }

main.frame .frameStartFirstOnly,
main.frame .frameKeepFirstOnly,
main.frame .damageTotalOnly,
main.frame .stunTotalOnly {
  display: none; }

main.frame ul.colorDiscriptionList {
  width: 96%;
  margin: 20px auto 60px; }
  main.frame ul.colorDiscriptionList li {
    display: inline-block;
    margin: 0 14px 0 0; }
    main.frame ul.colorDiscriptionList li span {
      margin: 0 4px 0 0;
      padding: 0px 14px; }

nav.tab {
  width: 60%;
  min-width: 1000px;
  margin: 0 auto; }

@media screen and (min-width: 100px) and (max-width: 960px) {
  main.frame section.characterBlock div.titleBar {
    min-height: 80px;
    padding: 0;
    background: #555;
    overflow: hidden;
    background: url(../../../as/img/character/frame_gate_bg.jpg?h=bb5f0a1d823a30c410b9a199e7c13f9b) no-repeat center center;
    background-size: cover; }
  main.frame section.characterBlock a.logo {
    padding: 10px;
    display: inline-block; }
    main.frame section.characterBlock a.logo img {
      width: 70px; }
  main.frame section.characterBlock div.titleName {
    display: inline-block;
    margin: 0px 0 0 0;
    vertical-align: top; }
  main.frame section.characterBlock div.titleName p {
    font-size: 18px;
    font-size: 1.8rem;
    display: inline;
    padding: 0;
    margin: 0;
    color: #fff;
    line-height: 5.2;
    -webkit-text-shadow: 1px 3px 6px #000, -1px 3px 6px #000, 1px 1px 6px #000, -1px 1px 6px #000;
    -moz-text-shadow: 1px 3px 6px #000, -1px 3px 6px #000, 1px 1px 6px #000, -1px 1px 6px #000;
    text-shadow: 1px 3px 6px #000, -1px 3px 6px #000, 1px 1px 6px #000, -1px 1px 6px #000; }
  nav.tab {
    width: 90%; }
    nav.tab ul li a {
      margin: 0 2px;
      font-size: 10px;
      font-size: 1rem; }
  div.frameTable {
    width: 100%; }
    div.frameTable .fixTableHead {
      z-index: 5;
      position: fixed;
      top: 0;
      left: 0; }
    div.frameTable table {
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 8px;
      font-size: 0.8rem;
      margin: 0px auto;
      min-width: 1400px;
      background: #fff;
      border-collapse: collapse;
      box-sizing: border-box; }
    div.frameTable table, div.frameTable td, div.frameTable th {
      border: 1px solid #b9b9b9;
      text-align: center; }
    div.frameTable th.headTtlSkill {
      width: 160px;
      background: #6e7a99 !important; }
    div.frameTable th.headTtlframe {
      width: 160px;
      background: #6e7a99 !important; }
    div.frameTable th.headTtlStiffness {
      width: 110px; }
    div.frameTable th.headTtlVCancel {
      width: 180px; }
    div.frameTable th.headTtlCancel {
      width: 60px; }
    div.frameTable th.headTtlDamage {
      width: 50px; }
    div.frameTable th.headTtlStan {
      width: 50px; }
    div.frameTable th.headTtlGuage {
      width: 80px; }
    div.frameTable th.headTtlProperties {
      width: 50px; }
    div.frameTable th.headTtlAirborne {
      width: 50px; }
    div.frameTable th.headTtlRemarks {
      width: 270px; }
    div.frameTable tr.thead .sep3 {
      width: 70px; }
    div.frameTable tbody td, div.frameTable tr.thead td {
      padding: 3px 0;
      word-wrap: break-word; }
      div.frameTable tbody td:first-child, div.frameTable tbody td:last-child, div.frameTable tr.thead td:first-child, div.frameTable tr.thead td:last-child {
        text-align: left;
        padding-right: 7px;
        padding-left: 7px; }
      div.frameTable tbody td.name p.name, div.frameTable tr.thead td.name p.name {
        display: block;
        margin: 0;
        padding: 0;
        font-size: 10px;
        font-size: 1rem; }
      div.frameTable tbody td.name span.cmdPartsText, div.frameTable tr.thead td.name span.cmdPartsText {
        padding: 0 0px 0 5px;
        position: relative; }
    div.frameTable tbody th.type, div.frameTable tr.thead th.type {
      background: #2b3247;
      color: #fff;
      height: 10px;
      padding: 0.5em 1em;
      letter-spacing: 10px;
      text-align: left; }
    div.frameTable tbody td.skillName, div.frameTable tr.thead td.skillName {
      text-align: left; }
    div.frameTable p.keyBlockFrm {
      display: inline-block;
      position: relative;
      padding: 0;
      margin: 3px 2px 1px 0px; }
    div.frameTable img.cmd-image-s {
      width: 14px;
      height: auto;
      vertical-align: middle;
      position: relative;
      z-index: 5; }
    div.frameTable .key-LPFrm, div.frameTable .key-MPFrm, div.frameTable .key-HPFrm, div.frameTable .key-LKFrm, div.frameTable .key-MKFrm, div.frameTable .key-HKFrm {
      display: inline-block;
      padding: 1px 4px 0 8px;
      font-weight: bold;
      vertical-align: top;
      text-align: center;
      margin: 1px 0 0 -6px;
      line-height: 1.4;
      position: relative; }
    div.frameTable .key-LPFrm {
      background-color: #ffe893;
      z-index: 3; }
    div.frameTable .key-MPFrm {
      background-color: #fdd000;
      z-index: 2; }
    div.frameTable .key-HPFrm {
      background-color: #f39800;
      z-index: 1; }
    div.frameTable .key-LKFrm {
      background-color: #9fd9f6;
      z-index: 3; }
    div.frameTable .key-MKFrm {
      background-color: #59c5f1;
      z-index: 2; }
    div.frameTable .key-HKFrm {
      background-color: #28ade7;
      z-index: 1; } }

main.frame footer {
  width: 100% !important;
  margin: 0;
  padding: 30px 0; }