@charset "utf-8";

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

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes characterFadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes characterFadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

#wrap {
	background-image:url('../images/character/bg.png'),
					  url('../images/shared/bg_page.png');
	background-repeat:no-repeat,
					  repeat;
	background-position:center 0,
						0 0;
}

#container {
  background: url('../images/character/bg_character.png') no-repeat center 0;
  margin-top: -30px;
}
.character-title {
  position:relative;
  width: 750px;
  margin: 0 auto;
}
.character-title h1 {
  position:absolute;
  top:43px;
  left: 50%;
  margin-left: -220px;
  z-index: 10;
}
.character-title .cloud_left {
  position:absolute;
  top:10px;
  left:0px;
  z-index: 9;
}
.character-title .cloud_right {
  position:absolute;
  top:10px;
  right:0px;
  z-index: 8;
}

.onload .slick-prev,.onload .slick-next,
.onload .slick-dots {
  -webkit-animation-name: characterFadeIn;
  animation-name: characterFadeIn;
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
  -webkit-animation-timing-function: cubic-bezier(0.06, 0.82, 0.27, 1.62);
  animation-timing-function: cubic-bezier(0.06, 0.82, 0.27, 1.62);
  -webkit-animation-delay: 1800ms;
  animation-delay: 1800ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.onload .slick-list {
  -webkit-animation-name: characterFadeIn;
  animation-name: characterFadeIn;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-timing-function: cubic-bezier(0.06, 0.82, 0.27, 1.62);
  animation-timing-function: cubic-bezier(0.06, 0.82, 0.27, 1.62);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.page-contents--character {
  
}


@media screen and (min-width: 751px) {
.character-slide__item {
  width: 100vw;
  min-width: 900px;
  max-width: 100%;
  height: 1040px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  font-size: 0;
  opacity: 0;
  -webkit-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
}
}
@media screen and (max-width: 750px) {
.character-slide__item {
  width: 100vw;
  min-width: 900px;
  max-width: 100%;
  height: 925px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  font-size: 0;
  opacity: 0;
  -webkit-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
}
}

.character-slide__item {
  margin-top:140px;
}

.slick-list {
  opacity: 0;
}

.character-slide__item--current {
  opacity: 1;
}

.character-slide__item--1 {
  background-image: url('../images/character/character_1.png');
  background-position: 50% 50px;
}

.character-slide__item--2 {
  background-image: url('../images/character/character_2.png');
  background-position: 50% 50px;
}

.character-slide__item--3 {
  background-image: url('../images/character/character_3.png');
  background-position: 50% 50px;
}

.character-slide__item--4 {
  background-image: url('../images/character/character_4.png');
  background-position: 50% 50px;
}

.character-slide__item--5 {
  background-image: url('../images/character/character_5.png');
  background-position: 50% 50px;
}

.character-slide__item--6 {
  background-image: url('../images/character/character_6.png');
  background-position: 50% 50px;
}

.character-slide__item--7 {
  background-image: url('../images/character/character_7.png');
  background-position: 50% 50px;
}

.character-slide__item--8 {
  background-image: url('../images/character/character_8.png');
  background-position: 50% 50px;
}