/* Character
----------------------------------------*/
.character {
  border-top: solid 2px #f2f2f2;
}

.character__contents {
  min-height: 675px;
}

/* Index */
.character__list {
  margin-right: -20px;
}

.character__list-item {
  position: relative;
  float: left;
  padding-top: 170px;
  width: 270px;
  border-bottom: solid 2px #f2f2f2;
  padding: 170px 0 20px;
  margin: 0 20px 20px 0;
  box-sizing: border-box;
}
.character__list-item a {
  transition: opacity .7s ease;
}
.character__list-item a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.character__list-item a:hover .btn-more {
  background-color: #ff80aa;
}

.character__list-bottom .btn-more {
  float: left;
}

.character__name {
  float: left;
  margin: 0;
  width: 212px;
}

.character__images {
  position: absolute;
  top: 0;
  left: 0;
}

.character__images img {
  width: 270px;
  height: auto;
}

/* Details */
.character__visual {
  margin-bottom: 28px;
}
.character__visual img {
  width: 100%;
}

.character__info {
  margin-top: 28px;
  color: #ff6699;
  font-size: 12px;
  width: 30%;
  float: left;
  padding-right: 20px;
  box-sizing: border-box;
  border-right: solid 2px #f2f2f2;
  padding-bottom: 10px;
}
.character__info h3 {
  margin: 0;
  font-size: 32px;
  font-weight: 400;
  -webkit-animation: .7s slideIn ease-in-out alternate backwards;
          animation: .7s slideIn ease-in-out alternate backwards;
}

.character__notation {
  margin: 0;
  -webkit-animation: .7s .2s slideIn ease-in-out alternate backwards;
          animation: .7s .2s slideIn ease-in-out alternate backwards;
}

.character__voice {
  margin: 0;
  -webkit-animation: .7s .4s slideIn ease-in-out alternate backwards;
          animation: .7s .4s slideIn ease-in-out alternate backwards;
}

.character__profile {
  font-size: 10px;
  color: #333333;
  margin: 12px 0 0;
  letter-spacing: 0;
  -webkit-animation: 1s .8s fadeIn ease-in-out alternate backwards;
          animation: 1s .8s fadeIn ease-in-out alternate backwards;
}
.character__profile p {
  margin: 0;
}

.character__serif {
  font-size: 18px;
  color: #ff6699;
}

.character__details {
  margin-top: 28px;
  float: left;
  width: 70%;
  box-sizing: border-box;
  font-size: 14px;
  padding-left: 30px;
  line-height: 1.7;
  letter-spacing: -.01em;
}

.character__serif {
  -webkit-animation: 1s 1s fadeIn ease-in-out alternate backwards;
          animation: 1s 1s fadeIn ease-in-out alternate backwards;
}

.character__description {
  -webkit-animation: 1s 1.2s fadeIn ease-in-out alternate backwards;
          animation: 1s 1.2s fadeIn ease-in-out alternate backwards;
}

.character__deremaga {
  -webkit-animation: 1s 1.4s fadeIn ease-in-out alternate backwards;
          animation: 1s 1.4s fadeIn ease-in-out alternate backwards;
}

.character__deremaga a {
  text-decoration: underline;
}
.character__deremaga a:after {
  content: '';
  width: 18px;
  height: 18px;
  background: url(../img/common/icon_blank.png) no-repeat left center;
  display: inline-block;
  position: relative;
  top: 3px;
  margin-left: 5px;
}
.character__deremaga a:hover { text-decoration: none; }

/* Navigation */
.character__nav {
/* display: none; */
  margin-top: 80px;
  padding: 0 16px;
}
.character__nav .btn-back {
  margin: 40px auto 0;
  width: 190px;
  height: 50px;
  font-size: 15px;
  line-height: 50px;
  background-color: #ffb2cc;
  padding-left: 72px;
}
.character__nav .btn-back:hover {
  opacity:0.7;
}
.btn-back:after {
left: 34px;
}
.character__nav-item {
  float: left;
  margin: 0 6px 20px;
}
.character__nav-item a {
  display: block;
  transition: opacity .7s ease;
}
.character__nav-item a:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
.character__nav-item img {
  width: 90px;
}

.character__nav-name {
  display: block;
  color: #ff80aa;
  font-size: 12px;
  margin-top: 5px;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
  }

  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
  }

  100% {
    opacity: 1;
    filter: alpha(opacity=100);
  }
}

@-webkit-keyframes slideIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }

  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

@keyframes slideIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
  }

  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
h3.cinderellera_project{
  background-color: #ff80aa;
  margin: 20px 0;
  padding: 6px 16px;
  color: #fff;
  display: inline-block;
  font-size: 17px;
  padding: 8px 14px 2px\9
  /* Less to IE10 */
  /* IE11 */
  margin: 1;
}
h3.cinderellera_project *::-ms-backdrop, h3.cinderellera_project {
  padding: 8px 14px 2px;
}
h3.cinderellera_project2{
  background-color: #ff80aa;
  margin: 0 6px 20px;
  padding: 4px 14px;
  color: #fff;
  display: inline-block;
  font-size: 18px;
  padding: 8px 14px 2px\9
  /* Less to IE10 */
  /* IE11 */
  margin: 1;
}
h3.cinderellera_project2 *::-ms-backdrop, h3.cinderellera_project2 {
  padding: 8px 14px 2px;
}
.txt_moreIdols{
    text-align: center;
    margin: 0 0 50px;
    padding: 20px 0;
    border-bottom: solid 2px #f2f2f2;
}
.txt_moreIdols2{
    text-align: center;
    border-bottom: solid 2px #f2f2f2;
    padding-bottom: 90px;
    margin-bottom: 40px;
}

.img_moreIdols {
  text-align: center;
  margin-top: 30px;
}

.character__serif {
  margin-left: -10px;
}
/*************************
Append in 2015.1.23
*************************/

.other_idols{
  clear:both;
 /* padding: 50px 0 0; */
}
.other_idols .character__list-item{
  min-height: 265px;
}
.other_idols .character__name,
.other_staff .character__name{
    color: #ff6699;
    width: 272px;
}
.other_idols .character__lead,
.other_staff .character__lead{
    font-size: 10px;
    margin-bottom: 10px;
    height: 30px;
}
.other_idols .character__cv,
.other_staff .character__cv{
  margin: 0;
  font-size: 14px;
}
.blue_napoleon{
  width: 850px;
  margin: 0;
  padding: 0 0 50px;
  clear: both;
}
.blue_napoleon .character__images{
  float:left;
  width:500px;
  margin-top: 70px;
}
.blue_napoleon .character__images img{
  float:left;
  width: 560px;
}
.blue_napoleon .character__list-bottom{
  float:right;
  margin-top: -15px;
}

.unit_name{
    color: #ff6699;
    font-weight: bold;
}
.unit_name img{
  display:block;
  margin: 20px auto 0;
  max-width: 260px;
}
p.member{
  background-color: #ff80aa;
  margin: 25px 0 5px;
  padding: 6px 16px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 14px 2px\9
  /* Less to IE10 */
  /* IE11 */
  margin: 1;
}
.unit_member__child {
  margin-bottom: 15px;
  width:270px;
}
.unit_title{
    color: #ff80aa;
    font-size: 22px;
    margin: 0;
}

.cg_unit{
  width: 850px;
  margin: 0;
  padding: 25px 0;
  clear: both;
  min-height: 360px;
}
.cg_unit .character__images{
  top: 25px;
  width:500px;
}
.cg_unit .character__images img{
  width: 560px;
}
.cg_unit .character__list-bottom{
  float:right;
  min-height: 315px;
}
.cg_unit .unit_name{
  text-align:center;
  font-size: 20px;
  margin: 0;
}
#cg_unit_01 {
}
.unit__link {
  margin-top: 15px;
  margin-right: -6px;
  margin-bottom: 30px;
}

.unit__link li {
  text-align: center;
  float: left;
  border-radius: 3px;
  margin-right: 6px;
  margin-bottom: 6px;
  opacity: .6;
  transition: opacity .7s ease;
  color: #fff;
  padding: 3px 7px;
}

.unit__link li:hover{
  opacity:1;
  cursor: pointer;
}
.item_red { background-color: #FB4B4B; }
.item_pink { background-color: #ff80aa; }
.item_orange { background-color: #ff9580; }
.item_yellow { background-color: #ffb54c; }
.item_green { background-color: #88d13f; }
.item_emerald { background-color: #52cca3; }
.item_blue { background-color: #50b4e5; }
.item_cyan { background-color: #1099DC; }
.item_purple { background-color: #B17AED; }