/*==========================================
charaArea
==========================================*/
.charaArea {
  position: relative;
  background: url("/dreaming/assets/img/chara/index/chara_title_bg.jpg") center top repeat-y; }

.charaArea .titleWrap {
  padding: 70px 0 0;
  width: 100%;
  height: 176px;
  text-align: center;
  overflow: hidden; }

.charaArea .titleWrap img {
  margin-top: 55px; }

.charaArea .charaList {
  position: relative;
  font-size: 0;
  background: #f0f0f0; }

.charaArea .charaList li {
  position: relative;
  display: inline-block;
  width: 16.666%;
  height: auto;
  font-size: 0;
  overflow: hidden; }

.charaArea .charaList li img {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 10; }

.charaArea .charaList li .bgFirst {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1; }

.charaArea .charaList li .bg {
  position: absolute;
  top: 100vh;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  -webkit-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease; }

.charaArea .charaList .chara01 .bg, .charaArea .charaList .chara01 .bgFirst {
  background: #00ccff; }

.charaArea .charaList .chara02 .bg, .charaArea .charaList .chara02 .bgFirst {
  background: #ff99cc; }

.charaArea .charaList .chara03 .bg, .charaArea .charaList .chara03 .bgFirst {
  background: #ff8400; }

.charaArea .charaList .chara04 .bg, .charaArea .charaList .chara04 .bgFirst {
  background: #26bc69; }

.charaArea .charaList .chara05 .bg, .charaArea .charaList .chara05 .bgFirst {
  background: #ffcc00; }

.charaArea .charaList .chara06 .bg, .charaArea .charaList .chara06 .bgFirst {
  background: #c8a5e9; }

.charaArea .charaList .chara07 .bg, .charaArea .charaList .chara07 .bgFirst {
  background: #d6ff43; }

.charaArea .charaList .chara08 .bg, .charaArea .charaList .chara08 .bgFirst {
  background: #adc7ca; }

.charaArea .charaList .chara09 .bg, .charaArea .charaList .chara09 .bgFirst {
  background: #70007a; }

.charaArea .charaList .chara10 .bg, .charaArea .charaList .chara10 .bgFirst {
  background: #3e76d4; }

.charaArea .charaList .chara11 .bg, .charaArea .charaList .chara11 .bgFirst {
  background: #ff4e00; }

.charaArea .charaList .chara12 .bg, .charaArea .charaList .chara12 .bgFirst {
  background: #d5d3d3; }

.charaArea .charaList .chara13 .bg, .charaArea .charaList .chara13 .bgFirst {
  background: #f0e4a1; }

.charaArea .charaList .chara14 .bg, .charaArea .charaList .chara14 .bgFirst {
  background: #128c82; }

.charaArea .charaList .chara15 .bg, .charaArea .charaList .chara15 .bgFirst {
  background: #ffcec7; }

.charaArea .charaList .chara16 .bg, .charaArea .charaList .chara16 .bgFirst {
  background: #5be2c0; }

.charaArea .charaList .chara17 .bg, .charaArea .charaList .chara17 .bgFirst {
  background: #b49969; }

.charaArea .charaList .chara18 .bg, .charaArea .charaList .chara18 .bgFirst {
  background: #a32f18; }

.charaArea .charaList .chara19 .bg, .charaArea .charaList .chara19 .bgFirst {
  background: #515151; }

.charaArea .charaList .chara20 .bg, .charaArea .charaList .chara20 .bgFirst {
  background: #de5a69; }

.charaArea .charaList li:hover .bg {
  top: 0; }

.charaArea .charaList02 {
  background: url("/dreaming/assets/img/chara/index/chara_andmore_bg.jpg") 50% 0 no-repeat; }

.charaArea .charaList03 {
  padding: 0 10% 0 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  background-image: url(/dreaming/assets/img/chara/index/chara_other_bg.jpg); }

.charaArea .charaList02 li {
  width: 10%; }

.charaArea .charaList03 li {
  width: 25%; }

.charaArea .charaList .chara07,
.charaArea .charaList .chara08,
.charaArea .charaList .chara09,
.charaArea .charaList .chara10,
.charaArea .charaList .chara11,
.charaArea .charaList .chara12,
.charaArea .charaList .chara13,
.charaArea .charaList .chara14,
.charaArea .charaList .chara15,
.charaArea .charaList .chara16,
.charaArea .charaList .chara17,
.charaArea .charaList .chara18,
.charaArea .charaList .chara19,
.charaArea .charaList .chara20 {
  background: #f0f0f0; }

.charaArea .charaList .newIcon {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: auto;
  z-index: 100; }

.charaArea .charaList .newIcon img {
  width: 100%;
  height: auto; }

.chara_dia_link {
  margin: 0;
  padding: 66px 0;
  text-align: center; }
  .chara_dia_link a {
    display: inline-block;
    -webkit-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out; }
    .chara_dia_link a:hover {
      -webkit-transform: scale(1.03);
      -ms-transform: scale(1.03);
      transform: scale(1.03); }