@charset "UTF-8";

/* ########## WebFont ########## */
@font-face {
  font-family: 'SEGAMaruGothic';
  src: url('SEGA_MaruGothic_3594t-net.eot')  format('eot'),
       url('SEGA_MaruGothic_3594t-net.woff2') format('woff2'),
       url('SEGA_MaruGothic_3594t-net.woff')  format('woff'),
       url('SEGA_MaruGothic_3594t-net.ttf') format('truetype');
}



body, h1, h2, h3, h4, div, p, ul {
  margin: 0; padding: 0;
}

.spBlock { display: none !important; }
.spInline { display: none !important; }
.spInlineBlock { display: none !important; }


body {
  min-width: 1120px;
  font-family: "Verdana","Roboto","Droid Sans","游ゴシック","YuGothic","メイリオ","Meiryo","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック",sans-serif;
  background: rgb(0,0,0);
}

body div.content {
  position: relative;
  background: url(../image/bg01.gif) repeat left top;
}



/* ########## ContentHeader ########## */
#header {
  width: 100%; height: auto;
  overflow: hidden;
  position: relative;
  background: url(../image/bg02.png) repeat-x left top;
}

#header h1 {
  width: 214px; height: 129px;
  position: absolute;
  top: 0; left: 0;
  text-indent: -32767px;
  background: url(../image/ph01.png) no-repeat left top;
  z-index: 11;
}

#header div.menu {
  width: 100%; height: 129px;
  position: absolute;
  top: 0; left: 0;
  background: url(../image/bg02.png) repeat-x left top;
  z-index: 10;
}

#header div.menu ul.contents {
  width: 746px; height: 28px;
  position: absolute;
  top: 13px; left: 0; right:0;
  margin: 0 auto;
  list-style: none;
}

#header div.menu ul.contents li {
  display: block;
  height: 28px;
  position: absolute;
  top: 0;
  text-indent: -32767px;
  background: url(../image/ph03.png) no-repeat 0 0;
}
#header div.menu ul.contents li.top { width: 68px; left: 0; background-position: 0 0; }
#header div.menu ul.contents li.news { width: 101px; left: 68px; background-position: -73px 0; }
#header div.menu ul.contents li.about { width: 110px; left: 169px; background-position: -179px 0; }
#header div.menu ul.contents li.play { width: 86px; left: 279px; background-position: -294px 0; }
#header div.menu ul.contents li.movie { width: 69px; left: 365px; background-position: -385px 0; }
#header div.menu ul.contents li.ranking { width: 103px; left: 434px; background-position: -459px 0; }
#header div.menu ul.contents li.card { width: 108px; left: 537px; background-position: -567px 0; }
#header div.menu ul.contents li.location { width: 101px; left: 645px; background-position: -680px 0; }
#header div.menu ul.contents li.top:hover { width: 68px; left: 0; background-position: 0 -33px; }
#header div.menu ul.contents li.news:hover { width: 101px; left: 68px; background-position: -73px -33px; }
#header div.menu ul.contents li.about:hover { width: 110px; left: 169px; background-position: -179px -33px; }
#header div.menu ul.contents li.play:hover { width: 86px; left: 279px; background-position: -294px -33px; }
#header div.menu ul.contents li.movie:hover { width: 69px; left: 365px; background-position: -385px -33px; }
#header div.menu ul.contents li.ranking:hover { width: 103px; left: 434px; background-position: -459px -33px; }
#header div.menu ul.contents li.card:hover { width: 108px; left: 537px; background-position: -567px -33px; }
#header div.menu ul.contents li.location:hover { width: 101px; left: 645px; background-position: -680px -33px; }
#news_content #header div.menu ul.contents li.news { width: 101px; left: 68px; background-position: -73px -33px; }
#about #header div.menu ul.contents li.about { width: 101px; left: 169px; background-position: -179px -33px; }
#card #header div.menu ul.contents li.card { width: 108px; left: 537px; background-position: -567px -33px; }

#header div.menu ul.site {
  width: 221px; height: 59px;
  position: absolute;
  top: 0; right: 0;
  list-style: none;
  background: url(../image/bg03.png) no-repeat left top;
}

#header div.menu ul.site li {
  display: block;
  width: 96px; height: 59px;
  position: absolute;
  top: 0;
  text-indent: -32767px;
  background: url(../image/ph02.png) no-repeat 0 0;
}
#header div.menu ul.site li.net { left: 50px; background-position: 0 0; }
#header div.menu ul.site li.touen { left: 130px; background-position: -101px 0; }
#header div.menu ul.site li.net:hover { background-position: 0 -64px; }
#header div.menu ul.site li.touen:hover { background-position: -101px -64px; }


/* ********** Title ********** */
#header div.title {
  width: 1051px; height: 70px;
  position: relative;
  top: 0; left: 0; right:0;
  margin: 55px auto 0;
  background: url(../image/bg04.png) no-repeat left top;
}

#header div.title h2 {
  width: 500px; height: 50px;
  position: absolute;
  top: 9px; left: 280px;
  text-indent: -32767px;
}
#news_content #header div.title h2 { background: url(../news/image/content_ph01.png) no-repeat left top; }


/* ********** Trailer ********** */
#header div.trailer {
  width: 100%; height: 680px;
  position: relative;
  top: 0; left: 0; right:0;
  margin: 0 auto;
}

#header div.trailer #bgvideo {
  width: 100%; height: auto;
  position: absolute;
  top: -60px; bottom: 0; left: 0; right:0;
  margin: auto;
}

#header div.trailer div.mask {
  width: 100%; height: 680px;
  position: absolute;
  top: 0; left: 0;
  background: url(../index/image/bg02.png) repeat-x center bottom;
}

#header div.trailer div.pickup {
  width: 410px; height: 242px;
  position: absolute;
  top: 434px; left: 50%;
  margin: 0 0 0 -536px;
  background: url(../index/image/bg03.png) no-repeat left top;
}

#header div.trailer div.pickup div.slide {
  width: 336px; height: 187px;
  overflow:hidden;
  position: absolute;
  top: 44px; left: 38px;
}

#header div.trailer div.pickup div.slide ul {
  width: auto; height: 187px;
  position: absolute;
  top: 0; left: 0;
  list-style: none;
}

#header div.trailer div.pickup div.slide ul li {
  width: 336px; height: 187px;
  float: left;
}

#header div.trailer div.pickup div.slide ul li img {
  width: 100%; height: 100%;
}

#header div.trailer div.pickup ul.list {
  width: 180px; height: 17px;
  position: absolute;
  top: 26px; left: 189px;
  list-style: none;
  text-align: right;
}

#header div.trailer div.pickup ul.list li {
  display: inline-block;
  width: 17px; height: 17px;
  background: url(../index/image/ph04_1.png) no-repeat left top;
}
#header div.trailer div.pickup ul.list li.active {
  background: url(../index/image/ph04_2.png) no-repeat left top;
}

#header div.trailer div.pickup div.prev {
  width: 39px; height: 56px;
  position: absolute;
  top: 102px; left: 0;
  background: url(../index/image/ph03_1.png) no-repeat left top;
  cursor: pointer;
}

#header div.trailer div.pickup div.next {
  width: 39px; height: 56px;
  position: absolute;
  top: 102px; left: 372px;
  background: url(../index/image/ph03_2.png) no-repeat left top;
  cursor: pointer;
}

#header div.trailer div.button {
  width: 294px; height: 284px;
  position: absolute;
  top: 389px; left: 50%;
  margin: 0 0 0 187px;
}

#header div.trailer div.button div.new {
  width: 236px; height: 236px;
  position: absolute;
  top: 0; left: 29px;
  text-indent: -32767px;
  background: url(../index/image/ph01.png) no-repeat left top;
}

#header div.trailer div.button div.net {
  width: 126px; height: 126px;
  position: absolute;
  top: 158px; left: 0;
  text-indent: -32767px;
  background: url(../index/image/ph02_1.png) no-repeat left top;
}

#header div.trailer div.button div.touen {
  width: 126px; height: 126px;
  position: absolute;
  top: 158px; left: 168px;
  text-indent: -32767px;
  background: url(../index/image/ph02_2.png) no-repeat left top;
}



/* ########## Content ########## */
#content {
  width: 1020px; height: auto;
  overflow: hidden;
  position: relative;
  top:0; left:0; right:0;
  margin: 23px auto 55px;
}

#content.top {
  width: 100%; height: auto;
  overflow: hidden;
  margin: 0;
  background: url(../index/image/bg04.png) no-repeat center top;
}


/* ********** ContentBody ********** */
#content div.body {
  width: 980px; height: auto;
  position: relative;
  top:0; left:0; right:0;
  margin: 0 auto;
}

#content div.body h3 {
  width: 980px; height: 52px;
  text-align: center;
}

#content div.body h3 span {
  display: inline-block;
  height: 52px;
  text-indent: -32767px;
}
#content div.body h3 span.n0 { width: 30px; margin: 0 -3px 0 -2px; background: url(../news/image/content_ph03_0.png) no-repeat left top; }
#content div.body h3 span.n1 { width: 19px; margin: 0 -1px 0 -1px; background: url(../news/image/content_ph03_1.png) no-repeat left top; }
#content div.body h3 span.n2 { width: 29px; margin: 0 -3px 0 -2px; background: url(../news/image/content_ph03_2.png) no-repeat left top; }
#content div.body h3 span.n3 { width: 27px; margin: 0 -3px 0 -2px; background: url(../news/image/content_ph03_3.png) no-repeat left top; }
#content div.body h3 span.n4 { width: 30px; margin: 0 -1px 0 -2px; background: url(../news/image/content_ph03_4.png) no-repeat left top; }
#content div.body h3 span.n5 { width: 27px; margin: 0 -1px 0 -2px; background: url(../news/image/content_ph03_5.png) no-repeat left top; }
#content div.body h3 span.n6 { width: 27px; margin: 0 -3px 0 -2px; background: url(../news/image/content_ph03_6.png) no-repeat left top; }
#content div.body h3 span.n7 { width: 29px; margin: 0 -3px 0 -2px; background: url(../news/image/content_ph03_7.png) no-repeat left top; }
#content div.body h3 span.n8 { width: 28px; margin: 0 -1px 0 -2px; background: url(../news/image/content_ph03_8.png) no-repeat left top; }
#content div.body h3 span.n9 { width: 29px; margin: 0 -2px 0 -2px; background: url(../news/image/content_ph03_9.png) no-repeat left top; }
#content div.body h3 span.y { width: 42px; margin: 0 -2px 0 1px; background: url(../news/image/content_ph03_y.png) no-repeat left top; }
#content div.body h3 span.suffix { width: 215px; margin: 0 0 0 1px; background: url(../news/image/content_ph03_suffix.png) no-repeat left top; }

#content div.body div.column {
  width: 980px; height: auto; margin-bottom: 42px;
}
#content div.body div.column_bottom{
  margin-bottom: 0;
}

#content div.body div.column div.header {
  width: 980px; height: 22px;
  background: url(../image/ph08_1.png) no-repeat left top;
}

#content div.body div.column h4,
#content div.body div.column .column_title {
  width: 980px; height: 64px;
  text-indent: -32767px;
  background: url(../about/image/index_ph02_blank.png) no-repeat left top;
  position: relative;
}
#content div.body div.column div.inner {
  width: 980px; height: auto;
  overflow: hidden;
  background: url(../image/ph08_2.png) no-repeat left top;
  background-size: 980px 100%;
}

#content div.body div.column div.inner p {
  width: 700px; height: auto;
  margin: 24px auto;
  font-size: 16px; line-height: 24px;
  color: rgb(0,0,0);
}
#content div.body div.column div.inner p.text_center {
  text-align: center;
}
#content div.body div.column div.inner p.information {
  margin: 9px auto 24px;
  font-weight: bold;
  text-align: right;
}

#content div.body div.column div.inner p.information span.category {
  color: rgb(232,0,8);
}

#content div.body div.column div.inner p strong {
  font-size: 22px;
  color: rgb(204,0,0);
}

#content div.body div.column div.inner p em {
  font-weight: bold; font-style: normal;
  color: rgb(255,0,0);
}

#content div.body div.column div.inner p a {
  font-weight: bold;
  color: rgb(255,0,0);
}

#content div.body div.column div.footer {
  width: 980px; height: 30px;
  background: url(../image/ph08_3.png) no-repeat left top;
}


/* ********** ContentBody(hasSidebar) ********** */
#content.hassidebar div.body {
  width: 818px;
  right: auto;
  margin: 0 0 0 201px;
}

#content.hassidebar div.body div.column {
  width: 818px;
}

#content.hassidebar div.body h3 {
  width: 818px;
}

#content.hassidebar div.body div.column h4 {
  width: 818px; height: 74px;
  text-indent: -32767px;
}
#news_content #content.hassidebar div.body div.column h4 {
  width: 736px; height: 24px;
  padding: 40px 12px 10px 61px;
  font-weight: normal;
  font-size: 24px; line-height: 24px;
  text-indent: 0;
  color: rgb(255,255,255);
  background: url(../image/ph05_1.png) no-repeat left top;
}


#content.hassidebar div.body div.column div.inner {
  width: 818px;
  background: url(../image/ph05_2.png) repeat-y left top;
  background-size: auto;
}

#content.hassidebar div.body div.column div.inner p {
  width: 700px; height: auto;
  margin: 24px auto;
  font-size: 16px; line-height: 24px;
  color: rgb(0,0,0);
}

#content.hassidebar div.body div.column div.footer {
  width: 818px; height: 31px;
  background: url(../image/ph05_3.png) no-repeat left top;
}


/* ********** ContentBody(Top) ********** */
#content.top div.body {
  width: 1010px;
  margin: 38px auto 0;
}


/* ********** News ********** */
#content.top div.body div.news {
  width: 591px; height: 539px;
}

#content.top div.body div.news div.header{
  width: 591px; height: 29px;
  background: url(../index/image/bg05_1.png) no-repeat left top;
}

#content.top div.body div.news div.inner{
  width: 591px; height: 481px;
  overflow: hidden;
  background: url(../index/image/bg05_2.png) repeat-y left top;
}

#content.top div.body div.news div.inner h2{
  width: 112px; height: 39px;
  margin: 6px auto;
  text-indent: -32767px;
  background: url(../index/image/ph05_1.png) no-repeat left top;
}

#content.top div.body div.news div.inner ul.news {
  width: 500px; height: 340px;
  margin: 0 auto 10px;
  list-style: none;
}

#content.top div.body div.news div.inner ul.news li {
  width: 500px; height: 60px;
  position: relative;
  margin: 0 auto 10px;
}
#content.top div.body div.news div.inner ul.news li.important { background: url(../index/image/bg08_1.gif) no-repeat left top; }
#content.top div.body div.news div.inner ul.news li.update { background: url(../index/image/bg08_2.gif) no-repeat left top; }
#content.top div.body div.news div.inner ul.news li.event { background: url(../index/image/bg08_3.gif) no-repeat left top; }
#content.top div.body div.news div.inner ul.news li.campaign { background: url(../index/image/bg08_4.gif) no-repeat left top; }
#content.top div.body div.news div.inner ul.news li.maintenance { background: url(../index/image/bg08_5.gif) no-repeat left top; }
#content.top div.body div.news div.inner ul.news li:hover { opacity: 0.8; }

#content.top div.body div.news div.inner ul.news li span {
  width: 378px; height: 18px;
  position: absolute;
  left: 120px;
  font-size: 14px; line-height: 18px;
  color: rgb(0,0,0);
}
#content.top div.body div.news div.inner ul.news li span.open { top: 11px; }
#content.top div.body div.news div.inner ul.news li span.title { top: 32px; }


#content.top div.body div.news div.inner div.button_list {
  width: 348px; height: 70px;
  margin: 14px auto 0;
  text-indent: -32767px;
  background: url(../index/image/ph06_1.png) no-repeat left top;
}

#content.top div.body div.news div.footer{
  width: 591px; height: 29px;
  background: url(../index/image/bg05_3.png) no-repeat left top;
}


/* ********** Twitter ********** */
#content.top div.body div.twitter {
  width: 401px; height: 539px;
  position: absolute;
  top:0; right:0;
}

#content.top div.body div.twitter div.header{
  width: 401px; height: 29px;
  background: url(../index/image/bg06_1.png) no-repeat left top;
}

#content.top div.body div.twitter div.inner{
  width: 401px; height: 481px;
  overflow: hidden;
  background: url(../index/image/bg06_2.png) repeat-y left top;
}

#content.top div.body div.twitter div.inner h2{
  width: 153px; height: 39px;
  margin: 6px auto;
  text-indent: -32767px;
  background: url(../index/image/ph05_2.png) no-repeat left top;
}

#content.top div.body div.twitter div.tweet{
  width: 320px; height:280px;
  margin: 6px auto;
}

#content.top div.body div.twitter div.inner div.button_twitter {
  width: 348px; height: 70px;
  margin: 8px auto 0;
  text-indent: -32767px;
  background: url(../index/image/ph06_2.png) no-repeat left top;
}

#content.top div.body div.twitter div.inner div.button_instagram {
  width: 348px; height: 70px;
  margin: 0 auto;
  text-indent: -32767px;
  background: url(../index/image/ph06_3.png) no-repeat left top;
}

#content.top div.body div.twitter div.footer{
  width: 401px; height: 29px;
  background: url(../index/image/bg06_3.png) no-repeat left top;
}


/* ********** Card ********** */
#content.top div.body div.card {
  width: 1010px; height: 459px;
  margin: 94px 0;
}

#content.top div.body div.card div.header{
  width: 1010px; height: 29px;
  background: url(../index/image/bg07_1.png) no-repeat left top;
}

#content.top div.body div.card div.inner{
  width: 1010px; height: 401px;
  overflow: hidden;
  position: relative;
  background: url(../index/image/bg07_2.png) repeat-y left top;
}

#content.top div.body div.card div.inner h2{
  width: 190px; height: 39px;
  margin: 6px auto;
  text-indent: -32767px;
  background: url(../index/image/ph05_3.png) no-repeat left top;
}

#content.top div.body div.card div.inner div.card {
  width: 800px; height: 221px;
  overflow: hidden;
  position: relative;
  margin: 25px auto;
}

#content.top div.body div.card div.inner div.card ul {
  width: auto; height: 221px;
  position: absolute;
  top:0; left:0;
  list-style: none;
}

#content.top div.body div.card div.inner div.card ul li {
  width: 140px; height: 221px;
  float: left;
  margin: 0 10px;
}

#content.top div.body div.card div.inner div.card ul li img {
  width: 100%; height: 100%;
}

#content.top div.body div.card div.inner div.button_list {
  width: 348px; height: 70px;
  margin: 8px auto 0;
  text-indent: -32767px;
  background: url(../index/image/ph06_4.png) no-repeat left top;
}

#content.top div.body div.card div.inner div.prev {
  width: 39px; height: 56px;
  position: absolute;
  top: 155px; left: 66px;
  background: url(../index/image/ph03_1.png) no-repeat left top;
  cursor: pointer;
}

#content.top div.body div.card div.inner div.next {
  width: 39px; height: 56px;
  position: absolute;
  top: 155px; left: 908px;
  background: url(../index/image/ph03_2.png) no-repeat left top;
  cursor: pointer;
}

#content.top div.body div.card div.footer{
  width: 1010px; height: 29px;
  background: url(../index/image/bg07_3.png) no-repeat left top;
}


/* ********** Ranking ********** */
#content.top div.body div.ranking {
  width: 1010px; height: 759px;
  margin: 94px 0;
}

#content.top div.body div.ranking div.header{
  width: 1010px; height: 29px;
  background: url(../index/image/bg07_1.png) no-repeat left top;
}

#content.top div.body div.ranking div.inner{
  width: 1010px; height: 701px;
  overflow: hidden;
  background: url(../index/image/bg07_2.png) repeat-y left top;
}

#content.top div.body div.ranking div.inner h2{
  width: 232px; height: 40px;
  margin: 6px auto;
  text-indent: -32767px;
  background: url(../index/image/ph05_4.png) no-repeat left top;
}

#content.top div.body div.ranking div.inner ul.ranking {
  width: 923px; height: auto;
  margin: 15px auto 20px;
  list-style: none;
}

#content.top div.body div.ranking div.inner ul.ranking li {
  width: 923px; height: 89px;
  position: relative;
  margin: 0 auto;
  color: rgb(255,255,255);
  background: url(../ranking/image/bg01_4.png) no-repeat left top;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 { height: 138px; background: url(../ranking/image/bg01_1.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 { height: 114px; background: url(../ranking/image/bg01_2.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 { height: 96px; background: url(../ranking/image/bg01_3.png) no-repeat left top; }

#content.top div.body div.ranking div.inner ul.ranking li span.rank {
  display: block;
  width: 140px; height: 67px;
  position: absolute;
  top: 11px; left: 52px;
  text-indent: -32767px;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.rank { height: 116px; background: url(../ranking/image/num/ph04_1.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.rank { height: 91px; background: url(../ranking/image/num/ph04_2.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.rank { height: 76px; background: url(../ranking/image/num/ph04_3.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank4 span.rank { background: url(../ranking/image/num/ph04_4.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank5 span.rank { background: url(../ranking/image/num/ph04_5.png) no-repeat left top; }

#content.top div.body div.ranking div.inner ul.ranking li span.avater {
  display: block;
  width: 60px; height: 59px;
  position: absolute;
  top: 15px; left: 196px;
  background: url(../ranking/image/bg02.png) no-repeat left top;
  background-size: contain;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.avater { width: 87px; height: 86px; top: 26px; left: 182px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.avater { width: 75px; height: 74px; top: 18px; left: 188px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.avater { width: 68px; height: 67px; top: 15px; left: 192px; }

#content.top div.body div.ranking div.inner ul.ranking li span.avater span.frame {
  display: block;
  width: 60px; height: 59px;
  position: absolute;
  top: 0; left: 0;
  background: url(../ranking/image/ph06_4.png) no-repeat left top;
  z-index: 1;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.avater span.frame { width: 87px; height: 86px; background: url(../ranking/image/ph06_1.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.avater span.frame { width: 75px; height: 74px; background: url(../ranking/image/ph06_2.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.avater span.frame { width: 68px; height: 67px; background: url(../ranking/image/ph06_3.png) no-repeat left top; }

#content.top div.body div.ranking div.inner ul.ranking li span.avater img {
  display: block;
  width: 51px; height: 51px;
  position: absolute;
  top: 3px; left: 4px;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.avater img { width: 75px; height: 75px; top: 5px; left: 6px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.avater img { width: 63px; height: 63px; top: 5px; left: 6px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.avater img { width: 58px; height: 58px; top: 4px; left: 5px; }

#content.top div.body div.ranking div.inner ul.ranking li span.title {
  display: block;
  width: 106px; height: 42px;
  position: absolute;
  top: 11px; left: 281px;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.title { width: 154px; height: 59px; top: 18px; left: 259px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.title { width: 134px; height: 52px; top: 13px; left: 269px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.title { width: 118px; height: 46px; top: 11px; left: 277px; }

#content.top div.body div.ranking div.inner ul.ranking li span.league {
  display: block;
  width: 81px; height: 32px;
  position: absolute;
  top: 47px; left: 294px;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.league { width: 112px; height: 43px; top: 74px; left: 280px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.league { width: 101px; height: 39px; top: 61px; left: 286px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.league { width: 90px; height: 35px; top: 52px; left: 291px; }

#content.top div.body div.ranking div.inner ul.ranking li span.userName {
  display: block;
  width: auto; height: auto;
  position: absolute;
  top: 19px; left: 416px;
  font-family: 'SEGAMaruGothic';
  font-weight: bold;
  font-size: 34px; line-height: 1;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.userName { top: 36px; font-size: 40px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.userName { top: 29px; font-size: 38px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.userName { top: 25px; font-size: 36px; }

#content.top div.body div.ranking div.inner ul.ranking li span.area {
  display: block;
  width: auto; height: auto;
  position: absolute;
  top: 60px; left: 409px;
  font-size: 12px; line-height: 1;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.area { top: 91px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.area { top: 78px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.area { top: 67px; }

#content.top div.body div.ranking div.inner ul.ranking li span.shopName {
  display: block;
  width: auto; height: auto;
  position: absolute;
  top: 60px; left: 459px;
  font-size: 12px; line-height: 1;
}
#content.top div.body div.ranking div.inner ul.ranking li span.shopName.ls { left: 471px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.shopName { top: 91px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.shopName { top: 78px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.shopName { top: 67px; }

#content.top div.body div.ranking div.inner ul.ranking li span.point {
  display: block;
  width: auto; height: auto;
  position: absolute;
  top: 36px; left: 756px;
  font-weight: bold;
  font-size: 22px; line-height: 1;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.point { top: 49px; left: 711px; font-size: 32px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.point { top: 44px; left: 729px; font-size: 28px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.point { top: 39px; left: 747px; font-size: 24px; }

#content.top div.body div.ranking div.inner ul.ranking li span.trophy_gol {
  display: block;
  width: auto; height: auto;
  position: absolute;
  top: 8px; left: 661px;
  font-size: 24px; line-height: 1;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.trophy_gol { top: 18px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.trophy_gol { top: 17px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.trophy_gol { top: 11px; }

#content.top div.body div.ranking div.inner ul.ranking li span.trophy_sil {
  display: block;
  width: auto; height: auto;
  position: absolute;
  top: 8px; left: 712px;
  font-size: 24px; line-height: 1;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.trophy_sil { top: 18px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.trophy_sil { top: 17px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.trophy_sil { top: 11px; }

#content.top div.body div.ranking div.inner ul.ranking li span.trophy_cop {
  display: block;
  width: auto; height: auto;
  position: absolute;
  top: 8px; left: 763px;
  font-size: 24px; line-height: 1;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.trophy_cop { top: 18px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.trophy_cop { top: 17px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.trophy_cop { top: 11px; }

#content.top div.body div.ranking div.inner ul.ranking li span.trophy_bad {
  display: block;
  width: auto; height: auto;
  position: absolute;
  top: 8px; left: 815px;
  font-size: 24px; line-height: 1;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.trophy_bad { top: 18px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.trophy_bad { top: 17px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.trophy_bad { top: 11px; }

#content.top div.body div.ranking div.inner ul.ranking li span img { width: 100%; height: 100%; }
#content.top div.body div.ranking div.inner ul.ranking li span.trophy_gol img { width: 22px; height: 24px; }
#content.top div.body div.ranking div.inner ul.ranking li span.trophy_sil img { width: 22px; height: 24px; }
#content.top div.body div.ranking div.inner ul.ranking li span.trophy_cop img { width: 22px; height: 24px; }
#content.top div.body div.ranking div.inner ul.ranking li span.trophy_bad img { width: 22px; height: 24px; }


#content.top div.body div.ranking div.inner div.button_list {
  width: 348px; height: 70px;
  margin: 8px auto 0;
  text-indent: -32767px;
  background: url(../index/image/ph06_5.png) no-repeat left top;
}

#content.top div.body div.ranking div.footer{
  width: 1010px; height: 29px;
  background: url(../index/image/bg07_3.png) no-repeat left top;
}





/* ********** Support ********** */
#content.top div.body div.support {
  width: 1010px; height: 243px;
  margin: 94px 0;
}

#content.top div.body div.support div.header{
  width: 1010px; height: 29px;
  background: url(../index/image/bg07_1.png) no-repeat left top;
}

#content.top div.body div.support div.inner{
  width: 1010px; height: 243px;
  overflow: hidden;
  background: url(../index/image/bg07_2.png) repeat-y left top;
}

#content.top div.body div.support div.inner h2{
  width: 170px; height: 40px;
  margin: 6px auto;
  text-indent: -32767px;
  background: url(../index/image/ph05_5.png) no-repeat left top;
}

#content.top div.body div.support div.inner ul {
  width: 848px; height: 138px;
  position: relative;
  margin: 15px auto 20px;
  list-style: none;
}

#content.top div.body div.support div.inner ul li {
  width: 218px; height: 138px;
  position: absolute;
  top:0;
  text-indent: -32767px;
}
#content.top div.body div.support div.inner ul li.instruction { left:0; background: url(../index/image/ph10_1.png) no-repeat left top; }
#content.top div.body div.support div.inner ul li.copyright { left:210px; background: url(../index/image/ph10_2.png) no-repeat left top; }
#content.top div.body div.support div.inner ul li.playingmovie { left:420px; background: url(../index/image/ph10_3.png) no-repeat left top; }
#content.top div.body div.support div.inner ul li.usersupport { left:630px; background: url(../index/image/ph10_4.png) no-repeat left top; }

#content.top div.body div.support div.footer{
  width: 1010px; height: 29px;
  background: url(../index/image/bg07_3.png) no-repeat left top;
}



/* ********** Sidebar ********** */
#content div.sidebar {
  width: 192px; height:auto;
  float: left;
}

#content div.sidebar div.column {
  width: 192px; height: auto;
}

#content div.sidebar div.column div.header {
  width: 192px; height: 55px;
  text-indent: -32767px;
}
#content div.sidebar div.column.category div.header { background: url(../image/ph06_1_1.png) no-repeat left top; }
#content div.sidebar div.column.archive div.header { margin:-14px 0 0; background: url(../image/ph06_1_2.png) no-repeat left top; }

#content div.sidebar div.column div.inner {
  width: 192px; height: auto;
  overflow: hidden;
  background: url(../image/ph06_2.png) repeat-y left top;
}

#content div.sidebar div.column div.inner ul {
  width: 152px; height: auto;
  margin: 13px 0 18px 25px;
  list-style: none;
}

#content div.sidebar div.column div.inner ul a {
  text-decoration: none;
  color: rgb(255,255,255);
}

#content div.sidebar div.column div.inner ul li {
  font-size: 16px; line-height:24px;
}
body #content div.sidebar div.column div.inner ul li.active { color: rgb(255,150,0); }

#content div.sidebar div.column div.inner ul li:before {
  content: "・";
  font-size: 16px; line-height:24px;
}


#content div.sidebar div.column div.inner select { display: none; }


#content div.sidebar div.column div.footer {
  width: 192px; height: 22px;
  background: url(../image/ph06_3.png) repeat-y left top;
}



/* ########## ContentFooter ########## */
#footer {
  width: 100%; height: auto;
  overflow: hidden;
  position: relative;
  padding: 9px 0 0;
}


/* ********** Location ********** */
#footer div.location {
  width: 100%; height: 340px;
  position: relative;
  margin: -9px 0 0;
  background: url(../image/bg07.png) repeat-x center top;
}

#footer div.location div.container {
  width: 1120px; height: 340px;
  position: relative;
  margin: 0 auto;
  background: url(../image/bg08.png) no-repeat left top;
}

#footer div.location div.container div.search {
  width: 348px; height: 70px;
  position: absolute;
  top: 179px; left: 611px;
  text-indent: -32767px;
  background: url(../image/ph09.png) no-repeat left top;
}

/* ********** Banner ********** */
#footer div.banner {
  width: 100%; height: 119px;
  overflow: hidden;
  margin: -9px 0 0;
  background: url(../image/bg09.png) repeat-x center top;
}

#footer div.banner ul.banner {
  width: auto; height: 50px;
  position: relative;
  margin: 39px auto 0;
  text-align: center;
  list-style: none;
}

#footer div.banner ul.banner li {
  display: inline-block;
  width: 170px; height: 50px;
  margin: 0 5px;
}

#footer div.banner ul.banner li img {
  width: 170px; height: 50px;
}

/* ********** Copyright ********** */
#footer div.copyright {
  width: 100%; height: 179px;
  position: relative;
  margin: -9px 0 0;
  background: url(../image/bg05.png) repeat-x left top;
}


#footer div.copyright div.background {
  width: 1830px; height: 170px;
  position: absolute;
  top: 9px; left: 50%;
  margin: 0 0 0 -915px;
  background: url(../image/bg06.jpg) no-repeat left top;
}

#footer div.copyright ul.sns {
  width: 180px; height: 38px;
  position: absolute;
  top: 18px; left: 0; right: 0;
  margin: 0 auto;
  list-style: none;
}

#footer div.copyright ul.sns li {
  display: block;
  width: 39px; height: 38px;
  position: absolute;
  top: 0;
  text-indent: -32767px;
  background: url(../image/ph04.png) no-repeat 0 0;
}
#footer div.copyright ul.sns li.twitter { left: 0; background-position: 0 0; }
#footer div.copyright ul.sns li.facebook { left: 47px; background-position: -44px 0; }
#footer div.copyright ul.sns li.line { left: 94px;; background-position: -88px 0; }
#footer div.copyright ul.sns li.instagram { left: 141px; background-position: -132px 0; }

#footer div.copyright p.copyright {
  width: 1000px; height: auto;
  position: absolute;
  top: 70px; left: 0; right: 0;
  margin: 0 auto;
  font-size: 11px; line-height: 15px;
  text-align: center;
  color: rgb(255,255,255);
}

#footer div.copyright p.copyright a {
  color: rgb(255,255,255);
}



/* ########## scrollGuide ########## */
#scrollguide {
  width: 100%; height: 447px;
  min-width: 1120px;
  position: absolute;
  top: 210px; left: 0; right: 0;
  margin:0 auto;
  pointer-events: none;
}

#scrollguide div.button {
  width: 126px; height: 447px;
  position: absolute;
  top: 0; right: 0;
  text-indent: -32767px;
  background: url(../image/ph10.png) no-repeat 0 0;
  pointer-events: auto;
  cursor: pointer;
}



/* ########## toPageTop ########## */
#topagetop {
  display: none;
  width: 100%; height: 206px;
  min-width: 1120px;
  position: absolute;
  bottom: 290px; left: 0; right: 0;
  margin:0 auto;
  pointer-events: none;
  opacity: 0;
}
#topagetop.float {
  position: fixed;
  bottom: 20px;
}

#topagetop div.top {
  width: 100px; height: 100px;
  position: absolute;
  top: 0; right: 3px;
  text-indent: -32767px;
  background: url(../image/ph07.png) no-repeat 0 0;
  pointer-events: auto;
}

#topagetop div.search {
  width: 106px; height: 106px;
  position: absolute;
  top: 100px; right: 0;
  text-indent: -32767px;
  background: url(../image/ph11.png) no-repeat 0 0;
  pointer-events: auto;
}



/* ########## floatMenu ########## */
#floatmenu { display: none; }





/* ########## ********** ********** ##########
    画面サイズ 640px 以下 (SmartPhone)
   ########## ********** ********** ########## */
@media screen and (max-width:640px){

.spHide { display: none !important; }
.spBlock { display: block !important; }
.spInline { display: inline !important; }
.spInlineBlock { display: inline-block !important; }

body {
  min-width: 640px;
}



/* ########## ContentHeader ########## */
#header {
  width: 640px;
  background: url(../image_sp/bg02.png) no-repeat left top;
}

#header h1 {
  width: 142px; height: 138px;
  background: url(../image_sp/ph01.png) no-repeat left top;
}

#header div.menu {
  width: 133px; height: 135px;
  left: auto; right: 0;
  text-indent: -32767px;
  background: url(../image_sp/ph02.png) no-repeat left top;
}

#header div.menu ul.contents { display: none; }
#header div.menu ul.site { display: none; }

#header div.spNet {
  width: 128px; height: 101px;
  position: absolute;
  top: 122px; left: 512px;
  text-indent: -32767px;
  background: url(../index/image_sp/ph08_1.png) no-repeat left top;
  z-index: 5;
}

#header div.spTouen {
  width: 128px; height: 101px;
  position: absolute;
  top: 211px; left: 512px;
  text-indent: -32767px;
  background: url(../index/image_sp/ph08_2.png) no-repeat left top;
  z-index: 5;
}

#header div.spMovie {
  width: 310px; height: 175px;
  position: absolute;
  top: 319px; left: 6px;
  text-indent: -32767px;
  background: url(../index/image_sp/ph09.png) no-repeat left top;
  z-index: 5;
}


/* ********** Title ********** */
#header div.title {
  width: 640px; height: 138px;
  margin: 0 auto;
  background: url(../image_sp/bg02.png) no-repeat left top;
}

#header div.title h2 {
  width: 640px; height: 60px;
  top: 28px; left: 0;
}
#news_content #header div.title h2 { background: url(../news/image_sp/content_ph01.png) no-repeat left top; }
#about #header div.title h2 { background: url(../about/image_sp/index_ph01.png) no-repeat left top; }


/* ********** Trailer ********** */
#header div.trailer {
  width: 640px; height: 1198px;
  background: url(../index/image_sp/bg01.jpg) no-repeat left top;
}

#header div.trailer #bgvideo { display: none; }
#header div.trailer div.mask { display: none; }

#header div.trailer div.pickup {
  width: 640px; height: 417px;
  top: 520px; left:0;
  margin: -30px 0 -9px;
  background: url(../index/image_sp/bg02.png) no-repeat left top;
}

#header div.trailer div.pickup div.slide {
  width: 550px; height: 309px;
  top: 90px; left: 45px;
}

#header div.trailer div.pickup div.slide ul {
  width: auto; height: 309px;
}

#header div.trailer div.pickup div.slide ul li {
  width: 550px; height: 309px;
}

#header div.trailer div.pickup ul.list {
  width: 340px; height: 36px;
  top: 45px; left: 294px;
}

#header div.trailer div.pickup ul.list li {
  width: 36px; height: 36px;
  background: url(../index/image_sp/ph02_1.png) no-repeat left top;
}
#header div.trailer div.pickup ul.list li.active {
  background: url(../index/image_sp/ph02_2.png) no-repeat left top;
}

#header div.trailer div.pickup div.prev {
  width: 45px; height: 309px;
  top: 90px; left: 0;
  background: url(../index/image_sp/ph01_1.png) no-repeat left top;
}

#header div.trailer div.pickup div.next {
  width: 45px; height: 309px;
  top: 90px; left: 595px;
  background: url(../index/image_sp/ph01_2.png) no-repeat left top;
}

#header div.trailer div.button {
  width: 640px; height: 300px;
  top: 898px; left: 0;
  margin: 0;
}

#header div.trailer div.button div.new {
  width: 276px; height: 276px;
  top: 12px; left: 182px;
  background: url(../index/image_sp/ph03.png) no-repeat left top;
}

#header div.trailer div.button div.net {
  width: 214px; height: 214px;
  top: 44px; left: 2px;
  background: url(../index/image_sp/ph04_1.png) no-repeat left top;
}

#header div.trailer div.button div.touen {
  width: 214px; height: 214px;
  top: 44px; left: 422px;
  background: url(../index/image_sp/ph04_2.png) no-repeat left top;
}



/* ########## Content ########## */
#content {
  width: 640px;
  margin: 23px auto 43px;
}

#content.top {
  background: transparent;
}

/* ********** ContentBody ********** */
#content div.body {
  width: 640px;
}

#content div.body h3 {
  width: 640px; height: 60px;
  margin: 0 auto 20px;
}

#content div.body div.column {
  width: 640px;
}


#content div.body div.column div.header {
  width: 640px; height: 11px;
  background: url(../image_sp/bg04_0.png) no-repeat left top;
}

#content div.body div.column h4 {
  width: 640px;
}
#news_content #content div.body div.column h4 {
  width: 600px; height:auto;
  padding: 16px 20px 12px;
  font-size: 32px; line-height: 40px;
  text-indent: 0;
  background: url(../image_sp/bg04_1.png) no-repeat left top;
}
#about #content div.body div.column h4.card { height:80px; text-indent:-32767px; background: url(../about/image_sp/index_ph02_1.png) no-repeat left top; }


#content div.body div.column div.inner {
  width: 640px;
  background: rgba(255,255,255,0.65);
}

#content div.body div.column div.inner p {
  width: 600px;
  margin: 36px auto;
  font-size: 24px; line-height: 36px;
}
#content div.body div.column div.inner p.information {
  margin: 23px auto;
}

#content div.body div.column div.inner p strong {
  font-size: 36px; line-height:50px;
}

#content div.body div.column div.inner p img {
  max-width: 600px;
}

#content div.body div.column div.footer {
  width: 640px; height: 22px;
  margin: 0 0 30px;
  background: url(../image_sp/bg04_2.png) no-repeat left top;
}
#content div.body div.column h4,
#content div.body div.column .column_title {
  background: none;
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  height: 0;
  margin: 0;
  padding-top: 12.5%;
  width: 100%;
}


/* ********** ContentBody(hasSidebar) ********** */
#content.hassidebar div.body {
  width: 640px;
  right: auto;
  margin: 0;
}

#content.hassidebar div.body h3 {
  width: 640px; height: 60px;
  margin: 0 auto 20px;
}

#content.hassidebar div.body div.column h4 {
  width: 640px;
}
#news_content #content.hassidebar div.body div.column h4 { width: 600px; height:auto;  padding: 16px 20px 12px; font-size: 32px; line-height: 40px; text-indent: 0; background: url(../image_sp/bg04_1.png) no-repeat left top; }
#about #content.hassidebar div.body div.column h4.card { height:80px; text-indent:-32767px; background: url(../about/image_sp/index_ph02_1.png) no-repeat left top; }

#content.hassidebar div.body div.column div.inner {
  width: 640px;
  background: rgba(255,255,255,0.65);
}

#content.hassidebar div.body div.column div.inner p {
  width: 600px;
  margin: 36px auto;
  font-size: 24px; line-height: 36px;
}

#content.hassidebar div.body div.column div.footer {
  width: 640px; height: 22px;
  margin: 0 0 30px;
  background: url(../image_sp/bg04_2.png) no-repeat left top;
}


/* ********** ContentBody(Top) ********** */
#content.top div.body {
  width: 640px;
  margin: 0;
}


/* ********** News ********** */
#content.top div.body div.news {
  width: 640px; height: 1795px;
  margin: -9px 0 -8px;
  background: url(../index/image_sp/bg03.png) no-repeat left top;
}

#content.top div.body div.news div.header{ display: none; }

#content.top div.body div.news div.inner{
  width: 640px; height: 890px;
  background: transparent;
}

#content.top div.body div.news div.inner h2{
  width: 188px; height: 54px;
  margin: 84px auto 20px;
  background: url(../index/image_sp/ph05_1.png) no-repeat left top;
}

#content.top div.body div.news div.inner ul.news {
  width: 640px; height: 560px;
  margin: 20px auto;
}

#content.top div.body div.news div.inner ul.news li {
  width: 640px; height: 180px;
  margin: 0 auto 4px;
}
#content.top div.body div.news div.inner ul.news li.important { background: url(../index/image_sp/bg04_1.png) no-repeat left top; }
#content.top div.body div.news div.inner ul.news li.update { background: url(../index/image_sp/bg04_2.png) no-repeat left top; }
#content.top div.body div.news div.inner ul.news li.event { background: url(../index/image_sp/bg04_3.png) no-repeat left top; }
#content.top div.body div.news div.inner ul.news li.campaign { background: url(../index/image_sp/bg04_4.png) no-repeat left top; }
#content.top div.body div.news div.inner ul.news li.maintenance { background: url(../index/image_sp/bg04_5.png) no-repeat left top; }

#content.top div.body div.news div.inner ul.news li span {
  position: absolute;
  font-size: 28px; line-height: 48px;
  color: rgb(0,0,0);
}
#content.top div.body div.news div.inner ul.news li span.open { width: 341px; height: 48px; top: 13px; }
#content.top div.body div.news div.inner ul.news li.important span.open { left: 280px; }
#content.top div.body div.news div.inner ul.news li.update span.open { left: 280px; }
#content.top div.body div.news div.inner ul.news li.event span.open { left: 240px; }
#content.top div.body div.news div.inner ul.news li.update span.open { left: 280px; }
#content.top div.body div.news div.inner ul.news li.campaign span.open { left: 280px; }
#content.top div.body div.news div.inner ul.news li span.title { width: 536px; height: 96px; top: 61px; left: 44px; }

#content.top div.body div.news div.inner div.button_list {
  width: 580px; height: 112px;
  margin: 20px auto 0;
  background: url(../index/image_sp/ph06_1.png) no-repeat left top;
}

#content.top div.body div.news div.footer{ display: none; }


/* ********** Twitter ********** */
#content.top div.body div.twitter {
  width: 640px; height: 539px;
  top:893px;
}

#content.top div.body div.twitter div.header{ display: none; }

#content.top div.body div.twitter div.inner{
  width: 640px; height: 900px;
  background: transparent;
}

#content.top div.body div.twitter div.inner h2{
  width: 290px; height: 52px;
  margin: 65px auto 20px;
  text-indent: -32767px;
  background: url(../index/image_sp/ph05_2.png) no-repeat left top;
}

#content.top div.body div.twitter div.tweet{
  width: 640px; height:447px;
  margin: 6px auto 45px;
}

#content.top div.body div.twitter div.inner div.button_twitter {
  width: 579px; height: 111px;
  margin: 25px auto 0;
  text-indent: -32767px;
  background: url(../index/image_sp/ph06_2.png) no-repeat left top;
}

#content.top div.body div.twitter div.inner div.button_instagram {
  width: 579px; height: 109px;
  margin: 0 auto;
  text-indent: -32767px;
  background: url(../index/image_sp/ph06_3.png) no-repeat left top;
}

#content.top div.body div.twitter div.footer{ display: none; }


/* ********** Card ********** */
#content.top div.body div.card {
  width: 640px; height: 856px;
  margin: -9px 0;
  background: url(../index/image_sp/bg05.png) no-repeat left top;
}

#content.top div.body div.card div.header{ display: none; }

#content.top div.body div.card div.inner{
  width: 640px; height: 830px;
  background: transparent;
}

#content.top div.body div.card div.inner h2 {
  width: 331px; height: 55px;
  margin: 75px auto 18px;
  text-indent: -32767px;
  background: url(../index/image_sp/ph05_3.png) no-repeat left top;
}

#content.top div.body div.card div.inner div.card {
  width: 1128px; height: 500px;
  margin: 18px 0 0 -234px;
  background: transparent;
}

#content.top div.body div.card div.inner div.card ul {
  width: auto; height: 500px;
}

#content.top div.body div.card div.inner div.card ul li {
  width: 316px; height: 500px;
  float: left;
  margin: 0 30px;
}

#content.top div.body div.card div.inner div.prev {
  width: 62px; height: 98px;
  top: 337px; left: 84px;
  background: url(../index/image_sp/ph07_1.png) no-repeat left top;
}

#content.top div.body div.card div.inner div.next {
  width: 62px; height: 98px;
  top: 337px; left: 513px;
  background: url(../index/image_sp/ph07_2.png) no-repeat left top;
}

#content.top div.body div.card div.inner div.button_list {
  width: 579px; height: 111px;
  margin: 34px auto 0;
  background: url(../index/image_sp/ph06_4.png) no-repeat left top;
}

#content.top div.body div.card div.footer{ display: none; }


/* ********** Ranking ********** */
#content.top div.body div.ranking {
  width: 640px; height: 1574px;
  margin: 0;
}

#content.top div.body div.ranking div.header{ display: none; }

#content.top div.body div.ranking div.inner{
  width: 640px; height: 1574px;
  background: transparent;
}

#content.top div.body div.ranking div.inner h2{
  width: 412px; height: 55px;
  margin: 65px auto 20px;
  background: url(../index/image_sp/ph05_4.png) no-repeat left top;
}

#content.top div.body div.ranking div.inner ul.ranking {
  width: 640px;
}

#content.top div.body div.ranking div.inner ul.ranking li {
  width: 640px; height: 246px;
  margin: 0 auto;
  background: url(../ranking/image_sp/bg01_4.png) no-repeat left top;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 { height: 246px; background: url(../ranking/image_sp/bg01_1.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 { height: 246px; background: url(../ranking/image_sp/bg01_2.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 { height: 246px; background: url(../ranking/image_sp/bg01_3.png) no-repeat left top; }

#content.top div.body div.ranking div.inner ul.ranking li span.rank {
  width: 165px; height: 130px;
  position: absolute;
  top: 49px; left: 9px;
}
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.rank { height: 130px; background: url(../ranking/image_sp/num/ph04_1.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.rank { height: 130px; background: url(../ranking/image_sp/num/ph04_2.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.rank { height: 130px; background: url(../ranking/image_sp/num/ph04_3.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank4 span.rank { background: url(../ranking/image_sp/num/ph04_4.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank5 span.rank { background: url(../ranking/image_sp/num/ph04_5.png) no-repeat left top; }

#content.top div.body div.ranking div.inner ul.ranking li span.avater { width: 87px; height: 86px; top: 34px; left: 194px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.avater { width: 87px; height: 86px; top: 34px; left: 194px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.avater { width: 87px; height: 86px; top: 34px; left: 194px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.avater { width: 87px; height: 86px; top: 34px; left: 194px; }

#content.top div.body div.ranking div.inner ul.ranking li span.avater span.frame { width: 87px; height: 86px; background: url(../ranking/image_sp/ph05.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.avater span.frame { width: 87px; height: 86px; background: url(../ranking/image_sp/ph05.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.avater span.frame { width: 87px; height: 86px; background: url(../ranking/image_sp/ph05.png) no-repeat left top; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.avater span.frame { width: 87px; height: 86px; background: url(../ranking/image_sp/ph05.png) no-repeat left top; }

#content.top div.body div.ranking div.inner ul.ranking li span.avater img { width: 74px; height: 74px; top: 6px; left: 7px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.avater img { width: 74px; height: 74px; top: 6px; left: 7px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.avater img { width: 74px; height: 74px; top: 6px; left: 7px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.avater img { width: 74px; height: 74px; top: 6px; left: 7px; }

#content.top div.body div.ranking div.inner ul.ranking li span.title { width: 154px; height: 59px; top: 20px; left: 276px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.title { width: 154px; height: 59px; top: 20px; left: 276px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.title { width: 154px; height: 59px; top: 20px; left: 276px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.title { width: 154px; height: 59px; top: 20px; left: 276px; }

#content.top div.body div.ranking div.inner ul.ranking li span.league { width: 112px; height: 43px; top: 27px; left: 417px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.league { width: 112px; height: 43px; top: 27px; left: 417px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.league { width: 112px; height: 43px; top: 27px; left: 417px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.league { width: 112px; height: 43px; top: 27px; left: 417px; }

#content.top div.body div.ranking div.inner ul.ranking li span.userName { top: 72px; left: 292px; font-size: 46px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.userName { top: 72px; font-size: 46px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.userName { top: 72px; font-size: 46px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.userName { top: 72px; font-size: 46px; }

#content.top div.body div.ranking div.inner ul.ranking li span.area { top: 168px; left: 195px; font-size: 18px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.area { top: 168px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.area { top: 168px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.area { top: 168px; }

#content.top div.body div.ranking div.inner ul.ranking li span.shopName { width: 305px; top: 168px; left: 261px; font-size: 18px; }
#content.top div.body div.ranking div.inner ul.ranking li span.shopName.ls { left: 279px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.shopName { top: 168px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.shopName { top: 168px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.shopName { top: 168px; }

#content.top div.body div.ranking div.inner ul.ranking li span.point { top: 124px; left: 439px; font-size: 30px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.point { top: 124px; left: 439px; font-size: 30px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.point { top: 124px; left: 439px; font-size: 30px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.point { top: 124px; left: 439px; font-size: 30px; }

#content.top div.body div.ranking div.inner ul.ranking li span.trophy_gol { top: 128px; left: 192px; font-size: 16px; line-height: 24px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.trophy_gol { top: 128px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.trophy_gol { top: 128px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.trophy_gol { top: 128px; }

#content.top div.body div.ranking div.inner ul.ranking li span.trophy_sil { top: 128px; left: 243px; font-size: 16px; line-height: 24px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.trophy_sil { top: 128px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.trophy_sil { top: 128px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.trophy_sil { top: 128px; }

#content.top div.body div.ranking div.inner ul.ranking li span.trophy_cop { top: 128px; left: 294px; font-size: 16px; line-height: 24px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.trophy_cop { top: 128px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.trophy_cop { top: 128px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.trophy_cop { top: 128px; }

#content.top div.body div.ranking div.inner ul.ranking li span.trophy_bad { top: 128px; left: 345px; font-size: 16px; line-height: 24px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank1 span.trophy_bad { top: 128px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank2 span.trophy_bad { top: 128px; }
#content.top div.body div.ranking div.inner ul.ranking li.rank3 span.trophy_bad { top: 128px; }

#content.top div.body div.ranking div.inner div.button_list {
  width: 579px; height: 111px;
  margin: 30px auto 0;
  background: url(../index/image_sp/ph06_5.png) no-repeat left top;
}


#content.top div.body div.ranking div.footer{
  display:none;
}



/* ********** Support ********** */
#content.top div.body div.support {
  width: 640px; height: 572px;
  margin: 0;
}

#content.top div.body div.support div.header{
  display:none;
}

#content.top div.body div.support div.inner{
  width: 640px; height: 572px;
  overflow: hidden;
  background: url(../index/image_sp/bg07.png) no-repeat left top;
}

#content.top div.body div.support div.inner h2{
  display:none;
}

#content.top div.body div.support div.inner ul {
  width: 540px; height: 374px;
  position: relative;
  margin: 133px auto 0;
  list-style: none;
}

#content.top div.body div.support div.inner ul li {
  width: 262px; height: 178px;
  position: absolute;
  text-indent: -32767px;
}
#content.top div.body div.support div.inner ul li.instruction { top:0; left:0; background: url(../index/image_sp/ph11_1.png) no-repeat left top; }
#content.top div.body div.support div.inner ul li.copyright { top:0; left:278px; background: url(../index/image_sp/ph11_2.png) no-repeat left top; }
#content.top div.body div.support div.inner ul li.playingmovie { top:196px; left:0; background: url(../index/image_sp/ph11_3.png) no-repeat left top; }
#content.top div.body div.support div.inner ul li.usersupport { top:196px; left:278px; background: url(../index/image_sp/ph11_4.png) no-repeat left top; }

#content.top div.body div.support div.footer{
  display:none;
}



/* ********** SideBar(SubMenu) ********** */
#content div.sidebar {
  width: 640px;
  float: none;
}

#content div.sidebar div.column {
  width: 640px;
  margin: 10px auto;
}

#content div.sidebar div.column div.header {
  width: 640px; height: 90px;
}
#content div.sidebar div.column.category div.header { background: url(../news/image_sp/ph02_1.png) no-repeat left top; }
#content div.sidebar div.column.archive div.header { background: url(../news/image_sp/ph02_2.png) no-repeat left top; }

#content div.sidebar div.column div.inner {
  width: 640px;
  margin: -1px 0;
  text-align: center;
  background: url(../image_sp/bg05_1.png) repeat-y left top;
}

#content div.sidebar div.column div.inner ul {
  width: 592px;
  margin: 0 auto;
}

#content div.sidebar div.column div.inner ul li {
  display: inline-block;
  width: 198px; height: 108px;
  margin: 0 -2px;
  text-indent: -32767px;
}
#content div.sidebar div.column div.inner ul li.all { background: url(../news/image_sp/ph03_1.png) no-repeat left top; }
#content div.sidebar div.column div.inner ul li.important { background: url(../news/image_sp/ph03_2.png) no-repeat left top; }
#content div.sidebar div.column div.inner ul li.update { background: url(../news/image_sp/ph03_3.png) no-repeat left top; }
#content div.sidebar div.column div.inner ul li.event { background: url(../news/image_sp/ph03_4.png) no-repeat left top; }
#content div.sidebar div.column div.inner ul li.campaign { background: url(../news/image_sp/ph03_5.png) no-repeat left top; }
#content div.sidebar div.column div.inner ul li.maintenance { background: url(../news/image_sp/ph03_6.png) no-repeat left top; }
#content div.sidebar div.column div.inner ul li.all.active { background: url(../news/image_sp/ph03_1_on.png) no-repeat left top; }
#content div.sidebar div.column div.inner ul li.important.active { background: url(../news/image_sp/ph03_2_on.png) no-repeat left top; }
#content div.sidebar div.column div.inner ul li.update.active { background: url(../news/image_sp/ph03_3_on.png) no-repeat left top; }
#content div.sidebar div.column div.inner ul li.event.active { background: url(../news/image_sp/ph03_4_on.png) no-repeat left top; }
#content div.sidebar div.column div.inner ul li.campaign.active { background: url(../news/image_sp/ph03_5_on.png) no-repeat left top; }
#content div.sidebar div.column div.inner ul li.maintenance.active { background: url(../news/image_sp/ph03_6_on.png) no-repeat left top; }

#content div.sidebar div.column div.inner ul li:before { display: none; }

#content div.sidebar div.column.archive div.inner ul{ display: none; }


#content div.sidebar div.column div.inner select {
  display: inline;
  width: 558px; height: auto;
  margin: 8px auto;
  font-size: 30px; line-height: 56px;
}


#content div.sidebar div.column div.footer {
  width: 640px; height: 14px;
  text-indent: -32767px;
  background: url(../image_sp/bg05_2.png) no-repeat left top;
}



/* ########## ContentFooter ########## */
#footer {
  width: 640px;
}


/* ********** Location ********** */
#footer div.location {
  width: 640px; height: 660px;
  background: url(../image_sp/bg07.png) no-repeat left top;
}

#footer div.location div.container {
  width: 640px; height: 660px;
  background: transparent;
}

#footer div.location div.container div.search {
  width: 759px; height: 111px;
  top: 469px; left: 30px;
  background: url(../image_sp/ph08.png) no-repeat left top;
}


/* ********** Banner ********** */
#footer div.banner {
  width: 640px; height: 241px;
  background: url(../image_sp/bg08.png) no-repeat left top;
}

#footer div.banner ul.banner {
  width: 640px; height: auto;
  position: relative;
  margin: 33px auto 0;
  text-align: center;
  list-style: none;
}

#footer div.banner ul.banner li {
  display: inline-block;
  width: 314px; height: 90px;
  margin: 2px;
}

#footer div.banner ul.banner li img {
  width: 314px; height: 90px;
}


/* ********** Copyright ********** */
#footer div.copyright {
  width: 640px; height: 400px;
  background: url(../image_sp/bg03.png) no-repeat left top;
}

#footer div.copyright ul.sns {
  width: 455px; height: 94px;
}

#footer div.copyright ul.sns li {
  width: 94px; height: 94px;
  background: url(../image_sp/ph03.png) no-repeat 0 0;
}
#footer div.copyright ul.sns li.twitter { left: 0; background-position: 0 0; }
#footer div.copyright ul.sns li.facebook { left: 117px; background-position: -99px 0; }
#footer div.copyright ul.sns li.line { left: 234px; background-position: -198px 0; }
#footer div.copyright ul.sns li.instagram { left: 351px; background-position: -297px 0; }

#footer div.copyright p.copyright {
  width: 590px;
  top: 149px;
  font-size: 18px; line-height: 30px;
}



/* ########## scrollGuide ########## */
#scrollguide {
  width: 640px; height: 140px;
  min-width: 640px;
  top: 360px; left: 0; right: 0;
  pointer-events: none;
}

#scrollguide div.button {
  width: 140px; height: 140px;
  background: url(../index/image_sp/ph10.png) no-repeat 0 0;
}



/* ########## toPageTop ########## */
#topagetop {
  width: 640px; height: 246px;
  min-width: 640px;
  bottom: 40px;
}

#topagetop div.top {
  width: 118px; height: 119px;
  right: 0;
  background: url(../image_sp/ph04.png) no-repeat 0 0;
}

#topagetop div.search {
  width: 123px; height: 127px;
  top: 119px;
  background: url(../image_sp/ph09.png) no-repeat 0 0;
}



/* ########## floatMenu ########## */
#floatmenu {
  width: 100%; height: 100%;
  position: fixed;
  top: 0; left: 0;
  background: rgba(18,18,18,0.9);
  z-index: 20;
  opacity: 0;
}

#floatmenu div.container {
  width: 640px; height: 838px;
  position: absolute;
  top: -838px; left: 0; right:0;
  margin: 0 auto;
  background: url(../image_sp/bg06.jpg) no-repeat 0 0;
}

#floatmenu div.container div.close {
  width: 141px; height: 141px;
  position: absolute;
  top: 0; right: 0;
  text-indent: -32767px;
  background: url(../image_sp/ph05.png) no-repeat 0 0;
}

#floatmenu div.container ul.contents {
  width: 640px; height: 514px;
  position: absolute;
  top: 134px; left: 0;
  list-style: none;
}

#floatmenu div.container ul.contents li {
  width: 324px; height: 130px;
  position: absolute;
  text-indent: -32767px;
}
#floatmenu div.container ul.contents li.top { top:0; left:0; background: url(../image_sp/ph06_1.png) no-repeat 0 0; }
#floatmenu div.container ul.contents li.news { top:0; left:316px; background: url(../image_sp/ph06_2.png) no-repeat 0 0; }
#floatmenu div.container ul.contents li.about { top:128px; left:0; background: url(../image_sp/ph06_3.png) no-repeat 0 0; }
#floatmenu div.container ul.contents li.play { top:128px; left:316px; background: url(../image_sp/ph06_4.png) no-repeat 0 0; }
#floatmenu div.container ul.contents li.movie { top:256px; left:0; background: url(../image_sp/ph06_5.png) no-repeat 0 0; }
#floatmenu div.container ul.contents li.ranking { top:256px; left:316px; background: url(../image_sp/ph06_6.png) no-repeat 0 0; }
#floatmenu div.container ul.contents li.card { top:384px; left:0; background: url(../image_sp/ph06_7.png) no-repeat 0 0; }
#floatmenu div.container ul.contents li.location { top:384px; left:316px; background: url(../image_sp/ph06_8.png) no-repeat 0 0; }

#floatmenu div.container ul.site {
  width: 612px; height: 166px;
  position: absolute;
  top: 653px; left: 13px;
  list-style: none;
}

#floatmenu div.container ul.site li {
  width: 297px; height: 166px;
  position: absolute;
  text-indent: -32767px;
}
#floatmenu div.container ul.site li.net { top:0; left:0; background: url(../image_sp/ph07_1.png) no-repeat 0 0; }
#floatmenu div.container ul.site li.touen { top:0; left:315px; background: url(../image_sp/ph07_2.png) no-repeat 0 0; }

}





/* ########## ********** ********** ##########
    画面サイズ 641px 以上 (PC)
   ########## ********** ********** ########## */
@media screen and (min-width:641px){

#floatmenu { display: none !important; }

}