.mainContents {
  position: relative;
  height: 100%;
}
.mainContents .contentsHeader {
  position: relative;
  height: 80px;
  background-color: #fff;
  z-index: 1;
}
.mainContents .contentsHeader__logo {
  position: absolute;
  top: 0;
  left: 24px;
  right: auto;
  bottom: 0;
  margin: auto;
  width: 174px;
  height: 60px;
  font-size: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px 0 0 10px;
  text-align: left;
}
.mainContents .contentsHeader__logo .flower {
  position: absolute;
}
.mainContents .contentsHeader__logo .flower img {
  width: 100%;
}
.mainContents .contentsHeader__logo .flower_1 {
  top: 0;
  left: 0;
}
.mainContents .contentsHeader__logo .flower_2 {
  width: 20px;
  height: 20px;
  bottom: 0;
  right: 0;
}
.mainContents .contentsHeader__logo .flower_2 img {
  -webkit-transform: rotate(15deg);
      -ms-transform: rotate(15deg);
          transform: rotate(15deg);
}
.mainContents .contentsHeader__logo .letter {
  margin-right: 2px;
  display: inline-block;
  vertical-align: middle;
}
@-webkit-keyframes loading-flower-animation1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes loading-flower-animation1 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes loading-flower-animation2 {
  0% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@keyframes loading-flower-animation2 {
  0% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  100% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
.mainContents .contentsHeader__logo .flower_1 {
  width: 22px;
  height: 22px;
}
.mainContents .contentsHeader__navigatons {
  margin-left: 220px;
  padding-top: 7px;
  font-size: 0;
}
.mainContents .contentsHeader__navigaton {
  margin-right: 4px;
  display: inline-block;
}
.mainContents .contentsHeader__navigaton .button {
  position: relative;
  width: 66px;
  height: 66px;
  visibility: hidden;
}
.mainContents .contentsHeader__navigaton .button:hover .icon, .mainContents .contentsHeader__navigaton .button.curr .icon {
  border-width: 3px;
}
.mainContents .contentsHeader__navigaton .button:hover .icon img, .mainContents .contentsHeader__navigaton .button.curr .icon img {
  opacity: 1;
}
.mainContents .contentsHeader__navigaton .icon {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 60px;
  height: 60px;
  -webkit-border-radius: 10px;
          border-radius: 10px;
  overflow: hidden;
  display: block;
  -webkit-transition: border-width 100ms linear;
  transition: border-width 100ms linear;
}
.mainContents .contentsHeader__navigaton .icon img {
  opacity: 0.6;
}
.mainContents .contentsHeader__navigaton_1 .icon {
  border: 0px solid #f98d92;
}
.mainContents .contentsHeader__navigaton_2 .icon {
  border: 0px solid #325ba0;
}
.mainContents .contentsHeader__navigaton_3 .icon {
  border: 0px solid #f9c026;
}
.mainContents .contentsHeader__navigaton_4 .icon {
  border: 0px solid #68aa46;
}
.mainContents .contentsHeader__navigaton_5 .icon {
  border: 0px solid #ed415a;
}
.mainContents .contentsHeader__link {
  position: absolute;
  top: 0;
  left: auto;
  right: 20px;
  bottom: 0;
  margin: auto;
  height: 40px;
}
.mainContents .contentsHeader__link a {
  display: block;
  width: 192px;
  height: 38px;
  overflow: hidden;
  border: 1px solid #763329;
  -webkit-border-radius: 3px;
          border-radius: 3px;
  -webkit-transition: background-color 150ms linear;
  transition: background-color 150ms linear;
  background-color: rgba(255, 255, 255, 0.3);
}
.mainContents .contentsHeader__link a img {
  position: relative;
  top: 0;
}
.mainContents .contentsHeader__link a:hover {
  background-color: #763329;
}
.mainContents .contentsHeader__link a:hover img {
  position: relative;
  top: -100%;
}
.mainContents .characters {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-top: 80px;
  width: 100%;
  height: 100%;
}
.mainContents .characters[data-hover-index='1'] .character_2 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='1'] .character_3 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='1'] .character_4 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='1'] .character_5 .character__thumb__inner .parson img {
  opacity: 0.7;
}
.mainContents .characters[data-hover-index='2'] .character_1 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='2'] .character_3 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='2'] .character_4 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='2'] .character_5 .character__thumb__inner .parson img {
  opacity: 0.7;
}
.mainContents .characters[data-hover-index='3'] .character_1 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='3'] .character_2 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='3'] .character_4 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='3'] .character_5 .character__thumb__inner .parson img {
  opacity: 0.7;
}
.mainContents .characters[data-hover-index='4'] .character_1 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='4'] .character_2 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='4'] .character_3 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='4'] .character_5 .character__thumb__inner .parson img {
  opacity: 0.7;
}
.mainContents .characters[data-hover-index='5'] .character_1 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='5'] .character_2 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='5'] .character_3 .character__thumb__inner .parson img,
.mainContents .characters[data-hover-index='5'] .character_4 .character__thumb__inner .parson img {
  opacity: 0.7;
}
.mainContents .characters__inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.mainContents .character {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 20%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}
.mainContents .character__detail {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
}
.mainContents .character__detail__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: block;
  cursor: pointer;
  z-index: 1;
}
.mainContents .character__detail__close .circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-border-radius: 50%;
          border-radius: 50%;
}
.mainContents .character__detail__close .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 150ms linear;
  transition: -webkit-transform 150ms linear;
  transition: transform 150ms linear;
  transition: transform 150ms linear, -webkit-transform 150ms linear;
}
.mainContents .character__detail__close .icon:before, .mainContents .character__detail__close .icon:after {
  content: ' ';
  display: block;
  width: 18px;
  height: 1px;
  background-color: #763329;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 1px;
}
.mainContents .character__detail__close .icon:before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.mainContents .character__detail__close .icon:after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.mainContents .character__detail__close:hover .circle {
  background-color: #763329;
}
.mainContents .character__detail__close:hover .icon {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.mainContents .character__detail__close:hover .icon:before, .mainContents .character__detail__close:hover .icon:after {
  background-color: #fff;
}
.mainContents .character__detail__label {
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 200%;
  height: 313px;
}
.mainContents .character__detail__bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 0 0;
}
.mainContents .character__detail__person {
  position: absolute;
  top: 0;
  left: 50%;
  display: table;
  height: 100%;
}
.mainContents .character__detail__person .person {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.mainContents .character__detail__person .photo {
  position: relative;
  display: inline-block;
}
.mainContents .character__detail__person .shadow {
  position: absolute;
}
.mainContents .character__detail__person .flower {
  position: absolute;
}
.mainContents .character__detail__person .chara {
  position: relative;
}
.mainContents .character__detail__texts {
  position: absolute;
  bottom: 0;
  left: 40px;
}
.mainContents .character__detail__texts .name {
  margin: 14px 0 0 0;
}
.mainContents .character__detail__texts .voice {
  margin: 12px 0 0 0;
}
.mainContents .character__detail__texts .description {
  margin: 20px 0 0 0;
}
.mainContents .character__detail__texts .btns {
  margin: 20px 0 0 0;
  font-size: 0;
  line-height: 1;
}
.mainContents .character__detail__texts button {
  display: inline-block;
  margin-right: 10px;
  width: 108px;
  height: 28px;
  -webkit-border-radius: 3px;
          border-radius: 3px;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0);
  overflow: hidden;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-transition: background-color 150ms linear;
  transition: background-color 150ms linear;
  cursor: pointer;
}
.mainContents .character__detail__texts button img {
  position: relative;
  top: 0;
}
.mainContents .character__detail__texts button:hover, .mainContents .character__detail__texts button.curr {
  background-color: white;
}
.mainContents .character__detail__texts button:hover img, .mainContents .character__detail__texts button.curr img {
  position: relative;
  top: -28px;
}
.mainContents .character__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 20.1%;
  height: 100%;
  display: table;
}
.mainContents .character__thumb__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transition: -webkit-transform 1000ms linear;
  transition: -webkit-transform 1000ms linear;
  transition: transform 1000ms linear;
  transition: transform 1000ms linear, -webkit-transform 1000ms linear;
}
.mainContents .character__thumb__cell {
  display: table-cell;
  vertical-align: middle;
}
.mainContents .character__thumb__inner {
  width: 100%;
  margin: -50px auto 0 auto;
  max-width: 204px;
  max-height: 500px;
  height: 80%;
}
.mainContents .character__thumb__inner .parson {
  position: relative;
  width: 100%;
  height: 100%;
}
.mainContents .character__thumb__inner .parson:before {
  content: ' ';
  width: 0px;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.mainContents .character__thumb__inner .parson img {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  -webkit-transition: opacity 300ms linear, -webkit-transform 2000ms linear;
  transition: opacity 300ms linear, -webkit-transform 2000ms linear;
  transition: opacity 300ms linear, transform 2000ms linear;
  transition: opacity 300ms linear, transform 2000ms linear, -webkit-transform 2000ms linear;
}
.mainContents .character__thumb__inner .name {
  position: absolute;
  bottom: 24px;
  left: 0;
  width: 100%;
}
.mainContents .character__thumb__inner .name .text {
  margin: 0 auto 0 auto;
  padding: 0 10px 0 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 100%;
  width: 210px;
}
.mainContents .character__thumb__inner .name .text img {
  width: 100%;
}
.mainContents .character.active {
  cursor: default;
}
.mainContents .character.active .character__default__bg {
  opacity: 0;
}
.mainContents .character.active .character__default__persons {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.mainContents .character_1 {
  left: 0;
}
.mainContents .character_1 .character__detail {
  background-image: url(../image/characters/character_yukiyuna_bg_detail.jpg);
}
.mainContents .character_1 .character__detail__label {
  background-color: #f98d92;
}
.mainContents .character_1 .character__detail__bg_default {
  background-image: url(../image/characters/character_yukiyuna_bg_default.png);
}
.mainContents .character_1 .character__detail__bg_transform {
  background-image: url(../image/characters/character_yukiyuna_bg_transform.png);
}
.mainContents .character_1 .character__detail__person_transform .photo {
  margin-left: -30px;
}
.mainContents .character_1 .character__detail__person_transform .shadow {
  top: 0px;
  left: 0px;
}
.mainContents .character_1 .character__detail__person_transform .flower {
  bottom: -60px;
  left: -166px;
}
.mainContents .character_1 .character__detail__person_default .photo {
  margin-left: 140px;
}
.mainContents .character_1 .character__detail__person_default .shadow {
  top: 0px;
  left: 0px;
}
.mainContents .character_1 .character__detail__person_default .flower {
  bottom: -70px;
  left: -236px;
}
.mainContents .character_1 .character__thumb__bg {
  background-image: url(../image/characters/character_yukiyuna_thumb_bg.jpg);
}
.mainContents .character_2 {
  left: 20%;
}
.mainContents .character_2 .character__detail {
  background-image: url(../image/characters/character_togomiori_bg_detail.jpg);
}
.mainContents .character_2 .character__detail__label {
  background-color: #325ba0;
}
.mainContents .character_2 .character__detail__bg_default {
  background-image: url(../image/characters/character_togomiori_bg_default.png);
}
.mainContents .character_2 .character__detail__bg_transform {
  background-image: url(../image/characters/character_togomiori_bg_transform.png);
}
.mainContents .character_2 .character__detail__person_transform .photo {
  margin-left: -260px;
  margin-top: 15px;
}
.mainContents .character_2 .character__detail__person_transform .shadow {
  top: 0px;
  left: 11px;
}
.mainContents .character_2 .character__detail__person_transform .flower {
  bottom: 32px;
  left: 156px;
}
.mainContents .character_2 .character__detail__person_default .photo {
  margin-left: 140px;
}
.mainContents .character_2 .character__detail__person_default .shadow {
  top: -20px;
  left: 0px;
}
.mainContents .character_2 .character__detail__person_default .flower {
  bottom: -88px;
  left: -248px;
}
.mainContents .character_2 .character__thumb__bg {
  background-image: url(../image/characters/character_togomiori_thumb_bg.jpg);
}
.mainContents .character_3 {
  left: 40%;
}
.mainContents .character_3 .character__detail {
  background-image: url(../image/characters/character_inubozakifu_bg_detail.jpg);
}
.mainContents .character_3 .character__detail__label {
  background-color: #f9c026;
}
.mainContents .character_3 .character__detail__bg_default {
  background-image: url(../image/characters/character_inubozakifu_bg_default.png);
}
.mainContents .character_3 .character__detail__bg_transform {
  background-image: url(../image/characters/character_inubozakifu_bg_transform.png);
}
.mainContents .character_3 .character__detail__person_transform .photo {
  margin-left: 24px;
}
.mainContents .character_3 .character__detail__person_transform .shadow {
  top: 0px;
  left: 0px;
}
.mainContents .character_3 .character__detail__person_transform .flower {
  bottom: -36px;
  left: -166px;
}
.mainContents .character_3 .character__detail__person_default .photo {
  margin-left: 150px;
}
.mainContents .character_3 .character__detail__person_default .shadow {
  top: 0px;
  left: 0px;
}
.mainContents .character_3 .character__detail__person_default .flower {
  bottom: -64px;
  left: -260px;
}
.mainContents .character_3 .character__thumb__bg {
  background-image: url(../image/characters/character_inubozakifu_thumb_bg.jpg);
}
.mainContents .character_4 {
  left: 60%;
}
.mainContents .character_4 .character__detail {
  background-image: url(../image/characters/character_inubozakiitsuki_bg_detail.jpg);
}
.mainContents .character_4 .character__detail__label {
  background-color: #68aa46;
}
.mainContents .character_4 .character__detail__bg_default {
  background-image: url(../image/characters/character_inubozakiitsuki_bg_default.png);
}
.mainContents .character_4 .character__detail__bg_transform {
  background-image: url(../image/characters/character_inubozakiitsuki_bg_transform.png);
}
.mainContents .character_4 .character__detail__person_transform .photo {
  margin-left: -30px;
}
.mainContents .character_4 .character__detail__person_transform .shadow {
  top: 0px;
  left: 0px;
}
.mainContents .character_4 .character__detail__person_transform .flower {
  bottom: -70px;
  left: -88px;
}
.mainContents .character_4 .character__detail__person_default .photo {
  margin-left: 200px;
}
.mainContents .character_4 .character__detail__person_default .shadow {
  top: 0px;
  left: -44px;
}
.mainContents .character_4 .character__detail__person_default .flower {
  bottom: -60px;
  left: -320px;
}
.mainContents .character_4 .character__thumb__bg {
  background-image: url(../image/characters/character_inubozakiitsuki_thumb_bg.jpg);
}
.mainContents .character_5 {
  left: 80%;
}
.mainContents .character_5 .character__detail {
  background-image: url(../image/characters/character_miyoshikarin_bg_detail.jpg);
}
.mainContents .character_5 .character__detail__label {
  background-color: #ed415a;
}
.mainContents .character_5 .character__detail__bg_default {
  background-image: url(../image/characters/character_miyoshikarin_bg_default.png);
}
.mainContents .character_5 .character__detail__bg_transform {
  background-image: url(../image/characters/character_miyoshikarin_bg_transform.png);
}
.mainContents .character_5 .character__detail__person_transform .photo {
  margin-left: -30px;
}
.mainContents .character_5 .character__detail__person_transform .shadow {
  top: 0px;
  left: 0px;
}
.mainContents .character_5 .character__detail__person_transform .flower {
  bottom: -60px;
  left: -90px;
}
.mainContents .character_5 .character__detail__person_default .photo {
  margin-left: 206px;
}
.mainContents .character_5 .character__detail__person_default .shadow {
  top: 0px;
  left: -31px;
}
.mainContents .character_5 .character__detail__person_default .flower {
  bottom: -50px;
  left: -302px;
}
.mainContents .character_5 .character__thumb__bg {
  background-image: url(../image/characters/character_miyoshikarin_thumb_bg.jpg);
}