1@charset "UTF-8";
/* CSS Document */
#index #main .comic89 {
	text-align: center;
}
.headerSns .logo {
	display: block;
}
.logo .pony {
	padding-top: 30px;
	padding-left: 10px;
}
.logo .comp {
	padding-top: 30px;
	padding-left: 10px;
}
#index #storyBox .bnr_news {
	width: 100%;
	padding-top: 30px;
}
#index #storyBox .bnr_news img {
	border: solid 1px #999;
}
#index #storyBox .bnr_news a:hover {
	opacity: 0.8;
}
#index #storyBox .new_story {
	text-align: center;
	color: #e62e8b;
	font-weight: bold;
}
#story .lstpage .txtstory {
	margin-top: 50px;
	padding-bottom: 5px;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.5;
	font-weight: normal;
	text-align: center;
	color: #00a7ea;
}
#story .lstpage .section_ttl {
	margin-top: 40px;
	padding-bottom: 20px;
	font-size: 24px;
	font-size: 1.5rem;
	line-height: 1.5;
	font-weight: normal;
	text-align: center;
	background: url("../story/img/index/ttl_bg.png") no-repeat center bottom;
	opacity: 0
}

#story .lstpage .lstBtns .manasayu .lstBtnWrapper {
  border: 2px solid #f79908;
}
#story .lstpage .lstBtns .manasayu .sttl, #story .lstpage .lstBtns .manasayu .ttl_txt {
  color: #f79908;
}
#story .lstpage .lstBtns .story_1 .ttlArea::after {
  background: url("../story/img/index/lstBtns_story_img.jpg") no-repeat 50% 50%;
}

section a .lstBtnWrapper .ttlArea .ttlAreaInner .story_gentei {
	font-size: 16px;
	color: #900;
}
.news_txt .story_span {
	padding-left: 30px;
}
.goods_close {
	color: #797979;
	text-decoration: line-through;
	position: relative;
}
.coming img {
	position: absolute;
	top: 8px;
	left: 95px;
	display: block;
}
.kadai {
	width: 100%;
	margin-top: 50px;
	font-size: 32px;
	color: #e62e8b;
}


/*トップページ追加*/
#index #pickupBox .ov2 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(173,212,68,0.80);
	opacity: 0;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#index #pickupBox .ov2 p {
	width: 170px;
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 30px;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: normal;
	color: #FFFFFF;
	text-align: center;
-webkit-transform:;
	transform: translate(-50%, -50%) scale(1.5);
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#index #pickupBox a:hover .ov2 {
	opacity: 1;
}
#index #pickupBox a:hover .ov2 p {
	-webkit-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
}
#index #pickupBox .ov3 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(230,46,139,0.80);
	opacity: 0;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#index #pickupBox .ov3 p {
	width: 170px;
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 12px;
	font-size: 0.85rem;
	line-height: 1.5;
	font-weight: normal;
	color: #FFFFFF;
	text-align: center;
-webkit-transform:;
	transform: translate(-50%, -50%) scale(1.5);
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#index #pickupBox a:hover .ov3 {
	opacity: 1;
}
#index #pickupBox a:hover .ov3 p {
	-webkit-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
}

}
#index #pickupBox .ov4 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(173,212,68,0.80);
	opacity: 0;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#index #pickupBox .ov4 p {
	width: 170px;
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 12px;
	font-size: 0.85rem;
	line-height: 1.5;
	font-weight: normal;
	color: #FFFFFF;
	text-align: center;
	-webkit-transform:;
	transform: translate(-50%, -50%) scale(1.5);
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#index #pickupBox a:hover .ov4 {
	opacity: 1;
}
#index #pickupBox a:hover .ov4 p {
	-webkit-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
}

#pickupBox .image {
	border: solid 1px #7B7B7B;
}
.goods_close {
	display: none;
}

/* 課題曲ページ */
.kadai {
	width: 100%;
	margin-top: 50px;
	margin-bottom: 20px;
	font-size: 32px;
	color: #e62e8b;
	text-align: center;
}
.kadaitxt {
	text-align: center;
	color: #000000;
}
.kadai_txt {
	text-align: center;
	color: #e62e8b;
	font-size: 20px;	
}
.kadai_chara_txt {
	font-size: 22px;
	text-align: center;	
	color: #e62e8b;
}
.kadai_entry {
	padding-top: 30px;
}

.kadai span {
	font-size: 20px;
	text-align: center;
}

#kadai_ttl {
	margin-top: 30px;
	text-align: center;
}

.yajirusi,
.yajirusi2 {
	text-align: center;
	margin-top: 30px;
	margin-bottom: -20px;
	opacity: 0.8;
}

.yajirusi2 img {
	margin-right: 50px;
	margin-left: 50px;
}

.kadai_ttl2 {
	margin-top: 100px;
}

.kadai_entry .kadai {
	margin-top: 30px;
}
.setumei {
	display: none;
	position: absolute;
	top: 1em;	/*★省略不可、ブラウザ初期値バラバラ*/
	left: 1em;　	/*★Firefoxでhoverが無効になります*/
}

a:hover {
	position: relative;
	text-decoration: none;
	font-family: Lato, "Noto Sans JP", sans-serif;
	font-weight: normal;
}
a:hover .setumei {
	display: block;
	background-color: #e79221;
	padding:3px;
	color:#ffffff;
	border-top:#ffffff solid 10px;	/*フキダシ用*/
	border-left:#e79221 solid 5px;	/*フキダシ用*/
}

/*#kadai_ttl div {
		position: relative;
}

.arrow_box {
  display: none;
  position: absolute;
  padding: 16px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;  
  border-radius: 8px;
  background: #333;
  color: #fff;
}

.arrow_box:after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -10px;
  border: solid transparent;
  border-color: rgba(51, 51, 51, 0);
  border-bottom-color: #333;
  border-width: 10px;
  pointer-events: none;
  content: " ";
}*/

#touhyou {
	position: fixed;
	bottom: 192px;
	right: 30px;
	background: rgba(230, 46, 139, 0.8);
	border-radius: 10px;
	padding: 5px;
}

#touhyou a:hover {
	opacity: 0.7;
}
.audioplay {
	text-align: center;
}

.kadai_sdkaiwa {
	position: relative;
	margin-top: 100px;
}

.sd_setumei {
	position: relative;
	padding-left: 30px;
}
.sd_setumei2 {
	position: absolute;
	top: 70px;
	right: 0px;
	padding-right: 30px;
}
.sd_setumei3 {
	position: absolute;
	top: 280px;
	right: 0px;
	padding-right: 30px;
}
.sd_setumei4 {
	position: absolute;
	top: 480px;
	right: 0px;
	padding-right: 30px;
}

/* 第1回課題曲投票戦　会話 */
#try01kaiwa .sd_setumei .sd_txt1 {
	position: absolute;
	top: 45px;
	left: 180px;
}
#try01kaiwa .sd_setumei2 .sd_txt2 {
	position: absolute;
	top: 135px;
	right: 200px;
}
#try01kaiwa .sd_setumei .sd_txt3 {
	position: absolute;
	top: 22px;
	left: 165px;
}
#try01kaiwa .sd_setumei3 .sd_txt4 {
	position: absolute;
	top: 135px;
	right: 210px;
}
#try01kaiwa .sd_setumei .sd_txt5 {
	position: absolute;
	top: 36px;
	left: 195px;
}
#try01kaiwa .sd_setumei4 .sd_txt6 {
	position: absolute;
	top: 112px;
	left: 25px;
}

/* 第2回課題曲投票戦　会話 */

#try02kaiwa .sd_setumei .sd_txt1 {
	position: absolute;
	top: 35px;
	left: 215px;
}
#try02kaiwa .sd_setumei2 .sd_txt2 {
	position: absolute;
	top: 135px;
	right: 170px;
}
#try02kaiwa .sd_setumei .sd_txt3 {
	position: absolute;
	top: 33px;
	left: 180px;
}
#try02kaiwa .sd_setumei3 .sd_txt4 {
	position: absolute;
	top: 125px;
	right: 210px;
}
#try02kaiwa .sd_setumei .sd_txt5 {
	position: absolute;
	top: 35px;
	left: 205px;
}
#try02kaiwa .sd_setumei4 .sd_txt6 {
	position: absolute;
	top: 125px;
	left: 25px;
}

/* --課題曲end-- */

/* --music下層ページ-- */
#music .musicDetail,
#goods .goodsDetail {
	position: relative;
}

.music_1st {
	position: absolute;
	top: 0px;
	right: 0px;
	padding-top: 40px;
	padding-right: 60px;
}
.music_1st li {
	padding-top: 7px;
}
.music_1st li span {
	color: #e62e8b;
}
.music_txt {
	text-align: center;
}
.music_txt li {
	padding: 5px;
	font-weight: normal;
}
.music_iro {
	color:  #e62e8b;
	font-size: 30px;
}
.music_bnr {
	text-align: center;
	margin-top: 20px;
}
#music .musicDetail .music_txt a,
#goods .goodsDetail .music_txt a {
	padding: 10px;
}
#music .musicDetail .music_txt a:hover,
#goods .goodsDetail a:hover {
	opacity: 0.8;
}

/* --music下層ページEND-- */


/* ITEM下層ページ */
#goods .goodsDetail .music_txt {
    margin-top: 20px;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.7;
    font-weight: normal;
    color: #000;
}
.goods_bnr {
	font-size: 18px;
	display: block;
	margin-top: 20px;
}
.goods_bnr a {
	color: #FFFFFF;
	background-color: rgba(230, 46, 139, 0.8);
	border-radius: 5px;
	padding: 10px;
}
.goods_bnr a:hober {
	opacity: 0.8;
}
.goods_iro {
	font-size: 24px;
	color: #e62e8b;
}
.cd_cre {
	padding-top: 5px;
}
.cd_cre span {
	color: #e62e8b;
}
#goods .goodsDetail .goods_image p {
	text-align: left;
	margin-left: 135px;
}
.item06_sayu {
	margin-left: 115px;
}
.item06_mizuha {
	margin-left: 100px;
}
ul .goods_ttl {
	margin-top: 20px;
}

/* GOODS下層ページ */

/* CHARACTERページ追加 */
#kirare_chara {
	position: relative;
}

#kirare_chara p.kirare_logo {
	position: absolute;
	top: 0px;
	left: 25%;
}

#kirare_chara ul {
	margin-top: 100px;
}

#oruta_chara {
	position: relative;
}
.oruta_logo {
	margin-top: 100px;
	margin-bottom: -70px;
	text-align: center;
/*	font-size: 36px;
	color: #d997c5;
	font-weight: bold;*/
}


/* キャラクターページ追加 */
#character .charaLst .chara6 .inner {
  background: url("../character/img/index/btn_bg_white.gif");
}
#character .charaLst .chara6 .name::before {
  background: rgba(232,206,224,0.80);
}

#character #modalbox .chara6 .name, #character #modalbox .chara6 .cv span, #character #modalbox .chara6 .profile dt, #character #modalbox .chara6 .detail .section_ttl {
  color: #d997c5;
}
#character #modalbox .chara6 .borbox {
  border: 4px solid #e6cdde;
}
#character #modalbox .chara6 .image {
  -webkit-transform: translate(-560px, -350px);
  -ms-transform: translate(-560px, -350px);
  transform: translate(-560px, -350px);
}

#character .charaLst .chara7 .inner {
  background: url("../character/img/index/btn_bg_white.gif");
}
#character .charaLst .chara7 .name::before {
  background: rgba(232,206,224,0.80);
}

#character #modalbox .chara7 .name, #character #modalbox .chara7 .cv span, #character #modalbox .chara7 .profile dt, #character #modalbox .chara7 .detail .section_ttl {
  color: #d997c5;
}
#character #modalbox .chara7 .borbox {
  border: 4px solid #e6cdde;
}
#character #modalbox .chara7 .image {
  -webkit-transform: translate(-560px, -350px);
  -ms-transform: translate(-560px, -350px);
  transform: translate(-585px, -350px);
}

#character .charaLst .chara8 .inner {
  background: url("../character/img/index/btn_bg_lightred.gif");
}
#character .charaLst .chara8 .name::before {
  background: rgba(255,166,193,0.80);
}

#character #modalbox .chara8 .name, #character #modalbox .chara8 .cv span, #character #modalbox .chara8 .profile dt, #character #modalbox .chara8 .detail .section_ttl {
  color: #fc608f;
}
#character #modalbox .chara8 .borbox {
  border: 4px solid #ffa6c1;
}
#character #modalbox .chara8 .image {
  -webkit-transform: translate(-560px, -350px);
  -ms-transform: translate(-560px, -350px);
  transform: translate(-725px, -350px);
}

#character .charaLst .chara9 .inner {
  background: url("../character/img/index/btn_bg_cobalt.gif");
}
#character .charaLst .chara9 .name::before {
  background: rgba(193,203,232,0.80);
}

#character #modalbox .chara9 .name, #character #modalbox .chara9 .cv span, #character #modalbox .chara9 .profile dt, #character #modalbox .chara9 .detail .section_ttl {
  color: #9dadd8;
}
#character #modalbox .chara9 .borbox {
  border: 4px solid #c1cbe8;
}
#character #modalbox .chara9 .image {
  -webkit-transform: translate(-560px, -350px);
  -ms-transform: translate(-560px, -350px);
  transform: translate(-655px, -350px);
}

#character .charaLst .chara10 .inner {
  background: url("../character/img/index/btn_bg_lightblue.gif");
}
#character .charaLst .chara10 .name::before {
  background: rgba(128,237,221,0.80);
}

#character #modalbox .chara10 .name, #character #modalbox .chara10 .cv span, #character #modalbox .chara10 .profile dt, #character #modalbox .chara10 .detail .section_ttl {
  color: #4ddfca;
}
#character #modalbox .chara10 .borbox {
  border: 4px solid #80eddd;
}
#character #modalbox .chara10 .image {
  -webkit-transform: translate(-560px, -350px);
  -ms-transform: translate(-560px, -350px);
  transform: translate(-910px, -350px);
}
/* キャラクターページ追加 */
/* CHARACTERページ追加END */




/* EVENTページ */
#event .txt {
  margin-top: 10px;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.7;
  font-weight: normal;
  color: #e62e8b;
}

#event_wrap {
	margin-top: 0px; 
}
#event #ev_detail {
	width: 700px;
	margin-left: 50px;
}
#ev_outline dl {
	margin-top: 30px;
}
#event .categoryBtn {
  margin-top: 60px;
}
#event .categoryBtn li {
  display: inline-block;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  font-style: italic;
}
#event .categoryBtn li:not(:first-child) {
  margin-left: 10px;
}
#event .categoryBtn li a {
  display: block;
  padding: 2px 15px;
  color: #FFF;
  text-decoration: none;
  background: #aaaaaa;
}
#event .categoryBtn li a::before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
#event .categoryBtn li a.active::before {
  -webkit-transform: translate(-5%, 0) skew(0);
  -ms-transform: translate(-5%, 0) skew(0);
  transform: translate(-5%, 0) skew(0);
}
#event .categoryBtn li:nth-child(1) a::before {
  background-color: #f9ad39;
}
#event .categoryBtn li:nth-child(2) a::before {
  background-color: #43c1f2;
}
#event .categoryBtn li:nth-child(3) a::before {
  background-color: #f06942;
}
#event .categoryBtn li:nth-child(4) a::before {
  background-color: #ef6fb0;
}
#event .categoryBtn li:nth-child(5) a::before {
  background-color: #c6a4d2;
}
#event .categoryBtn li:nth-child(6) a::before {
  background-color: #add444;
}
#event .category_ttl {
  width: 400px;
  margin: 60px 0 0 0;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: bold;
}
#event .category_ttl2 {
  width: 100%;
  margin: 60px 0 0 0;
  font-size: 24px;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: bold;
}
#event .category_ttl span {
  display: block;
  margin-top: 0px;
  padding-top: 20px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  background: url("../event/img/ttl_line.png") 0 0 no-repeat;
}
#event .ev_txt {
	margin-top: 10px;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 1.5;
    font-weight: normal;
}
#event .ev_txt span {
	color: #e62e8b;
}
#event li.ev_kirare,
#event li.ev_oruta,
#event li.ev_stella {
	margin: 30px 0px;
}

#event .mana {
	color: #f79908;
}
#event .sayu {
	color: #14b2ef;
}
#event .mizuha {
	color: #ec4313;
}
#event .kae {
	color: #eb4b9c;
}
#event .kasumi {
	color: #b88dc7;
}
#event .mii {
	color: #99c915;
}
#event .yukari {
	color: #d997c5;
}
#event .haruka {
	color: #d997c5;
}
#event .aone {
	color: #fc608f;
}
#event .ruka {
	color: #9dadd8;
}
#event .sango {
	color: #4ddfca;
}
#ev_goods {
	position: relative;
}

#ev_goods li {
	width: 345px;
	margin-top: 30px;
	display: inline-block;
}

.ev_goodsthum {
	height: 350px;
}

.ev_goodsthum img {
	width: 330px;
	height: 330px;
	border: 2px solid rgba(0,0,0,1);
}
.ev_goodstxt {
	margin-top: 10px;
    font-size: 10px;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: normal;
	color: #000000;
}
.ev_kakaku {
	margin-top: 20px;
	text-align: right;
	color: #e62e8b;
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.7;
}
.ev_goodstxt_ttl {
	min-height: 200px;
}

#ev_outline2,
#ev_guest2,
#ev_ticket2,
#ev_goods2,
#ev_attention2,
#ev_flower2 {
	text-align: center;
}

#event .category_ttl2 span.ev2 {
	display: block;
	padding-top: 30px;
	margin-left: 200px;
	font-size: 14px;
	font-size: 0.875rem;
	line-height: 1.7;
	font-weight: normal;
	background: url("../event/img/ttl_bg.png") 0 0 no-repeat;
}
/* EVENTページEND */


/* STAFF&CASTページ追加 */
.name_team {
	color: #14b2ef;
	display: block;
	font-size: 20px;
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: normal;
	margin-left: 20px;
}

#staffcast .scbox .sbox .txt_team {
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.7;
	font-weight: normal;
	margin-left: 20px;
}
#staffcast .scbox .sbox .staff3 .name_ttl {
  color: #f79908;
}
#staffcast .scbox .sbox .staff4 .name_ttl {
  color: #ec4313;
}

/* STAFF&CASTページ追加END */

/* COMMENTページ追加 */
/*.skewBtn, .gNav li a, .headerNews .newsArea .more a, #index #storyBox .more a, #story #modal .controller .storyNav a, #story #modal .controller .backBtn a, #story #modal .detailSuper .btnPdf a, #goods .rebtn a, #music .rebtn a, #special .categoryBtn li a, #special.loginpage .box1 .btn a, #special.loginpage .box2 .followArea .btn a, #special.loginpage .box2 .loginArea .btn a, #special.lstpage .btnMore a, #special.detailpage .btnBack a, */#special.comment .ssbox.mana .btn a, #special.comment .ssbox.sayu .btn a, #special.comment .ssbox.mizuha .btn a, #special.comment .ssbox.kae .btn a, #special.comment .ssbox.kasumi .btn a, #special.comment .ssbox.mii .btn a, #special.comment .ssbox.mix .btn a, #special.comment .btnPlayAll .btn a, #special.comment .controller li a {
  position: relative;
  display: block;
  overflow: hidden;
  z-index: 1;
}
/*.skewBtn::before, .gNav li a::before, .headerNews .newsArea .more a::before, #index #storyBox .more a::before, #story #modal .controller .storyNav a::before, #story #modal .controller .backBtn a::before, #story #modal .detailSuper .btnPdf a::before, #goods .rebtn a::before, #music .rebtn a::before, #special .categoryBtn li a::before, #special.loginpage .box1 .btn a::before, #special.loginpage .box2 .followArea .btn a::before, #special.loginpage .box2 .loginArea .btn a::before, #special.lstpage .btnMore a::before, #special.detailpage .btnBack a::before, */#special.comment .ssbox.mana .btn a::before, #special.comment .ssbox.sayu .btn a::before, #special.comment .ssbox.mizuha .btn a::before, #special.comment .ssbox.kae .btn a::before, #special.comment .ssbox.kasumi .btn a::before, #special.comment .ssbox.mii .btn a::before, #special.comment .ssbox.mix .btn a::before, #special.comment .btnPlayAll .btn a::before, #special.comment .controller li a::before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 120%;
  height: 100%;
  -webkit-transform: translate(-120%, 0) skew(-20deg);
  -ms-transform: translate(-120%, 0) skew(-20deg);
  transform: translate(-120%, 0) skew(-20deg);
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.skewBtn:hover::before, .gNav li a:hover::before, .headerNews .newsArea .more a:hover::before, #index #storyBox .more a:hover::before, #story #modal .controller .storyNav a:hover::before, #story #modal .controller .backBtn a:hover::before, #story #modal .detailSuper .btnPdf a:hover::before, #goods .rebtn a:hover::before, #music .rebtn a:hover::before, #special .categoryBtn li a:hover::before, #special.loginpage .box1 .btn a:hover::before, #special.loginpage .box2 .followArea .btn a:hover::before, #special.loginpage .box2 .loginArea .btn a:hover::before, #special.lstpage .btnMore a:hover::before, #special.detailpage .btnBack a:hover::before, #special.comment .ssbox.mana .btn a:hover::before, #special.comment .ssbox.sayu .btn a:hover::before, #special.comment .ssbox.mizuha .btn a:hover::before, #special.comment .ssbox.kae .btn a:hover::before, #special.comment .ssbox.kasumi .btn a:hover::before, #special.comment .ssbox.mii .btn a:hover::before, #special.comment .ssbox.mix .btn a:hover::before, #special.comment .btnPlayAll .btn a:hover::before, #special.comment .controller li a:hover::before, .skewBtn.active::before, .gNav li a.active::before, .headerNews .newsArea .more a.active::before, #index #storyBox .more a.active::before, #story #modal .controller .storyNav a.active::before, #story #modal .controller .backBtn a.active::before, #story #modal .detailSuper .btnPdf a.active::before, #goods .rebtn a.active::before, #music .rebtn a.active::before, #special .categoryBtn li a.active::before, #special.loginpage .box1 .btn a.active::before, #special.loginpage .box2 .followArea .btn a.active::before, #special.loginpage .box2 .loginArea .btn a.active::before, #special.lstpage .btnMore a.active::before, #special.detailpage .btnBack a.active::before, #special.comment .ssbox.mana .btn a.active::before, #special.comment .ssbox.sayu .btn a.active::before, #special.comment .ssbox.mizuha .btn a.active::before, #special.comment .ssbox.kae .btn a.active::before, #special.comment .ssbox.kasumi .btn a.active::before, #special.comment .ssbox.mii .btn a.active::before, #special.comment .ssbox.mix .btn a.active::before, #special.comment .btnPlayAll .btn a.active::before, #special.comment .controller li a.active::before {
  -webkit-transform: translate(-5%, 0) skew(0);
  -ms-transform: translate(-5%, 0) skew(0);
  transform: translate(-5%, 0) skew(0);
}

#special.comment .ss_ttl {
  display: inline-block;
  padding: 5px 20px;
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: normal;
  background: #e62e8b;
  border-radius: 20px;
  color: #FFF;
}
#special.comment .ssMain {
  margin: 40px auto 0 auto;
  height: 600px;
}
#special.comment .ssbox {
  position: relative;
  margin-top: 10px;
  overflow: hidden;
}
#special.comment .ssbox .imgbox {
  width: 240px;
}
#special.comment .ssbox .imgbox .charaImage:not(:first-child) {
  margin-top: 10px;
}
#special.comment .ssbox .imgbox .charaImage img {
  width: 100%;
  height: auto;
}
#special.comment .ssbox .imgbox .audioWrapper {
  width: 140px;
  margin: 10px auto;
}
#special.comment .ssbox .imgbox .btn {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#special.comment .ssbox .imgbox .btn a {
  display: block;
  text-decoration: none;
  text-align: center;
}
#special.comment .ssbox .imgbox .btn span {
  display: inline-block;
  min-height: 20px;
  padding: 3px 0 3px 20px;
  box-sizing: border-box;
  background: url("../special/img/shortstory/btn_voice_icon.png") 0 50% no-repeat;
}
#special.comment .ssbox .baboxWrapper {
  width: 294px;
}
#special.comment .ssbox .baboxWrapper::after {
  content: '';
  display: block;
  position: absolute;
  width: 34px;
  height: 24px;
  top: 40px;
}
#special.comment .ssbox .babox {
  width: 260px;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 20px;
}
#special.comment .ssbox .babox dt {
  font-size: 20px;
  font-size: 1.25rem;
  line-height: 1.7;
  font-weight: normal;
}
#special.comment .ssbox .babox dd {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.7;
  font-weight: normal;
}
#special.comment .ssbox:nth-child(even) .baboxWrapper::after {
  left: 162px;
}
#special.comment .ssbox:nth-child(even) .babox {
  margin-left: 34px;
}
#special.comment .ssbox:nth-child(odd) .baboxWrapper::after {
  right: 162px;
}
#special.comment .ssbox.mana {
	position: absolute;
	left: 20px;
}
#special.comment .ssbox.mana .btn {
  border: 1px solid #f9ad39;
}
#special.comment .ssbox.mana .btn a {
  height: 100%;
  padding: 0 10px;
  background: #f9ad39;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.comment .ssbox.mana .btn a::before {
  background-color: #fff;
}
#special.comment .ssbox.mana .btn a:hover, #special.comment .ssbox.mana .btn a.active {
  color: #f9ad39;
}
#special.comment .ssbox.mana .btn a:hover span, #special.comment .ssbox.mana .btn a.active span {
  background: url("../special/img/shortstory/btn_voice_icon_maina.png") 0 50% no-repeat;
}
#special.comment .ssbox.mana .babox {
  border: 2px solid #fdd35d;
}
#special.comment .ssbox.mana .babox dt {
  color: #f9ad39;
}
#special.comment .ssbox.sayu {
	position: absolute;
	left: 300px;
}
#special.comment .ssbox.sayu .btn {
  border: 1px solid #14b2ef;
}
#special.comment .ssbox.sayu .btn a {
  height: 100%;
  padding: 0 10px;
  background: #14b2ef;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.comment .ssbox.sayu .btn a::before {
  background-color: #fff;
}
#special.comment .ssbox.sayu .btn a:hover, #special.comment .ssbox.sayu .btn a.active {
  color: #14b2ef;
}
#special.comment .ssbox.sayu .btn a:hover span, #special.comment .ssbox.sayu .btn a.active span {
  background: url("../special/img/shortstory/btn_voice_icon_sayu.png") 0 50% no-repeat;
}
#special.comment .ssbox.sayu .babox {
  border: 2px solid #14b2ef;
}
#special.comment .ssbox.sayu .babox dt {
  color: #14b2ef;
}
#special.comment .ssbox.mizuha {
	position: absolute;
	right: 20px;
}
#special.comment .ssbox.mizuha .btn {
  border: 1px solid #f06942;
}
#special.comment .ssbox.mizuha .btn a {
  height: 100%;
  padding: 0 10px;
  background: #f06942;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.comment .ssbox.mizuha .btn a::before {
  background-color: #fff;
}
#special.comment .ssbox.mizuha .btn a:hover, #special.comment .ssbox.mizuha .btn a.active {
  color: #f06942;
}
#special.comment .ssbox.mizuha .btn:hover span, #special.comment .ssbox.mizuha .btn a.active span {
  background: url("../special/img/shortstory/btn_voice_icon_mizuha.png") 0 50% no-repeat;
}
#special.comment .ssbox.mizuha .babox {
  border: 2px solid #f29b76;
}
#special.comment .ssbox.mizuha .babox dt {
  color: #f06942;
}
#special.comment .ssbox.kae {
	position: absolute;
	top: 400px;
	left: 20px;
}
#special.comment .ssbox.kae .btn {
  border: 1px solid #eb4b9c;
}
#special.comment .ssbox.kae .btn a {
  height: 100%;
  padding: 0 10px;
  background: #eb4b9c;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.comment .ssbox.kae .btn a::before {
  background-color: #fff;
}
#special.comment .ssbox.kae .btn a:hover, #special.comment .ssbox.kae .btn a.active {
  color: #eb4b9c;
}
#special.comment .ssbox.kae .btn a:hover span, #special.comment .ssbox.kae .btn a.active span {
  background: url("../special/img/shortstory/btn_voice_icon_kae.png") 0 50% no-repeat;
}
#special.comment .ssbox.kae .babox {
  border: 2px solid #f19ec2;
}
#special.comment .ssbox.kae .babox dt {
  color: #eb4b9c;
}
#special.comment .ssbox.kasumi {
	position: absolute;
	top: 400px;
	left: 300px;
}
#special.comment .ssbox.kasumi .btn {
  border: 1px solid #b88dc7;
}
#special.comment .ssbox.kasumi .btn a {
  height: 100%;
  padding: 0 10px;
  background: #b88dc7;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.comment .ssbox.kasumi .btn a::before {
  background-color: #fff;
}
#special.comment .ssbox.kasumi .btn a:hover, #special.comment .ssbox.kasumi .btn a.active {
  color: #b88dc7;
}
#special.comment .ssbox.kasumi .btn a:hover span, #special.comment .ssbox.kasumi .btn a.active span {
  background: url("../special/img/shortstory/btn_voice_icon_kasumi.png") 0 50% no-repeat;
}
#special.comment .ssbox.kasumi .babox {
  border: 2px solid #d1bbda;
}
#special.comment .ssbox.kasumi .babox dt {
  color: #b88dc7;
}
#special.comment .ssbox.mii {
	position: absolute;
	top: 400px;
	right: 20px;
}
#special.comment .ssbox.mii .btn {
  border: 1px solid #99c915;
}
#special.comment .ssbox.mii .btn a {
  height: 100%;
  padding: 0 10px;
  background: #99c915;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.comment .ssbox.mii .btn a::before {
  background-color: #fff;
}
#special.comment .ssbox.mii .btn a:hover, #special.comment .ssbox.mii .btn a.active {
  color: #99c915;
}
#special.comment .ssbox.mii .btn a:hover span, #special.comment .ssbox.mii .btn a.active span {
  background: url("../special/img/shortstory/btn_voice_icon_mii.png") 0 50% no-repeat;
}
#special.comment .ssbox.mii .babox {
  border: 2px solid #c1db81;
}
#special.comment .ssbox.mii .babox dt {
  color: #99c915;
}
#special.comment .ssbox.mix .btn {
  border: 1px solid #e62e8b;
}
#special.comment .ssbox.mix .btn a {
  height: 100%;
  padding: 0 10px;
  background: #e62e8b;
  font-size: 18px;
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: bold;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#special.comment .ssbox.mix .btn a::before {
  background-color: #fff;
}
#special.comment .ssbox.mix .btn a:hover, #special.comment .ssbox.mix .btn a.active {
  color: #e62e8b;
}
#special.comment .ssbox.mix .btn a:hover span, #special.comment .ssbox.mix .btn a.active span {
  background: url("../special/img/shortstory/btn_voice_icon_mix.png") 0 50% no-repeat;
}
#special.comment .ssbox.mix .babox {
  border: 2px solid #e62e8b;
}
#special.comment .ssbox.mix .babox dt {
  color: #e62e8b;
}
#special.comment .controller {
  margin-top: 60px;
  text-align: center;
}
#special.comment .controller li {
  display: inline-block;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.7;
  font-weight: normal;
  font-style: italic;
}
#special.comment .controller li:not(:first-child) {
  margin-left: 10px;
}
#special.comment .controller li a {
  display: block;
  padding: 2px 15px;
  color: #FFF;
  text-decoration: none;
  background: #aaaaaa;
}
#special.comment .controller li a::before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  background-color: #e62e8b;
}

/* COMMENTページ追加END */

/* STORYページ追加 */
.sayuiro {
	color: #14b2ef;
	font-size: 100%;
}
.mizuhairo {
	color: #f06942;
}
.kaeiro {
	color: #eb4b9c;
}
.kasumiiro {
	color: #b88dc7;
}
.miiiro {
	color: #99c915;
}

/* STORYページ追加END */

#index #main .txt1 a:hover {
	opacity: 0.7;
}