/* ヒーローポイント表示 */
.point_bar{
  position: relative;
}

.point_bar_text{
  position: absolute;
  top: 21.5%;
  left: 29.5%;
  width: 38.2%;
  height: 58.4%;
}

#hero_point{
  font-size: 95%;
}

.point_bar_button{
  position: absolute;
  top: 28%;
  left: 71%;
  width: 21%;
  height: 45%;
  display: block;
}


@media screen and (min-width : 600px) and (orientation: portrait)  {

  #hero_point{
    font-size: 1.2em;
  }
}
@media screen and (max-width : 320px) and (orientation: portrait)  {
  #hero_point{
    font-size: 90%;
  }
}
/*                                                                      */
#contents{
  background-color:#eaeaea;
}

.contents_description{
  background-color:#787878;
  padding: 5px;
  margin-bottom: 10px;
  text-align: center;
  color: #FFFFFF;
}

/* ゲームコンテンツ表示 */
.game_contents_title{
  width: 100%;
  margin-top: 5px;
}

.game_contents_body{
  background: #FFFFFF;
  margin:0px auto 20px auto;
  width: 100%;
  position: relative;
}

.game_contents_area{
  position: absolute;
  margin: 25px 15px 25px 15px;
  top: 0;
}

.game_contents_view{
  color: #FFFFFF;
  background: url(../images/top/contents_window_02.png) top center;
  background-color : #FFFFFF;
  background-size: 100% auto;
  padding: 0px 10px;
}

/**
 * 横向き
*/
@media screen and (orientation: landscape)  {
  .game_contents_view{
    font-size: 50%;
  }
}

/**
 * 縦向き
*/
@media screen and (min-width : 600px) and (orientation: portrait)  {
  .game_contents_area{
    margin: 35px 25px 35px 25px;
  }
}

/**
 * 横向き
*/
@media screen and (min-width : 960px) and (orientation: landscape)  {
  .game_contents_area{
    margin: 45px 35px 45px 35px;
  }
}

.game_contents_icon{
  width: 20%;
  float: left;
  margin-right: 10px;
  margin-bottom: 5px;
}

.game_contents_thumbnail{
  width: 100%;
  margin-bottom: 5px;
}

.game_contents_kisekae_thumbnail{
  width: 35%;
  float: left;
  margin-right: 10px;
  margin-bottom: 5px;
}

.game_contents_kisekae_thumbnail img{
  width: 100%;
}

.game_contents_link {
  color: #FFFFFF;
  text-decoration: none;
  display: block;
  width: 40%;
  float: right;
  padding: 10px;
  margin-right:5px;
  margin-top:5px;
  font-size:1.2em;
  font-weight: bold;
  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #00E0FF 0%, #007FFF 100%);
  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #00E0FF 0%, #007FFF 100%);
  /* Opera */
  background-image: -o-linear-gradient(top, #00E0FF 0%, #007FFF 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00E0FF), color-stop(1, #007FFF));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #00E0FF 0%, #007FFF 100%);
  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom, #00E0FF 0%, #007FFF 100%);
  text-align: center;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  box-shadow:rgba(0, 0, 0, 0.8) 2px 3px 3px 1px;
}

.game_contents_link_not {
  color: #FFFFFF;
  text-decoration: none;
  display: block;
  width: 40%;
  float: right;
  padding: 10px;
  margin-right:5px;
  margin-top:5px;
  font-size:1.2em;
  font-weight: bold;
  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #ff0000 0%, #9a1d00 100%);
  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #ff0000 0%, #9a1d00 100%);
  /* Opera */
  background-image: -o-linear-gradient(top, #ff0000 0%, #9a1d00 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff0000), color-stop(1, #9a1d00));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #ff0000 0%, #9a1d00 100%);
  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom, #ff0000 0%, #9a1d00 100%);
  text-align: center;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  box-shadow:rgba(0, 0, 0, 0.8) 2px 3px 3px 1px;
}

.game_contents_view_hlink{
  padding: 5px;
}

/* きせかえコンテンツ表示 */
.contents_body{
  background: #FFFFFF;
  margin:0 auto 10px auto;
  width: 95%;
  padding-bottom: 5px;
  border: 1px solid #787878;
  box-shadow:3px 3px 2px 0px rgba(0, 0, 0, 0.5);
}

.contents_area{
  padding: 5px;
}

.contents_title{
  width: 100%;
  margin-bottom: 10px;
}

.contents_icon{
  width: 20%;
  float: left;
  margin-right: 10px;
  margin-bottom: 5px;
}

.contents_thumbnail{
  width: 100%;
  margin-bottom: 5px;
}

.contents_kisekae_thumbnail{
  width: 35%;
  float: left;
  margin-right: 10px;
  margin-bottom: 5px;
}

.contents_kisekae_thumbnail img{
  width: 100%;
}

.contents_machi ,.contents_kisekae{
  padding: 2px;
  font-size: 0.9em;
  text-align: center;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 3px;
}

.contents_machi{
  background: #ee5f8f;
  color: #FFFFFF;
}

.contents_kisekae{
  background: #efaf40;
  color: #FFFFFF;
}

.contents_link{
  color: #FFFFFF;
  text-decoration: none;
  display: block;
  width: 40%;
  float: right;
  padding: 10px;
  margin-right:5px;
  margin-top:5px;
  font-size:1.2em;
  font-weight: bold;
  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #008829 0%, #004102 100%);
  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #008829 0%, #004102 100%);
  /* Opera */
  background-image: -o-linear-gradient(top, #008829 0%, #004102 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #008829), color-stop(1, #004102));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #008829 0%, #004102 100%);
  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom, #008829 0%, #004102 100%);
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  box-shadow:rgba(0, 0, 0, 0.8) 2px 3px 3px 1px;
}

/* ギャラリー */
.gallery_body{
  position: absolute;
  margin: 25px 0px 25px 0px;
  top: 0;
  width: 100%;
}

/**
 * 縦向き
*/
@media screen and (min-width : 600px) and (orientation: portrait)  {
  .gallery_body{
    margin: 25px 0px 25px 0px;
  }
}

/**
 * 横向き
*/
@media screen and (min-width : 960px) and (orientation: landscape)  {
  .gallery_body{
    margin: 25px 0px 25px 0px;
  }
}

#gallery_contents_view_top{
  vertical-align: bottom;
}


#gallery_contents_view{
  background: url(../images/gallery/gallery_window_02.png) top center;
  background-color : #FFFFFF;
  background-size: 100% auto;
}

.gallery_contents_area{
  position: relative;
}

.gallery_contents{
  width: 30%;
  float: left;
  position: relative;
  margin-left: 2.5%;
  margin-bottom: 2.5%;

}

.gallery_contents_img{
  width: 100%;
	height:auto;
}

.gallery_contents_p,.gallery_content_off ,.gallery_content_unpublished ,.gallery_content_on ,.gallery_content_unsupport{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
	left:0;
  outline:none;
}

#back_20140113{
  position: absolute;
  width: 91.5%;
  top: 3.1%;
  left: 4.7%;
  height: 94%;
  outline:none;
}

#outer_frame a.gallery_content_off ,.gallery_content_unsupport{
  background: #000000;
  opacity: 0.7;
  display: block;
}

#gallery_alert ,#gallery_alert_unpublished{

  padding: 5px;
  text-align: center;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;

}

.gallery_menu{
  margin: 0px auto;
  width: 100%;
  height: 100%;
  text-align: center;
  border-spacing: 5px;
  border-collapse: separate;
}

.gallery_menu td{
  height: 100%;
  width: 50%;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #FDBF3F 0%, #FDBF3F 50%, #F7A11A 50%, #F7A11A 100%);
  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #FDBF3F 0%, #FDBF3F 50%, #F7A11A 50%, #F7A11A 100%);
  /* Opera */
  background-image: -o-linear-gradient(top, #FDBF3F 0%, #FDBF3F 50%, #F7A11A 50%, #F7A11A 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDBF3F), color-stop(0.5, #FDBF3F), color-stop(0.5, #F7A11A), color-stop(1, #F7A11A));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #FDBF3F 0%, #FDBF3F 50%, #F7A11A 50%, #F7A11A 100%);
  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom, #FDBF3F 0%, #FDBF3F 50%, #F7A11A 50%, #F7A11A 100%);

  color: #FFFFFF;
  padding: 5px;
  font-size:1.1em;
  font-weight: bold;
}

.gallery_menu td a{
  text-decoration: none;
  color: #FFFFFF;
}

.gallery_menu_disabled{
  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #CCCCCC 0%, #BBBBBB 50%, #AAAAAA 50%, #999999 100%) !important;
  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #CCCCCC 0%, #BBBBBB 50%, #AAAAAA 50%, #999999 100%) !important;
  /* Opera */
  background-image: -o-linear-gradient(top, #CCCCCC 0%, #BBBBBB 50%, #AAAAAA 50%, #999999 100%) !important;
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #CCCCCC), color-stop(0.5, #BBBBBB), color-stop(0.5, #AAAAAA), color-stop(1, #999999)) !important;
  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #CCCCCC 0%, #BBBBBB 50%, #AAAAAA 50%, #999999 100%) !important;
  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom, #CCCCCC 0%, #BBBBBB 50%, #AAAAAA 50%, #999999 100%) !important;
}

.gallery_menu_unpublished{
  margin: 0px auto;
  width: 50%;
  height: 100%;
  text-align: center;
  border-spacing: 5px;
  border-collapse: separate;
}

.gallery_menu_unpublished td{
  height: 100%;
  width: 50%;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  /* IE10 Consumer Preview */
  background-image: -ms-linear-gradient(top, #FDBF3F 0%, #FDBF3F 50%, #F7A11A 50%, #F7A11A 100%);
  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #FDBF3F 0%, #FDBF3F 50%, #F7A11A 50%, #F7A11A 100%);
  /* Opera */
  background-image: -o-linear-gradient(top, #FDBF3F 0%, #FDBF3F 50%, #F7A11A 50%, #F7A11A 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDBF3F), color-stop(0.5, #FDBF3F), color-stop(0.5, #F7A11A), color-stop(1, #F7A11A));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #FDBF3F 0%, #FDBF3F 50%, #F7A11A 50%, #F7A11A 100%);
  /* W3C Markup, IE10 Release Preview */
  background-image: linear-gradient(to bottom, #FDBF3F 0%, #FDBF3F 50%, #F7A11A 50%, #F7A11A 100%);
  color: #FFFFFF;
  padding: 15px;
  font-size:1.1em;
  font-weight: bold;
}

.gallery_menu_unpublished td a{
  text-decoration: none;
  color: #FFFFFF;
}

#gallery_alert_newdata{
  text-align: center;
}

.gallery_alert_newdata_img{
  width: 40%;
  margin-top: 5px;
}

#year_list{
  width: 70%;
  margin: 0px auto;
  height: 1.8em;
  font-size: 1.6em;
}

/* ヒーローワールド */
.hero_info{
  background: #fac090;
  padding:10px;
  width: 90%;
  margin:5px auto;
  font-weight: bold;
}

.hero_body{
  padding: 10px;
}

.hero_app_list{
  text-decoration:underline;
}

.hero_table table{
  width: 98%;
  margin: 0px auto;
  border-collapse: separate;
  border-spacing: 1px;
}

.hero_table th{
  padding: 5px;
  background: #a6a6a6;
  white-space: nowrap;
}

.hero_table td{
  padding: 5px;
  background: #dce6f2;
}

/* ルーレット */
#roulette_box img{
  width: 80%;
}



#roulette_box_end,#roulette_box_unsupport{
  position: absolute;
  width: 80%;
  top: 0;
  left: 10%;
  height: 100%;
}

#roulette_box_unsupport{
  background: #000000;
  opacity: 0.7;
}

#roulette_box_end img{
  width: 100%;
}
.roulette_gallery_go{
  text-align: center;
  display: block;
  background: #000000;
  width: 70%;
  margin: 0px auto;
  padding: 10px;
  color: #FFFFFF;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

/**
 * 縦向き
*/
@media screen and (min-width : 600px) and (orientation: portrait)  {
  #gallery_alert ,#gallery_alert_unpublished,#gallery_alert_newdata{
    font-size: 1.3em;
    line-height: 1.3em;
  }
}

/**
 * 横向き
*/
@media screen and (max-height : 480px) and (orientation: landscape)  {
  .gallery_alert_newdata_img{
    width: 30%;
  }
}

@media screen and (min-width : 960px) and (orientation: landscape)  {
  #gallery_alert ,#gallery_alert_unpublished,#gallery_alert_newdata{
    font-size: 1.4em;
    line-height: 1.4em;
  }

  .gallery_alert_newdata_img{
    width: 30%;
  }

}

.decome_notice {
    margin: 0 auto;
    text-align: center;
    margin-bottom: 10px;
    margin-top: -10px;
    color: red;
    background-color: #fff;
  padding:8px 8px 8px 8px;
  border:1px solid #bbb;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
                0 0 2px rgba(255, 255, 255, 0.3) inset,
                0 0 10px rgba(0, 0, 0, 0.1) inset,
                0 1px 20px rgba(0, 0, 0, 0.1);
/*  margin: 10px 0px;*/
  width: 90%;
/*  height:50px;*/
}