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


/* --------------------------------------------------------
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 .hl { margin: 0 auto 4.375%; position: relative;}
#section-Map .readtext { margin: 0 auto 6.625%;}

@media screen and (min-width: 641px) {
	#section-Map { padding: 0 0 5%; background: url(../_img/bg_pc.png) 50% 130% 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: 11.0%; margin-top: -2%; }
	#section-Map .chara-Block .cha2 { width: 20.428571%; max-width: 286px; right: 13%; margin-top: -2.0%;}
	
	#section-Map .hl { width: 34.090909%; max-width: 450px; margin-bottom: 0.833333%; }
	#section-Map .readtext { width: 49.242424%; max-width: 650px; margin-bottom: 3.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: 0%;}


#zoom-Block { position: relative; width: 100%; margin-bottom: 5%;}
#zoom-List > li { width: 100%; display: none;}
#zoom-List .current { display: block;}
#zoom-List .name { display: block; width: 90%; margin: 0 auto -3%; z-index: 1; position: relative;}
#zoom-List .pic { width: 100%; display: block;}
#zoom-List .desc { width: 100%; display: block;}
#zoom-List .desc .maintext { width: 100%; display: block; padding: 5.172413% 0;}
#zoom-List .desc .early-box { width: 100%; display: block; background: #cf6703 url(../_img/dlc/early_bg.png) repeat; padding: 3.448275%;}
#zoom-List .desc .early-box dt { margin-bottom: 2.777777%; }/* in w540 */
#zoom-List .desc .early-box dd { color: #fff;}
#zoom-List .desc .early-box dd .type { margin-bottom: 1.851851%;}
#zoom-List .desc .early-box dd .type { font-size: 1.6rem; line-height: 1.31; font-weight: bold;}
#zoom-List .desc .early-box dd .text { margin-bottom: 1.851851%; line-height: 1.41; font-size: 1.4rem;}
#zoom-List .desc .early-box dd .annotation_List { text-indent: -1em; padding-left: 1em;}
#zoom-List .desc .early-box dd .annotation_List li { margin-bottom: 0.5%; line-height: 1.21; font-size: 1.2rem;}
#zoom-List .desc .early-box dd .annotation_List li:last-child { margin-bottom: 0;}
#zoom-List .desc .early-box dd .btn { margin-top: 1.851851%; }
#zoom-List .desc .early-box dd .btn a { display: block; padding: 2% 0; line-height: 1.41; font-size: 1.3rem; font-weight: bold; text-align: center; color: #5e2f00; background: #ecb700; border-radius: 6px; text-decoration: none;}

#zoom-List .dlc9 .desc .early-box dd .btn a { font-size: 1.2rem; }

#map-conts .thumb-Block { width: 100%; letter-spacing: -.45em; }
#map-conts .thumb-Block dl { letter-spacing: normal; display: inline-block; vertical-align: top; width: 100%; margin-bottom: 5.172413%; }
#map-conts .thumb-Block dt { margin-bottom: 1.724137%; position: relative; border-radius: 6px;}
#map-conts .thumb-Block dl.thumb-Block-type1 dt { background: #e43895; }
#map-conts .thumb-Block dl.thumb-Block-type2 dt { background: #ff6000; }
#map-conts .thumb-Block dl.thumb-Block-type3 dt { background: #042a94; }
#map-conts .thumb-Block dl.thumb-Block-type4 dt { background: #042a94; }
#map-conts .thumb-Block dl.thumb-Block-type5 dt { background: #042a94; }
#map-conts .thumb-Block dd { margin-bottom: 2.724137%; position: relative;}
#map-conts .thumb-Block dd:last-child { margin-bottom: 0; }
#map-conts .thumb-Block dd a { display: block;}

#map-conts .thumb-Block .thumb-Block-type1 { }
#map-conts .thumb-Block .thumb-Block-type2 { }
#map-conts .thumb-Block .thumb-Block-type3 { }
#map-conts .thumb-Block .thumb-Block-type4 { }
#map-conts .thumb-Block .thumb-Block-type5 { }

#map-conts .thumb-Block dd.iupd::before { content: ''; display: block; position: absolute; top: 0; left: 40.827586%; width: 18.344827%; height: auto; padding-top: 4.545454%; margin-top: -2.414285%; background: url(../_img/icon_upd_sp.png) center center no-repeat; background-size: contain;}

#btn_back { width: 100%; margin: 3% auto 0; border: 1px solid #cbedff; border-radius: 6px; }
#btn_back a { display: block; padding: 1em; font-size: 1.5rem; font-weight: bold; text-align: center; color: #0f3ed5; border: 1px solid #0f3ed5; border-radius: 6px; text-decoration: none;
background: rgb(255,255,181);
background: -webkit-linear-gradient(top, rgba(255,255,181,1) 0%,rgba(255,232,82,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,181,1) 0%,rgba(255,232,82,1) 100%);
}

@media screen and (min-width: 641px) {
	#map-conts { margin-bottom: 0%; padding-top: 0%;}

	#zoom-Block { position: relative; width: 100%; margin: 0 auto 2.651515%;}
	#zoom-Block:before { content: ""; display: block; padding-top: 45.454545%;}
	#zoom-List { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%;}
	#zoom-List > li { position: absolute; }

	#zoom-List .name { max-width: 576px; width: 43.636363%; margin: 0 auto 1.515151%;}
	#zoom-List .pic { max-width: 856px; width: 64.848484%; }
	#zoom-List .desc { max-width: 440px; width: 33.333333%; position: absolute; top: 0; right: 0; margin-top: 8.712121%;}
	#zoom-List .desc .maintext { padding: 0; }
	#zoom-List .desc .early-box { padding: 2.272727%;}
	#zoom-List .desc .early-box dt { margin-bottom: 2.380952%; }/* in w420 */
	#zoom-List .desc .early-box dd .type { margin-bottom: 1.428571%;}
	#zoom-List .desc .early-box dd .type { font-size: 1.214285vw; line-height: 1.31; font-weight: bold;}
	#zoom-List .desc .early-box dd .text { margin-bottom: 1.428571%; line-height: 1.41; font-size: 1vw;}
	#zoom-List .desc .early-box dd .annotation_List li { margin-bottom: 0.5%; line-height: 1.21; font-size: 0.857142vw;}
	#zoom-List .desc .early-box dd .btn { margin-top: 1.428571%;}
	#zoom-List .desc .early-box dd .btn a { padding: 2% 0; font-size: 1vw; font-weight: bold; }
	/*#zoom-List .desc .early-box dd .btn a { -webkit-transform: scale(1.0); transform: scale(1.0); -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out; -webkit-backface-visibility: hidden;}
	#zoom-List .desc .early-box dd .btn a:hover { -webkit-transform: scale(1.02); transform: scale(1.02);}*/
	#zoom-List .desc .early-box dd .btn a:hover { color: #ecb700; background: #5e2f00; }

	#zoom-List .dlc9 .desc .early-box dd .btn a { font-size: 0.9vw; }
	
	#zoom-List .dlc7 .desc .maintext { margin-bottom: 2.857142%;}
	#zoom-List .dlc13 .desc .maintext { margin-bottom: 2.857142%;}
	
	#map-conts .thumb-Block { }
	#map-conts .thumb-Block dl { margin-bottom: 0; letter-spacing: -.45em; }
	#map-conts .thumb-Block dt { letter-spacing: normal; display: block; vertical-align: top; }
	#map-conts .thumb-Block dt img { vertical-align: middle; }
	#map-conts .thumb-Block dd { letter-spacing: normal; display: inline-block; vertical-align: top; margin-bottom: 0; }

	#map-conts .thumb-Block .thumb-Block-type1 { max-width: 876px; width: 66.363636%; margin-bottom: 2.272727%; }
	#map-conts .thumb-Block .thumb-Block-type2 { max-width: 432px; width: 32.727272%; margin-left: 0.9%; }
	#map-conts .thumb-Block .thumb-Block-type3 { max-width: 210px; width: 15.909090%; margin-bottom: 2.272727%; }
	#map-conts .thumb-Block .thumb-Block-type4 { max-width: 210px; width: 15.909090%; margin-left: 0.9%; }
	#map-conts .thumb-Block .thumb-Block-type4.i2 { max-width: 432px; width: 32.727272%; }
	#map-conts .thumb-Block .thumb-Block-type4.i3 { max-width: 654px; width: 49.545454%; }
	#map-conts .thumb-Block .thumb-Block-type4.i4 { max-width: 876px; width: 66.363636%; }
	#map-conts .thumb-Block .thumb-Block-type4.i5 { max-width: 1098px; width: 83.181818%; }
	#map-conts .thumb-Block .thumb-Block-type5 { max-width: 210px; width: 15.909090%; margin-left: 0%; }
	
	#map-conts .thumb-Block .thumb-Block-type1 dt { padding: calc(10/876*100%); margin-bottom: calc(10/876*100%); }
	#map-conts .thumb-Block .thumb-Block-type1 dt img { max-width: 116px; width: 13.615023%; }
	#map-conts .thumb-Block .thumb-Block-type2 dt { padding: calc(10/432*100%); margin-bottom: calc(10/432*100%); }
	#map-conts .thumb-Block .thumb-Block-type3 dt { padding: calc(10/210*100%); margin-bottom: calc(10/210*100%); }
	#map-conts .thumb-Block .thumb-Block-type4 dt { padding: calc(10/210*100%); margin-bottom: calc(10/210*100%); }
	#map-conts .thumb-Block .thumb-Block-type4.i2 dt { padding: calc(10/432*100%); margin-bottom: calc(10/432*100%); }
	#map-conts .thumb-Block .thumb-Block-type4.i3 dt { padding: calc(10/654*100%); margin-bottom: calc(10/654*100%); }
	#map-conts .thumb-Block .thumb-Block-type4.i4 dt { padding: calc(10/876*100%); margin-bottom: calc(10/876*100%); }
	#map-conts .thumb-Block .thumb-Block-type4.i5 dt { padding: calc(10/1098*100%); margin-bottom: calc(10/1098*100%); }
	#map-conts .thumb-Block .thumb-Block-type4.i2 dt img { max-width: 190px; width: calc(190/412*100%); }
	#map-conts .thumb-Block .thumb-Block-type4.i3 dt img { max-width: 190px; width: calc(190/634*100%); }
	#map-conts .thumb-Block .thumb-Block-type4.i4 dt img { max-width: 190px; width: calc(190/856*100%); }
	#map-conts .thumb-Block .thumb-Block-type4.i5 dt img { max-width: 190px; width: calc(190/1078*100%); }
	#map-conts .thumb-Block .thumb-Block-type5 dt { padding: calc(10/210*100%); margin-bottom: calc(10/210*100%); }
	#map-conts .thumb-Block .thumb-Block-type5.i5 dt { padding: calc(10/1098*100%); margin-bottom: calc(10/1098*100%); }
	#map-conts .thumb-Block .thumb-Block-type5.i5 dt img { max-width: 190px; width: calc(190/1078*100%); }

	#map-conts .thumb-Block .thumb-Block-type1 dd { width: calc(210/876*100%); margin-right: calc(11.5/876*100%); }
	#map-conts .thumb-Block .thumb-Block-type2 dd { width: calc(210/432*100%); margin-right: calc(11.5/432*100%); }
	#map-conts .thumb-Block .thumb-Block-type3 dd { width: calc(210/210*100%); }
	#map-conts .thumb-Block .thumb-Block-type4 dd { width: calc(210/210*100%); margin-bottom: calc(11.5/876*100%); }
	#map-conts .thumb-Block .thumb-Block-type4.i2 dd { width: calc(210/432*100%); margin-right: calc(11.5/432*100%); }
	#map-conts .thumb-Block .thumb-Block-type4.i3 dd { width: calc(210/654*100%); margin-right: calc(11.5/654*100%); }
	#map-conts .thumb-Block .thumb-Block-type4.i4 dd { width: calc(210/876*100%); margin-right: calc(11.5/876*100%); }
	#map-conts .thumb-Block .thumb-Block-type4.i5 dd { width: calc(210/1098*100%); margin-right: calc(11.5/1098*100%); }
	#map-conts .thumb-Block .thumb-Block-type1 dd:last-child { margin-right: 0; }
	#map-conts .thumb-Block .thumb-Block-type2 dd:last-child { margin-right: 0; }
	#map-conts .thumb-Block .thumb-Block-type3 dd:last-child { margin-right: 0; }
	#map-conts .thumb-Block .thumb-Block-type4 dd:nth-child(6) { margin-right: 0; }
	#map-conts .thumb-Block .thumb-Block-type4 dd:last-child { margin-right: 0; }
	#map-conts .thumb-Block .thumb-Block-type5 dd { width: calc(210/210*100%); }
	#map-conts .thumb-Block .thumb-Block-type5.i5 dd { width: calc(210/1098*100%); margin-right: calc(11.5/1098*100%); }
	

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

	#btn_back { max-width: 260px; width: 30%; margin: 6% auto 0;}
	#btn_back a { padding: 1em; font-size: 1.4rem; }
	#btn_back a:hover { opacity: 0.9;}


}
@media screen and (min-width: 641px) and (max-width: 940px) {
	
	@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
		#zoom-List .desc .early-box dd { position: relative; width: 100%; margin: 0 auto 2.651515%;}
		#zoom-List .desc .early-box dd:before { content: ""; display: block; padding-top: 45.454545%;}
		#zoom-List .desc .early-box dd .inn { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%;}

		#zoom-List .desc .early-box dd .inn {
			/*font-size: 10px; -webkit-transform: scale(0.6); -webkit-transform-origin: left top;*/
			overflow-y: auto;
		}
	}
	
}

@media screen and (min-width: 1401px) {
	#zoom-List .desc .early-box dd .type { font-size: 1.8rem;}
	#zoom-List .desc .early-box dd .btn a { font-size: 1.4rem;}
	#zoom-List .desc .early-box dd .text { font-size: 1.4rem;}
	#zoom-List .desc .early-box dd .annotation_List li { font-size: 1.2rem;}
}