@charset "utf-8";
/* ==================================================================
CSS information
style info : マップ
================================================================== */


/* --------------------------------------------------------
OVERWRITE
-------------------------------------------------------- */
#section-Area { padding-top: 9.375%;}
@media screen and (min-width: 641px) {
	#section-Area { padding-top: 2.857142%; padding-bottom: 0;}
}
@media screen and (min-width: 1401px) {
	#section-Area { padding-top: 40px;}
}
/* --------------------------------------------------------
COMMON
-------------------------------------------------------- */



/* --------------------------------------------------------
#section-Map
-------------------------------------------------------- */
#section-Map { position: relative; padding-bottom: 0;}

#section-Map .chara-Block { position: absolute; width: 100%; top: 0; left: 0%; }
#section-Map .chara-Block li { position: absolute; top: 0; display: none;}

#section-Map .batch { width: 29.53125%; position: absolute; top: 0; right: 4.53125%; margin-top: -0.5%;}/* mt91 */
#section-Map .hl { margin: 0 auto 4.375%; position: relative;}
#section-Map .readtext { margin: 0 auto 5.625%;}

@media screen and (min-width: 641px) {
	#section-Map { padding: 0 0 5%; background: url(../_img/bg_pc.png) 50% 140% no-repeat; background-size: 114.285714%;}
	#section-Map .inner { }
	#section-Map .chara-Block { }
	#section-Map .chara-Block li { display: block; }
	#section-Map .chara-Block .cha1 { width: 15.5%; max-width: 217px; left: 2.0%; margin-top: -2%; }
	#section-Map .chara-Block .cha2 { width: 20.428571%; max-width: 286px; right: 3.5%; margin-top: -2.0%;}
	
	#section-Map .batch { width: 13.5%; max-width: 189px; right: 12.928571%; margin-top: -2.857142%;}
	#section-Map .hl { width: 52.272727%; max-width: 690px; margin-bottom: 0.833333%; }
	#section-Map .readtext { width: 69.242424%; max-width: 914px; margin-bottom: 2.5%; position: relative;}

}
@media screen and (min-width: 1401px) {
	#section-Map { padding-bottom: 70px; background-size: 1600px;}
}



/* --------------------------------------------------------
#map-conts
-------------------------------------------------------- */
#map-conts { position: relative; margin-bottom: 8%;}


#zoom-Block { position: relative; width: 100%; margin-bottom: 10%;}
#zoom-Block:before { content: ""; display: block; padding-top: 56.25%;}
#zoom-List { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%;}
#zoom-List li { position: absolute; width: 100%; display: none;}
#zoom-List .current { display: block;}
#zoom-List .name { display: block; position: absolute; left: 50%; margin-left: -45%; width: 90%;}
#zoom-List li.dq.frame { background: #0066cf; }
#zoom-List li.ff.frame { background: #cf0075; }
#zoom-List li.dlc.frame { background: #ff7200; }

#map-conts .thumb-Block { width: 100%; letter-spacing: -.45em; }
#map-conts .thumb-Block ul { letter-spacing: normal; display: inline-block; vertical-align: top; width: 47.413793%; }/* w275 */
#map-conts .thumb-Block li { margin-bottom: 7.272727%; position: relative;}
#map-conts .thumb-Block li:last-child { margin-bottom: 0; }
#map-conts .thumb-Block li a { display: block;}
#map-conts .thumb-Block .thumb-Block-dq { }
#map-conts .thumb-Block .thumb-Block-ff { margin-left: 5.172413%; }

#map-conts .thumb-Block .thumb-Block-dlc { width: 100%; margin-top: 3.448275%; }

#map-conts .thumb-Block li.iupd::before { content: ''; display: block; position: absolute; top: 0; left: 17.818181%; width: 64%; height: auto; padding-top: 14.545454%; margin-top: -5.714285%; background: url(../_img/icon_upd_sp.png) center center no-repeat; background-size: contain;}
#map-conts .thumb-Block .thumb-Block-dlc li.iupd::before { left: 35.689655%; width: 30.344827%; padding-top: 6.896551%; margin-top: -2.813793%; }

.text_cs { width: 81.206896%; margin: 0 auto;}
.btn_4coma { text-align: center; margin-top: 5%;}

@media screen and (max-width: 640px) {
#zoom-List .name { bottom: 0; margin-bottom: -7%; }
}
@media screen and (min-width: 641px) {
	#map-conts { margin-bottom: 17%; padding-top: 8.939393%;}

	#zoom-Block { max-width: 856px; width: 64.848484%; margin: 0 auto; }
	#zoom-List .name { margin-left: -33.802816%; top: 0; margin-top: -11.502347%; max-width: 576px; width: 67.605633%;}/* in w852 */

	#map-conts .thumb-Block { position: absolute; top: 0; left: 0; }
	#map-conts .thumb-Block ul { position: absolute; top: 0; display: block; max-width: 202px; width: 15.303030%; }
	#map-conts .thumb-Block .thumb-Block-dq { left: 0; }
	#map-conts .thumb-Block .thumb-Block-ff { right: 0; margin-left: 0; }
	#map-conts .thumb-Block li { margin-bottom: 4.950495%; }
	
	#map-conts .thumb-Block .thumb-Block-dlc { max-width: 554px; width: 41.969696%; position: absolute; top: 0; left: 29.01515151%; margin-top: 50%; }/* l383 */

	#map-conts .thumb-Block li.iupd::before { left: 27.722772%; width: 44.554455%; padding-top: 10.891089%; margin-top: -2.475247%; background: url(../../_common/img/icon_upd.png) center center no-repeat; background-size: contain;}

	#map-conts .thumb-Block .thumb-Block-dlc li.iupd::before { left: 41.877256%; width: 16.245487%; padding-top: 3.971119%; margin-top: -1.075247%; }

	.text_cs { max-width: 471px; width: 35.681818%; margin: 0 auto 3%;}
	#set_4coma { text-align: center;}
	/*#section-Map .btn_4coma { max-width: 554px; width: 41.969696%; margin: 2% 1% 0; display: inline-block;}*/
	#section-Map .btn_4coma { max-width: 554px; width: 41.969696%; margin: 2% auto 0; display: block;}
	#section-Map .btn_4coma { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden;}
	#section-Map .btn_4coma:hover { -webkit-transform: scale(1.03); transform: scale(1.03);}
	

}