@charset "UTF-8";

/* ==================================================================
CSS information
style info :「gameplay」 用
================================================================== */



#contents { background: url(../_img/gameplay/bg_r.png) top center repeat-x; /*height: 845px;*/}

/* --------------------------------------------------------
#subnavi
-------------------------------------------------------- */
#subnavi { bottom: 0; position: absolute; width: 100%;}
#subnavi li { position: relative;}
#subnavi li .on { position: absolute; top: 0; left: 0; display: none;}
#subnavi li a:hover .on { display: inline-block;}
#subnavi li.now .on { display: inline-block;}
#subnavi.p1bg { background: url(../_img/gameplay/p1/subnavi_bg.png) top center repeat-x; }
#subnavi.p2bg { background: url(../_img/gameplay/p2/subnavi_bg.png) top center repeat-x; }
#subnavi.p3bg { background: url(../_img/gameplay/p3/subnavi_bg.png) top center repeat-x; }


/* --------------------------------------------------------
.control
-------------------------------------------------------- */
.control { position: absolute; top:35%; width: 3.75%; height: 110px;}
.control a { display: block;}
.control img { width: 100%; height: auto;}
#bl { left: 1.1875%; }
#br { right: 1.1875%; }



/* --------------------------------------------------------
#ttl-block
-------------------------------------------------------- */
#ttl-block { position: relative;}
.ttl-block-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.p1 .ttl-block-bg { background: url(../_img/gameplay/p1/ttl_bg.png) top center repeat-x; }
.p2 .ttl-block-bg { background: url(../_img/gameplay/p2/ttl_bg.png) top center repeat-x; }
.p3 .ttl-block-bg { background: url(../_img/gameplay/p3/ttl_bg.png) top center repeat-x; }
#ttl-block .inner-cont { padding-bottom: 13px; }


#ttl-block #tf { top: -8px; left: 50%; margin-left: -255px; }
#ttl-block #category { margin-bottom: 12px;}
#ttl-block #ttl { margin-bottom: 0px;}



/* --------------------------------------------------------
.page-block
-------------------------------------------------------- */
.page-block { width: 100%; position: absolute; left: 0; }



#page-block-wrap { position: relative; width: 100%; height: auto; min-height: 550px; max-height: 655px; overflow: hidden;}
#page-block-wrap:before { content: ""; display: block; padding-top: 50%; }
.page-block { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* --------------------------------------------------------
.contents-block
-------------------------------------------------------- */
.contents-block { max-width: 1420px; width: 100%; margin:0 auto; position: relative; padding-top: 57px;}

.contents-block .btn-list { letter-spacing: -.45em;}
.contents-block .btn-list li { letter-spacing: normal; display: inline-block; text-align: center; vertical-align: top; position: relative;}
.contents-block .btn-list li:first-child { margin-right: 20px;}
.contents-block .btn-list .btn_text { margin-top: 8px;} 
.contents-block .btn-list li img { width: 100%; height: auto;}

.contents-block .btn-list li .thumb { position: absolute; top: 0; left: 0;}
.contents-block .btn-list li a { position: relative;}

#video-box {
position: relative;
/*padding-bottom: 56.25%;*/
padding-bottom: 60.465116279%;
height: 0;
overflow: hidden;
}

#video-box iframe,  
#video-box object,  
#video-box embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}



/* --------------------------------------------------------
#p1
-------------------------------------------------------- */
#p1 { display: block;}
#p1 .contents-block { padding-left: 80px; padding-left: 5.6338%;}

#p1 .subttl { margin-bottom: 20px;}
#p1 .text { margin-bottom: 40px;}

/* 1420-80 = width:1340 */
#p1 .btn-list li { width: 25.6716%; max-width: 344px; }
#p1 .btn-list .btn_text { width: 100%; max-width: 264px; height: auto;}

#p1 .pic { position: absolute; top: 60px; right: 2px; width: 45.4225%; height: auto; max-width: 645px;}
#p1 .pic img { width: 100%; height: auto; position: relative;}

@media screen and (min-width: 1420px) {
#p1 .btn-list li { width: 344px; }
}


/* --------------------------------------------------------
#p2
-------------------------------------------------------- */
#p2 { display: none; }
#p2 .contents-block {}

#p2 .subttl { margin-bottom: 20px; margin-left: 44.5070%;}
#p2 .text { margin-bottom: 40px; margin-left: 44.5070%;}

#p2 .btn-list { margin-left: 44.5070%;}
/* 1420-632 = width:788 */
#p2 .btn-list li { width: 43.6548%; max-width: 344px; }
#p2 .btn-list .btn_text { width: 100%; max-width: 264px; height: auto;}

#p2 .pic { position: absolute; top: 57px; left: 2.7464%; width: 39.8028%; height: auto; max-width: 551px;}
#p2 .pic img { width: 100%; height: auto; position: relative;}

@media screen and (min-width: 1420px) {
#p2 .btn-list li { width: 344px; }
}


/* --------------------------------------------------------
#p3
-------------------------------------------------------- */
#p3 { display: none; }
#p3 .contents-block { padding-left: 80px; padding-left: 5.6338%;}

#p3 .subttl { margin-bottom: 20px;}
#p3 .text { margin-bottom: 40px;}
/* 1420-80 = width:1340 */
#p3 .hl { margin-bottom: 20px; width: 53.7611%; max-width: 707px;}
#p3 .hl img { width: 100%; height: auto;}

#p3 .btn-list li:nth-child(1) { width: 25.6716%; max-width: 344px; margin-right: 2.6119%; }
#p3 .btn-list li:nth-child(2) { width: 24.9253%; max-width: 334px; }
#p3 .btn-list .btn_text { width: 100%; max-width: 264px; height: auto;}

#p3 .pic { position: absolute; top: 27px; left: 62.9850%; width: 31.8656%; height: auto; max-width: 427px;}
#p3 .pic img { width: 100%; height: auto; position: relative;}

#p3 .pic .anm1 , #p3 .pic .anm2 , #p3 .pic .anm3 { position:absolute; top: 0; left: 0; display: none;}
#p3 .pic .anm2 { position:absolute;}
#p3 .pic .anm3 { position:absolute;}


@media screen and (min-width: 1420px) {
#p3 .btn-list li:nth-child(1) { width: 344px; }
#p3 .btn-list li:nth-child(2) { width: 334px; }
}