/*
 * jQuery FlexSlider v2.4.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 and later license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 * 
 */
/* ====================================================================================================================
 * RESETS
 * ====================================================================================================================*/
.flex-container a:hover,
.flex-slider a:hover,
.flex-container a:focus,
.flex-slider a:focus {
  outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.flex-control-nav{
  display:none;
}
.flex-pauseplay span {
  text-transform: capitalize;
}
/* ====================================================================================================================
 * BASE STYLES
 * ====================================================================================================================*/
.flexslider {
  margin: 0;
  padding: 0;
}
.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
  height: 900px;
  margin: 0px 0 0;
}
.flexslider .slides > li.bg_e {
  background: url(../img/character/bg/bg_edel.jpg) top 30px center no-repeat;
}
.flexslider .slides > li.bg_s {
  background: url(../img/character/bg/bg_schwarz.png) top 30px center no-repeat;
}
.flexslider .slides img {

}
.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .flexslider .slides {
  display: block;
}
* html .flexslider .slides {
  height: 1%;
}
.no-js .flexslider .slides > li:first-child {
  display: block;
}
/* ====================================================================================================================
 * DEFAULT THEME
 * ====================================================================================================================*/
.flexslider {
  position: relative;zoom:1;
  width: 670px;
  margin: 0 auto;
}
.flexslider .slides {zoom:1;
  margin: 0px 0 0;
}
.flexslider .slides img {
  height: auto;
}

.loading .flex-viewport {
  max-height: 300px;
}




#slider .flex-direction-nav {
  display:none;
}
#slider .flex-direction-nav a {
  display: block;
  width: 15px;
  height: 20px;
  position: absolute;
  top: 50px;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
}
#slider .flex-direction-nav a:before {
  display: block;
  width: 50px;
  height: 50px;
  content: url(../img/character/thumb/arrow_left.png);
}
#slider .flex-direction-nav a.flex-next:before {
  display: block;
  width: 15px;
  height: 15px;
  content: url(../img/character/thumb/arrow_right.png);
}
#slider .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: 10px;
}
#slider .flex-direction-nav .flex-next {
  opacity: 0.7;
  left: 90px;
}


#slider  .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}
#slider  .flex-direction-nav .flex-next:hover {
  opacity: 1;
}





#carousel .flex-direction-nav a {
  display: block;
  width: 15px;
  height: 20px;
  position: absolute;
  top: 60px;
  z-index: 10;
  opacity: 0.5;
  cursor: default;
  overflow: hidden;
}

#carousel .flex-direction-nav a:before {
  display: block;
  width: 15px;
  height: 20px;
  content: "";
}
#carousel .flex-direction-nav a.flex-next:before {
  display: block;
  width: 15px;
  height: 100px;
  content: "";
}

#carousel .flex-direction-nav .flex-prev {
  opacity: 1;
  left: -25px;
  background: url(../img/character/thumb/arrow_left.png) center no-repeat;
  font-size: 0;
}
#carousel .flex-direction-nav .flex-next {
  opacity: 1;
  right: -25px;
  background: url(../img/character/thumb/arrow_right.png) center no-repeat;
}
#carousel .flex-direction-nav .flex-disabled {
  display: none;
}


#carousel .slides li{
  opacity: .7;
  transition:all 0.3s;
  cursor:pointer;
  height: 110px;
  width: 80px !important;
  overflow: hidden;
  position: relative;
  margin-left: 14px;
}
#carousel .slides li:last-child{
  /* margin:0; */
}
#carousel .slides li p{
  position: relative;
  top: 30px;
  width: 80px;
  height: 80px;
  overflow: hidden;
}
#carousel .slides li p img{
  position:absolute;
  top:0;
}
#carousel .slides li p:hover{
  opacity: .9;
}
#carousel .slides .flex-active-slide {
  opacity: 1!important;
} 
#carousel .slides .flex-active-slide p{
  opacity: 1;
}
#carousel .slides .flex-active-slide p img{
  position:absolute;
  left: -80px;
}

/**Story************************/

#slider_s .flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  padding: 0 30px;
  width: 880px;
}

#slider_s .flex-direction-nav a {
  display: block;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  z-index: 10;
  opacity: 0.5;
  cursor: default;
  overflow: hidden;
}

#slider_s .flex-direction-nav a:before {
  display: block;
  width: 50px;
  height: 50px;
  content: url(../img/character/detail/navi_prev.png);
}
#slider_s .flex-direction-nav a.flex-next:before {
  display: block;
  width: 50px;
  height: 50px;
  content: url(../img/character/detail/navi_next.png);
}

#slider_s .flex-direction-nav .flex-prev {
  opacity: 0.5;
  left: 0;
}
#slider_s .flex-direction-nav .flex-next {
  opacity: 0.5;
  left: 70px;
}
#slider_s  .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}
#slider_s  .flex-direction-nav .flex-next:hover {
  opacity: 1;
}
.flexslider .slides > li .chara{
  position:absolute;
  right: 0;
  top: 20px;
}
.flexslider .slides > li .name{
  position:absolute;
  left: 0;
  top: 100px;
}
.flexslider .slides > li .txt{
  position:absolute;
  left: 0;
  top: 275px;
  line-height:1.6em;
  width: 450px;
  font-size: 14px;
}
.flexslider .slides > li .face{
  position:absolute;
  left: 0;
  top: 420px;
}


/**/
.new {
  overflow: visible!important;
}
.new:before {
  content: "";
  display: block;
  width: 44px;
  height: 24px;
  background: url(../img/character/thumb/icon_new.png) no-repeat;
  position: absolute;
  left: 20px;
}

.audiojs audio {
}
 /*　プレイヤー（再生バー）　*/
.audiojs {
  width: 200px;
  height: 46px;
  background: none;
  overflow: hidden;
  font-family: monospace;
  font-size: 12px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  position: absolute;
  top: 654px;
  left: 0;
}
/*　再生・停止ボタン　*/
.audiojs .play-pause {
  width: 200px;
  height: 46px;
  padding: 0;
  margin: 0;
  float: left;
  overflow: hidden;
  /* border: 1px solid #3A3A3A; */
}
/*　再生・停止ボタンなどの p 要素　*/
.audiojs p {
  display: none;
  width: 200px;
  height: 46px;
  margin: 0px;
  cursor: pointer;
}
.audiojs .play {
  display: block;
}
/*　進行状態・ロードの状態を表示する部分(グレー)　*/
.audiojs .scrubber {
  display:none;
}
/*　進行状態を表示するバーの部分(薄いグレー)　*/
.audiojs .progress {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 4px;
  width: 0px;
  background: #3A3A3A;
  z-index: 1;  
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc),
  color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc));  
  background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 
  100%); */
}
/* ロード状態を表示するバーの部分（黒） */
.audiojs .loaded {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 4px;
  width: 0px;
  background: #DDDDDD;  
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222),
  color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));
  background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222
  100%); */
}
/*　現在の再生時間/総再生時間　フォント　*/
.audiojs .time {
  float: left;
  height: 28px;
  line-height: 28px;
  margin: 0px 0px 0px 8px;
  padding: 0px 0px 0px 0px;
  border-left: none;
  color: #666;
  text-shadow: none;
  display: none;
}
/*　現在の再生時間　フォント　*/
.audiojs .time em {
  padding: 0px 2px 0px 0px;
  color: #666;
  font-style: normal;
  display: none;
}
/*　時間　/の部分　*/
.audiojs .time strong {
  padding: 0px 0px 0px 2px;
  font-weight: normal;
  display: none;
}
.audiojs .error-message {
  float: left;
  display: none;
  margin: 0px 10px;
  height: 26px;
  width: 200px;
  overflow: hidden;
  line-height: 26px;
  white-space: nowrap;
  color: #fff;  
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -icab-text-overflow: ellipsis;
  -khtml-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
}
.audiojs .error-message a {
  color: #eee;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid #999;
  white-space: wrap;
}
/*　再生ボタン　*/
.audiojs .play {
  background: url(../img/character/btn_voice.png) center center no-repeat;←
  playボタン
  
  
  
  
  margin-left: 1.45px;
}
/*　読み込み中ボタン　*/
.audiojs .loading {
  /*background: url("$1") center center no-repeat;*/
  display: none;
}
/*　エラーボタン　*/
.audiojs .error {
  /*background: url("$1") center center no-repeat;*/
  display: none;
}
/*　停止ボタン　*/
.audiojs .pause {
  background: url(../img/character/btn_voice2.png) center center no-repeat;←
  pauseボタン


}
.playing .play, .playing .loading, .playing .error {
  display: none;
}
.playing .pause {
  display: block;
}
.loading .play, .loading .pause, .loading .error {
  display: none;
}
.loading .loading {
  display: block;
}
.error .time, .error .play, .error .pause, .error .scrubber, .error .loading {
  display: none;
}
.error .error {
  display: block;
}
.error .play-pause p {
  cursor: auto;
}
.error .error-message {
  display: block;
}
/*　再生している曲の情報　*/
.track-details {
  clear: both;
  height: 26px;
  width: 200px;
  padding: 0px 6px;
  background: #FFF;
  color: #3A3A3A;
  font-size: 10px;
  line-height: 26px;
}
.track-details:before {
  content: '♬ Now Playing: ';
}