@charset "utf-8";




/* webfont
----------------------------- */
.voice {
	font-family: "Yu Mincho", YuMincho, serif, sans-serif;
}


/* モバイル時.rowの横マージン解除
----------------------------- */
/*
@media (max-width: 767px) {
	.container > .row > [class*='col-'] {
	    padding-right:0;
	    padding-left:0;
	}
}
*/




/* モバイル時だけ切り替えるセリフ画像
----------------------------- */
.serifu {  /* 画像縮みすぎるのでネガティブマージンで横幅無理やり広げる */
  margin: 0 -20px 0 0;
}



/* 立ち絵切り替えスライダー
----------------------------- */
.tachie_space {
	position: relative;
  z-index: 2;

  border-right: 1px solid #aaa;  /* 立ち絵右横の縦線 */
}
#tsumugi .tachie_space {
  border-right: 1px solid #ddd;  /* 立ち絵右横の縦線 */
}
.tachie_space:after {	/* 立ち絵下のグラデ線 */
	content:"";
	display: block;
	height:1px;
	background-image: -webkit-linear-gradient(left,rgba(103, 103, 103, 0) 0%,rgb(50, 50, 50) 20%,rgb(50, 50, 50) 80%,rgba(103, 103, 103, 0) 100%);
    background-image: linear-gradient(to right,rgba(103, 103, 103, 0) 0%,rgb(50, 50, 50) 20%,rgb(50, 50, 50) 80%,rgba(103, 103, 103, 0) 100%);
    background-image: -ms-linear-gradient(left,rgba(103, 103, 103, 0) 0%,rgb(50, 50, 50) 20%,rgb(50, 50, 50) 80%,rgba(103, 103, 103, 0) 100%);
}
.carousel-control.right, .carousel-control.left {	/* スライダー左右切り替えボタンの背景グラデ消し */
	background-image: none;
}

.carousel-indicators li {    /* スライダーの下のボタン */
    border-radius: 0;
    box-shadow: 1px 0 0 #666,
                -1px 0 0 #666,
                0 1px 0 #666,
                0 -1px 0 #666;

	-ms-transition: all .2s ease-out;
	transition: all .2s ease-out;

  box-shadow: 1px 0 0 #ccc, -1px 0 0 #ccc, 0 1px 0 #ccc, 0 -1px 0 #ccc;
  border: 2px solid transparent;
  border-radius: 3px;
  background: transparent;
}
.carousel-indicators .active {
    background-color: transparent;
    border-radius: 3px;
    background: #666;
}

.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {    /* スライダー左右ボタン */
    font-size: 60px;
}
.carousel-control {
    width: 35%; /* 左右の切り替えボタンの押せる範囲と位置調整 */

    color: #777;  /* 左右の切り替えボタン */
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    filter: alpha(opacity=50);
    opacity: .5;
}
.carousel-control:focus, .carousel-control:hover {
    color: #666;
    text-shadow: 0 1px 2px #fff;
    filter: alpha(opacity=90);
    outline: 0;
    opacity: .9;
}

/* モバイル時立ち絵調整
----------------------------- */
@media (max-width: 960px) {
    .tachie_space img {
    	margin: auto;
    }
}


/* 立ち絵切り替えアニメ
----------------------------- */
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
/*  -webkit-transform: rotateY(180deg);  */
  opacity: 0;
  transition: opacity .3s linear;
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
/*  -webkit-transform: rotateY(-180deg);  */
  opacity: 0;
  transition: opacity .3s linear;
}


/* 立ち絵切り替えインジケータに画像使う修正
----------------------------- */
.carousel-indicators {  /* インジケータの画像が改行してしまうので横幅アップ */
  width: 80%;
  margin-left: -40%;
}
.carousel-indicators li {
    text-indent: 0;
}
.carousel-indicators .active, .carousel-indicators li {
    width: auto;
    height: auto;
}

/* インジケータ画像アニメーション
----------------------------- */
.carousel-indicators li:hover {
  border: 2px solid #fff;
}
.carousel-indicators .active {
  border: 2px solid #fff;
}



















/* 右側キャラ説明コンテンツ
----------------------------- */
.char_text {
/*  margin-left: -26%;  */
}
@media (max-width: 960px) {
    .char_text {

    }
}




/* テキスト
----------------------------- */
.setsumei {
  color: #333;
  padding: 20% 0 3% 1%;
}
.setsumei p:first-letter {
  font-size: 2rem;
  font-weight: bold;
  color: #555;
}
#tsumugi .setsumei {
  padding: 20% 0 20% 1%;	/* サンプルボイスボタンないからその分多めにスペース確保 */
}
#tsumugi .setsumei p {
/*  color: #000;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  border-radius: 5px;  */
  color: #fff;
  text-shadow: 0 0 5px #111;
}
#tsumugi .setsumei p:first-letter {
  color: #fff;
}

@media (max-width: 1200px) {
  .setsumei, #tsumugi .setsumei {
    padding: 5% 0 5% 1%;
  }
}
@media (max-width: 960px) {
  .setsumei, #tsumugi .setsumei {
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #999;
  }
}




/* サンプルボイス
----------------------------- */
.voice {
  margin: 5% 0 10%;
  -moz-transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
@media (max-width: 990px) {
  .voice {  text-align: center; }
}
.voice:hover {
  transform: translateY(1px);
}
.voice p {
  padding: .5em 1.5em;
  background: rgba(20, 0, 0, 0.9);
  border-radius: 3px;
  border: 1px solid rgba(120, 100, 100, 1);
  box-shadow: 0 0 20px rgba(40, 0, 0, 0.8);
  text-shadow: 0 0 5px red;
  font-weight: bold;
  color:#FFCCCC;
  font-size: 1.8rem;
  display: inline;

  -moz-transition: all .5s ease-out;
	-webkit-transition: all .5s ease-out;
	-ms-transition: all .5s ease-out;
	transition: all .5s ease-out;
}
.voice p:hover {
  background: rgba(80, 0, 0, 0.8);
  border: 1px solid rgba(120, 100, 100, 0.7);
  box-shadow: 0 0 10px rgba(110, 0, 0, 0.8), 0 0 50px rgba(0, 0, 0, 0.8) inset;
  color: #eee;

}
.popup:hover {
  text-decoration: none;
}

.nivo-lightbox-content iframe {
    box-shadow: 0 0 25px #000;
    border-radius: 5px;
}


/* 名前
----------------------------- */
.name_space {
	text-align: center;
	margin: 1em auto;

}











/* 背景
----------------------------- */
#tokiko {
  overflow: hidden;
  margin: 6em 0 2em;

  box-shadow: 0 0 30px rgba(255,255,255,0.4);
	color: #330000;
	border-radius: 3px;
	background: url("../img/character/serifu-tokiko.png") no-repeat 4% top, url("../img/base/bg-box.jpg") center center;
	background-size: auto, cover;
  /* windows環境で無理やりテキストアンチエイリアス */
	transform: rotate(0.028deg);
	-ms-transform: rotate(0.028deg);
	-moz-transform: rotate(0.028deg);
	-webkit-transform: rotate(0.028deg);
}
#tokiko img {	/* 画像にはアンチエイリアスの回転かけない */
	transform: rotate(-0.028deg);
	-ms-transform: rotate(-0.028deg);
	-moz-transform: rotate(-0.028deg);
	-webkit-transform: rotate(-0.028deg);
}
@media (max-width: 768px) {
  #tokiko {  /* モバイルでは背景のセリフは消す */
  	background: url("../img/base/bg-box.jpg") center center;
  	background-size: cover;

  }
}



#tsumugi {
  overflow: hidden;
  margin: 6em 0 2em;

  box-shadow: 0 0 30px rgba(255,255,255,0.4);
	color: #330000;
	border-radius: 3px;
	background: url("../img/character/serifu-tsumugi.png") no-repeat 4% top, url("../img/character/bg-tsumugi.jpg") center bottom;
	background-size: auto, cover;
  /* windows環境で無理やりテキストアンチエイリアス */
	transform: rotate(0.028deg);
	-ms-transform: rotate(0.028deg);
	-moz-transform: rotate(0.028deg);
	-webkit-transform: rotate(0.028deg);
}
#tsumugi img {	/* 画像にはアンチエイリアスの回転かけない */
	transform: rotate(-0.028deg);
	-ms-transform: rotate(-0.028deg);
	-moz-transform: rotate(-0.028deg);
	-webkit-transform: rotate(-0.028deg);
}