.pager_item {
  position: relative;
}

.pager_item {
  color: inherit;
  cursor: pointer;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  position: relative;
}

.front,
.back {
  -webkit-backface-visibility: hidden;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  backface-visibility: hidden;
  background-position: center;
  background-size: cover;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  text-align: center;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: ease-in-out 600ms;
  transition: ease-in-out 600ms;
}

.front {
  background-size: cover;
  color: #fff;
  font-weight: 600;
  overflow: hidden;
}

.pager_item:hover .front {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.pager_item:nth-child(even):hover .front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.back {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.pager_item:hover .back {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

.pager_item:nth-child(even) .back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.pager_item:nth-child(even):hover .back {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

.c_detail_inner {
  background: url(../img/common/pt_green01.png);
  background-repeat: repeat;
  margin-bottom: 60px;
  padding: 5px 0;
}

.c_detail_inner .chara_cont {
  background: url(../img/common/yellow_bg.jpg);
  background-repeat: repeat;
}

.c_detail_inner .chara_cont .sakura_bg {
  background: url(../img/character/bg_sakura.png);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 75%;
}

.c_detail_inner .chara_cont .chara_detail {
  background: url(../img/common/bg_white.jpg);
  background-repeat: repeat;
}

.c_detail_inner .chara_cont .chara_detail .chara_detail_inner {
  margin: auto;
  position: relative;
  width: 100%;
}

.chara_main .katana {
  text-align: center;
}

.chara_main .name {
  margin-top: 10px;
  text-align: center;
}

.chara_main .name .kana {
  font-size: 1.2rem;
}

.chara_main .name span {
  display: block;
}

.chara_main .voice {
  font-size: 2rem;
  margin-top: 20px;
  text-align: center;
  text-align: center;
}

.chara_main .voice p {
  display: inline-block;
  position: relative;
}

.chara_main .voice p .comment_ico {
  position: absolute;
  right: -0.5em;
  top: 0;
  -webkit-transform: translateX(100%) translateY(-52%);
          transform: translateX(100%) translateY(-52%);
  width: 45px;
}

.chara_main .voice .cv {
  padding-left: 1em;
  position: relative;
}

.chara_main .voice .cv::before {
  background-image: url(../img/character/ico_voice.png);
  background-size: 100%;
  content: "";
  height: 43px;
  left: -1.8em;
  position: absolute;
  top: -24%;
  width: 44px;
}

.chara_main .bg_cont {
  background: url(../img/common/bg_blue.jpg);
  margin-top: 40px;
  overflow: hidden;
  padding-top: 270px;
  position: relative;
}

.chara_main .bg_cont .chara_main_inner {
  left: 0;
  position: absolute;
  right: 40px;
  top: 0;
}

.chara_main .bg_cont .bg_cont_inner {
  position: relative;
  width: 100%;
  z-index: 1;
}

.chara_main .bg_cont .img {
  width: 389px;
}

.chara_main .bg_cont .img img {
  max-height: 270px;
}

.chara_main .content {
  line-height: 36px;
  margin-top: 40px;
}

.pager_cont {
  padding-bottom: 220px;
}

.pager {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.pager a {
  display: block;
}

.pager_item {
  max-width: 130px;
  position: relative;
  width: 28%;
}

.pager_item a {
  -webkit-perspective: 1000px;
  cursor: pointer;
  display: block;
  height: 100%;
  left: 0;
  perspective: 1000px;
  position: relative;
  position: absolute;
  top: 0%;
  width: 100%;
}

.pager_item_back {
  display: block;
  margin: 0 40px;
  width: 250px;
}

.pager_item_back a {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
  border: solid 3px #ff6698;
  border-radius: 20px;
  color: #ff6698;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 2rem;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  width: 100%;
}

.pager_item_back a:hover {
  background-color: #ff6698;
  color: #fff;
}

.id61 .chara_main .bg_cont .img {
  width: 493px;
}

.comment_cont {
  padding: 0 2em;
}

.comment_cont dl {
  border-bottom: solid 1px #ff6698;
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.comment_cont dl:last-child {
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.comment_cont dl dt {
  color: #ff6698;
  margin-bottom: 7px;
}

@media only screen and (min-width: 821px) {
  .c_detail_inner .chara_cont {
    padding: 90px 0;
  }
  .c_detail_inner .chara_cont .sakura_bg {
    padding: 50px 0;
  }
  .c_detail_inner .chara_cont .chara_detail .chara_detail_inner .chra_img {
    left: 40px;
    position: absolute;
    top: 0;
    width: 33%;
    z-index: 1;
  }
  .c_detail_inner .chara_cont .chara_detail .chara_detail_inner .chra_img.middle {
    left: 10%;
  }
  .c_detail_inner .chara_cont .chara_detail .chara_detail_inner .chra_img.middle > img {
    max-height: 750px;
  }
  .c_detail_inner .chara_cont .chara_detail .chara_detail_inner .chra_img.large {
    left: 10%;
  }
  .c_detail_inner .chara_cont .chara_detail .chara_detail_inner .chra_img.large > img {
    max-height: 800px;
  }
  .c_detail_inner .chara_cont .chara_detail .chara_detail_inner .chra_img.small {
    left: 10%;
  }
  .c_detail_inner .chara_cont .chara_detail .chara_detail_inner .chra_img.small > img {
    max-height: 750px;
  }
  .chara_main_inner {
    margin: 0 40px 0 auto;
    width: 60%;
  }
  .chara_main .name .kan {
    font-size: 4.8rem;
  }
  .chara_main .bg_cont .img {
    margin: auto;
  }
  .chara_main .content {
    font-size: 1.6rem;
  }
  .pager_item {
    padding-top: 8%;
  }
  .id69
  .c_detail_inner
  .chara_cont
  .chara_detail
  .chara_detail_inner
  .chra_img.large {
      left: 2%;
    }
  .id54
.c_detail_inner
.chara_cont
.chara_detail
.chara_detail_inner
.chra_img.large {
    left: 2%;
  }
  .id44
.c_detail_inner
.chara_cont
.chara_detail
.chara_detail_inner
.chra_img.large {
    left: 3%;
  }
  .id12
.c_detail_inner
.chara_cont
.chara_detail
.chara_detail_inner
.chra_img.small {
    left: 3%;
  }
}

@media only screen and (max-width: 820px) {
  .c_detail_inner .chara_cont {
    padding: 45px 0;
  }
  .c_detail_inner .chara_cont .sakura_bg {
    padding: 0 0 45px;
  }
  .c_detail_inner .chara_cont .chara_detail .chara_detail_inner .chra_img {
    position: relative;
    text-align: right;
    z-index: 1;
  }
  .c_detail_inner .chara_cont .chara_detail .chara_detail_inner .chra_img > img {
    margin-top: -30%;
  }
  .c_detail_inner .chara_cont .chara_detail .chara_detail_inner .chra_img.middle > img {
    max-height: 500px;
  }
  .c_detail_inner .chara_cont .chara_detail .chara_detail_inner .chra_img.large > img {
    max-height: 525px;
  }
  .c_detail_inner .chara_cont .chara_detail .chara_detail_inner .chra_img.small > img {
    max-height: 475px;
  }
  .chara_main .katana img {
    margin-top: -20px;
  }
  .chara_main .name .kan {
    font-size: 3.5rem;
  }
  .chara_main .content {
    font-size: 1.4rem;
    padding: 0 2em;
  }
  .sp_only.sp_mark {
    left: 7%;
    max-width: 210px;
    position: absolute;
    top: 20%;
    width: 38%;
    z-index: -1;
  }
  .pager {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  .pager_item.prev {
    margin-right: 15%;
  }
  .pager_item {
    padding-top: 35%;
    width: 40%;
  }
  .pager_item_back {
    margin-top: 26px;
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
    width: 100%;
  }
}