#contents{
  padding:0 0 100px;
  background:rgb(255,255,255) url(../image/bg01.jpg) no-repeat center top;
  background-size:contain;
}

#contents div.award{
  width:980px; height:3073px;
  position:relative;
  top:0; left:0; right:0;
  margin:auto; padding:0;
  background:url(../image/bg02.png) no-repeat center top;
}
#contents div.award div.logo{
  width:374px; height:121px;
  position:absolute;
  top:66px; left:303px;
  margin:0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph01_1.png) no-repeat center top;
}
#contents div.award h1{
  width:950px; height:181px;
  position:absolute;
  top:199px; left:21px;
  margin:0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph01_2.png) no-repeat center top;
}
#contents div.award div.invite{
  width:884px; height:214px;
  position:absolute;
  top:391px; left:79px;
  margin:0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph01_3.png) no-repeat center top;
}
#contents div.award div.invite div.button{
  width:137px; height:64px;
  position:absolute;
  top:138px; left:710px;
  margin:0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph01_4.png) no-repeat center top;
}
#contents div.award div.invite div.button:hover{ background-position:center -69px; }
#contents div.award div.result{
  width:980px; height:2462px;
  position:absolute;
  top:611px; left:0;
  margin:0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph01_5.png) no-repeat center top;
}

#contents div.prize{
  width:992px; height:593px;
  position:relative;
  top:0; left:0; right:0;
  margin:50px auto 0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph02_1.png) no-repeat center top;
}
#contents div.prize div.button{
  width:168px; height:38px;
  position:absolute;
  top:392px; left:214px;
  margin:0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph02_2.png) no-repeat center top;
}
#contents div.prize div.button:hover{ background-position:center -43px; }

#contents div.train{
  width:980px; height:2231px;
  position:relative;
  top:0; left:0; right:0;
  margin:42px auto 0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph03_1.png) no-repeat center top;
}
#contents div.train div.button1{
  width:604px; height:224px;
  position:absolute;
  top:977px; left:198px;
  margin:0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph03_2.png) no-repeat center top;
}
#contents div.train div.button1:hover{ background-position:center -229px; }
#contents div.train div.button2{
  width:604px; height:224px;
  position:absolute;
  top:1210px; left:198px;
  margin:0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph03_3.png) no-repeat center top;
}
#contents div.train div.button2:hover{ background-position:center -229px; }
#contents div.train div.button3{
  width:604px; height:224px;
  position:absolute;
  top:1442px; left:198px;
  margin:0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph03_4.png) no-repeat center top;
}
#contents div.train div.button3:hover{ background-position:center -229px; }
#contents div.train div.button4{
  width:604px; height:224px;
  position:absolute;
  top:1675px; left:198px;
  margin:0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph03_5.png) no-repeat center top;
}
#contents div.train div.button4:hover{ background-position:center -229px; }
#contents div.train div.button5{
  width:604px; height:224px;
  position:absolute;
  top:1907px; left:198px;
  margin:0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph03_6.png) no-repeat center top;
}
#contents div.train div.button5:hover{ background-position:center -229px; }

#contents div.overview{
  width:980px; height:1192px;
  position:relative;
  top:0; left:0; right:0;
  margin:50px auto 0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph04.png) no-repeat center top;
}

#contents div.flow{
  width:980px; height:302px;
  position:relative;
  top:0; left:0; right:0;
  margin:50px auto 0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph05.png) no-repeat center top;
}

#contents div.rules{
  width:980px; height:1032px;
  position:relative;
  top:0; left:0; right:0;
  margin:50px auto 0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph06.png) no-repeat center top;
}
#contents div.rules div.button{
  width:175px; height:23px;
  position:absolute;
  top:514px; left:518px;
  margin:0; padding:0;
  text-indent:-32768px;
}

#contents div.inquiry{
  width:514px; height:151px;
  position:relative;
  top:0; left:0; right:0;
  margin:60px auto 0; padding:0;
  text-indent:-32768px;
  background:url(../image/ph07.png) no-repeat center top;
}

#contents div.official{
  width:560px; height:160px;
  position:relative;
  top:0; left:0; right:0;
  margin:60px auto 0; padding:0;
}
#contents div.official img.sp{ display:none; }

#contents div.totop{
  width:85px; height:85px;
  position:fixed;
  bottom:160px; right:26px;
  text-indent:-32768px;
  background:url(../image/ph09.png) no-repeat center top;
}




/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:rgb(0,0,0); opacity:0.9; filter:alpha(opacity=90);}
#colorbox{outline:0;}
    #cboxTopLeft{width:0; height:0;}
    #cboxTopRight{width:0; height:0;}
    #cboxBottomLeft{width:0; height:0;}
    #cboxBottomRight{width:0; height:0;}
    #cboxMiddleLeft{width:0;}
    #cboxMiddleRight{width:0;}
    #cboxTopCenter{height:0;}
    #cboxBottomCenter{height:0;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:0;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}




@media screen and (max-width:640px){

#contents{
  padding:0 0 100px;
  background:rgb(255,255,255) url(../image_sp/bg01.jpg) no-repeat center top;
}

#contents div.award{
  width:640px; height:5111px;
  background:url(../image_sp/bg02.png) no-repeat center top;
}
#contents div.award div.logo{
  width:316px; height:102px;
  top:29px; left:162px;
  background:url(../image_sp/ph01_1.png) no-repeat center top;
}
#contents div.award h1{
  width:613px; height:122px;
  top:158px; left:14px;
  background:url(../image_sp/ph01_2.png) no-repeat center top;
}
#contents div.award div.invite{
  width:603px; height:229px;
  top:296px; left:29px;
  background:url(../image_sp/ph01_3.png) no-repeat center top;
}
#contents div.award div.invite div.button{
  width:144px; height:68px;
  top:145px; left:418px;
  background:url(../image_sp/ph01_4.png) no-repeat center top;
}
#contents div.award div.invite div.button:hover{ background-position:center top; }
#contents div.award div.result{
  width:620px; height:4567px;
  top:545px; left:10px;
  background:url(../image_sp/ph01_5.png) no-repeat center top;
}

#contents div.prize{
  width:620px; height:4567px;
  margin:60px auto 0;
  background:url(../image_sp/ph02_1.png) no-repeat center top;
}

#contents div.prize{
  width:592px; height:1195px;
  margin:54px auto 0;
  background:url(../image_sp/ph02_1.png) no-repeat center top;
}
#contents div.prize div.button{
  width:450px; height:59px;
  top:615px; left:71px;
  background:url(../image_sp/ph02_2.png) no-repeat center top;
}
#contents div.prize div.button:hover{ background-position:center top; }

#contents div.train{
  width:620px; height:1947px;
  margin:53px auto 0; padding:0;
  background:url(../image_sp/ph03.png) no-repeat center top;
}
#contents div.train div.button1{ display: none; }
#contents div.train div.button2{ display: none; }
#contents div.train div.button3{ display: none; }
#contents div.train div.button4{ display: none; }
#contents div.train div.button5{ display: none; }

#contents div.overview{
  width:610px; height:2092px;
  margin:51px auto 0; padding:0;
  background:url(../image_sp/ph04.png) no-repeat center top;
}

#contents div.flow{
  width:610px; height:714px;
  margin:59px auto 0;
  background:url(../image_sp/ph05.png) no-repeat center top;
}

#contents div.rules{
  width:610px; height:2357px;
  margin:59px auto 0;
  background:url(../image_sp/ph06.png) no-repeat center top;
}
#contents div.rules div.button{
  width:245px; height:27px;
  top:1154px; left:227px;
}

#contents div.inquiry{
  width:582px; height:195px;
  margin:60px auto 0; padding:0;
  background:url(../image_sp/ph07.png) no-repeat center top;
}

#contents div.official{
  width:580px; height:165px;
  margin:60px auto 0; padding:0;
}
#contents div.official img.pc{ display:none; }
#contents div.official img.sp{ display:inline; }

#contents div.totop{
  bottom:270px;
}

}