@charset "utf-8";

.icon-kasumi a { background: url(../images/characters/icon-kasumi.png); }
.icon-helena a { background: url(../images/characters/icon-helena.png); }
.icon-hayate a { background: url(../images/characters/icon-hayate.png); }
.icon-hayabusa a { background: url(../images/characters/icon-hayabusa.png); }
.icon-jann a { background: url(../images/characters/icon-jann.png); }
.icon-zack a { background: url(../images/characters/icon-zack.png); }
.icon-diego a { background: url(../images/characters/icon-diego.png); }
.icon-rig a { background: url(../images/characters/icon-rig.png); }
.icon-hitomi a { background: url(../images/characters/icon-hitomi.png); }
.icon-leifang a { background: url(../images/characters/icon-leifang.png); }
.icon-ayane a { background: url(../images/characters/icon-ayane.png); }
.icon-marie a { background: url(../images/characters/icon-marie.png?date=181023); }
.icon-honoka a { background: url(../images/characters/icon-honoka.png); }
.icon-bayman a { background: url(../images/characters/icon-bayman.png); }
.icon-bass a { background: url(../images/characters/icon-bass.png); }
.icon-tina a { background: url(../images/characters/icon-tina.png); }
.icon-mila a { background: url(../images/characters/icon-mila.png); }
.icon-christie a { background: url(../images/characters/icon-christie.png); }
.icon-nico a { background: url(../images/characters/icon-nico.png); }
.icon-kokoro a { background: url(../images/characters/icon-kokoro.png); }
.icon-lamariposa a { background: url(../images/characters/icon-lamariposa.png); }
.icon-brad a { background: url(../images/characters/icon-brad.png); }
.icon-eliot a { background: url(../images/characters/icon-eliot.png); }
.icon-nyotengu a { background: url(../images/characters/icon-nyotengu.png); }
.icon-phase4 a { background: url(../images/characters/icon-phase4.png); }
.icon-raidou a { background: url(../images/characters/icon-raidou.png); }
.icon-mai a { background: url(../images/characters/icon-mai.png); }
.icon-kula a { background: url(../images/characters/icon-kula.png); }
.icon-momiji a { background: url(../images/characters/icon-momiji.png); }
.icon-rachel a { background: url(../images/characters/icon-rachel.png); }
.icon-tamaki a { background: url(../images/characters/icon-tamaki.png); }


.kasumi .icon-kasumi:after,
.helena .icon-helena:after,
.hayate .icon-hayate:after,
.hayabusa .icon-hayabusa:after,
.jann .icon-jann:after,
.zack .icon-zack:after,
.diego .icon-diego:after,
.rig .icon-rig:after,
.hitomi .icon-hitomi:after,
.leifang .icon-leifang:after,
.ayane .icon-ayane:after,
.marie .icon-marie:after,
.honoka .icon-honoka:after,
.bayman .icon-bayman:after,
.bass .icon-bass:after,
.tina .icon-tina:after,
.mila .icon-mila:after,
.christie .icon-christie:after,
.nico .icon-nico:after,
.kokoro .icon-kokoro:after,
.lamariposa .icon-lamariposa:after,
.brad .icon-brad:after,
.eliot .icon-eliot:after,
.nyotengu .icon-nyotengu:after,
.phase4 .icon-phase4:after,
.raidou .icon-raidou:after,
.mai .icon-mai:after,
.kula .icon-kula:after,
.momiji .icon-momiji:after
.rachel .icon-rachel:after
.tamaki .icon-tamaki:after
{ opacity: 0.6; transform: skewY(-16deg) scale(1.1); z-index: 0; }
/*{ border: solid 10px rgba(230,70,0,0.4); background: rgba(30,30,30,0.8); }*/





/*  .close-box {
    position: fixed;
    z-index: 9999;
    display: none;
  }

  .close-box:before {
    content: "+";
    display: block;
    background: #000;
    width: 30px;
    position: fixed;
    font-family: "slick";
    font-size: 20px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    padding-bottom: 5px;
    transform: rotate(45deg);
    margin-left: -30px;
  }*/



  .open-box {
    position: fixed;
    width: 200px;
    background-image: linear-gradient(to right, rgba(230,70,0,1), rgba(230,70,0,1) 50%, rgba(230,70,0,0));
    text-align: left;
    height: 30px;
    line-height: 30px;
    padding-left: 30px;
    display: none;
  }

  .open-box a {
    color: #fff;
  }

  .open-box:before {
    content: "+";
    display: block;
    background: #e64600;
    width: 30px;
    position: absolute;
    font-family: "slick";
    font-size: 20px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    padding-bottom: 5px;
    margin-left: -30px;
  }

  .character #colorbox {
    pointer-events: none;
  }


  .charactersWrap { }


  .charaIcon.new:before {
    content: 'NEW';
    color: #333;
    padding: 2px 6px;
    background: #fe0;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
    background-size: 100%;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    position: absolute;
    z-index: 50;
    top: -3px;
    left: 10px;
    margin-left: -20px;
    line-height: 1.2;
    text-shadow: none;
  }

  .charaDataNew {
    font-size: 12px;
    background: #ff0;
    /* transform: skewX(-8deg);*/
    border-radius: 20px;
    padding: 5px 10px;
    color: #000;
    display: inline-block;
    font-weight: 700;
    margin-bottom: 5px;
  }

  .charaSelect {
    top: 270px;
    font-size: 18px;
    position: absolute;
    width: 1200px;
    text-align: left;
    display: block;
    height: 30px;
    font-weight: bold;
    left: 50%;
    margin-left: -600px;
  }


  .charaSelect a {
    border-right: #fff solid 1px;
    display: inline-block;
    padding: 0 20px;
    color: #fff;
  }

  .charaIconList {
    position: absolute;
    width: 1200px;
    top: 260px;
    left: 50%;
    margin-left: -600px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .character .charaIconList {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto;
    padding-bottom: 100px;
    padding-top: 20px;
  }

  .charaIconList div {
    width: 100px;
  }


  .charaIconList div:after {
    content: '';
    height: 150px;
    width: 100px;
    background: #e64600;
    display: block;
    position: absolute;
    top: 0;
    z-index: -1;
    opacity: 0;
    transition: all .3s;
  }

  .charaIcon {
    background: rgba(100,100,100,0.4);
    margin-bottom: 20px;
    margin-right: 20px;
    transition: all .3s;
    box-sizing: border-box;
    position: relative;
  }

  .charaIcon:empty {
    background: none !important;
  }

  .charaIcon a {
    height: 140px;
    margin: 5px;
    display: block;
    background-size: 196px 140px;
    background-repeat: no-repeat;
    overflow: hidden;
    text-indent: -9999px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
 }

  .andmore {
    font-size: 60px;
    width: 100%;
    line-height: 100px;
    font-style: italic;
    margin-top: -120px;
  }

  /* character */
  .characterContent {
    background: url(../images/common/bg001.jpg);
    position: relative;
    overflow: hidden;
    height: 1300px;
  }

  .charaArrow {
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    display: block;
    cursor: pointer;
    animation: fadeIn 1s ease-out 0s 1 forwards;
  }

  .charaArrowL {
    left: -80px;
  }
  .charaArrowR {
    right: -80px;
  }

  .charaArrow span {
    position: absolute;
    top: 40%;
    width: 50px;
    height: 50px;
    background: transparent;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    display: block;
    z-index: 10;
    transition: border-color .3s;
  }

  .charaArrowL span {
    left: 26px;
    transform:rotate(-135deg);
  }
  .charaArrowR span {
    right: 26px;
    transform:rotate(45deg);
  }

  .characterArea {
    padding-top: 120px;
    width: 1200px;
    min-height: 1000px;
    position: relative;
    margin: 0 auto;
  }

  .charaData {
    position: relative;
    left: 50%;
    margin-left: -600px;
    width: 600px;
    text-align: left;
    z-index: 1;
    animation: fadeIn 1s ease-out 0s 1 forwards;
  }

  .charaName {
    font-size: 100px;
    font-weight: 700;
    font-style: italic;
    line-height: 1.2;
    text-shadow: 0 0 10px #000;
  }

  .charaName:after {
    content:"";
    display:block;
    height:6px;
    background:linear-gradient(to right, rgba(230,70,0,1), rgba(230,70,0,0));
  }

  .charaName span.cv {
    font-size: 28px;
  }

  .charaTitle {
    font-size: 46px;
    font-weight: 700;
    font-style: italic;
    color: #e64600;
    margin-bottom: 20px;
    line-height: 1.4;
  }

  .charaText {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 20px;
    text-shadow: #000 0 0 10px;
  }

  .charaBtn {
    background: #e64600;
    height: 40px;
    width: 300px;
    line-height: 40px;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .charaBtn a {
    color: #fff;
    display: block;
    position: relative;
  }

  .charaBtn a span {
    color: #333;
    padding: 2px 6px;
    background: #fe0;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.8);
    background-size: 100%;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    position: absolute;
    z-index: 50;
    top: -9px;
    right: 10px;
    margin-right: -20px;
    line-height: 1.2;
    text-shadow: none;
  }


  .charaImg {
    position: absolute;
    right: 0;
    top: 0;
    filter: drop-shadow(0 0 20px #000);
  }
  .charaImg img {
    position: absolute;
    animation: charaFadeIn 1s ease-out 0s 1 forwards;
  }

.kasumi .charaImg img { right: -160px; top: 60px; }
.helena .charaImg img { right: 0; top: 90px; }
.hayate .charaImg img { right: -340px; top: 90px; }
.hayabusa .charaImg img { right: 0; top: 90px; }
.jann .charaImg img { right: 0px; top: 80px; }
.zack .charaImg img { right: -60px; top: 90px; }
.diego .charaImg img { right: -60px; top: 20px; }
.rig .charaImg img { right: 0px; top: 60px; }
.hitomi .charaImg img { right: -180px; top: 70px; }
.leifang .charaImg img { right: -100px; top: 80px; }
.ayane .charaImg img { right: 10px; top: 80px; }
.marie .charaImg img { right: -130px; top: 80px; }
.honoka .charaImg img { right: -100px; top: 80px; }
.bayman .charaImg img { right: -130px; top: 80px; }
.bass .charaImg img { right: -340px; top: -70px; }
.tina .charaImg img { right: -330px; top: 60px; }
.mila .charaImg img { right: 30px; top: 20px; }
.christie .charaImg img { right: -10px; top: 60px; }
.nico .charaImg img { right: -10px; top: 60px; }
.kokoro .charaImg img { right: -30px; top: 60px; }
.lamariposa .charaImg img { right: -380px; top: 0px; }
.brad .charaImg img { right: -250px; top: 80px; }
.eliot .charaImg img { right: -150px; top: 80px; }
.nyotengu .charaImg img { right: -480px; top: 30px; }
.phase4 .charaImg img { right: -300px; top: -110px; }
.raidou .charaImg img { right: -350px; top: -110px; }
.mai .charaImg img { right: -120px; top: -20px; }
.kula .charaImg img { right: -500px; top: 80px; }
.momiji .charaImg img { right: -340px; top: 10px; }
.rachel .charaImg img { right: -180px; top: 50px;}
.tamaki .charaImg img { right: -50px; top: 80px; }



  .charaStyleTitle {
    color: #e64600;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.4;
  }

  .charaStyleTitle:after {
    content:"";
    display:block;
    height:4px;
    background:linear-gradient(to right, rgba(230,70,0,1), rgba(230,70,0,0));
  }

  .charaStyleCombat {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.2;
  }

  .charaStyleText {
    margin-bottom: 20px;
    line-height: 1.4;
  }



/*  .charaChart {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
  }*/

  .charaSS {
    width: 500px;
    margin-bottom: 20px;
    /*overflow: hidden;*/
  }

  .charaSS img {
    width: 100%;
  }

  .charaSS img {
    width: 100%;
    transition: transform 0.8s;
  }



  .charaParsonalTitle {
    color: #e64600;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.4;
  }

  .charaParsonalTitle:after {
    content:"";
    display:block;
    height:4px;
    background:linear-gradient(to right, rgba(230,70,0,1), rgba(230,70,0,0));
  }


  .charaParsonalText {
    margin-bottom: 20px;
    line-height: 1.4;
  }


  @keyframes charaFadeIn {
      0% { opacity: 0; margin-right: 100px; }
      100% { opacity: 1; margin-right: 0; }
  }

  @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
  }


/*=======================================
PC
=======================================*/


@media screen and (min-width: 961px){


  .charactersWrap .subTopics {
    width: 1200px;
  }

  .characters main {
    background: url(../images/common/bg001.jpg);
    padding-bottom: 30px;
  }

  .charactersContent:nth-child(1) {
    height: 1000px;
    position: relative;
  }

  .characters .charactersContent {
  }


  .charaSS img:hover {
    transform: scale(1.05);
  }




  .charaArrow:hover span {
    border-color: #e64600;
  }


  .charaIconList div:hover:after {
    opacity: 0.6;
    transform: skewY(-16deg) scale(1.1);
  }

  /*.charaIconList div.icon-rachel:hover:after {
    display: none;
  }
*/

  .charaIcon:empty:after {
    display: none;
  }

}



/*=======================================
SP
=======================================*/

@media screen and (max-width: 960px){

  .open-box {
    display: block;
    position: absolute;
    top: -50px;
    background: #e64600;
    width: 60%;
    right: 20%;
    border-radius: 30px;
    text-align: center;
    padding: 0;
  }

  .open-box:before {
    display: none;
  }


  .charaIconList {
    position: static;
    padding-top: 100px;
    width: 96%;
    padding: 0 2%;
    left: auto;
    margin-left: 0;
    justify-content: space-around;
    top: 0;
    padding-top: 10vw;
    margin-top: 60px;
  }


  .charaIconList div {
    width: 70px;
  }

  .charaIcon {
    border: none;
    height: auto;
    background: rgba(100,100,100,0.4);
    margin-right: 0;
    margin-bottom: 6px;
  }

  .charaIconList div:after {
    height: 110px;
    width: 70px;
  }

  .characterContent {
    height: auto;
    background: url(../images/common/bg002.jpg);
    background-size: 100%;
  }

  .character .charactersContent {
    z-index: 10;
    position: relative;
  }

  .characterArea {
    width: 100%;
  }


  .charaImg {
    position: relative;
    right: auto;
    top: auto;
    min-height: 1200px;
  }

  .charaImg img {
    position: relative;
    animation: charaFadeIn 1s ease-out 0s 1 forwards;
  }




  .charaImg img {
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    animation: fadeIn 1s ease-out 0s 1 forwards;
  }


  .charaIcon a {
    height: 100px;
    background-size: 140px 100px;
  }


  .characterArea {
    padding-top: 0;
  }

  .charaData {
    left: 0;
    width: 84%;
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    padding: 3% 5%;
    margin: 0 3%;
    border: 1px solid rgba(230,70,0,0.7);
  }

  .charaName {
    font-size: 40px;
    margin-top: 0px;
  }

  .charaName:after {
    background: rgba(230,70,0,1);
    height: 4px;
  }

  .charaStyleTitle, .charaParsonalTitle {
    font-size: 18px;
  }

  .charaStyleTitle:after, .charaParsonalTitle:after {
    background: rgba(230,70,0,1);
    height: 2px;
  }

  .charaName span.cv {
    font-size: 16px;
  }

  .charaTitle {
    font-size: 20px;
  }

  .charaTitle {
    margin-bottom: 5px;
  }

  .charaText, .charaStyleText, .charaParsonalText {
    font-size: 12px;
    margin-bottom: 10px;
  }

  .charaStyleCombat {
    font-size: 20px;
    margin-bottom: 0;
  }


  .charaSS {
    width: 100%;
    margin-bottom: 10px;
  }


  .characterContent .cloud1,.characterContent .cloud2 {
    display: none;
  }


  .charaArrowL {
    left: 10px;
    zoom:0.5;
    position: fixed;
  }
  .charaArrowR {
    right: 10px;
    zoom:0.5;
    position: fixed;
  }


  .andmore {
    font-size: 48px;
    margin-top: 0;
  }

  .charaBtn {
    width: 100%;
    font-size: 14px;
  }

  .charaBtn a {
    padding-left: 20px;
    text-align: left;
  }

  .kasumi .icon-kasumi,
  .helena .icon-helena,
  .hayate .icon-hayate,
  .hayabusa .icon-hayabusa,
  .jann .icon-jann,
  .zack .icon-zack,
  .diego .icon-diego,
  .rig .icon-rig,
  .hitomi .icon-hitomi,
  .leifang .icon-leifang,
  .ayane .icon-ayane,
  .marie .icon-marie,
  .honoka .icon-honoka,
  .bayman .icon-bayman,
  .bass .icon-bass,
  .tina .icon-tina,
  .mila .icon-mila,
  .christie .icon-christie,
  .nico .icon-nico,
  .kokoro .icon-kokoro,
  .lamariposa .icon-lamariposa,
  .brad .icon-brad,
  .eliot .icon-eliot,
  .nyotengu .icon-nyotengu,
  .phase4 .icon-phase4,
  .raidou .icon-raidou
  .mai .icon-mai,
  .kula .icon-kula,
  .momiji .icon-momiji
  .rachel .icon-rachel
  .tamaki .icon-tamaki
  {
    border: none;
    background: rgba(90,30,30,1);
  }



.kasumi .charaImg img { width: 104%; left: -5%; top: 60px; }
.helena .charaImg img { width: 78%; left: -8%; top: 60px; }
.hayate .charaImg img { width: 100%; left: 12%; top: 60px; }
.hayabusa .charaImg img { width: 106%; left: -20%; top: 50px; }
.jann .charaImg img { width: 74%; left: -2%; top: 40px; }
.zack .charaImg img { width: 90%; left: -2%; top: 50px; }
.diego .charaImg img { width: 83%; left: -2%; top: 20px; }
.rig .charaImg img { width: 60%; left: -1%; top: 50px; }
.hitomi .charaImg img { width: 88%; left: 2%; top: 50px; }
.leifang .charaImg img { width: 70%; left: 5%; top: 60px; }
.ayane .charaImg img { width: 110%; left: -23%; top: 50px; }
.marie .charaImg img { width: 90%; left: -4%; top: 50px; }
.honoka .charaImg img { width: 68%; left: 3%; top: 60px; }
.bayman .charaImg img { width: 100%; left: -1%; top: 50px; }
.bass .charaImg img { width: 122%; left: -7%; top: -30px; }
.tina .charaImg img { width: 126%; left: -2%; top: 60px; }
.mila .charaImg img { width: 90%; left: -14%; top: 50px; }
.christie .charaImg img { width: 78%; left: -4%; top: 54px; }
.nico .charaImg img { width: 91%; left: -14%; top: 60px; }
.kokoro .charaImg img { width: 65%; left: 1%; top: 50px; }
.lamariposa .charaImg img { width: 116%; left: 5%; top: 20px; }
.brad .charaImg img { width: 98%; left: 0%; top: 60px; }
.eliot .charaImg img { width: 86%; left: 1%; top: 60px; }
.nyotengu .charaImg img { width: 160%; left: -26%; top: 60px; }
.phase4 .charaImg img { width: 130%; left: -20%; top: 10px; }
.raidou .charaImg img { width: 130%; left: -12%; top: 10px; }
.mai .charaImg img { width: 118%; left: -20%; top: 40px; }
.kula .charaImg img { width: 130%; left: -2%; top: 70px; }
.momiji .charaImg img { width: 140%; left: -18%; top: 30px; }
.rachel .charaImg img { width: 110%; left: -5%; top: 40px; }
.tamaki .charaImg img { width: 110%; left: -15%; top: 50px; }