@charset "UTF-8";

/*
font-size list (base: 12px)
 67% =  8px
 75% =  9px
 83% = 10px
 92% = 11px        175% = 21px
100% = 12px        184% = 22px
108% = 13px        192% = 23px
117% = 14px        200% = 24px
125% = 15px        209% = 25px
133% = 16px        217% = 26px
142% = 17px
150% = 18px
159% = 19px
167% = 20px
*/

/* topHeader setting */
#globalHeaderWrap { height: 250px; }
#subTxtWrap {
  position: relative;
  width: 1100px;
  margin: 0 auto;
  z-index: 999;
}
#subTxt {
  position: absolute;
  left: 50px;
  top: 15px;
  color: #999;
}
  #subTxt li {
    display: none;
    font-size: 117%;
    color: #999;
    line-height: 1.5em;
    font-family: 'Questrial', sans-serif;
  }
#visualChangeBtn {
  display: block;
  position: absolute;
  right: 0;
  width: 50px;
  height: 50px;
  background: url(/img/visualChangeBtn.png);
}
#visualChangeBtn:hover {
  cursor: pointer;
  background-position: 0 -50px;
}

/* topContent setting */
#topContentWrap {
  position: relative;
  width: 1100px;
  height: 1550px;
  margin: 0 auto;
  padding-bottom: 190px;
}
#topContentBg {
  position: absolute;
  width: 1100px;
  height: 1550px;
  background-repeat: no-repeat;
}
.mv_01 { background: url(/img/mv_01.jpg); }
.mv_02 { background: url(/img/mv_02.jpg); }
.mv_03 { background: url(/img/mv_03.jpg); }
.mv_04 { background: url(/img/mv_04.jpg); }
.mv_05 { background: url(/img/mv_05.jpg); }
.mv_06 { background: url(/img/mv_06.jpg); }
.mv_07 { background: url(/img/mv_07.jpg); }
.mv_08 { background: url(/img/mv_08.jpg); }
.mv_09 { background: url(/img/mv_09.jpg); }
.mv_10 { background: url(/img/mv_10.jpg); }
.mv_11 { background: url(/img/mv_11.jpg); }
.mv_12 { background: url(/img/mv_12.jpg); }
.mv_13 { background: url(/img/mv_13.jpg); }
.mv_14 { background: url(/img/mv_14.jpg); }
.mv_15 { background: url(/img/mv_15.jpg); }
#topContent {
  position: absolute;
  left: 50px;
  top: 0;
  width: 1000px;
  height: 1550px;
  margin: 0 auto;
}
#catch, #topTitleLogo { position: absolute; }
#catch {
  left: 5px;
  width: 0;
}
.catch_01, .catch_03 {
  top: -128px;
  height: 69px;
  background: url(/img/catch_01.png);
}
.catch_02 {
  top: -110px;
  height: 51px;
  background: url(/img/catch_02.png);
}
.catch_04 {
  top: -120px;
  height: 60px;
  background: url(/img/catch_03.png);
}
.catch_05 {
  top: -120px;
  height: 60px;
  background: url(/img/catch_04.png);
}
.catch_06 {
  top: -120px;
  height: 60px;
  background: url(/img/catch_05.png);
}
.catch_07 {
  top: -120px;
  height: 60px;
  background: url(/img/catch_06.png);
}
.catch_08 {
  top: -120px;
  height: 60px;
  background: url(/img/catch_07.png);
}
.catch_09 {
  top: -120px;
  height: 60px;
  background: url(/img/catch_08.png);
}
.catch_10 {
  top: -120px;
  height: 60px;
  background: url(/img/catch_09.png);
}
.catch_11 {
  top: -120px;
  height: 60px;
  background: url(/img/catch_10.png);
}
.catch_12 {
  top: -120px;
  height: 60px;
  background: url(/img/catch_11.png);
}
.catch_13 {
  top: -120px;
  height: 60px;
  background: url(/img/catch_12.png);
}
.catch_14 {
  top: -120px;
  height: 60px;
  background: url(/img/catch_13.png);
}
.catch_15 {
  top: -120px;
  height: 60px;
  background: url(/img/catch_14.png);
}
  #catch span { display: none; }
#topTitleLogo {
  display: none;
  left: 5px;
  top: -35.5px;  
}
  #topTitleLogo a { display: block; }
#mvLight {
  display: none;
  position: absolute;
  left: 426px;
  top: 353px;
}
.flash {
  -webkit-animation: mvLight 10s linear infinite;
  -moz-animation: mvLight 10s linear infinite;
  -ms-animation: mvLight 10s linear infinite;
  -o-animation: mvLight 10s linear infinite;
  animation: mvLight 10s linear infinite;
}
@-webkit-keyframes mvLight {
  0%	{ opacity: 0; }
  15%	{ opacity: 1; }
  85%	{ opacity: 1; }
  100%	{ opacity: 0; }
}
@-moz-keyframes mvLight {
  0%	{ opacity: 0; }
  15%	{ opacity: 1; }
  85%	{ opacity: 1; }
  100%	{ opacity: 0; }
}
@-ms-keyframes mvLight {
  0%	{ opacity: 0; }
  15%	{ opacity: 1; }
  85%	{ opacity: 1; }
  100%	{ opacity: 0; }
}
@-o-keyframes mvLight {
  0%	{ opacity:0; }
  15%	{ opacity:1; }
  85%	{ opacity:1; }
  100%	{ opacity:0; }
}
@keyframes mvLight {
  0%	{ opacity: 0; }
  15%	{ opacity: 1; }
  85%	{ opacity: 1; }
  100%	{ opacity: 0; }
}
#topCharacter {
  display: none;
  position: absolute;
  bottom: 485px;
}
#topCharacterList {
  width: 1033px;
  height: 171px;
  margin: 0 33.5px;
}
  #topCharacterList li {
    float: left;
  }
  #topCharacterList-01 { width: 116px; }
  #topCharacterList-02 { width: 114px; }
  #topCharacterList-03 { width: 115px; }
  #topCharacterList-04 { width: 114px; }
  #topCharacterList-05 { width: 114px; }
  #topCharacterList-06 { width: 115px; }
  #topCharacterList-07 { width: 114px; }
  #topCharacterList-08 { width: 114px; }
  #topCharacterList-09 { width: 117px; }
    #topCharacterList li a {
      display: block;
      height: 171px;
      background: url(/img/topCharacterListBg.jpg);
    }
    #topCharacterList #topCharacterList-02 a { background-position: -116px 0; }
    #topCharacterList #topCharacterList-03 a { background-position: -230px 0; }
    #topCharacterList #topCharacterList-04 a { background-position: -345px 0; }
    #topCharacterList #topCharacterList-05 a { background-position: -459px 0; }
    #topCharacterList #topCharacterList-06 a { background-position: -573px 0; }
    #topCharacterList #topCharacterList-07 a { background-position: -688px 0; }
    #topCharacterList #topCharacterList-08 a { background-position: -802px 0; }
    #topCharacterList #topCharacterList-09 a { background-position: -916px 0; }
    #topCharacterList #topCharacterList-01 a:hover { background-position: 0 -171px; }
    #topCharacterList #topCharacterList-02 a:hover { background-position: -116px -171px; }
    #topCharacterList #topCharacterList-03 a:hover { background-position: -230px -171px; }
    #topCharacterList #topCharacterList-04 a:hover { background-position: -345px -171px; }
    #topCharacterList #topCharacterList-05 a:hover { background-position: -459px -171px; }
    #topCharacterList #topCharacterList-06 a:hover { background-position: -573px -171px; }
    #topCharacterList #topCharacterList-07 a:hover { background-position: -688px -171px; }
    #topCharacterList #topCharacterList-08 a:hover { background-position: -802px -171px; }
    #topCharacterList #topCharacterList-09 a:hover { background-position: -916px -171px; }
      #topCharacterList li a span { display: none; }
#topNews {
  position: absolute;
  right: 0;
  top: -45px;
}
#topNewsHead { margin-bottom: 10px; }
  #topNewsHead h2 {
    float: left;
    padding-top: 5px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 40px;
    color: #fff;
    letter-spacing: 5px;
  }
  h2 .color { color: #ff3333; }
  #topNewsLink { float: right; }
    #topNewsLink a {
      display: block;
      margin-right: 10px;
      color: #ff3333;
      font-family: 'Monda', sans-serif;
      font-size: 108%;
      line-height: 30px;
    }
    #topNewsLink a:hover { text-decoration: underline; }
#topNewsList { border-top: 5px #ffc456 solid; }
  #topNewsList li {
    border-bottom: 1px #000 solid;
    line-height: 49px;
    background: rgba(0, 0, 0, 0.5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000, endColorstr=#7F000000);
    -webkit-transition: 0.2s ease-out;
    -moz-transition: 0.2s ease-out;
    -ms-transition: 0.2s ease-out;
    -o-transition: 0.2s ease-out;
    transition: 0.2s ease-out;
  }
  #topNewsList li:hover {
    background: rgba(255, 51, 51, 0.8);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFF3333, endColorstr=#CCFF3333);
  }
    #topNewsList li time {
      float: left;
      width: 80px;
      text-align: center;
      color: #ccc;
      font-size: 92%;
    }
    #topNewsList li p {
      float: left;
      width: 270px;
    }
      #topNewsList li p a {
        display: block;
        margin-right: 5px;
        overflow: hidden;
        white-space: nowrap;
        -webkit-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        color: #fff;
        font-size: 108%;
      }
      #topNewsList li p a:hover { text-decoration: underline; }
#topBnrArea {
  display: none;
  position: fixed;
  bottom: 10px;
  width: 1000px;
  margin: 0 50px;
  background-image: url(/img/bnr/noBnr.png);
  background-color: rgba(0, 0, 0, 0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000, endColorstr=#7F000000);
}
  #topBnrList li {
    float: left;
    width: 200px;
    height: 100px;
  }
    #topBnrList li a {
      display: block;
      opacity: 0;
      -moz-opacity: 0;
      -ms-filter: "alpha(opacity=0)";
      filter: alpha(opacity=0);
    }
#topContentFooter {
  position: absolute;
  bottom: 190px;
  width: 1100px;
  height: 150px;
  background: rgba(255, 51, 51, 0.8);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFF3333, endColorstr=#CCFF3333);
}
  #topContentFooter h2 {
    float: left;
    width: 300px;
    padding: 30px 0;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 34px;
    letter-spacing: 5px;
    text-align: center;
  }
  #topContentFooter h2 a {
    display: block;
    color: #fff;
  }
  #topContentFooter h2 a:hover {
    color: #ffcc66;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -ms-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
  }
.twitter_update_list_wrap {
  height: 100px!important;
  margin: 0 80px!important;
}
#topTwitter {
  position: relative;
  float: left;
  width: 800px;
}
#twitter_update_list {
  height: 60px!important;
  padding: 20px 0;
}
  #twitter_update_list li {
    float: left;
    width: 640px;
    line-height: 20px;
    color: #fff;
    font-size: 117%;
  }
    #twitter_update_list li a {
      color: #ffcc66;
      text-decoration: underline;
    }
    #twitter_update_list li a:hover { text-decoration: none; }
#topTwitterControl li {
  position: absolute;
  top: 25px;
  width: 20px;
  height: 50px;
}
#topTwitterPrev { left: 30px; }
#topTwitterNext { right: 30px; }
  #topTwitterPrev a, #topTwitterNext a {
    display: block;
    width: 20px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #000;
    font-size: 217%;
    font-weight: bold;
    text-decoration: none;
  }
  #topTwitterPrev a:hover, #topTwitterNext a:hover {
    color: #666;
    cursor: pointer;
  }
#socialLinkList { margin-left: 770px; }