@charset "utf-8";
/* ==================================================================
CSS information
style info : ゲーム紹介
================================================================== */


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



/* --------------------------------------------------------
#section-About
-------------------------------------------------------- */
#section-About { position: relative; padding-top: 7.1875%; padding-bottom: 5%; }

#section-About .chara-Block { position: absolute; width: 100%; top: 0; left: 0%; }
#section-About .chara-Block li { position: absolute; top: 0;}
#section-About .chara-Block .cha5 { width: 29.0625%; left: -6.71875%; margin-top: 14.0625%; }
#section-About .chara-Block .cha6 { width: 42.1875%; right: -14.84375%; margin-top: 8.75%;}

#section-About .hl { margin: 0 auto 4.375%; position: relative;}
#section-About .readtext { margin: 0 auto 5.625%;}

#section-About #movie-Block { width: 100%; }
#section-About #movie-Block #control {}
#section-About #btn-Block { width: 100%; letter-spacing: -.45em; }
#section-About #btn-Block li { letter-spacing: normal; display: inline-block; vertical-align: top; width: 47.068965%; }
#section-About #btn-Block li:nth-child(even) { margin-left: 5.862068%;}



@media screen and (min-width: 641px) {
	#section-About { padding-top: 3.214285%; padding-bottom: 2.142857%;}
	#section-About .inner { }
	#section-About .chara-Block { }
	#section-About .chara-Block li { }
	#section-About .chara-Block .cha5 { width: 13.285714%; max-width: 186px; left: 6.071428%; margin-top: -2.5%; }
	#section-About .chara-Block .cha6 { width: 19.285714%; max-width: 270px; right: 2.571428%; margin-top: -2.071428%;}

	#section-About .hl { width: 45.227272%; max-width: 597px; margin: 0 auto 1.515151%; position: relative;}
	#section-About .readtext { width: 58.939393%; max-width: 778px; margin: 0 auto 2.878787%; position: relative;}

	#section-About #movie-Block { }
	#section-About #movie-Block #control { padding-top: 1%; }
	#section-About #btn-Block { position: relative; }
	#section-About #btn-Block li { max-width: 173px; width: 13.106060%; margin-left: 1.363636%; }
	#section-About #btn-Block li:nth-child(even) { margin-left: 1.363636%;}
	#section-About #btn-Block li:first-child { margin-left: 0;}

}
@media screen and (min-width: 1401px) {
	#section-About { padding-top: 45px; padding-bottom: 30px;}
}


/* --------------------------------------------------------
#ytBlock
-------------------------------------------------------- */
#ytBox { position: relative; width: 100%; }
#ytBox:after { content: ""; display: block; padding-top: 56.25%; }
#ytBox > iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
#ytBox > iframe { width: 100%; height: 100%; }
#ytBox > iframe { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

@media screen and (min-width: 641px) {
}



/* --------------------------------------------------------
#section-Trick
-------------------------------------------------------- */
#section-Trick { padding-top: 9.375%; padding-bottom: 0%;}

#trick { background: url(../_img/trick/bg_sp.png); position: relative; border-radius: 12px; padding: 6.896551%; }
#trick .subhl { width: 116%; margin: -23.4% 0 5% -8%;}/* w640 */
#trick .subreadtext { width: 100%; margin-bottom: 9.4%;}

#trick .boxlist { width: 100%; }
#trick .boxlist li { width: 100%; margin-bottom: 8%; position: relative;}
#trick .boxlist li:last-child { margin-bottom: 0;}
#trick .boxlist li .ttl { margin-bottom: 5.4%; position: relative;}
#trick .boxlist li .ttl .icon { position: absolute; top: 0; }
#trick .boxlist li .frame { background: #0066cf; width: 100%; }

@media screen and (max-width: 640px) {
#trick .boxlist li.box1 .ttl .icon { right: 0; margin-top: -1.6%; width: 38.4%; }
#trick .boxlist li.box2 .ttl .icon { left: 0; margin-top: -0.6%; width: 38.4%; }
#trick .boxlist li.box3 .ttl .icon { right: 0; margin-top: 4.2%; width: 38.4%; }
}
@media screen and (min-width: 641px) {
	#section-Trick { padding-top: 6.428571%; padding-bottom: 0%;}
	#section-Trick .inner { }
	
	#trick { background: url(../_img/trick/bg_pc.jpg); padding: 2.272727%; }
	/* w1260 */	
	#trick .subhl { max-width: 667px; width: 52.936507%; margin: -7.142857% auto 0.396825%;}
	#trick .subreadtext { max-width: 507px; width: 40.238095%; margin: 0 auto;}
	
	#trick .boxlist { letter-spacing: -.45em; position: relative;}
	#trick .boxlist li { letter-spacing: normal; display: inline-block; vertical-align: top; max-width: 393px; width: 31.190476%; margin-bottom: 0%; margin-right: 3.174603%; }
	#trick .boxlist li:last-child { margin-right: 0;}
	#trick .boxlist li .ttl { margin-bottom: 0; }
	#trick .boxlist li .ttl .icon { }
	#trick .boxlist li .frame { background: #39c2ea; }
	
	#trick .boxlist li.box1 .ttl .icon { left: 3.562340%; margin-top: -5.597964%; max-width: 153px; width: 38.931297%; }
	#trick .boxlist li.box2 { margin-top: 2.301587%;}
	#trick .boxlist li.box2 .ttl { position: absolute; left: 0; bottom: 0; margin-bottom: -29.007633%; width: 100%; z-index: 3;}
	#trick .boxlist li.box2 .ttl .icon { right: -4.071246%; margin-top: -3.816793%; max-width: 153px; width: 38.931297%; }
	#trick .boxlist li.box3 .ttl .icon { right: -5.852417%; margin-top: 5.852417%; max-width: 153px; width: 38.931297%; }
	
}
@media screen and (min-width: 1401px) {
	#section-Trick { padding-top: 90px; padding-bottom: 0px;}
}




/* --------------------------------------------------------
#section-Chancecard
-------------------------------------------------------- */
#section-Chancecard { padding-top: 17.5%; padding-bottom: 0%;}

#chancecard { background: url(../_img/chance/bg_sp.jpg); position: relative; border-radius: 12px; padding: 6.896551%; }
#chancecard .subhl { width: 116%; margin: -14% 0 3% -8%; position: relative;}/* w640 */
#chancecard .subhl img { position: relative; z-index: 2;}
#chancecard .subhl .icon { position: absolute; top: 0; right: -5.9375%; margin-top: -2.1875%; width: 29.21875%; z-index: 1; }
#chancecard .subreadtext { width: 100%; margin-bottom: 8.4%;}

#chancecard .boxlist { width: 100%; }
#chancecard .boxlist li { width: 100%; margin-bottom: 8%; position: relative;}
#chancecard .boxlist li:last-child { margin-bottom: 0;}
#chancecard .boxlist li .ttl { margin-bottom: 5.0%; position: relative;}
#chancecard .boxlist li .ttl img { position: relative; z-index: 2;}
#chancecard .boxlist li .ttl .icon { position: absolute; top: 0; z-index: 1; }
#chancecard .boxlist li .frame { background: #0066cf; width: 100%; z-index: 3; }
#chancecard .boxlist li .btn { margin-top: 4%;}
#chancecard .boxlist li .btn a { display: block;}
@media screen and (max-width: 640px) {
#chancecard .boxlist li.box1 .ttl .icon { right: -5.8%; margin-top: 1.2%; width: calc(223/500*100%); }
#chancecard .boxlist li.box2 .ttl .icon { left: -12.6%; margin-top: -2.8%; width: calc(261/500*100%); }
#chancecard .boxlist li.box3 .ttl .icon { right: -11.6%; margin-top: -6%; width: calc(291/500*100%); }
}
@media screen and (min-width: 641px) {
	#section-Chancecard { padding-top: 6.428571%; padding-bottom: 0%;}
	#section-Chancecard .inner { }
	
	#chancecard { padding: 2.272727%; }
	/* w1260 */	
	#chancecard .subhl { max-width: 818px; width: 64.920634%; margin: -4.761904% auto 0.952380%;}
	#chancecard .subhl .icon { right: -25.061124%; margin-top: -2.322738%; max-width: 187px;  width: 22.860635%; z-index: 1; }
	#chancecard .subreadtext { max-width: 580px; width: 46.031746%; margin: 0 auto 2.857142%;}

	#chancecard .boxlist { position: relative;}
	#chancecard .boxlist li { max-width: 393px; width: 31.190476%; margin-bottom: 0; }
	#chancecard .boxlist li .ttl { margin-bottom: 0; position: absolute; top: 0; z-index: 10; }
	#chancecard .boxlist li .ttl .icon { }
	#chancecard .boxlist li .frame { background: #39c2ea; }
	#chancecard .boxlist li .btn { max-width: 299px; width: 76.081424%; margin-top: 0; position: absolute;}
	
	#chancecard .boxlist li.box1 { margin-left: 25.396825%; margin-bottom: 5.158730%;}
	#chancecard .boxlist li.box1 .ttl { left: -81.424936%; margin-top: -5.597964%; max-width: 299px; width: 76.081424%;}
	#chancecard .boxlist li.box1 .ttl .icon { max-width: 153px; width: calc(153/299*100%); right: -10%; margin-top: calc(14/299*-100%);}
	#chancecard .boxlist li.box1 .btn { left: -81.424936%; bottom: 0; }

	#chancecard .boxlist li.box2 { }
	#chancecard .boxlist li.box2 .ttl { left: 104.580152%; max-width: 299px; width: 76.081424%;}
	#chancecard .boxlist li.box2 .ttl .icon { max-width: 201px; width: calc(201/299*100%); right: -20.735785%; margin-top: calc(78/299*-100%);}
	#chancecard .boxlist li.box2 .btn { left: 104.580152%; bottom: 0; }
	
	#chancecard .boxlist li.box3 { position: absolute; top: 0; right: 7.460317%;}
	#chancecard .boxlist li.box3 .ttl { position: relative; max-width: 393px; width: 100%; margin-bottom: 4.834605%;}
	#chancecard .boxlist li.box3 .ttl .icon { max-width: 291px; width: calc(291/393*100%); right: -35.877862%; margin-top: calc(146/393*100%);}
	#chancecard .boxlist li.box3 .btn { left: 0; bottom: 0; margin-bottom: -19.083969%; z-index: 11; }
	
}
@media screen and (min-width: 1401px) {
	#section-Chancecard { padding-top: 90px; padding-bottom: 0px;}
}




/* --------------------------------------------------------
#section-Easymode
-------------------------------------------------------- */
#section-Easymode { padding-top: 9.375%; padding-bottom: 0%;}

#easymode { background: #00d7cf; position: relative; border-radius: 12px; padding: 5.172413%; }
#easymode .subhl { width: 73.269230%; margin: -12.692307% auto 5.384615%;}/* w520 */
#easymode .subreadtext { width: 100%; margin-bottom: 2.692307%;}
#easymode .chara-Block { width: 100%; margin-bottom: 2.884615%;}

#easymode .boxlist { width: 100%; }
#easymode .boxlist li { width: 100%; position: relative;}
#easymode .boxlist li .ttl { margin-bottom: -3.846153%; z-index: 2; position: relative;}
#easymode .boxlist li .frame { background: #39c2ea; width: 75.576923%; margin: 0 auto;}

#easymode .boxlist li.box1 { margin-bottom: 6.730769%; }
#easymode .boxlist li.box1 .board { max-width: none; width: 106.346153%; margin-top: -3.846153%; margin-left: -2.307692%; }

#easymode .boxlist li.box2 { margin-bottom: 9.615384%; }
#easymode .boxlist li.box2 .image2_1 ,
#easymode .boxlist li.box2 .image2_2 { width: 23.653846%; position: absolute; bottom: 0;}
#easymode .boxlist li.box2 .image2_1 { left: -1.538461%;}
#easymode .boxlist li.box2 .image2_2 { right: -4.230769%;}

#easymode .boxlist li.box3 { }
#easymode .boxlist li.box3 .frame { margin: 0;}
#easymode .boxlist li.box3 .image3 { width: 66.538461%; margin: -20.961538% 0 6.923076% 37.5%; z-index: 2; position: relative;}
#easymode .boxlist li.box3 .board { width: 100%;}

@media screen and (min-width: 641px) {
	#section-Easymode { padding-top: 6.428571%; padding-bottom: 3.571428%;}
	#section-Easymode .inner { }
	
	#easymode { padding: 2.272727%; }/* w1260 */
	#easymode .subhl { max-width: 381px; width: 30.238095%; margin: -5.555555% auto 1%;}
	#easymode .subreadtext { max-width: 837px; width: 66.428571%; margin: 0 auto 2.380952%;}
	#easymode .chara-Block { max-width: 395px; width: 29.924242%; position: absolute; top: 0; right: 1.515151%; margin-top: -5.303030%; margin-bottom: 0;}

	#easymode .boxlist { position: relative; letter-spacing: -.45em;}
	#easymode .boxlist li { letter-spacing: normal; display: inline-block; vertical-align: top; max-width: 393px; width: 31.190476%; }
	#easymode .boxlist li .ttl { margin-bottom: -5.089058%; }
	#easymode .boxlist li .frame { width: 100%;}

	#easymode .boxlist li.box1 { margin-bottom: 0; }
	#easymode .boxlist li.box1 .board { max-width: 437px; width: 111.195928%; margin-top: 6.106870%; margin-left: -1.781170%; }

	#easymode .boxlist li.box2 { margin-bottom: 0; margin-left: 3.174603%; }
	#easymode .boxlist li.box2 .image2_1 ,
	#easymode .boxlist li.box2 .image2_2 { max-width: 190px; width: 48.346055%; margin-bottom: -15.267175%; }
	#easymode .boxlist li.box2 .image2_1 { left: 0;}
	#easymode .boxlist li.box2 .image2_2 { right: 0;}

	
	#easymode .boxlist li.box3 { margin-left: 3.174603%; }
	#easymode .boxlist li.box3 .ttl { margin-top: 8.651399%; }
	#easymode .boxlist li.box3 .frame { margin: 0; }
	#easymode .boxlist li.box3 .image3 { max-width: 346px; width: 88.040712%; margin: -11.450381% 0 6.870229% 11.959287%; z-index: 2; position: relative;}
	#easymode .boxlist li.box3 .board { max-width: 827px; width: 210.432569%; margin-left: -110.432569%;}

}
@media screen and (min-width: 1401px) {
	#section-Easymode { padding-top: 90px; padding-bottom: 50px;}
}