@charset "utf-8";
/* CSS Document */
/*殿堂入り*/
.silver{	
position: absolute;
top:0;
left: 0;
width: 25%;
max-width: 317px;
}
/*カウントダウン*/
.pickup .pickup_slide .countBt img{
	border: #fff 1px solid;
}
.pickup .pickup_slide  .countBt:not(.non){
	display: block;
	transition: opacity 0.2s 0s ease-out;
	cursor: pointer;

}
.pickup .pickup_slide  .countBt:not(.non):hover{
	opacity: 0.5;
}

.countWrap{
width: 100%;
position: fixed;
display: block;
top:0;
bottom: 0;
left:0;
z-index: 990;
opacity: 0;
	 transition: all 0.3s 0s ease-out;
transform:scale(0);
}
.countWrap.showWindow{
	opacity: 1;
	transform:scale(1);
}
.closeBg{

width: 100%;
position:absolute;
display: block;
top:0;
bottom: 0;
left:0;
background-color: #fff;
opacity: 0.9;
cursor: pointer;
}
.countWrap .countBox{
	width: calc(100% - 1em);
	height: 100vh;
	overflow-y: scroll;
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
	z-index: 990;
	padding:1em 1em 2em;
	text-align: center;
}
.countWrap .countBox .playBT{
	width:  100%;
	max-width: 800px;
	margin: 0 auto;
	display: block;
	cursor: pointer;
	position: relative;
	background-color: var(--yellow);
	overflow: hidden;
	color: #fff;
	text-align: center;
	padding: 1em;
}
.countWrap .countBox .playBT:before{
	content: "";
	width: 100%;
	left: 0.5em;
	top:0;
	bottom: 0;
	background-color: var(--mainPurple);
	transform: skewX(-15deg);
	position: absolute;
	display: block;
}
.countWrap .countBox .playBT:hover:before,.countWrap .countBox .playBT.selected:before{
	background-color: var(--subPurple);

}
.countWrap .countBox .playBT span{
	position: relative;
	z-index: 2;
}

.countWrap .countBox .close{
	width: 1em;
	font-size: 5em;
	line-height: 1em;
	margin-bottom: 1px;
	position: relative;
	margin-left: auto;
	display: block;
	cursor: pointer;
	color: var(--mainPurple);
}
.countWrap .countBox .close:hover{
	color: var(--subPurple);

}
/*ここまで*/
.mainBox{
background-position: center right;
background-attachment: fixed;
background-size:100% auto;
background-repeat: no-repeat;
}
.topArea .mainBox{
	background-image: url(../img/bg_top.png);
	background-attachment:scroll;
}
.topImg{
	width: 57%;
	max-width: 968px;
	margin-left: auto;
}
.topImg img{
	display: block;
	border-left: var(--mainPurple) 4px solid;
	border-right: var(--mainPurple) 4px solid;

}
.topImg img.top_a{
	border-bottom: var(--mainPurple) 2px solid;

}
.topImg img.top_b{
	border-top: var(--mainPurple) 2px solid;

}
.topArea h1{
	width: 43%;
	position: absolute;
	padding: 0 5% 1em;
	top:20%;
	text-align: center;
	transition: opacity 0.8s 0s ease,filter 1s 0s ease-out;
	opacity: 0;
	filter: blur(10px);
}
.main.action .topArea h1{
	opacity: 1;
	filter: blur(0);
}
.topArea.doubleCont .pickup{
	display: block;
	width: 100%;
	position: relative;
}
.pickup h2{
width: 25%;
padding: 0.5em ;
padding-left: 1.5em;
display: inline-block;
vertical-align: middle;
	
}
.pickup .pickup_slide{
width: 75%;
padding: 1em 0.5em 0 ;
display: inline-block;
vertical-align: middle;

}
.pickup .pickup_slide a img{
	border: #fff 1px solid;
}
.pickup .pickup_slide a.non{
	pointer-events: none;
	/*opacity: 0.2;*/
}
.pickup .pickup_slide a:not(.non){
	display: block;
	transition: opacity 0.2s 0s ease-out;

}
.pickup .pickup_slide a:not(.non):hover{
	opacity: 0.5;
}

.topMovie{
	width: 30%;
	position: absolute;
	bottom :1em;
	left: 18vw;
	top:26vw;
}
.movieBox a{
	position: relative;
	display: block;
	width: 100%;
	border: var(--mainPurple) 2px solid;
}

.movieBox a:before,.movieBox a:after{
	content: "";
	display: block;
	position: absolute;
	  left: 50%;
	  top:50%;
	 opacity: 0.5;
	 transition: all 0.2s 0s ease-out;
	box-sizing: border-box;
	--borderColor:#fff;
	z-index: 3;
}
.movieBox a:before{
	width: 5em;
	height:5em;
	margin-left: -2.5em;
	margin-top: -2.5em;
	/*border: var(--borderColor) 0.4em solid;*/
	box-shadow: inset 0 0 0 0.2em #fff, inset 0 0 0 0.4em #491445, inset 0 0 0 0.45em #fff;
	left: 50%;
	top:50%;
	transform:scale(1.1) rotate(45deg);
	background:#491445;

}
.movieBox a:after{
	  content: "";
	  position: absolute;
	  border-top: 1em solid transparent;
	  border-bottom: 1em solid transparent;
	  border-left: 1.5em solid  var(--borderColor);
	  margin-top: -1em;
	  margin-left: -0.5em;
	 transform: scale(1.1);

}


.movieBox a:hover:before{
	 transform: scale(1) rotate(45deg);
	 opacity: 1;
}
.movieBox a:hover:after{
	 transform: scale(1);
	 opacity: 1;
}

.top_bottom{
	background-image: url(../img/top_bottom_bg.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-attachment: fixed;
	background-color: #fff;
	position: relative;
	z-index: 2;
}
.topMiddle{
	padding: 1em 0 2em;
}
.topMiddle h2{
	 height: 4.5em;
	 position: relative;
}
.topMiddle h2 img{
	width: auto;
	height: 100%;
}
.topGrid{
	display: grid;
	column-gap: 1em;
	grid-template-columns:1fr 30vw;
}
#news .newsArea{
	padding: 0.5em;
	background-color: #55425c;
}
#news .newsBox{
	height: 250px;
	overflow-y: scroll;
}
#news .newsBox dl{
 background-color: #fff;
 margin-bottom: 0.5em;
 padding: 0.2em 0 0;
 	background-image:url(../img/news_dd_bg.png);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 5.5em auto;


}
#news .newsBox dt{
	width: 12em;
	background: linear-gradient(90deg,#55425c,#200629);
	color: #fff;
	padding: 0.3em 0.5em;
	font-size: max(0.8em,12px);
	position: relative;
	letter-spacing: 1px;
}
#news .newsBox dt:after{
	content: "";
	position: absolute;
	display: block;
	width: 6em;
	top:0;
	right: 0;
	bottom: 0;
	background-image: url(../img/news_dt_bg.png);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: auto 100%;
}
#news .newsBox dd{
	padding: 1em;
	font-size: max(0.8em,12px);
	line-height: 1.5em;
}
#news .newsBox a{
	color: var(--pink);
	font-weight: bold;
}
#news .newsBox a:hover{
	color: #fff;
	background-color: var(--subPurple);
}
#news h2{
	padding-top: 2px;
}
#news h2:after{
	content: "";
	width: calc(100% - 12.7em);
	position: absolute;
	display: block;
	top:41%;
	bottom:0;
	right: 0;
	border-top: var(--mainPurple) 1px solid;
	background-image: url(../img/news_h2_right.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
#twitter{
	border: var(--mainPurple) 2px solid;
	background-color: #fff;
}
#twitter .twitterBox{
	padding: 0.5em 0.5em 0;
}
#twitter h2{
	padding-bottom: 2px;
	background-color: var(--mainPurple);
	background-image: url(../img/twi_h2_bg.png);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
#product{
	margin-top: 2em;
	background-color: var(--mainPurple);
	position: relative;
	background-image: url(../img/spec_bg_r.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 60% auto;
}
#product:after{
	content: "";
	display: block;
	position: absolute;
	width: 50%;
	top:0;
	bottom:0;
	left: 0;
	background-image: url(../img/spec_bg_l.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 80% auto;
}
#product h2{
	width: 35vw;
	height:auto;
	position: absolute;
	right: 0;
	top:0;
	text-align: center;
	padding: 0 0.5em;
	background: rgba(196,196,196,0.77);
}
#product h2 img{
	width: 100%;
	height: auto;
}
#product .img{
	position: relative;
	z-index: 2;
	width: calc(100% - 35vw);
	display: inline-block;
	vertical-align: top;
	padding: 2em;
}
#product .txt{
	position: relative;
	z-index: 2;
	width: 35vw;
	display: inline-block;
	vertical-align: top;
	padding-top: 8vw;

}
.topBonusBt{
	position: absolute;
	display: block;
	right: 0;
	bottom: -3vw;
	width: 20vw;
	transition: opacity 0.2s 0s ease-out;

}
.topBonusBt:hover{
	opacity: 0.5;
}
.secondArea #product .img{
	vertical-align: middle;
}
.secondArea #product .txt{
	vertical-align: middle;
	padding-top: 0;
}
#product .txt dl{
	background-color: #fff;
	padding: 1em;
	font-size: max(0.8em,12px);
	line-height: 1.5em;
	border-right: var(--mainPurple) 1px solid;

}
#product .txt dt{
	width: 5em;
	float: left;
	padding: 0.2em 0.5em;
	text-align: left;
	background-color: var(--mainPurple);
	margin-bottom: 0.3em;
	color: #fff;
}
#product .txt dd{
	width: calc(100% - 5em);
	margin-left: 5em;
	margin-bottom: 0.3em;
	padding: 0.2em 0;
	padding-left: 0.5em;
}
/*---------------------------------------------------------
ストーリー
------------------------------------------------------------*/
#story .secondArea.doubleCont .mainBox{
	padding-bottom: 5em;
}
.catch{
	width: 70%;	
	background-color: #fff;
	border: var(--subGray) 2px solid;
	border-left: 0;
	box-shadow: 0.3em 0.3em 0 var(--purple_a);
	padding: 0 2em;
	overflow: hidden;
	position: relative;
	z-index: 2;
	margin-top: 1em;
}
.catch:before{
 content: "";
  position: absolute;
  border-top: 2em solid transparent;
  border-right: 2em solid  var(--subGray);
  right:0;
  bottom:0;
}

.storyBox{
	width: calc(100% - 2em);
	margin-left: auto;
	border: var(--mainPurple) 1px solid;
	border-right: 0;
	position: relative;
	background-image: url(../img/bg_white.png);
	padding:5em 2em 3em;
	padding-right: calc(29% + 2em);
	z-index: 1;
	margin-top: -3em;
	font-size: 1.2em;
	line-height: 1.8em;
}
.storyBox:after{
	content: "";
	width: 27%;
	top:-2em;
	bottom: -5em;
	right: 2%;
	position: absolute;
	display: block;
	background-image: url(../story/img/syory_bg_r.jpg);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: contain;
}
.worldArea{
	margin-top: 1em;
}
.worldBox{
	width: calc(100% - 2em);
	margin-left: auto;
	border: var(--mainPurple) 1px solid;
	border-right: 0;
	position: relative;
	background-image: url(../img/bg_white.png);
	padding:0;
	z-index: 1;
	min-height: 25vw;
	margin-bottom: 3em;
}
.worldBox .txtArea{
	width: 47%;
	padding: 1em 0;

}
.worldBox .txtArea h2{
	background-color: var(--mainPurple);
	color: #fff;
	font-size: 1.5em;
	line-height: 1.2em;
	padding: 0.5em 0.5em;
	background-image: url(../story/img/world_h2_bg.png);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
}
.worldBox .txtArea .txt{
	width: calc(100% - 1em);
	padding: 1em;
	margin-left: 1em;

}
.worldBox .txtArea .app{
	padding: 1em;
	padding-right: 0;
	margin-left: 1em;
	width: calc(100% - 1em);
	background: var(--gray_a);
}
.worldBox .txtArea .app .app_img{
	width: 30%;
	display: inline-block;
	vertical-align: middle;
	padding-right: 1em;
}
.worldBox .txtArea .app .app_txt{
	width: 70%;
	display: inline-block;
	vertical-align: middle;
	font-size: max(0.9em,12px);
}
.worldBox .txtArea .app .app_txt h3{
	border-bottom: var(--mainPurple) 1px solid;
	font-weight: bold;
	margin-bottom: 0.5em;
}
.worldBox .img{
	width: calc(53% - 1em);
	position: absolute;
	display: block;
	z-index: 2;
	bottom: -1em;
	right: 0;
	border: var(--mainPurple) 1px solid;
	border-right: 0;
}
/*---------------------------------------------------------
キャラクター
------------------------------------------------------------*/

.charaArea{
	padding: 0;
	padding-right: 0;
	display: grid;
	grid-template-columns:10em 1fr;
}
.box_side{
	padding: 0 0.5em;
	padding-right: 0;
	position: relative;
	z-index: 5;

}
.box_all{
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 14% auto;
}
.sideNavi{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	column-gap: 0.25em;
	row-gap:0.25em;
}
.sideNavi a{
	
	border: #000 1px solid;
	background-repeat: no-repeat;
	background-size: 100% auto;
	transition: opacity 0.2s 0s ease-out;
	position: relative;
}
.sideNavi a:hover{
	opacity: 0.7;
}
.sideNavi a.selected img{
	opacity: 0;
	
}
.sideNavi a.new:after{

 content: "new";
 position: absolute;
 display: block;
 background-color: #D52C71;
 color: #fff;
 width: auto;
 padding: 0 0.5em;
 top:0em;
right: 0;
 font-size:max(0.8em,12px);
 line-height: 1em;
 padding-bottom: 0.2em;
}
.box_a{
	width: 45%;
	border: #000 1px solid;
	border-left: 0;
	padding: 1em 2em;
	margin-top: 1em;
	background-image: url(../chara/img/catch_bg_r.png);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: right center;
	position: relative;
}
.box_a:before{
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	left: 0;
	top:0;
	bottom: 0;
	background-image: url(../chara/img/catch_bg_l.png);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: left center;
}

.box_b_wrap{
	padding: 0 3em;
	width: 45%;
	max-width: 500px;
	position: relative;
	z-index: 2;
}
#ch0 .box_b_wrap,
#ch7 .box_b_wrap,
#ch8 .box_b_wrap,
#ch9 .box_b_wrap,
#ch10 .box_b_wrap,
#ch11 .box_b_wrap{
	padding-top: 8vw;
}
.box_b{
	padding:  0 0;
	margin-top: -0.5em;
	text-align: center;
}
.box_b_txt{
	background-color: var(--mainPurple);
	color: #fff;
	padding: 1em 1em 5em;
	background-image: url(../chara/img/txt_bg_r.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;
	position: relative;

}
.box_b_txt:before{
content: "";
width: 100%;
display: block;
position: absolute;
top:0;
bottom:0;
left:0;
background-image: url(../chara/img/txt_bg_l.png);
background-repeat: no-repeat;
background-position: left top;
background-size: 110% auto;
}
.chImg{
	width: 50%;
	right:0;
	top:0;
	position: absolute;
	bottom:0;
	background-position: center top;
	background-repeat: no-repeat;
	background-size:cover;
	z-index: 1;
	display: block;	
	transition: opacity 0.3s 0s ease,filter 0.5s 0s ease-out;
	opacity: 0;
	filter: blur(10px);
}
.main.action .chImg{
	opacity: 1;
	filter: blur(0);
}
.chStand{
	width: 100%;
	right:0;
	top:0;
	position: absolute;
	bottom:0;
	background-position: center top;
	background-repeat: no-repeat;
	background-size:cover;
	z-index: 1;
	display: block;	
	
}
/*#ch10 .chImg{
	right: 6em;
}
*/
.imgArea_up{
	transition: all 300ms 0s ease;
	opacity: 0;
	transform: translateX(-3em);
}

.imgArea_up.showFlg{
	opacity: 1;
	transform: translateX(0);

}
.imgArea_stand{
	transition: all 300ms 0s ease;
	opacity: 1;
	transform: translateX(0);
}

.imgArea_stand.showFlg{
	opacity: 0;
	transform: translateX(-3em);

}
.longBt{
	position: relative;
	z-index: 3;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	cursor: pointer;
	margin: 0 auto 0.5em;
		transition: opacity 0.2s 0s ease-out;

}

/*.longBt:after{

 content: "new";
 position: absolute;
 display: block;
 background-color: #D52C71;
 color: #fff;
 width: auto;
 padding: 0 0.5em;
 top:0em;
left: 0;
 font-size:max(0.8em,12px);
 line-height: 1em;
 padding-bottom: 0.2em;
}
*/
.longBt img{
	display: block;
	opacity: 1;
}
.longBt.longFlg img{
	opacity: 0;
}
.longBt:hover{
	opacity: 0.5;
}
#ch0.box_all .chStand.imgArea_up{background-image: url(../chara/img/ch0_0.png);}

#ch1.box_all .chStand.imgArea_up{background-image: url(../chara/img/ch1_0.png);}
#ch1.box_all .chStand.imgArea_stand{background-image: url(../chara/img/ch1_1.png);}

#ch2.box_all .chStand.imgArea_up{background-image: url(../chara/img/ch2_0.png);}
#ch2.box_all .chStand.imgArea_stand{background-image: url(../chara/img/ch2_1.png);}

#ch3.box_all .chStand.imgArea_up{background-image: url(../chara/img/ch3_0.png);}
#ch3.box_all .chStand.imgArea_stand{background-image: url(../chara/img/ch3_1.png);}

#ch4.box_all .chStand.imgArea_up{background-image: url(../chara/img/ch4_0.png);}
#ch4.box_all .chStand.imgArea_stand{background-image: url(../chara/img/ch4_1.png);}

#ch5.box_all .chStand.imgArea_up{background-image: url(../chara/img/ch5_0.png);}
#ch5.box_all .chStand.imgArea_stand{background-image: url(../chara/img/ch5_1.png);}

#ch6.box_all .chStand.imgArea_up{background-image: url(../chara/img/ch6_0.png);}
#ch6.box_all .chStand.imgArea_stand{background-image: url(../chara/img/ch6_1.png);}


#ch7.box_all .chStand.imgArea_up{background-image: url(../chara/img/ch7_0.png);}
#ch8.box_all .chStand.imgArea_up{background-image: url(../chara/img/ch8_0.png);}
#ch9.box_all .chStand.imgArea_up{background-image: url(../chara/img/ch9_0.png);}
#ch10.box_all .chStand.imgArea_up{background-image: url(../chara/img/ch10_0.png);}
#ch11.box_all .chStand.imgArea_up{background-image: url(../chara/img/ch11_0.png);}

/*サンプルボイス-----*/
.sampleVoice{
	padding: 1em;
	text-align: center;
}
.sampleVoice .playBT{
	width: calc(33.3% - 0.5em );
	max-width: 109px;
	display: inline-block;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--subGray);
	margin: 0.25em;
	cursor: pointer;
	transition: opacity 0.2s 0s ease-out;
	position: relative;

}
.sampleVoice .playBT.new:after{
content: "new";
position: absolute;
display: block;
text-align: center;
width: 100%;
bottom:0;
left: 0;
background-color: var(--pink);
line-height: 1;
padding-bottom: 0.5em;
font-size: 0.8em;
}
.sampleVoice .playBT.selected{
	background-color: var(--yellow);

}
.sampleVoice .playBT:hover{
	opacity: 0.5;
}
/*---------------------------------------------------------
システム
------------------------------------------------------------*/
.sysWrap{
	padding: 1em 0 2em;
}
.sysBox{
	padding: 1em 1em 1em;
	width: calc(100% - 2em);
	margin-left: auto;
	border: var(--mainPurple) 1px solid;
	border-right: 0;
	margin-bottom: 1em;
	background-image: url(../img/bg_white.png);

}
.sysBox h2{
	width: 50%;
	background-color: var(--mainPurple);
	color: #fff;
	padding: 0.5em 1em;
	margin-left: -1em;
	letter-spacing: 1px;
	font-size: 1.3em;
}
.sysBox .txt{
	width: 50%;
	display: inline-block;
	vertical-align: top;
	padding: 1em;
}
.sysBox .img{
	width: 50%;
	display: inline-block;
	vertical-align: top;
}
.sysBox .img img{
	border: var(--mainPurple) 1px solid;
	vertical-align: bottom;
}
/*---------------------------------------------------------
ギャラリー
------------------------------------------------------------*/


.cgWrap{
	padding: 1em 1em 2em;
	max-width: 1340px;
	margin: 0 auto;

}
.cgWrap a{
	width: calc(20% - 1em);
	max-width: 252px;
	margin:0.5em;
	display: inline-block;
	vertical-align: top;
	position: relative;
	border: var(--mainPurple) 1px solid;

}
.cgWrap a.new:after{
	content: "new";
	width: 100%;
	height: 1.5em;
	display: block;
	position: absolute;
 background-color: #D52C71;
	text-align: center;
	color: #fff;
	bottom: 0;
	left: 0;
	z-index: 2;
}

.cgWrap a:before{
	content: "";
	transition: all 0.2s 0s ease-out;
	top:0;
	bottom:0;
	left:0;
	width: 0%;
	display: block;
	position: absolute;
	background-color: var(--purple_a);
	z-index: 1;
}

.cgWrap a:hover:before{
	width: 100%;

}

/*---------------------------------------------------------
サウンド
------------------------------------------------------------*/
.soundWrap{
	padding: 1em 0 2em;
}
.songBox{
	padding: 1em 1em 4em;
	width: calc(100% - 2em);
	margin-left: auto;
	border: var(--mainPurple) 1px solid;
	border-right: 0;
	margin-bottom: 1em;
	background-image: url(../img/bg_white.png);

}
.songBox h2{
	width: 50%;
	background-color: var(--mainPurple);
	color: #fff;
	padding: 0.5em 1em;
	margin-left: -1em;
	margin-bottom: 1em;
	letter-spacing: 1px;
	font-size: 1.3em;
}
.songTitle{
	text-align: center;
	font-size: max(2vw,1.5em);
	padding: 1em;
	line-height: 1.5em;
}
.artist{
	text-align: center;

}
.artistLink{
	width: calc(100% - 2em);
	margin-left: auto;
	max-width: 650px;
	background-color: var(--mainPurple);
	color: #fff;
	padding: 1em;
}
.artistLink a{
	margin: 0 0.5em;
	color: #fff;
}
.artistLink a:hover{
	color: var(--pink);
}
/*---------------------------------------------------------
スペシャル
------------------------------------------------------------*/
/*#special #subNavi{
	width: 60%;
	position: absolute;
	right: 0.5em;
	top:5.3vw;
	display: block;
}*/
#special #subNavi{
	width: 100%;
	max-width: 1300px;
	position: relative;
	top:0;
	right: 0;
	display: block;
	margin-left: auto;
	padding: 0 0.5em;
}
#special #navGrid{
	grid-template-columns:repeat(5, 1fr);
}

.itemWrap{
	padding: 1em 0 2em;
}
.itemBox{
	padding: 1em;
	width: calc(100% - 2em);
	margin-left: auto;
	border: var(--mainPurple) 1px solid;
	border-right: 0;
	margin-bottom: 1em;
	background-image: url(../img/bg_white.png);

}
.itemBox .new{
	position: relative;
	padding: 0 0 1em;
	border-bottom: var(--pink) 2px solid;
	margin-bottom: 1em;
}
.itemBox .new:before{
content: "new";
display: block;
background-color: var(--pink);
padding: 0.5em;
text-align: center;
color: #fff;
margin-bottom: 1em;
}
.twiIcon img{
	width: calc(16.6% - 1em);
	display: inline-block;
	vertical-align: top;
	margin:0.25em ;
}
.twiHeader img{
	width: calc(33.3% - 1em);
	display: inline-block;
	vertical-align: top;
	margin:0.25em ;
}
.itemBox h2{
	width: 50%;
	background-color: var(--mainPurple);
	color: #fff;
	padding: 0.5em 1em;
	margin-left: -1em;
	margin-bottom: 1em;
	letter-spacing: 1px;
	font-size: 1.3em;
}
/*movie*/
.movieWrap{
	width: calc(100% - 2em);
	margin: 1em auto 0;
	max-width: 1300px;
	padding-bottom: 1em;
}
.movieWrap .movieBox{
	width: calc(50% - 1em);
	display: inline-block;
	vertical-align: top;
	margin: 0.5em;
}
.movieWrap.play .movieBox{
	width: calc(33.3% - 1em);
}

.movieWrap .movieBox .txt{
	background-color: var(--mainPurple);
	color: #fff;
	text-align: center;
	padding: 0.5em;
}
.movieWrap .movieBox .txt.new:before{
	content: "new";
 background-color: #D52C71;
	color: #fff;
	padding: 0 0.5em;
	margin-right: 0.5em;
}

/*キャストコメント*/
.commentBtWrap{
	padding: 1em;
	text-align: center;
	
}
.commentBtWrap a{
	width: calc(50% - 1em);
	max-width: 696px;
	margin: 1em 0.5em;
	display: inline-block;
	border: var(--mainPurple) 1px solid;
	box-shadow: 2px 2px var(--mainPurple);
	transition: opacity 0.2s 0s ease-out;
	position: relative;

}
.commentBtWrap a.new:after{
	content: "new";
	position: absolute;
	display: inline-block;
	padding: 0 0.5em;
 background-color: #D52C71;
	color: #fff;
	right: 0;
	top:0;
}
.commentBtWrap a:hover{
	opacity: 0.5;
}
.commentWrap{
	padding-bottom: 2em;
}
.commentWrap a.back{
	width: 10em;
	margin: 1em auto;
	font-size: 1.5em;
	text-align: center;
	padding: 1em;
	background-color: var(--mainPurple);
	color: #fff;
	display: block;
	letter-spacing: 1px;
}
.commentWrap a.back:hover{
	color: var(--mainPurple);
	background-color: var(--yellow);
}
.commentBox{
	width: calc(100% - 1em);
	margin-left: auto;
	border: var(--mainPurple) 1px solid;
	border-right: 0;
	padding: 1em;
	background-image: url(../img/bg_white.png);
}
.commentBox .img{
	width: 25%;
	text-align: center;
	display: inline-block;
	vertical-align: top;
}
.commentBox .img img{
border: #fff 0.5em solid;
box-shadow: 1px 1px 5px #666;
}
.commentBox .txtArea{
	width: calc(75% - 1em);
	display: inline-block;
	vertical-align: top;
	padding: 0 1em 3em;
	margin-left: 1em;
}
.commentBox h2{
	padding: 1em;
	background-color: var(--mainPurple);
	border-left: var(--yellow) 0.5em solid;
	color: #fff;
	font-size: 1.3em;
}
.commentBox h2 .ch{
	font-size: 0.8em;
	margin-right: 0.5em;
}
.commentBox .qTxt{
	color: var(--blue);
	font-weight: bold;
	margin-top: 1em;
}
.commentBox .aTxt{
	padding: 0.5em 1em 1em;
}

/*バックナンバー*/
.backnumArea{
	padding: 1em;
	width: calc(100% - 2em);
	margin-left: auto;
	border: var(--mainPurple) 1px solid;
	border-right: 0;
	margin-bottom: 1em;
	background-image: url(../img/bg_white.png);

}

.backnumArea h2{
	width: 50%;
	background-color: var(--mainPurple);
	color: #fff;
	padding: 0.5em 1em;
	margin-left: -1em;
	margin-bottom: 1em;
	letter-spacing: 1px;
	font-size: 1.3em;
}

.backnumWrap{
	width: 100%;
	display: grid;
	grid-template-columns:repeat(3, 1fr);
	column-gap: 0.5em;
	row-gap:0.5em;
	text-align: center;
}
.backnumBox.wide{
	grid-column: span 3;
}
.backnumWrap .playBT{
	width:  100%;
	max-width: 800px;
	margin: 0 auto;
	display: block;
	cursor: pointer;
	position: relative;
	background-color: var(--yellow);
	overflow: hidden;
	color: #fff;
	text-align: center;
	padding: 1em;
}
.backnumWrap .playBT:before{
	content: "";
	width: 100%;
	left: 0.5em;
	top:0;
	bottom: 0;
	background-color: var(--mainPurple);
	transform: skewX(-15deg);
	position: absolute;
	display: block;
}
.backnumWrap .playBT:hover:before,.backnumWrap .playBT.selected:before{
	background-color: var(--subPurple);

}
.backnumWrap .playBT span{
	position: relative;
	z-index: 2;
}

/*人気投票*/
.resultWrap{
	padding: 1em 0 2em;
}
.resultTop{
	padding: 1em;
	width: calc(100% - 2em);
	margin-left: auto;
	border: var(--mainPurple) 1px solid;
	border-right: 0;
	margin-bottom: 1em;
	background-image: url(../img/bg_white.png);

}
.resultTop .txt{
	padding: 1em;
}
.attention{
	padding: 2em 1em;
	margin: 1em 0 3em;
	border-top: var(--mainPurple) 1px dashed;
	border-bottom: var(--mainPurple) 1px dashed;
	color:rgba(220,74,133,1.00);

}
.attention .img{
	width: 177px;
	display: inline-block;
	vertical-align: middle;
	
}
.attention .txt{
	width: calc(100% - 177px);
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
	
}
.attention .txt .notes li{
	font-weight: bold;
	line-height: 1.5em;
	margin: 0.5em 0;
}
.resultTop h2{
	width: 50%;
	background-color: var(--mainPurple);
	color: #fff;
	padding: 0.5em 1em;
	margin-left: -1em;
	margin-bottom: 1em;
	letter-spacing: 1px;
	font-size: 1.3em;
}
.resultTop a{
 width: 100%;
 max-width: 15em;
 color: #fff;
 background-color: var(--mainPurple);
 padding: 1em;
 display: block;
 margin: 1em 0;
}
.resultTop a:hover{
	background-color: var(--yellow);
	color: var(--mainPurple);
}

.voteBox{
	padding: 1em;
	width: calc(100% - 2em);
	margin-left: auto;
	border: var(--mainPurple) 1px solid;
	border-right: 0;
	margin-bottom: 1em;
	background-image: url(../img/bg_white.png);
	
}
.voteImg{
	background-position: left top;
	background-size: 25% auto;
	background-repeat: no-repeat;
	padding-left: calc(25% + 1em);
}
.vote-chName{
	width: 50%;
}
.voteBox h3{
	width: 15em;

	padding: 0.5em;
	 color: #fff;
	 background-color: var(--mainPurple);
	 display: inline-block;
}
.voteBox .comment{
	padding: 1em 0;
}
.contentsBox li{
	padding: 1em;
	font-size: max(0.9em,12px);
	border-bottom: var(--mainPurple) 1px dashed;
}
.voteTxt{

	padding-top: 1em;
}
.voteTxt span:not(.br2){
	display: inline-block;
	padding: 0.5em;
	margin-bottom: 2px;
	font-size: 1.2em;
	line-height: 1em;
}
#chara_ch01 .voteTxt span:not(.br2){
	background: rgba(56,192,120,0.5);
}
#chara_ch02 .voteTxt span:not(.br2){
	background: rgba(87,104,234,0.5);
}
#chara_ch03 .voteTxt span:not(.br2){
	background: rgba(13,55,103,0.5);
	color: #fff;
}
#chara_ch04 .voteTxt span:not(.br2){
	background: rgba(186,35,6,0.5);
}
#chara_ch05 .voteTxt span:not(.br2){
	background: rgba(145,31,82,0.5);
}
#chara_ch06 .voteTxt span:not(.br2){
	background: rgba(0,121,0,0.5);
}
#chara_ch07 .voteTxt span:not(.br2){
	background: rgba(152,110,70,0.5);
}
#chara_ch08 .voteTxt span:not(.br2){
	background: rgba(255,121,0,0.5);
}
.bottomTxt{
	background-color: var(--mainPurple);
	padding: 1em  0.5em;
	font-size: 1.5em;
	color: #fff;
	text-align: center;
}
.bottomArea a{
	display: block;
	position: relative;
}
.bottomArea a:before{
	content: "";
	transition: all 0.2s 0s ease-out;
	top:0;
	bottom:0;
	left:0;
	width: 0%;
	display: block;
	position: absolute;
	background-color: var(--purple_a);
	z-index: 1;
}

.bottomArea a:hover:before{
	width: 100%;

}

/*---------------------------------------------------------
製品情報（二階層目）
------------------------------------------------------------*/
.specWrap{
		width: calc(100% - 2em);
	margin-left: auto;
	padding-bottom: 5em;

}

dl.cast{
	padding: 0 0.5em;
	font-size: max(1em,11px);

}
dl.cast dt{
	width: 6em;
	float: left;
}
dl.cast dd{
	margin-left: 7em;
	margin-bottom: 0.5em;
}
#bonusArea{
	width: 100%;
	position: relative;
	margin-top: 2em;
}
.bonusBtWrap{
	display: grid;
	grid-template-columns:repeat(3, 1fr);
	column-gap: 0;
	row-gap: 0;
}
.bonusBt ,.shopBt{
	border: var(--mainPurple) 1px solid;
	padding: 2em;
	text-align: center;
	cursor: pointer;
	line-height: 1.3em;
	color: #000;
	font-weight: bold;
	background-color: var(--gray_a);
}
.bonusBt:not(.selected):hover ,.shopBt:hover{
background-color: var(--purple_a);
}
.bonusBt.tall{
	padding: 1.4em 2em;
}
.bonusBt.selected{
background-color: var(--mainPurple);
	color: #fff;
}
.bonusWrap{
	border: var(--mainPurple) 3px solid;
		padding: 1em;
	background:url(../img/bg_white.png);
}
.bonusWrap .img{
	width: 50%;
	display: inline-block;
	vertical-align: middle;
	}
	.bonusWrap .txtArea{
		width: 50%;
	display: inline-block;
	vertical-align: middle;

	padding: 1em 1em 2em;
	color: var(--mainPurple);

}
	.bonusWrap .txtArea h2{
		padding: 0;
		border: 0;
		font-size: 2em;
		line-height: 1.5em;
		border-bottom:  var(--mainPurple) 1px solid;
		margin-bottom: 0.3em;
		color: var(--mainPurple);
	}
		.bonusWrap .txtArea strong{
		 background-color:var(--mainPurple);
		 color: #fff;
		 padding: 0.5em;
		 display: block;
		 line-height: 1.3em;font-weight: normal;
		}
		.bonusWrap .txtArea .txt{
			padding: 1em;
		}
		.cdStory{
			padding: 1em;
			border: var(--mainPurple) 1px solid;
			margin-top: 1em;
		}
		/* 全体のスタイル */
		.swiper-pagination-bullet {
			width: 0.8em; /* 幅 */
			height: 0.8em; /* 高さ */
			background: var(--mainPurple); /* 色*/
			opacity: 0.2; /* 半透明（デフォルトでは0.2） */
		}
				/* 全体のスタイル */
		.pickup_slide .swiper-pagination-bullet {

			background: #fff; /* 色*/
		}

		/* 現在のスライドのスタイル */
		.swiper-pagination-bullet-active {
			background: var(--pink); /* 色：黄色 */
			opacity: 1; /* 不透明 */
			transform: scale(1.2);
		}
				/* 全体のスタイル */
		.pickup_slide .swiper-pagination-bullet-active {

			background: var(--pink); /* 色：黄色 */
		}


		.swiper-container{
	padding-bottom: 2.5em;
	box-sizing: content-box;
	position: relative;
} 
 .swiper-pagination{
bottom: 0;
}
#shopArea h2{
	width: 100%;
	background-color: var(--mainPurple);
	color: #fff;
	padding: 0.5em 1em;
	margin-top: 2em;
	letter-spacing: 1px;
	font-size:  1.5em;
	line-height: 1.5em;
}

/*---------------------------------------------------------
@media
------------------------------------------------------------*/
@media (max-width: 1600px) {
#product h2{
	width: 45vw;

}

#product .img{

	width: calc(100% - 45vw);
}
#product .txt{
	width: 45vw;
	padding-top: 9vw;

}
}

@media (max-width: 1024px) {
.topMovie{
	width: 39%;
	position: absolute;
	bottom :1em;
	left: 2%;
	top:calc(6em + 23em);
}
#product h2{
	width: 45%;

}

#product .img{

	width: calc(100% - 45%);
}
#product .txt{
	width: 45%;
	padding-top: 7em;

}
.topBonusBt{

	bottom: -3vw;
	width: 55%;
}

.worldBox{
	min-height: 22em;
}

}

@media (max-width: 912px) {
.box_all{
	background-position: right 32vw;
	background-size: 30% auto;
	padding-top: 1em;
}
.charaArea{

	grid-template-columns:5em 1fr;
}
.sideNavi{
	display: grid;
	grid-template-columns:repeat(1, 1fr);
	column-gap: 0.25em;
	row-gap:0.25em;
}

.box_a{
	width: 85%;
}

.box_b_wrap{
	padding: 100% 0 0;
	width: 100%;
	max-width: none;
}
#ch0 .box_b_wrap,
#ch7 .box_b_wrap,
#ch8 .box_b_wrap,
#ch9 .box_b_wrap,
#ch10 .box_b_wrap,
#ch11 .box_b_wrap{
	padding: 100% 0 0;
}

.chImg{
	width: 100%;
}
.chStand{
	width: 100%;
	top:37vw;
	
}
#ch10 .chImg{
	right: 0;
}

#ch0 .chStand,
#ch7 .chStand,
#ch8 .chStand,
#ch9 .chStand,
#ch10 .chStand,
#ch11 .chStand{
	top:3vw;
}

.box_b_txt{

	background-size: 60% auto;

}
.box_b_txt:before{
background-size: 70% auto;
background-position: left center;
}

}

@media (max-width: 786px) {

.topImg{
	width: 100%;
}
.topImg img.top_a{
	margin-bottom: 50%;

	border-bottom: var(--mainPurple) 4px solid;

}
.topImg img.top_b{
	border-top: var(--mainPurple) 4px solid;

}

.topArea h1{
	width: 100%;
	position: absolute;
	padding: 0 3% 1em;
	top:41%;
	text-align: center;
}
.topArea h1 img{
	width: 60%;
}


.topMovie{
	width: 100%;
	position: relative;
	bottom :auto;
	left: 0;
	top:auto;
	margin: 0 auto;
	max-width: 838px;
}
.topMovie .movieBox a{

	border: var(--mainPurple) 0.5em solid;
}

.topGrid{
	display:block;
}
#news{
	margin-bottom: 2em;
}
#news .newsBox{
	height: 200px;
}
#product {
	background-size: 130% auto;
	background-position: left bottom;
}
#product:after{
	background-size: 120% auto;
}
#product h2{
	width: 100%;
	position: relative;
	margin-left: auto;
	z-index: 2;

}

#product .img{

	width: 100%;
}
#product .txt{
	width: 100%;
	padding-top: 0;
	padding: 0 2em 2em;

}
.topBonusBt{

	bottom: 0;
	width: 50%;
}

/*殿堂入り*/
.silver{	
position: absolute;
top:-5em;
width: 50%;
z-index:899;
}

.catch{
	width: 90%;	
}
.storyBox{
	width: calc(100% - 1em);
	padding: 4em 1em 10em;
}
.storyBox:after{
	width: 80%;
	background-image: url(../story/img/syory_bg_r_smp.jpg);
	right: 0;
	bottom: -2em;
}
.worldBox{
	width: calc(100% - 1em);
	margin-bottom: 2em;
}
.worldBox .txtArea{
	width: 100%;

}
.worldBox .txtArea .app .app_img{
	width: 20%;
}
.worldBox .txtArea .app .app_txt{
	width: 80%;
}
.worldBox .img{
	width:100%;
	position:relative;
	bottom: auto;
	margin:0 auto;
	border: 0;
}

.twiHeader img{
	width: calc(50% - 1em);
}
.movieWrap.play .movieBox{
	width: calc(50% - 1em);
}


.bonusWrap .img{
	width: 100%;
	display: block;
	}
	.bonusWrap .txtArea{
	width: 100%;
	display: block;
	padding-bottom: 2em;

}
#special #navGrid{
	grid-template-columns:repeat(3, 1fr);
}
.resultTop a{
 width: 100%;
 max-width: none;
 text-align: center;
}
.voteTxtArea{
	background-color: #fff;
}
.voteImg{
	background-size: 100% auto;
	padding-left: 0;
	padding-top: 150%;
}
.vote-chName{
	width: 100%;
	padding-top: 0.5em;
}
.bottomArea a{
	overflow: hidden;
	text-align: center;
}
.bottomArea a img{
	width: 150%;
}
}
@media (max-width: 480px) {
/*殿堂入り*/
.silver{	
position: absolute;
top:-5em;
width: 60%;
z-index:899;
}

#product .img{

		padding:1em 2em;

}
#product .txt{

	padding: 0 1em 1em;

}
.topBonusBt{

	width: 100%;
	position: relative;
	margin: 0.5em auto 0;
	display: block;
	max-width: 416px;
}


.top_bottom{

	background-size: 150% auto;
}
.storyBox{
	padding: 4em 1em 8em;
}
.catch{
	width: 95%;	
	padding: 1em;
}

.storyBox:after{
	width: 90%;
}

.twiIcon img{
	width: calc(33.3% - 1em);
}
.twiHeader img{
	width: calc(100% - 1em);
}
.itemBox h2{
	width: 70%;
}
/*movie*/
.movieWrap{
	width:100%;
}
.movieWrap .movieBox{
	width: calc(100% - 1em);
	display:block;
	margin: 1em 0.5em;
}
.movieWrap.play .movieBox{
	width: calc(100% - 1em);
		margin:0.5em;

}


.songBox h2{
	width: 70%;
}

.sysBox{
	width: calc(100% - 1em);

}
.sysBox h2{
	width: 80%;
}
.sysBox .txt{
	width: 100%;
	display: block;
}
.sysBox .img{
	width: 100%;
	display: block;
}
.bonusBt ,.shopBt{
	padding: 2em 0.5em;
}
.bonusWrap{

	padding-bottom:1em;

}
.bonusWrap .txtArea{
	padding: 1em 0 2em;

}
#ch0 .box_b_wrap,
#ch7 .box_b_wrap,
#ch8 .box_b_wrap,
#ch9 .box_b_wrap,
#ch10 .box_b_wrap,
#ch11 .box_b_wrap{
	padding: 150% 0 0;
}
.commentBox .img{
	width: 100%;
	display: block;
}
.commentBox .txtArea{
	width: 100%;
	display: block;
	margin-left: 0;
	padding: 1em 0;
}
.commentBtWrap a{
	width: calc(100% - 1em);
	margin: 0.5em;
}
.backnumWrap{

	grid-template-columns:repeat(2, 1fr);
}
.backnumBox.wide{
	grid-column: span 2;
}
.backnumArea h2{
	width: 80%;
}
#special #navGrid{
	grid-template-columns:repeat(2, 1fr);
}
.attention .img{
	width: 30%;
	display: block;
	vertical-align: middle;
	margin: 0 auto;
	
}
.attention .txt{
	width: 100%;
	display:block;
	vertical-align: middle;
	font-weight: bold;
	
}
.bottomTxt{

	font-size: 1.3em;
}

}
@media (max-width: 280px) {

#news h2:after{

	top:51%;
}
 .box_b_wrap{
	padding: 140% 0 0;
}
#ch0 .box_b_wrap,
#ch7 .box_b_wrap,
#ch8 .box_b_wrap,
#ch9 .box_b_wrap,
#ch10 .box_b_wrap,
#ch11 .box_b_wrap{
	padding: 180% 0 0;
}

}