@charset "UTF-8";
/*----------------------------------------------------*/
/* お知らせボタン
------------------------------------------------------*/
.btnNotice {
  display: block;
  cursor: pointer;
}

/*----------------------------------------------------*/
/* お知らせモーダル専用表示(PC・SP共通※SP基準・PC用は別途記述)
------------------------------------------------------*/
/* detail*/
.popupNoticeCol {
  display: none;
  padding: 15px;
  width: auto;
  height: auto;
  background: #f9f9f9;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.popupNoticeInner {
  padding: 0 1em 0 0;
}

.popupNoticeInner dt {
  font-size: 150%;
  font-weight: bold;
  border-bottom: 1px dotted #ff71ad;
  color: #ef4b90;
}
.popupNoticeInner dt span.day {
  font-size: 80%;
}

.popupNoticeInner dd {
  font-size: 100%;
}

.popupNoticeInner dd p {
  margin: 1em 0 0 0;
}

/* img,font*/
.txtAnnotation {
  font-size: 80%;
  display: block;
  padding-left: 1em;
  text-indent: -1em;
  margin: 0.3em 0 0.5em 0;
}

.imgCenter {
  display: block;
  margin: auto;
}

.imgCenterS {
  display: block;
  margin: auto;
  width: 40%;
}

.imgCenterM {
  display: block;
  margin: auto;
  width: 70%;
}

.imgCenterL {
  display: block;
  margin: auto;
  width: 90%;
}

.popupNoticeInnerBox,
.popupNotice_bonusinfo {
  border: 1px #ccc solid;
  margin: 10px 0;
  background-color: #fefefe;
  padding: 10px;
}

.popupNotice_bonusinfo {
  padding: 10px 3px 3px;
}
.popupNotice_bonusinfo.is_errata dt {
  width: 65px;
}
.popupNotice_bonusinfo dt {
  clear: both;
  margin: 0 0 5px;
  font-size: 100%;
  border-bottom: 0;
  float: left;
  width: 165px;
}
.popupNotice_bonusinfo dd {
  margin: 0 0 5px;
  float: left;
  padding-left: 10px;
}

/*----------------------------------------------------*/
/* ポップアップバナーモーダル専用表示(PC・SP共通※SP基準・PC用は別途記述)
------------------------------------------------------*/
.popupBnrCol {
  /* detail　※fancyBox挙動調整用*/
  /* closeBtn*/
}
.popupBnrCol .fancybox-skin {
  background: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
.popupBnrCol .btnClose {
  padding: 0;
  margin: 0;
  border: 0;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background: url(../images/btn_close_2.png) no-repeat;
  background-size: cover;
  text-indent: -9999px;
}
.popupBnrCol .btnClose:hover {
  background-position: 0 -20px;
}

/*===================================================
MOVIEボタン（SP/PC共通）
====================================================*/
.movie01 .btn_movie {
  background: url(../images/btn_movie26_off_2.png);
  background-position: 0 0;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 769px) {
  .movie01 .btn_movie:hover {
    background: url(../images/btn_movie26_on_2.png);
  }
}

.movie02 .btn_movie {
  background: url(../images/btn_movie21_off_2.png);
  background-position: 0 0;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 769px) {
  .movie02 .btn_movie:hover {
    background: url(../images/btn_movie21_on_2.png);
  }
}

.movie03 .btn_movie {
  background: url(../images/btn_movie22_off_1.png);
  background-position: 0 0;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 769px) {
  .movie03 .btn_movie:hover {
    background: url(../images/btn_movie22_on_2.png);
  }
}

.movie04 .btn_movie {
  background: url(../images/btn_movie23_off_2.png);
  background-position: 0 0;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 769px) {
  .movie04 .btn_movie:hover {
    background: url(../images/btn_movie23_on_1.png);
  }
}

.movielist li.bgBtn {
  text-indent: 0px;
  margin: 5px auto;
  cursor: pointer;
  background-image: url(../images/bg_btn_2.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
}
.movielist li.bgBtn:hover {
  background: url(../images/bg_btn_on_1.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.movielist li.bgBtn span {
  display: block;
  background-image: url(../images/bg_jewel_2.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
}
.movielist li.bgBtn span.iconNew {
  display: block;
  background-image: url(../images/bg_jewel_new_2.png);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
}

ul.movieBtnCol {
  margin: 0.5em auto 0;
  text-align: center;
}
ul.movieBtnCol li {
  display: inline-block;
  width: 48%;
  margin: 0 0 0.5em 0;
}
ul.movieBtnCol li a {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 17%;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
}
ul.movieBtnCol li.btnMovieCm a {
  background: url(../images/btn_cm_2.png) 0 0 no-repeat;
  background-size: contain;
}
ul.movieBtnCol li.btnMoviePv a {
  background: url(../images/btn_pv_2.png) 0 0 no-repeat;
  background-size: contain;
}
ul.movieBtnCol li.btnMovieMv a {
  background: url(../images/btn_mv_1.png) 0 0 no-repeat;
  background-size: contain;
}
ul.movieBtnCol li.btnMovieNana a {
  background: url(../images/btn_nana_2.png) 0 0 no-repeat;
  background-size: contain;
}
ul.movieBtnCol li.btnMovieItube {
  width: 96%;
}
ul.movieBtnCol li.btnMovieItube a {
  background: url(../images/btn_itube_sp_2.png) 0 0 no-repeat;
  background-size: contain;
  padding-top: 9.5%;
}

/*===================================================
SP時の表示(768px以下)＆ipadの縦に適用
====================================================*/
@media only screen and (max-width: 768px) {
  /*----------------------------------------------------*/
  /* ムービー
  /*----------------------------------------------------*/
  #movieCol {
    clear: both;
    position: relative;
    margin: 4% 0 0;
    padding: 0;
    text-align: center;
  }
  #movieCol .movie_screen {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0px;
  }
  #movieCol .movie_screen iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /*----------------------------------------------------*/
  /* 左カラム
  /*----------------------------------------------------*/
  #topCol #leftCol {
    width: 100%;
    margin-top: 3%;
  }
  #topCol #mbnrCol {
    background: url(../images/bg_mbnr_2.png) no-repeat;
    background-size: contain;
    width: 98%;
    margin: 0 auto;
  }
  #topCol #mbnrCol a img {
    width: 98%;
    margin: 0 auto;
    padding: 1.5% 0;
    display: block;
  }
  #topCol .bnrCol {
    margin: 4% auto 0 2%;
    display: block;
  }
  #topCol .bnrCol p {
    display: inline-block;
    width: 48%;
    margin-bottom: 1%;
  }

  /*----------------------------------------------------*/
  /* 最新更新情報
  /*----------------------------------------------------*/
  #topicsCol {
    position: relative;
    background: url(../images/bg_topics_2.jpg) 0 0 no-repeat;
    background-size: contain;
    width: 100%;
    display: block;
    padding: 5% 0 62.5% 0;
    margin-top: 4%;
  }
  #topicsCol h2, #topicsCol .btn_topics {
    text-indent: -9999px;
  }

  .btn_topics-all {
    position: absolute;
    background: url(../images/btn_all_2.png) no-repeat;
    background-size: contain;
    width: 22%;
    padding-top: 3%;
    top: 3%;
    left: 2%;
  }

  .btn_topics-news {
    position: absolute;
    background: url(../images/btn_news_2.png) no-repeat;
    background-size: contain;
    width: 22%;
    padding-top: 3%;
    top: 13%;
    left: 2%;
  }

  .btn_topics-cardlist {
    position: absolute;
    background: url(../images/btn_cardlist_2.png) no-repeat;
    background-size: contain;
    width: 22%;
    padding-top: 3%;
    top: 13%;
    left: 26.5%;
  }

  .btn_topics-ranking {
    position: absolute;
    background: url(../images/btn_game_1.png) no-repeat;
    background-size: contain;
    width: 22%;
    padding-top: 3%;
    top: 13%;
    left: 51%;
  }

  .btn_topics-game {
    position: absolute;
    background: url(../images/btn_ranking_2.png) no-repeat;
    background-size: contain;
    width: 22%;
    padding-top: 3%;
    top: 13%;
    left: 76%;
  }

  .btn_topics-event {
    position: absolute;
    background: url(../images/btn_event_2.png) no-repeat;
    background-size: contain;
    width: 22%;
    padding-top: 3%;
    top: 24%;
    left: 2%;
  }

  .btn_topics-movie {
    position: absolute;
    background: url(../images/btn_movie_1.png) no-repeat;
    background-size: contain;
    width: 22%;
    padding-top: 3%;
    top: 25%;
    left: 26.5%;
  }

  .btn_topics-products {
    position: absolute;
    background: url(../images/btn_products_2.png) no-repeat;
    background-size: contain;
    width: 22%;
    padding-top: 3%;
    top: 25%;
    left: 51%;
  }

  .btn_topics-anime {
    position: absolute;
    background: url(../images/btn_anime_2.png) no-repeat;
    background-size: contain;
    width: 22%;
    padding-top: 3%;
    top: 25%;
    left: 76%;
  }

  .btn_topics-other {
    position: absolute;
    background: url(../images/btn_other_2.png) no-repeat;
    background-size: contain;
    width: 22%;
    padding-top: 3%;
    top: 2%;
    left: 76%;
  }

  .topicsCol-box {
    position: absolute;
    width: 95%;
    height: 52%;
    margin: 0 2% 0;
    top: 36%;
    font-size: 15px;
    overflow: auto;
  }
  .topicsCol-box dl {
    background: url(../images/bg_topicsline_2.png) center bottom repeat-x;
    padding: 0 0 18px 6px;
  }
  .topicsCol-box dl dd {
    overflow: auto;
    zoom: 1;
  }
  .topicsCol-box dl dt {
    display: inline;
    color: #000;
  }
  .topicsCol-box dl dt span {
    border-radius: 1em;
    font-weight: bold;
    padding: 0 15px;
    font-size: 13px;
    margin-left: 10px;
  }
  .topicsCol-box dl.topics-news dt span {
    background: #ff9f9f;
    color: #ec2349;
  }
  .topicsCol-box dl.topics-cardlist dt span {
    background: #ffa0d1;
    color: #fd1d86;
  }
  .topicsCol-box dl.topics-ranking dt span {
    background: #ffae57;
    color: #f23900;
  }
  .topicsCol-box dl.topics-game dt span {
    background: #ffe68f;
    color: #df6e00;
  }
  .topicsCol-box dl.topics-event dt span {
    background: #c1ff3b;
    color: #5d8d00;
  }
  .topicsCol-box dl.topics-movie dt span {
    background: #7cffe8;
    color: #018b6f;
  }
  .topicsCol-box dl.topics-products dt span {
    background: #9bd1ff;
    color: #0156d7;
  }
  .topicsCol-box dl.topics-anime dt span {
    background: #d99eff;
    color: #7915be;
  }
  .topicsCol-box dl.topics-other dt span {
    background: #dbf4ff;
    color: #5c7b95;
  }

  /*----------------------------------------------------*/
  /* ランキング
  /*----------------------------------------------------*/
  #rankingCol {
    background: url(../images/bg_ranking_2.png) no-repeat;
    background-size: contain;
    width: 100%;
    padding-top: 60%;
    margin: 4% 0 0;
    position: relative;
  }
  #rankingCol h2 {
    display: none;
  }
  #rankingCol .rankingCol-inner p {
    position: absolute;
    top: 32%;
    left: 36%;
    color: #5f3e07;
    font-size: 2vw;
  }
  #rankingCol .rankingCol-inner table {
    margin-top: 2%;
  }
  #rankingCol .rankingCol-inner table th {
    text-align: center;
    width: 25%;
    color: #ff25a4;
    font-weight: bold;
    position: absolute;
    font-size: 2.5vw;
    top: 48%;
  }
  #rankingCol .rankingCol-inner table th:nth-child(1) {
    left: 12%;
  }
  #rankingCol .rankingCol-inner table th:nth-child(2) {
    left: 38%;
  }
  #rankingCol .rankingCol-inner table th:nth-child(3) {
    right: 11%;
  }
  #rankingCol .rankingCol-inner table td {
    color: #5f3e07;
    top: 54%;
    text-align: center;
    width: 100%;
    position: absolute;
  }
  #rankingCol .rankingCol-inner table td.avater {
    width: 17%;
    position: absolute;
    top: 54%;
    border: 2px solid #ffec2d;
  }
  #rankingCol .rankingCol-inner table td.avater:nth-child(1) {
    left: 16%;
  }
  #rankingCol .rankingCol-inner table td.avater:nth-child(2) {
    left: 41.5%;
  }
  #rankingCol .rankingCol-inner table td.avater:nth-child(3) {
    right: 14.5%;
  }
  #rankingCol .rankingCol-inner table td.avater img {
    width: 100%;
  }
  #rankingCol .rankingCol-inner a {
    position: absolute;
    bottom: 4%;
    left: 16%;
    width: 70%;
  }
  #rankingCol .rankingCol-inner a img {
    width: 100%;
  }

  /*----------------------------------------------------*/
  /* ツイッター
  /*----------------------------------------------------*/
  #twitterCol {
    background: url(../images/bg_twitter_2.jpg) top center no-repeat;
    background-size: cover;
    margin: 4% 0 0;
    width: 100%;
    position: relative;
  }
  #twitterCol h2 {
    display: none;
  }
  #twitterCol .twitterColInner {
    width: 90%;
    margin: 0 auto;
    padding: 17% 0 5% 0;
    display: block;
    overflow: hidden;
  }

  /*----------------------------------------------------*/
  /* お知らせボタン枠
  /*----------------------------------------------------*/
  #infoCol {
    display: block;
    width: 100%;
  }
  #infoCol ul li {
    display: block;
    width: 95%;
    margin: 0 auto 1%;
  }

  .movielist li.bgBtn {
    margin: 1%;
  }
  .movielist li.bgBtn:hover {
    background-image: url(../images/bg_btn_2.png);
  }
}
/*===================================================
PC時の表示(769px以上)＆ipadの横に適用
====================================================*/
@media only screen and (min-width: 769px) {
  #topCol {
    width: 1100px;
    margin: 0 auto 10px;
  }

  /*----------------------------------------------------*/
  /* ムービー
  /*----------------------------------------------------*/
  #movieCol {
    position: relative;
    margin: 5px 0 0;
    width: 295px;
    height: 469px;
  }

  #movieCol iframe {
    display: block;
    width: 295px;
    height: 191px;
  }

  ul.movieBtnCol {
    margin: 5px 0 0 0;
  }
  ul.movieBtnCol li {
    display: block;
    width: 295px;
    height: 50px;
    margin: 0 0 6px 0;
    background: url(../images/bg_btn_2.png) 0 0 no-repeat;
  }
  ul.movieBtnCol li a {
    width: 295px;
    height: 50px;
    padding-top: 0;
  }
  ul.movieBtnCol li a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }
  ul.movieBtnCol li.btnMovieItube {
    width: 295px;
    background: url(../images/bg_btn_itube_2.png) 0 0 no-repeat;
    padding-top: 0;
  }
  ul.movieBtnCol li.btnMovieItube a {
    background: url(../images/btn_itube_2.png) 0 0 no-repeat;
    padding-top: 0;
  }

  /*----------------------------------------------------*/
  /* 左カラム
  /*----------------------------------------------------*/
  #topCol #leftCol {
    width: 620px;
    float: left;
    margin: 10px 10px 0 0;
  }
  #topCol #mbnrCol {
    background: url(../images/bg_mbnr_2.png) no-repeat;
    width: 620px;
    height: 400px;
  }
  #topCol #mbnrCol a img {
    margin: 9px 8px;
  }
  #topCol .bnrCol {
    float: left;
  }
  #topCol .bnrCol p {
    display: inline-block;
    width: 305px;
    height: 149px;
    margin-top: 9px;
  }
  #topCol .bnrCol p#bnr_mypage, #topCol .bnrCol p#bnr_callender {
    margin-right: 4px;
  }

  /*----------------------------------------------------*/
  /* 最新更新情報
  /*----------------------------------------------------*/
  #topicsCol {
    position: relative;
    float: right;
    background: url(../images/bg_topics_1.png) 0 0 no-repeat;
    width: 470px;
    height: 565px;
    margin: 10px 0 0;
  }
  #topicsCol h2 {
    text-indent: -9999px;
  }

  ul.btn_topics {
    position: absolute;
    top: 57px;
    left: 7px;
  }

  ul.btn_topics li {
    background-image: url(../images/btn_topics_2.png);
    display: block;
    width: 87px;
    height: 34px;
    text-indent: -9999px;
    cursor: pointer;
    float: left;
    margin: 0 2px 3px 2px;
  }
  ul.btn_topics li:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
  }

  .btn_topics-all {
    background-position: 0 0;
  }

  .btn_topics-news {
    background-position: -90px 0;
  }

  .btn_topics-cardlist {
    background-position: -180px 0;
  }

  .btn_topics-ranking {
    background-position: -270px 0;
  }

  .btn_topics-game {
    background-position: -360px 0;
  }

  .btn_topics-event {
    background-position: 0 -38px;
  }

  .btn_topics-movie {
    background-position: -90px -38px;
  }

  .btn_topics-products {
    background-position: -180px -38px;
  }

  .btn_topics-anime {
    background-position: -270px -38px;
  }

  .btn_topics-other {
    background-position: -360px -38px;
  }

  .topicsCol-box {
    position: absolute;
    width: 452px;
    height: 413px;
    margin: 5px 8px 0;
    top: 135px;
    font-size: 15px;
    overflow: auto;
  }
  .topicsCol-box dl {
    background: url(../images/bg_topicsline_2.png) center bottom no-repeat;
    padding: 0 0 18px 6px;
  }
  .topicsCol-box dl dd {
    overflow: auto;
    zoom: 1;
  }
  .topicsCol-box dl dt {
    display: inline;
    color: #000;
  }
  .topicsCol-box dl dt span {
    border-radius: 1em;
    font-weight: bold;
    padding: 0 15px;
    font-size: 13px;
    margin-left: 10px;
  }
  .topicsCol-box dl.topics-news dt span {
    background: #ff9f9f;
    color: #ec2349;
  }
  .topicsCol-box dl.topics-cardlist dt span {
    background: #ffa0d1;
    color: #fd1d86;
  }
  .topicsCol-box dl.topics-ranking dt span {
    background: #ffae57;
    color: #f23900;
  }
  .topicsCol-box dl.topics-game dt span {
    background: #ffe68f;
    color: #df6e00;
  }
  .topicsCol-box dl.topics-event dt span {
    background: #c1ff3b;
    color: #5d8d00;
  }
  .topicsCol-box dl.topics-movie dt span {
    background: #7cffe8;
    color: #018b6f;
  }
  .topicsCol-box dl.topics-products dt span {
    background: #9bd1ff;
    color: #0156d7;
  }
  .topicsCol-box dl.topics-anime dt span {
    background: #d99eff;
    color: #7915be;
  }
  .topicsCol-box dl.topics-other dt span {
    background: #dbf4ff;
    color: #5c7b95;
  }

  /*----------------------------------------------------*/
  /* ランキング
  /*----------------------------------------------------*/
  #rankingCol {
    background: url(../images/bg_ranking_2.png) no-repeat;
    margin: 10px 10px 0 0;
    width: 704px;
    height: 435px;
    float: left;
    clear: both;
  }
  #rankingCol h2 {
    display: none;
  }
  #rankingCol .rankingCol-inner {
    position: relative;
    margin: 134px 80px 0;
  }
  #rankingCol .rankingCol-inner p {
    padding: 3px;
    color: #5f3e07;
    font-size: 14px;
    text-align: center;
  }
  #rankingCol .rankingCol-inner table {
    margin-top: 47px;
  }
  #rankingCol .rankingCol-inner table th {
    text-align: center;
    width: 25%;
    color: #ff25a4;
    font-weight: bold;
    position: absolute;
  }
  #rankingCol .rankingCol-inner table th:nth-child(1) {
    left: 28px;
  }
  #rankingCol .rankingCol-inner table th:nth-child(2) {
    left: 208px;
  }
  #rankingCol .rankingCol-inner table th:nth-child(3) {
    right: 16px;
  }
  #rankingCol .rankingCol-inner table td {
    color: #5f3e07;
    text-align: center;
    width: 500px;
    display: block;
    margin: 50px 0 0 25px;
  }
  #rankingCol .rankingCol-inner table td.avater {
    margin: 0;
    width: 23%;
    position: absolute;
    top: 100px;
    border: 2px solid #ffec2d;
  }
  #rankingCol .rankingCol-inner table td.avater:nth-child(1) {
    left: 34px;
  }
  #rankingCol .rankingCol-inner table td.avater:nth-child(2) {
    left: 213px;
  }
  #rankingCol .rankingCol-inner table td.avater:nth-child(3) {
    right: 21px;
  }
  #rankingCol .rankingCol-inner table td.avater img {
    width: 100%;
  }
  #rankingCol .rankingCol-inner a {
    position: absolute;
    top: 238px;
    left: 25px;
  }

  /*----------------------------------------------------*/
  /* ツイッター
  /*----------------------------------------------------*/
  #twitterCol {
    background: url(../images/bg_twitter_2.png) no-repeat;
    margin: 10px 0 0;
    width: 386px;
    height: 435px;
    float: right;
  }
  #twitterCol h2 {
    display: none;
  }
  #twitterCol div {
    width: 368px;
    margin: 56px auto;
  }

  /*----------------------------------------------------*/
  /* お知らせボタン枠
  /*----------------------------------------------------*/
  #infoCol {
    display: block;
    width: 100%;
    position: relative;
    background: url(../images/bg_info_top_2.png) top left no-repeat, url(../images/bg_info_bot.png) bottom left no-repeat, url(../images/bg_info_mid.png) 0 0 repeat-y;
    box-sizing: border-box;
    margin: 10px 0 0 0;
    padding: 16px 10px 10px;
  }
  #infoCol ul li {
    float: left;
    width: 50%;
    text-align: center;
  }

  /*----------------------------------------------------*/
  /* お知らせモーダル専用表示(PCのみ)
  ------------------------------------------------------*/
  /* detail*/
  .popupNoticeCol {
    width: 900px;
  }

  /*----------------------------------------------------*/
  /* ポップアップバナーモーダル専用表示(PCのみ)
  ------------------------------------------------------*/
  /* closeBtn*/
  .popupBnr .btnClose {
    width: 42px;
    height: 42px;
    right: 0px;
    cursor: pointer;
  }
  .popupBnr .btnClose:hover {
    background-position: 0 -42px;
  }
}