@charset "utf-8";
/* CSS Document */
#topArea{
	position: relative;
	overflow: hidden;
	/*background-image: url(../../img/renew/top.png);
	background-position: left 3em;
	background-repeat: no-repeat;
	background-size: 68%;*/
}
#topArea .topImg{
	position: absolute;
	background-image: url(../../img/renew/top.png);
	background-position: left top;
	background-repeat: no-repeat;
	width: 68%;
	left:0;
	top:3em;
	bottom:0;
	display: block;
	background-size: 100% auto;
}
#topArea h1{
	width: 50%;
	margin-top: -6.125em;
	position: absolute;
	right: 0;
	top:50%;
	text-align: center;
	padding: 0 2em;
	
}
#topArea h1 img{
 	max-width: 492px;
}
#news{
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	border: #3d3d3d 0.2em solid;
	border-left-width: 0.5em;
	border-right-width: 0.5em;

	border-top: none;
	font-size: 0.8em;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	background-color: #3d3d3d ;
}
#news .newsBox{
	height: 1.8em;
	padding: 0 0.5em;
	line-height: 1.8em;
	overflow-y: hidden;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;

	background-color: #fff;

}
#news .newsBox.open{
	height: 6em;
	overflow-y: scroll;
}
#news .newsBox dt{
	float: left;
	width: 8em;
	color: #6734cd;
}
#news .newsBox dd{
	margin-left: 8em;
}
a.noirestyle{
	width: 30%;
	max-width:232px ;
	position: absolute;
	top:2em;
	right: 5em;
	transition: all 300ms 0s ease;
}
a.noirestyle img{
	filter:drop-shadow(1px 1px 5px #a74ce0);
}
a.noirestyle:hover{
	transform: scale(1.1);
}
.ch_selection{
	width: 80%;
	padding: 0.5em;
	position: relative;
	z-index: 1;
}
.ch_selection img{
	width: 20%;
	max-width: 111px;
	display: inline-block;
	vertical-align: top;
}
.ch_selection .txtArea{
	width: 80%;
	display:inline-grid;
	grid-template-columns: 6em 1fr;
	padding-left: 0.5em;
}
.ch_selection .txtArea .colorBg{
	text-align: center;
	padding: 0.5em;
	border-radius: 6px;
	background-color: #ed5289;
	color: #fff;
	line-height: 1.5em;
	font-size: 0.8em;
	font-weight: bold;

}
.ch_selection .txtArea .txt{
	font-size: 0.8em;
	padding: 0.5em;
	line-height: 1.5em;
		text-shadow:1px 1px 2px #fff,-1px 1px 2px #fff,-1px -1px 2px #fff,1px -1px 2px #fff;
}
.specTxt{
	width: 100%;
	text-align: center;
	background-color: #ca008c;
	color: #fff;
	font-size: 0.9em;
}/*--------------------------------------*/
/*ブレイクポイント*/
/*--------------------------------------*/
.slideBox.pt4{
	max-width: 1300px;
	padding: 1em;
	margin: 0 auto;
}
.slideBox.pt4 .swiper-slide a{
    
	transition: all 200ms 0s ease;
	display: block;
	
}
.slideBox.pt4 .swiper-slide a:hover{
    opacity: 0.8;

}



/*---------------------------------------------------------
ムービー
------------------------------------------------------------*/
#special .movieBox{
	width:32.3%;
	margin:10px 0.5%;
	display:inline-block;
	vertical-align:top;
	background-color:#000;
	color: #fff;
}
.movieBox .txt{
	text-align:center;
	padding:5px 0;
	font-size:12px;
}

/*---------------------------------------------------------
ストーリー
------------------------------------------------------------*/
.storyArea{
	background-image: url(../../story/img/bg.jpg);
	color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-shadow:1px 1px 2px #000,0px 0px  3px #000,0px 0px  5px #000;
	font-size: 1.1em;
	letter-spacing: 0.05em;
	line-height: 1.8em;
}
/*---------------------------------------------------------
キャラクター
------------------------------------------------------------*/
#chNavi a{
	width: 11.5%;
	margin: 0.5em 0.5%;
	display: inline-block;
	vertical-align: top;
	border: #aaa 2px solid;
	border-radius: 6px;
	overflow: hidden;
	transition: all 300ms 0s ease;
}
#chNavi a:hover{
	transform: scale(1.05);
}
.chSubNavi{
	padding: 0.5em 1em;
	text-align: center;
	border-bottom: #a925df 3px solid;
	position: relative;
	z-index: 5;
}
.chSubNavi a{
	font-weight: bold;
	letter-spacing: 1px;
	color: #a925df;
}
.chSubNavi a.navBt{
	display: inline-block;
	vertical-align:top;

}
.chSubNavi a.navBt:hover{
	background-color: #eee;
}

.chSubNavi a.navBt img{
	width:3em;
	display: inline-block;
	vertical-align: middle;
	transition: all 300ms 0s ease;
}
.chSubNavi a.navBt:hover img{
	transform: scale(1.2);
}
.chSubNavi a.navBt.prevBt:after{
	content: "Prev";
	display: inline-block;
	vertical-align: middle;
	padding: 0 0.5em;
	
}
.chSubNavi a.navBt.nextBt:before{
	content: "Next";
	display: inline-block;
	vertical-align: middle;
	padding: 0 0.5em;
}
.chSubNavi .backBt{
	padding:  0 1em;
	line-height: 3em;
	display: inline-block;
	vertical-align:top;
	border-left: #ccc 1px solid;
	border-right: #ccc 1px solid;

}
.chSubNavi .backBt:hover{
	background-color: #eee;
}
.chImg{
	width: 60%;
	margin-left: auto;
	position: relative;
	z-index: 2;
}
.chImg .cosBt{
	width: 20%;
	max-width: 118px;
	position: absolute;
	bottom:0.5em;
	right:0.5em;
/*	transition: all 300ms 0s ease;
*/	border-radius: 50%;
}
.chImg .cosBt:hover{
/*	transform: translateY(-1em);
*/}

.chImg .cosBt a{
	display: block;
	transition: all 300ms 0s ease;
	position: relative;
	bottom:0em;
}
.chImg .cosBt:hover a{
	transform:rotateZ(360deg);
	bottom:1em;
}

.chTxt{
	width: 100%;
	padding-right: 50%;
	position: absolute;
	top:0;
	botom:0;
	left:0;
	padding-top: 5em;
}
.chTxt .txt{
	position: relative;
	padding: 0.5em 1em;
	min-height: 10em;
}
.chTxt .txt span{
	position: relative;
	z-index: 2;

}
.chTxt .txt:after{
	content: "";
	background-color: #f2bbff;
	display: block;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	width: 200%;
	border-bottom: #fff 1px solid;
	box-shadow: 0 3px 0 0 #f2bbff;
}
.chTxt .castArea{
	color: #fff;
	position: relative;
	padding: 0.5em 1em;
}

.chTxt .castArea:after{
	content: "";
	background-color: #a925df;
	display: block;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	width: 200%;
	border-top: #fff 1px solid;
	border-bottom: #fff 1px solid;
	box-shadow: 0 -3px 0 0 #f2bbff;

}
.chTxt .castArea .castName{
	position: relative;
	z-index: 2;
	display: inline-block;
	vertical-align: middle;
	padding-right: 1em;
}
.chTxt .castArea .longBt{
	position: relative;
	z-index: 2;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	background-color: #ba50e5;
	border: #fff 3px solid;
	border-top-width: 1px;
	border-radius: 6px;
	padding: 0 1em;
	box-sizing: border-box;
	line-height: 1.2em;
	font-size: 0.8em;
	transition: all 300ms 0s ease;
}
.chTxt .castArea .longBt:hover{
	opacity: 0.7;
}

.chWrap{
	position: relative;
}
.stand_a{
	transition: all 300ms 0s ease;
	opacity: 0;
	transform: translateY(-3em);
}

.stand_a.showFlg{
	opacity: 1;
	transform: translateY(0);

}
.stand_b{
	transition: all 300ms 0s ease;
	opacity: 1;
	transform: translateY(0);
	position: absolute;
	width: 100%;
	top:0;
	left:0;
	bottom:0;
}

.stand_b.showFlg{
	opacity: 0;
	transform: translateY(-3em);

}


/*---------------------------------------------------------
システム
------------------------------------------------------------*/
.systemArea #subNavi:after{
	background-color:transparent;
}
#world.systemWrap,#mintsubu.systemWrap{
	background-image: url(../../system/img/world_bg.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	 
}
#world .map{
	max-width: 707px;
	margin: 0 auto;
	position: relative;
}
#world .map a{
	font-size: 1em;
	color: #fff;
	font-weight: bold;
	position: absolute;
	z-index: 2;
	display: inline-block;
	box-shadow: 2px 2px 0 #fff; 
	transition: all 300ms 0s ease;
	cursor: pointer;

}
#world .map a:hover{
	transform: scale(1.1);
}
#world .map a span{
	padding: 0.2em 0.5em;
	position: relative;
	display: block;
}
#world .map a span:after{
	content: "▼";
	width: 1em;
	height:  1em;
	position: absolute;
	bottom:-0.6em;
	right: 0em;
	display: block;
	color: #fff;
	z-index: 1;
}

#world .map a.w1{
		background-color: #6600cc;
		top:42%;
		left:19%;
}

#world .map a.w2{
		background-color: #333333;
		top:36%;
		left:58%;
}
#world .map a.w3{
		background-color: #3f8fd8;
		top:16%;
		left:48%;
}
#world .map a.w4{
		background-color: #009900;
		top:53%;
		left:43%;
}
#world .map a.w5{
		background-color: #990000;
		top:36%;
		left:33%;
}
.sysPop{
	width: 100%;
	max-width: 900px;
	top:50%;
	left:50%;
	opacity: 0;
	transition: all 300ms 0s ease;
	transform: scale(0);
	position: absolute;
	z-index: 999;
	background-color: #fff;
}
.sysPop.show{
	transform: scale(1);
	opacity: 1;
}
.popClose{
	position: absolute;
	display: block;
	width: 5em;
	text-align:center;
	right: 6px;
	top: 6px;
	cursor: pointer;
	padding: 0.2em 0.5em;
	background-color:#7e63d3;
	color: #fff;
}
.popClose:hover{
	background-color: #ef89fe;

}
#world .worldBox{
	width: 100%;
	padding: 2em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	border: #fff 3px solid;
	box-shadow:inset 0 0 0 3px #7e63d3 , 0 0 5px #000;

}
#world .worldBox img{
	width: 50%;
	max-width: 450px;
	display: inline-block;
	vertical-align: top;
}
#world .worldBox .txt{
	text-align: left;
	padding: 1em;
	border: #ccc 1px solid;
	background-image:url(../../img/renew/bg_white.png);
}

.worldName{
	border-left: #ccc 0.5em solid;
	padding-left: 0.3em;
	line-height: 1.3em;
	position: relative;
	text-align: left;
	margin-bottom: 1em;
	font-weight: bold;
}

.worldName span:not(.small){
	display: inline-block;
	border-left: #ccc 0.3em solid;
	border-right: #ccc 0.3em solid;
	position: relative;
	padding: 0 0.5em;
}
#world1Area.worldBox{
	background-image: url(../../system/img/w1_bg.jpg);
}
#world2Area.worldBox{
	background-image: url(../../system/img/w2_bg.jpg);
}
#world3Area.worldBox{
	background-image: url(../../system/img/w3_bg.jpg);
}
#world4Area.worldBox{
	background-image: url(../../system/img/w4_bg.jpg);
}
#world5Area.worldBox{
	background-image: url(../../system/img/w5_bg.jpg);
}

/*みんつぶ*/
#mintsubu{
	text-align: center;
	padding-bottom: 3em;
}
#mintsubu .topTxt{
	padding: 1em;
	text-shadow:1px 1px 2px #fff,0px 0px  3px #fff,0px 0px  5px #fff;

}
#mintsubu .qTxt{
	width: 100%;
	max-width: 800px;
	margin:0 auto 0.5em;
	display: block;
	font-size: 1.5em;
	text-shadow:1px 1px 2px #ff9900,0px 0px  3px #ff9900,0px 0px  5px #ff9900;
	font-weight: bold;
	padding: 0.3em 1.5em;
	position: relative;
	color: #fff;
}
#mintsubu .qTxt:after{
	content: "";
	width: 100%;
	left:0;
	top:50%;
	bottom: 0;
	display: block;
	position: absolute;
	border-radius: 50px;

	background-color: #ff9900;
}
#mintsubu .qTxt span{
	position: relative;
	z-index: 1;
}
#mintsubu a.mdBt:not(.min_c){
	width: 9em;
	height: 9em;
	margin: 0.5em 0.5%;
	display: inline-block;
	vertical-align: top;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}
#mintsubu a.mdBt:not(.min_c) .txt{
	position: absolute;
	width: 100%;
	bottom:1em;
	padding: 0.2em 0 0.5em;
	text-align: center;
	transform: rotateZ(-15deg);
	background-color: #fff;
	left:0.8em;
	font-size: 0.8em;
	font-weight: bold;
	z-index: 2;
}
#mintsubu a.mdBt.m1 .txt{
	background-color: #62156c;
}
#mintsubu a.mdBt.m2 .txt{
	background-color: #333333;
}
#mintsubu a.mdBt.m3 .txt{
	background-color: #032263;
}
#mintsubu a.mdBt.m4 .txt{
	background-color: #2d6006;
}
#mintsubu a.mdBt.m5 .txt{
	background-color: #721618;
}
#mintsubu a.mdBt:not(.min_c) .img{
	position: absolute;
	top:0.2em;
	left:0.2em;
	right:0.8em;
	bottom: 0.8em;
	border-radius: 50%;
	overflow: hidden;
}
#mintsubu a.mdBt:not(.min_c) .img img{
	display: block;
	transition: all 300ms 0s ease;
	transform: scale(1);

}
#mintsubu a.mdBt:not(.min_c):hover .img img{
	transform: scale(1.2);
}
.mdBt.m1{
	background-color: #62156c;
	color: #ae62b5;
}
.mdBt.m2{
	background-color: #333333;
	color: #999999;
}
.mdBt.m3{
	background-color: #032263;
	color: #3f65c9;
}
.mdBt.m4{
	background-color: #2d6006;
	color: #63a934;
}
.mdBt.m5{
	background-color: #721618;
	color: #c7474a;
}
#mintsubu .worldBox{
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	border: #fff 3px solid;
	box-shadow:inset 0 0 0 3px #7e63d3 , 0 0 5px #000;

}
/*みんつぶチェック*/
.minCheckWrap{
	max-width: 800px;
	margin:0 auto 0.5em;
	border: #990000 1px solid;
	color: #900;
}
.minCheckWrap .txt{
	width: 70%;
	display: inline-block;
	vertical-align:middle;
	text-align: left;
	padding: 1em;
	text-shadow:1px 1px 2px #fff,0px 0px  3px #fff,0px 0px  5px #fff;
}
	.minCheckWrap .img{
		width: 30%;
		text-align: center;
		display: inline-block;
		vertical-align:middle;
		padding: 0.5em;
	}
	.minCheckWrap .img a{
		max-width: 200px;
		height: auto;
		display: block;
		margin-left: auto;
		position: relative;
		cursor: pointer;
	}
	.minCheckWrap .img a img{
		vertical-align: bottom;
	}


	.minCheckWrap .img a:after{
		content: "CLICK!!";
		height: 1.5em;
		line-height: 1.5em;
		width: 100%;
		bottom:0;
		left:0;
		color: #fff;
		background-color: #900;
		text-align: center;
		display: block;
		position: absolute;
	}
	#minCheckArea{
		background-image: url(../../system/img/world_bg.jpg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;

	}
	#minCheckArea img{
		border: #fff 3px solid;
		box-shadow:0 0 5px #000;
	}
	#minCheckArea .imgBox1{
		width: 60%;
		position: relative;
		padding:1em 3em;
		transition: all 500ms 0.5s ease;
		transform: translateY(1em);
		opacity: 0;
	}
	#minCheckArea .imgBox1_2{
		width: 60%;
		position: absolute;
		bottom:-5em;
		left:1em;
		transition: all 500ms 0.7s ease;
		transform: translateX(-1em);
		opacity: 0;
	}
	#minCheckArea .imgBox2{
		width: 60%;
		position: relative;
		padding:1em ;
		z-index: 1;
		margin-top: -10em;
		margin-left: auto;
		transition: all 500ms 1s ease;
		transform: translateX(-1em);
		opacity: 0;

	}
	#minCheckArea .imgBox2:after{
		content: "";
		width: 45%;
		height: 8em;
		position: absolute;
		display: block;
		background-image: url(../../system/img/min_check_icon2.png);
		background-repeat: no-repeat;
		background-size: contain;
		right: 0.7em;
		top:-0.7em;
	}
	#minCheckArea .imgBox1_2 span:after{
		content: "";
		width: 60%;
		height: 8em;
		position: absolute;
		display: block;
		z-index: 3;
		background-image: url(../../system/img/min_check_icon1.png);
		background-repeat: no-repeat;
		background-size:contain;
		top:30%;
		left:50%;
	}
	
	.sysPop.show #minCheckArea .imgBox1{
		transform: translateY(0);
		opacity: 1;

	}
	.sysPop.show #minCheckArea .imgBox1_2{
			transform: translateX(0);
			opacity: 1;
	}
	.sysPop.show #minCheckArea .imgBox2{
			transform: translateX(0);
			opacity: 1;
	}

/*みんつぶ中身*/
	.minImg{
		width: 16%;
		max-width: 150px;
		position: absolute;
		display: block;
	}
	.minImg .box{
		position: relative;
	}
	.minImg .txt{
		position:absolute;
		bottom:100%;
		margin-top: -3em;
		width: 150%;
		left:-25%;
		display: block;
		background-image: url(../../img/renew/bg_white.png);
		border-radius: 6px;
		border: #999 1px solid;
		padding: 0.6em 0.5em 0.5em;
		z-index: 1;
		font-size: 0.8em;
		line-height: 1.5em;
		transform: scale(0);
		transition: all 300ms 0s ease;

	}
	 .minImg .txt.txtShow{
		transform: scale(1);
	} 
	.minImg .txt .box:after{
		content: "▼";
		width: 1em;
		height: 1em;
		line-height: 1em;
		position: absolute;
		margin-left: -0.5em;
		
		bottom:-1.4em;
		left: 50%;
		display: block;
		color: #fff;
		text-shadow: 1px 1px 2px #999, -1px 1px 2px #999;
		transform:scaleX(1.5) scaleY(0.6);
	}
	.minImg .txt .name{
		display: inline-block;
		padding: 0 1em;
		background-color: #fff;
		border: #999 1px solid;
		position: absolute;
		z-index: 2;
		top:-2em;
		left: -1em;
		font-size: 0.8em;
		border-radius: 50px;
	}
	.min1_1{
		bottom:15%;
		right: 10%;
	}
	.min1_2{
		bottom:15%;
		left: 5%;
	}
	.min1_3{
		top:30%;
		left: 12%;
	}
	.min1_4{
		bottom:8%;
		left: 30%;
	}
	.min1_3.minImg .txt,.min1_4.minImg .txt,.min1_6.minImg .txt{
		width: 170%;
		left: -35%;
	}
	.min1_5{
		bottom:35%;
		left: 34%;
	}
	.min1_5.minImg .txt{
		width: 100%;
		left: 0%;
	}
	.min1_6{
		top:20%;
		left: 45%;
	}
	.min1_7{
		top:30%;
		right: 15%;
	}
	.min1_8{
		bottom:18%;
		right: 35%;
	}
	
	.min2_1{
		bottom:15%;
		right: 10%;
	}
	.min2_2{
		bottom:15%;
		left: 5%;
	}
	.min2_3{
		top:30%;
		left: 12%;
	}
	.min2_4{
		bottom:30%;
		left: 34%;
	}
	.min2_5{
		top:30%;
		right: 35%;
	}
	.min2_6{
		top:13%;
		left: 28%;
	}
	.min2_7{
		bottom:8%;
		left: 23%;
	}
	.min2_8{
		bottom:15%;
		right: 35%;
	}
	.min2_3.minImg .txt,.min2_4.minImg .txt,.min2_5.minImg .txt,.min2_8.minImg .txt,.min2_9.minImg .txt{
		width: 130%;
		left: -15%;
	}
	.min2_9{
		top:20%;
		right: 18%;
	}
	.min3_1{
		bottom:20%;
		left: 6%;
	}
	.min3_2{
		bottom:8%;
		left: 23%;
	}
	
	.min3_3{
		bottom:20%;
		right: 8%;
	}
	.min3_3.minImg .txt,.min3_4.minImg .txt{
		width: 100%;
		left: 0%;
	}
	.min3_4{
		bottom:15%;
		right: 43%;
	}
	.min3_5{
		top:30%;
		right: 38%;
	}
	.min3_6{
		top:20%;
		right: 20%;
	}
	.min3_6.minImg .txt,.min3_7.minImg .txt{
		width: 130%;
		left: -15%;
	}
	.min3_7{
		top:27%;
		left: 23%;
	}
	.min3_8{
		bottom:18%;
		right: 25%;
	}
	.min3_8.minImg .txt{
		width: 110%;
		left: -5%;
	}
	
	.min4_1{
		bottom:9%;
		right: 40%;
	}
	.min4_2{
		bottom:20%;
		left: 23%;
	}
	.min4_2.minImg .txt{
		width: 100%;
		left: 0%;
	}
	.min4_3{
		top:30%;
		left: 38%;
	}
	.min4_3.minImg .txt{
		width: 110%;
		left: -5%;
	}
	.min4_4{
		bottom:18%;
		right: 25%;
	}
	
	.min4_5{
		bottom:10%;
		left: 6%;
	}
	.min4_5.minImg .txt{
		width: 100%;
		left: 0%;
	}
	.min4_6{
		top:18%;
		right: 25%;
	}
	.min4_7{
		bottom:27%;
		right: 8%;
	}
	.min4_7.minImg .txt{
		width: 100%;
		left: 0%;
	}
	.min4_8{
		top:16%;
		left: 20%;
	}
	.min5_1{
		top:27%;
		right: 21%;
	}
	.min5_2{
		top:28%;
		left: 23%;
	}
	.min5_3{
		bottom:15%;
		right: 40%;
	}

	.min5_1.minImg .txt,.min5_2.minImg .txt,.min5_3.minImg .txt{
		width: 100%;
		left: 0%;
	}
/*その他システム*/
.sysBox{
	padding: 1em 0;
}
#lily .txtArea{	
	width: 40%;
	display: inline-block;
	vertical-align:middle;
	padding: 1em 0;
	padding-right: 1em;
}
#lily .img{
	width: 60%;
	display: inline-block;
	vertical-align:middle;
}
#lily .txt{
	padding: 1em;
	border: #ccc 1px solid;
	margin-top: 1em;
}
#costume .txt{
	padding: 1em 0;
}
#costume a{

	color: #000;
	padding: 0.5em 1em;
	border: #666 1px solid;
	position: relative;
	width: 70%;
	display: inline-block;
	vertical-align: middle;
}
#costume a:after{
	content: "";
	top:2px;
	left:2px;
	width: 0;
	bottom:2px;
	background: linear-gradient(90deg,rgba(238,192,254,1),rgba(238,192,254,0));
	display: block;
	position: absolute;
	transition: all 300ms 0s ease;
}
#costume a:hover:after{
width: calc(100% - 4px);
}
#costume .linkName{
	padding: 1px;
	padding-right: 0;
	color: #000;
	position: relative;
	width: 100%;
	z-index: 2;
}
#costume .linkName span:not(.small){
display: block;
border-bottom: #000 1px solid;
border-left: #000 1px solid;
padding: 0 1em;
padding-left:  calc(16px + 0.5em);

}
#costume .linkName span.small{
	font-size: 0.8em;
}
#costume .linkName span:not(.small):before{
content: "";
position: absolute;
display: block;
width: 2px;
left:9px;
top:30%;
bottom: 4px;
background-color: #000;

}
#costume .linkName span:not(.small):after{
content: "";
position: absolute;
display: block;
width: 3px;
left:13px;
top:60%;
bottom: 4px;
background-color: #000;

}


#costume .linkName:before{
content: "";
position: absolute;
display: block;
width: 3px;
left:4px;
top:3px;
bottom: 4px;
background-color: #000;
}
.cosLinkBox{
	padding: 1em 0 ;
	border-bottom: #ccc 2px dotted;
	margin-bottom: 1em;
}
.cosLinkBox .img{
	width: 30%;
	display: inline-block;
	vertical-align: middle;
	padding-left: 1em;
}
.xBt:before{
	content: "×";
	width: 1.5em;
	height: 1.5em;
	text-align: center;
	font-size: 1em;
	line-height: 1.5em;
	background-color: #666666;
	border-radius: 50%;
	display: inline-block;
	color: #b9d5ff;
}
.sqBt:before{
	content: "□";
	width: 1.5em;
	height: 1.5em;
	text-align: center;
	font-size: 1em;
	line-height: 1.5em;
	background-color: #666666;
	border-radius: 50%;
	display: inline-block;
	color: #ffccff;
}
.ciBt:before{
	content: "〇";
	width: 1.5em;
	height: 1.5em;
	text-align: center;
	font-size: 1em;
	line-height: 1.5em;
	background-color: #666666;
	border-radius: 50%;
	display: inline-block;
	color: #ff6a6a;
}
.trBt:before{
	content: "△";
	width: 1.5em;
	height: 1.5em;
	text-align: center;
	font-size: 1em;
	line-height: 1.5em;
	background-color: #666666;
	border-radius: 50%;
	display: inline-block;
	color: #9afe78;
}
#d_action .txt{
	padding: 1em 0;
}
#d_action h3{
	font-size: 1.3em;
	font-weight: bold;
	color: #6633cc;
	text-shadow: 1px 1px 2px #e1d7ff, -1px 1px 2px #e1d7ff;

}
.sysContBox{
	padding: 1em 0;
	border-top: #ccc 2px dotted;
}
.sysContBox .img1{
	width: 52%;
	display: inline-block;
	vertical-align:middle;
	padding: 1em 0;
	padding-right: 1em;

}
.sysContBox .img2 {
	width: 48%;
	display:inline-grid;
	vertical-align:middle;
	grid-template-columns:2.5em 1fr;
	padding: 1em 0;
}
.sysContBox .img2 .otherobject{
	position: relative;
	background-color: #ccc;
	color: #fff;
}
.sysContBox .img2 .otherobject:after{
	content: "";
	width: 2px;
	top:0;
	bottom: 0;
	right: 0.5em;
	background-color: #fff;
	display: block;
	position: absolute;
}
.sysContBox .img2 .otherobject .nameTxt{
	font-family: 'Montserrat', sans-serif;
	width: 15em;
	position: absolute;
	transform: rotateZ(-90deg);
	transform-origin: left bottom;
	bottom:0.2em;
	left:1em;
	text-align: left;
	line-height: 1em;
	font-size: 2em;
}
.sysContBox .img2 .gridWrap{
	width: 100%;
	display:grid;
	grid-template-columns:repeat(2, 50%);
	row-gap: 0.5em;

}
.sysContBox .img2 .imgBox{
	padding-left:0.5em;
	font-size: 0.7em;
	line-height: 1.5em;
}
.sysContBox .img2 .imgBox img{
	display: block;
	margin: 0 auto;
}
.sysContBox .img2 .imgBox .txtArea{
	text-indent: -1em;
	padding: 0.5em 0;
	padding-left: 1em;
	max-width: 157px;
	margin: 0 auto;
	line-height: 1.5em;
}
#battle .txt{
	padding: 1em 0;
}
#battle .apsp .txtBox{
	width: 45%;
	display: inline-block;
	vertical-align: top;
	padding: 1em 1em 0;
	border: #ccc 1px solid;
}
#battle .apsp .txtBox td{
	padding-bottom: 1em;
}
#battle .apsp td.cat{
	width: 3em;
}

#battle .apsp .img{
	width:55%;
	display: inline-block;
	vertical-align: top;
	padding: 1em;
}
.commandBox{
	width: 41%;
	display: inline-block;
	vertical-align:top;
	padding: 1em 0 0;
	position: relative;
}
#battle .commandBox .txtBox{
	width: 95%;
	margin-left: auto;
	padding: 4em 1em 0;
	border: #ccc 1px solid;
	margin-top: -3em;
	line-height: 1.5em;

}
#battle .commandBox img{
	width: 90%;
	position: relative;
	z-index: 1;
}
#battle .commandBox td.cat{
	width: 5em;
}
#battle .commandBox .txtBox td{
	padding-bottom: 1em;
}
#battle .commandSwitch{
	width: 18%;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	font-size: 0.8em;
	line-height: 1.5em;
	padding-top: 14em;
}
#battle .commandSwitch span:before{
	content: "←";
}
#battle .commandSwitch span:after{
	content: "→";
}
.megamiWrap .txt{
	width: 35%;
	display: inline-block;
	vertical-align: top;
}
.megamiWrap img{
	width: 65%;
	display: inline-block;
	vertical-align: top;
}
.skillWrap{
	padding: 1em 0;
}
.skillWrap .txt{
	width: 45%;
	display: inline-block;
	vertical-align:middle;
}
.skillWrap .img{
	width: 55%;
	display: inline-block;
	vertical-align:middle;
	padding: 0 1em;
}
.skillWrap .skillBox{
	padding: 1em 0 0;
}
.skillWrap .skillBox h3{
color: #6734cd;
margin-bottom: 0.5em;
font-weight: bold;
}
.skillWrap td.cat{
	width: 6em;
	vertical-align: top;
}
.skillWrap td{
	padding: 0.5em;
}
.onePointWrap{
	padding: 1em 0;
}
.onePointWrap .img{
	width: 50%;
	display: inline-block;
	vertical-align:middle;
}
.onePointWrap .txtBox{
	width: 50%;
	display: inline-block;
	vertical-align:middle;
	padding: 1em 0 0;
}
.onePoint{
	background-image: url(../../system/img/skill3_2.png);
	background-position: left top;
	background-repeat: no-repeat;
	padding: 1em;
	background-size: 5em auto;
}
.onePoint h3{
	color: #fff1c9;
	font-weight: bold;
	text-shadow: 1px 1px 2px #b70073, -1px 1px 2px #b70073,1px -1px 2px #b70073, -1px -1px 2px #b70073;
	font-size: 1.3em;
}
.onePoint h3 .small{
	color: #fff;
	font-weight: bold;
	text-shadow: 1px 1px 2px #666, -1px 1px 2px #666,1px -1px 2px #666, -1px -1px 2px #666;
	font-size: 0.6em;
	transform: rotateZ(-3deg);
	line-height: 1.5em;
	transform-origin: left bottom;
}
.onePoint .txt{
	padding: 1em 0;
}
.ex1{
	padding-bottom: 1em;
}
.ex1 .img{ 
	width: 28%;
	display: inline-block;
	vertical-align:middle;
}
.ex1 .txt{ 
	width: 72%;
	display: inline-block;
	vertical-align:middle;
	padding: 0 1em;
}
.ex2{
	border-top: #ccc 1px dotted;
	padding: 1.5em 0;
}
.ex2 .img{
	width: 50%;
	display: inline-block;
	vertical-align:top;
	text-align: center;
}
.joutaiijou .txt{
	width: 100%;
	padding: 1em 0;
}
.ijouList{
border-top: #ccc 1px dotted;
padding: 1em 0;
grid-template-columns:repeat(3, 33.3%);
grid-template-rows:repeat(2, 50%);
 grid-auto-flow: column;
 display: grid;
}
.ijouList .box{
	padding: 0.5em;
}
.ijouList .box .img{
	width: 100%;
	text-align: center;
}
.ijouList .box .img img{
	max-width: 100px;
	border: #333399 1px solid;
}
.ijouList .box.pink .img img{
	border-color: #ff3399;
}
.ijouList .box .name{
	padding: 0.3em 0.5em;
	color: #d8c5f3;
	text-shadow: 1px 1px 2px #660066, -1px 1px 2px #660066,1px -1px 2px #660066, -1px -1px 2px #660066;
	font-weight: bold;
	position: relative;
	font-size: 1.3em;
	letter-spacing: 1px;
}
.ijouList .box.pink .name{
	color: #fffecc;
	text-shadow: 1px 1px 2px #ff3399, -1px 1px 2px #ff3399,1px -1px 2px #ff3399, -1px -1px 2px #ff3399;
}
.ijouList .box .name span{
	position: relative;
	z-index: 2;
}
.ijouList .box .name:after{
	content: "";
	width: 100%;
	position: absolute;
	display: block;
	top:50%;
	bottom:0;
	left:0;
	background: linear-gradient(90deg,rgba(51,51,153,1),rgba(51,51,153,0));
}
.ijouList .box.pink .name:after{
	background: linear-gradient(90deg,rgba(255,51,153,1),rgba(255,51,153,0));

}
.ijouList .box .txtArea{
	padding: 0.5em;
}
#item .itemWrap{
	width: 45%;
	display: inline-block;
	vertical-align: middle;
	padding: 1em 0;
}
#item .img{
	width: 55%;
	display: inline-block;
	vertical-align: middle;
	padding: 1em;
}
#item table{
	margin-bottom: 1em;
}
#item td{
	padding: 0.5em 0;
	vertical-align: top;
}
#item td.cat{
	width: 4em;
	text-align: right;
}
#item h3{
	color: #6734cd;
	margin-bottom: 0.5em;
	font-weight: bold;
}
#item .itemImgBox .img1{
	width: 67%;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
#item .itemImgBox .img2{
	width: 33%;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	padding-left: 2em;
}
#item .itemImgBox .img2 .itemTxt{
	font-size: 0.8em;
	line-height: 1.5em;
}
#item .itemImgBox .img2 .img2-1{
	position: relative;
	padding: 0 0.8em 2em;
}
#item .itemImgBox .img2 .img2-1:before{
	content: "";
	width: 2em;
	top:0;
	bottom: 4em;
	left: -2em;
	position: absolute;
	display: block;
	background-image: url(../../system/img/item_arrow.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	
}
#item .itemImgBox .img2 .img2-2{
	position: relative;
}
#item .itemImgBox .img2 .img2-2:after{
	content: "";
	width: 2em;
	height:7em;
	top: 0;
	left: 50%;
	margin-top: -4.5em;
	margin-left: -1em;
	position: absolute;
	display: block;
	background-image: url(../../system/img/item_arrow.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size:contain;
	transform: rotateZ(90deg);
	
}

/*---------------------------------------------------------
ギャラリー
------------------------------------------------------------*/
.thumBox{
	padding-bottom: 2em;
}*
.thumBox a{
	width: 19.5%;
	max-width: 196px;
	margin: 0.5em 0.25% 0;
	padding: 5px;
	position: relative;
	display: inline-block;
	vertical-align: top;
}
.thumBox a.non{
	pointer-events: none;
}
.thumBox a span{
	position: relative;
	z-index: 1;
	background-color: #333;
	border: #1333 2px solid;
	border-radius: 3px;
	display: block;

}
.thumBox a:not(.non):hover span:after{
	content: "";
	left:1px;
	right:1px;
	top:1px;
	bottom:1px;
	display: block;
	position: absolute;
	background: radial-gradient(rgba(137,27,248,0)50%,rgba(137,27,248,0.9)90%)
}
.thumBox a span img{
	border: #fff 1px solid;
}
.thumBox a:after{
	 content: "";
	width: 100%;
	top:50%;
	bottom:0;
	left:0;
	background-color: #333;
	display: block;
	position: absolute;
}
/*---------------------------------------------------------
サウンド
------------------------------------------------------------*/
.songWrap{
	text-align: center;
}
.songBox{
	width: 49%;
	max-width: 394px;

	margin: 0 0.5%;
	display: inline-block;
	vertical-align: top;
	position: relative;
}
.songBox img{
	display: block;
	max-width: 394px;
	margin: 0 auto;
}
.songBox .linkBox{
	width: 90%;
	max-width: 380px;
	position: absolute;
	bottom:1em;
	height: 5.5em;
	text-shadow:1px 1px 2px #000,0px 0px  3px #000,0px 0px  5px #000;
	color: #fff;
	font-size: 0.7em;
	text-align: left;
	line-height: 1.8em;
	transform: rotateZ(-6.8deg);
	transform-origin: left top;
}
.songBox .linkBox a{
	color:#fefe65;
	text-decoration: underline;
}
.songBox .linkBox a:hover{
	color: #fe9800;
}
.songBox.op .linkBox{
	right:0;
}
.songBox.ed .linkBox{
	left:2.5em;
}

/*---------------------------------------------------------
スペシャル
------------------------------------------------------------*/
.specialWrap{
	padding: 1em 0 0;
}
.specialWrap a{
	width: 100%;
	max-width:500px ;
	color: #000;
	padding: 0.5em 1em;
	border: #666 1px solid;
	position: relative;
	display: block;
}
.specialWrap a:after{
	content: "";
	top:2px;
	left:2px;
	width: 0;
	bottom:2px;
	background: linear-gradient(90deg,rgba(238,192,254,1),rgba(238,192,254,0));
	display: block;
	position: absolute;
	transition: all 300ms 0s ease;
}
.specialWrap a:hover:after{
width: calc(100% - 4px);
}
.specialWrap .linkName{
	padding: 1px;
	padding-right: 0;
	color: #000;
	position: relative;
	width: 100%;
	z-index: 2;
}
.specialWrap .linkName span:not(.small){
display: block;
border-bottom: #000 1px solid;
border-left: #000 1px solid;
padding: 0 1em;
padding-left:  calc(16px + 0.5em);

}
.specialWrap .linkName span.small{
	font-size: 0.8em;
}
.specialWrap .linkName span:not(.small):before{
content: "";
position: absolute;
display: block;
width: 2px;
left:9px;
top:30%;
bottom: 4px;
background-color: #000;

}
.specialWrap .linkName span:not(.small):after{
content: "";
position: absolute;
display: block;
width: 3px;
left:13px;
top:60%;
bottom: 4px;
background-color: #000;

}


.specialWrap .linkName:before{
content: "";
position: absolute;
display: block;
width: 3px;
left:4px;
top:3px;
bottom: 4px;
background-color: #000;
}
.specialWrap .bannerBox{
	padding: 1em 1em 2em;
	
}
.specialWrap .txt{
	padding: 1em;
}
.specialWrap .kitWrap{
	padding: 0 0 2em;
	display: grid;
	grid-template-columns:repeat(2, 50%);

}
.specialWrap .wallWrap{
	padding: 0 0 2em;
	display: grid;
	grid-template-columns:repeat(4, 25%);

}

.specialWrap .kitBox,.specialWrap .wallBox{
	padding: 0 1em 1em;
}
.kitBox .itemNum{
	font-size: 0.8em;
	text-align: right;
	color: #666;
	border-bottom: #666 1px solid;
	padding: 0;
	line-height: 1.2em;
}
.kitBox .img{
	text-align: center;
	background-color: #666666;
	margin: 2px 0;
}
.wallBox .img{
	text-align: center;
	background-color: #666666;
	margin: 2px 0;
}
.wallBox .img img{
	width: 90%;
}
.wallBox a{
	padding: 0;
	border: 0;
	text-align: center;
	margin-bottom: 2px;
	font-size: 0.8em;
}
/*---------------------------------------------------------
製品情報
------------------------------------------------------------*/
.infoWrap{
	padding: 1em 0;
}
#spec .img{
	width: 50%;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}
#spec .txtArea{
	width: 50%;
	display: inline-block;
	vertical-align: middle;
	padding: 0 1em;
}
#spec .txtArea img{
	width: 80%;
	display: block;
	margin: 2em auto;

}
#spec .txtArea .txt{
	padding: 1em 2em;
	font-size: 0.8em;
	border-top: #ccc 1px solid;
	border-bottom: #ccc 1px solid;
}
#spec .txtArea table td.cat{
	width: 9em;
	vertical-align: top;

}
#limited .img{
	width: 100%;
	padding: 1em;
	border: #ccc 1px solid;
	text-align: center;
	margin-top: 0.5em;
}
#limited .img img{
max-width: 804px;
}
.infoWrap .itemName{
	padding: 1px;
	padding-right: 0;
	color: #fff;
	position: relative;
	margin-top: 1em;

}
.infoWrap .itemName span{
display: block;
border-bottom: #fff 1px solid;
border-left: #fff 1px solid;
padding: 0 1em;
padding-left:  calc(16px + 0.5em);

}
.infoWrap .itemName span:before{
content: "";
position: absolute;
display: block;
width: 2px;
left:9px;
top:30%;
bottom: 4px;
background-color: #fff;

}
.infoWrap .itemName span:after{
content: "";
position: absolute;
display: block;
width: 3px;
left:13px;
top:60%;
bottom: 4px;
background-color: #fff;

}


.infoWrap .itemName:after{
content: "";
position: absolute;
display: block;
width: 3px;
left:4px;
top:3px;
bottom: 4px;
background-color: #fff;
}

#limited .itemName{
	width: calc(50% - 1em);
	display: inline-block;
	vertical-align: middle;
}
#limited .itemName.sec{
	margin-left: 2em;
}
#limited .itemName.sec:before{
	content: "＆";
	width: 2em;
	text-align: center;
	position:absolute;
	display: block;
	vertical-align: middle;
	color: #676767;
	/*background-color: transparent;*/
	left:-2em;
	top:0;
	
}

#pre-order .img{
	width: 100%;
	padding: 1em 0;
	border: #ccc 1px solid;
	text-align: center;
	margin-top: 0.5em;
}
#pre-order .img img{
max-width: 846px;
}
.infoWrap .bottomTxt{
	font-size: 0.8em;

}

/*店舗特典*/
.shopWrap{
	width: 100%;
	display: grid;
	grid-template-columns:repeat(4, 25%);
	row-gap: 1em;
	border-bottom: #ccc 1px dotted;
	padding: 1em 0;

	}
.shopBox{
	padding: 0.5em;
	border-right: #ccc 1px dotted;

}
.shopBox.sofmap{
	 grid-column: span 2;

}
.shopBox.sofmap .sofBox{
	width: 50%;
	display: inline-block;
	vertical-align: top;
	padding-right:0;
	padding-left: 0.5em;
}
.shopBox.sofmap .sofBox:first-child{
	padding-left: 0;
	padding-right: 0.5em;

}

.shopBox.noborder{
	border-right:none;
}
.shopName{
	color: #6734cd;
	font-weight: bold;
	font-size: 0.8em;
	line-height: 1.5em;

}
.shopBox .shopItemName{
	color: #333;
	font-size: 0.8em;
	line-height: 1.5em;
}
/*---------------------------------------------------------
関連リンク
------------------------------------------------------------*/
ul.linkBox{
	width: 50%;
	display: inline-block;
	vertical-align: top;
}
ul.linkBox li{
	padding: 1em 0.5em;
	border-bottom: #ccc 1px dotted;
}
ul.linkBox li a.imgLink{
	width: 50%;
	max-width: 202px;
	display: inline-block;
	vertical-align: middle;
}
ul.linkBox li a.imgLink img{
border: #ccc 1px solid;
}
ul.linkBox li .txtLink{
	width: 50%;
	display: inline-block;
	vertical-align: middle;
	padding: 0 0.5em;
	font-size: 0.8em;
	line-height: 1.5em;
	color: #670167;

}
ul.linkBox li .txtLink a{
	color: #111;
	text-decoration: underline;
}
ul.linkBox li .txtLink a:hover{
	color: #ff7214;
}
/*---------------------------------------------------------
DLC
------------------------------------------------------------*/
img.dlcImg{
	width: 15%;
	max-width: 104px;
	display: inline-block;
	vertical-align: top;
}
.dlcWrap p{
	padding: 1em 0;
	color: #ca05a8;
	font-size: 0.8em;
	line-height: 1.5em;
}
.dlcList{
	width: 85%;
	display: inline-block;
	vertical-align: top;
	font-size: 0.8em;
	padding: 0 0.5em;
	line-height: 1.5em;
}
.dlcList h2 .small{
	font-size: 0.5em;
	padding-left: 1em;
}
.dlcList table td{
	vertical-align: top;
	padding: 0.5em;
	border-bottom: #ccc 1px dotted;
}
.dlcList table td.cat{
	width: 7em;
	text-align: center;
	color: #fff;
	padding: 0.3em;
}
.dlcList table td.cat span{
padding: 0.2em 0.5em 0.3em;
border-radius: 6px;
display: block;
}
.dlcName{
	color: #fff;
}
.dlcList table td.cat.free span{background-color: #330099;}
.dlcList table td.freetxt{	text-shadow: 1px 1px 3px #330099, -1px 1px 2px #330099, 1px -1px 2px #330099,-1px -1px 2px #330099;}
.dlcList table td.cat.pay span{background-color: #e8008a;}
.dlcList table td.paytxt{	text-shadow: 1px 1px 3px #e8008a, -1px 1px 2px #e8008a, 1px -1px 2px #e8008a,-1px -1px 2px #e8008a;}
.dlcList table td.cat.code span{background-color: #ff6600;}
.dlcList table td.codetxt{	text-shadow: 1px 1px 3px #ff6600, -1px 1px 2px #ff6600, 1px -1px 2px #ff6600,-1px -1px 2px #ff6600;}
.dlcList table td ul.notes{
	color: #b03a3b;
}
/*---------------------------------------------------------
@media
------------------------------------------------------------*/
@media (max-width: 978px) {
	#topArea.contentsBox{
		width: 100%;
	}
	a.noirestyle{
		right: 4em;
	}
}

@media (max-width: 786px) {
#topArea{

}
#news{
	width: 85%;
	margin: 0;
	border-left: 0;
	border-bottom-left-radius: 0;
}
#news .newsBox{
	border-bottom-left-radius: 0;

}

#topArea .topImg{
	width: 100%;
	background-position: center top;

	background-size: 120%;

}
#topArea h1{
	width: 50%;
	margin-top: 0;
	left: 0;
	right: auto;
	bottom:0;
	top: auto;
	padding: 0.5em;
}
	a.noirestyle{
		width: 50%;
		right: 0.5em;
		top:auto;
		bottom: 0.5em;
	}
.ch_selection .txtArea{
	width: 80%;
	display:inline-block;
	padding-left: 0.5em;
}
.ch_selection .txtArea .colorBg{
	text-align:left;
	letter-spacing: 1px;
}
/*キャラクター*/

.chImg{
	width: 100%;
	overflow: hidden;
	text-align: right;
}
.chImg img{
	width: 130%;
	display: block;
	position: relative;
	left: -25%;
}
#sys3 .chImg img,#sys3-2 .chImg img{
	width: 110%;
	left: -10%;
}

.chTxt{
	padding-right: 0;
	position:relative;
	padding-top: 0;
	padding-bottom: 2em;
}
.chTxt .txt{
	min-height: 0;
}

.chTxt .txt:after,.chTxt .castArea:after{
	width: 100%;
}
.chSubNavi{
	padding-right: 6em;
}
/*システム*/
#mintsubu a.mdBt:not(.min_c){
	width: 8em;
	height: 8em;
}

.minImg .txt{
	width: 150%;
	left: -25%;
	transform: scale(0);
	opacity: 0;
}
.min1_5.minImg .txt{
		width: 130%;
		left: -15%;
}
 .minImg .txt.txtShow{
	transform: scale(0.8);
	opacity: 1;
} 
	.min2_7.minImg .txt{
		width: 170%;
		left: -35%;
	}
	.min2_3.minImg .txt,.min2_4.minImg .txt,.min2_5.minImg .txt,.min2_8.minImg .txt{
		width: 150%;
		left: -25%;
	}
	.min3_6.minImg .txt{
		width: 170%;
		left: -35%;
	}
	.min3_8.minImg .txt{
		width: 170%;
		left: -35%;
	}
	.min4_3.minImg .txt{
		width: 150%;
		left: -25%;
	}
	.min4_5.minImg .txt{
		width: 130%;
		left: -15%;
	}
	.min4_7.minImg .txt{
			width: 150%;
			left: -25%;

	}
	.min5_1.minImg .txt,.min5_2.minImg .txt,.min5_3.minImg .txt{
		width: 150%;
		left: -25%;
	}
.sysContBox .img1{
	width: 100%;
	display:block;
	padding: 1em 0 ;

}
.sysContBox .img2 {
	width: 100%;
	display:grid;
	padding: 1em 0 0;
}
.commandBox{
	width: 100%;
	display: block;

}
.sysBox{
	padding-right: 1em;
}

#battle .commandSwitch{
	width: 100%;
	display: block;
	padding-top: 0;
}
#battle .commandSwitch span:before{
	content: "↑";
}
#battle .commandSwitch span:after{
	content: "↓";
}
#battle .apsp .txtBox{
	width: 100%;
	display: block;
}

#battle .apsp .img{
	width: 100%;
	display: block;
}
.megamiWrap .txt,.skillWrap .txt,.onePointWrap .txtBox{
	width: 100%;
	display: block;
}
.megamiWrap img,.skillWrap .img,.onePointWrap .img{
	width: 100%;
	display: block;
	margin: 0 auto;
}

#item .itemImgBox .img1{
	width: 100%;
	display:block;
	padding-bottom: 2em;
}
#item .itemImgBox .img2{
	width: 100%;
	display:block;
	padding-left:0;
}
#item .itemImgBox .img2 .img2-1{
	width: 50%;
	display: inline-block;
	vertical-align: top;
	padding: 0 0.8em;
	padding-right: 2em;
}
#item .itemImgBox .img2 .img2-1:before{

	right: -0.5em;
	left:auto;
	bottom:0;
	background-size: contain;
}
#item .itemImgBox .img2 .img2-2{
		width: 50%;
	display: inline-block;
	vertical-align: top;

}
#item .itemImgBox .img1:after{
	content: "";
	width: 2em;
	height:7em;
	bottom: -2.5em;
	left: 20%;
	margin-left: 0;
	position: absolute;
	display: block;
	background-image: url(../../system/img/item_arrow.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size:contain;
	transform: rotateZ(90deg);
	
}
#item .itemImgBox .img2 .img2-2:after{
	display: none;
	
}
#item .itemWrap{
	width: 100%;
	display: block;
}
#item .img{
	width: 100%;
	display: block;
	padding: 0 0 1em;
}

/*ギャラリー*/
.thumBox a{
	width: 24.5%;
}
.thumBox a.blockThum{
	display: block;
}
.thumBox a.non{
	display: none;
}
/*サウンド*/
.songWrap{
	padding-top: 3em;
}
.songBox{
	width: 100%;
	display: block;
	margin: 1em auto;
	bottom:2.5em;
}
/*製品情報*/

#spec .img{
	width: 100%;
	display:block;
}
#spec .txtArea{
	width: 100%;
	display:block;
}
#spec .txtArea table td.cat{
	width: 11em;
}

#limited .itemName{
	width:60%;
	display:block;
	vertical-align: middle;
}
#limited .itemName.sec{
	margin-left: auto;
	margin-top: 1.5em;
}
#limited .itemName.sec:before{
	content: "＆";
	width: 20%;
	text-align: center;
	position:absolute;
	display: block;
	vertical-align: middle;
	color: #676767;
	/*background-color: transparent;*/
	left:0;
	top:-1.5em;
	
}
.shopWrap{
	grid-template-columns:repeat(2, 50%);
	border: 0;

	}
.shopBox{
	border-bottom: #ccc 1px dotted;

}
.shopBox ul.notes{
	padding-bottom: 1em;
	line-height: 1.5em;
}
/*---------------------------------------------------------
関連リンク
------------------------------------------------------------*/
ul.linkBox{
	width: 100%;
	display: block;
}

}
@media (max-width: 480px) {
#topArea .topImg{
	width: 100%;
	background-position: center top;

	background-size: 150%;

}

#news{
	width:  80%;
}
#news .newsBox{
	height: auto;
}

#topArea h1{
	margin-top: -6.125em;
	bottom:auto;
	top:50%;
}
	a.noirestyle{
		width: 40%;
		right:auto;
		left: 0.5em;
		top:3em;
		bottom:auto;
	}
.ch_selection{
	width: 100%;
	position: absolute;
	bottom: 0.5em;
	left: 0;
}
.ch_selection img{
	vertical-align: bottom;
}
.ch_selection .txt{
	background-color: #fff;
	padding: 0.5em;
	border-radius: 6px;
	vertical-align: bottom;
}

/*---------------------------------------------------------
キャラクター
------------------------------------------------------------*/
#chNavi a{
	width: 24%;
}

/*システム*/
#world .map a{
	font-size: 0.8em;
}
#world .map a.w1{
		top:39%;
		left:14%;
}


#world .map a.w2{
		top:31%;
		left:68%;
}
#world .map a.w2 span:after{
	right: auto;
	left:1em;
}
#world .map a.w3{
		top:12%;
		left:44%;
}
#world .map a.w4{
		top:70%;
		left:40%;
}
#world .map a.w4 span:after{
	bottom: auto;
	transform: rotate(180deg);
	top:-0.5em;
	right: 1em;
}

#world .map a.w5{
		top:30%;
		left:27%;
}
.min3_1.minImg .txt,.min3_2.minImg .txt{
	width: 170%;
	left: -35%;
}
	.min4_1.minImg .txt,.min4_3.minImg .txt,.min4_6.minImg .txt{
		width: 170%;
		left: -35%;
	}

	.min4_2.minImg .txt{
		width: 130%;
		left: -15%;
	}
	
	.minCheckWrap .txt{
		width: 100%;
		display: block;
		padding-bottom: 0.5em;
	}
	.minCheckWrap .img{
		width: 100%;
		display: block;
	}
	.minCheckWrap .img a{
	max-width: none;
	}
	#minCheckArea .imgBox1{
		width: 70%;
	}
	#minCheckArea .imgBox2{

		margin-top: 0;
	}
#lily .txtArea{	
	width: 100%;
	display: block;
	padding-right:0;
}
#lily .img{
	width: 100%;
	display: block;
}
#costume a{

	padding: 0.5em;
}
.ijouList{

grid-template-columns:repeat(2, 50%);
grid-template-rows:auto;
 grid-auto-flow: row;
 display: grid;
}
#item td.cat{
	width:4.5em;
}

/*サウンド*/
.songBox .linkBox{
transform: scale(0.9)  rotateZ(-6.8deg);
}
/*スペシャル*/
.specialWrap a{
	padding: 0.5em;
}
.specialWrap .kitWrap{
	display:block;
}
.specialWrap .kitBox{
	margin-bottom: 1em;
}
.specialWrap .wallWrap{
	grid-template-columns:repeat(2, 50%);

}


/*製品情報*/
#limited .itemName{
	width:90%;
	display:block;
	vertical-align: middle;
}
#limited .itemName.sec:before{
	width: 80%;
	
}
.shopWrap{
	display: block;

	}
.shopBox{
	border-right: 0;

}
.shopBox.sofmap .sofBox{
	width: 100%;
	display: block;
	padding: 0;
}
.shopBox.sofmap .sofBox:first-child{
	padding: 0;

}
/*DLC*/
.dlcList table td.cat{
width: 7em;
}
.dlcList table td.dlcName{
width: 7em;

}
}

@media (max-width: 280px) {
#news .newsBox dt{
	float: none;
}
#news .newsBox dd{
	margin-left: 0;
}
	a.noirestyle{

		top:5em;
	}
#spec .txtArea table td.cat{
	width: 12em;
}
#world .map a.w1{
		top:39%;
		left:5%;
}


#world .map a.w2{
		top:31%;
		left:60%;
}
#world .map a.w2 span:after{
	left:4em;
}
#world .map a.w3{
		top:10%;
		left:42%;
}
#world .map a.w4{
		top:70%;
		left:40%;
}
#world .map a.w4 span:after{
	right:4em;
}

#world .map a.w5{
		top:30%;
		left:18%;
}
#mintsubu a.mdBt:not(.min_c) .txt{
	/*width: 12em;
	height: 12em;*/
	width: 125%;
	transform: scale(0.7) rotate(-25deg);
	left: 0;
}

#item td.cat{
	width:5em;
}

}