@charset "UTF-8";
@import url(reset.css);
@import url(hack.css);
/** 
 * ================================================================================
 * BAYONETTA BLOODY FATE｜ベヨネッタブラッディフェイト
 * ================================================================================
 * 制作日: 2013-09-04
 * 変更日:
 *  2014-02-10 : kazu-watanabe
 *	Copyright  : エヌケー・テック株式会社
 */
/**
 * ベースCSS 目次
 * ================================================================================
 * =1	 	: 共通スタイル
 * 	=1-1   	: ヘッダー
 * 	=1-2   	: メインメニュー
 * 	=1-3   	: フッター
 * 	=1-4   	: フッター
 
 * =2	 	: トップページ
 * 	=2-1   	: メインアニメーション
 * 	=2-2   	: コンテンツエリア
 * 	=2-3   	: ニュースエリア
 
 * =3	 	: 内部ページ
 * 	=3-1   	: 共通設定
 * 		   		- 背景
 * 	=3-2   	: NEWS
 * 	=3-3   	: THEATER
 * 	=3-4   	: INTRODUCTION
 * 	=3-5   	: STORY
 * 	=3-6   	: CHARACTER
 * 	=3-7   	: CAST&STAFF
 * 	=3-8   	: TRAILER
 * 	=3-9   	: LINK
 * 	=3-10  	: SPECIAL
 * 	=3-11  	: DOWNLOAD
 * ================================================================================
 */
/**=1
 * ================================================================================
 * 共通スタイル
 * ================================================================================
 */
/**=1-1
 * --------------------------------------
 * ヘッダー
 * --------------------------------------
 */
header {
  height: 85px;
}

/**=1-2
 * --------------------------------------
 * メインメニュー
 * --------------------------------------
 */
#GlobalNavi {
  width: 370px;
  float: left;
  margin-left: -10px;
  margin-top: -10px;
  background: url(../Images/All/GlobalNavi/Logo.png) no-repeat 0 70px;
  padding-top: 70px;
  position: relative;
}
#GlobalNavi p {
  width: 370px;
  height: 141px;
  position: absolute;
  top: 70px;
  left: 0;
}
#GlobalNavi p a {
  width: 370px;
  height: 141px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
#GlobalNavi h1 {
  width: 295px;
  height: 295px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/All/GlobalNavi/Circle.png) no-repeat;
  margin-top: -70px;
  -webkit-animation: BGrotate 60s linear infinite;
  -ms-animation: BGrotate 60s linear infinite;
  animation: BGrotate 60s linear infinite;
}
#GlobalNavi ul {
  height: 435px;
  width: 160px;
  margin-left: 120px;
  padding-top: 0;
  margin-top: -80px;
  z-index: 10;
  position: relative;
  background: url(../Images/All/GlobalNavi/Line.png) no-repeat top center;
}
#GlobalNavi li {
  height: 31px;
  width: 160px;
  position: relative;
  margin-bottom: 1px;
  margin-top: -2px;
}
#GlobalNavi li .New {
  background: url(../Images/TopPage/New.png);
  width: 45px;
  height: 40px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  position: absolute;
  right: 25px;
  top: -10px;
  z-index: 0;
  display: none;
}
#GlobalNavi li a {
  background: url(../Images/All/GlobalNavi/Navi/Normal.png) no-repeat;
  height: 31px;
  width: 160px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
#GlobalNavi li a:hover {
  background: url(../Images/All/GlobalNavi/Navi/Hover.png) no-repeat;
}
#GlobalNavi li#GlobalNavi01 a {
  background-position: 0 0;
}
#GlobalNavi li#GlobalNavi01 a:hover {
  background-position: 0 0;
}
#GlobalNavi li#GlobalNavi02 a {
  background-position: 0 -31px;
}
#GlobalNavi li#GlobalNavi02 a:hover {
  background-position: 0 -31px;
}
#GlobalNavi li#GlobalNavi03 a {
  background-position: 0 -62px;
}
#GlobalNavi li#GlobalNavi03 a:hover {
  background-position: 0 -62px;
}
#GlobalNavi li#GlobalNavi04 a {
  background-position: 0 -93px;
}
#GlobalNavi li#GlobalNavi04 a:hover {
  background-position: 0 -93px;
}
#GlobalNavi li#GlobalNavi05 a {
  background-position: 0 -124px;
}
#GlobalNavi li#GlobalNavi05 a:hover {
  background-position: 0 -124px;
}
#GlobalNavi li#GlobalNavi06 a {
  background-position: 0 -155px;
}
#GlobalNavi li#GlobalNavi06 a:hover {
  background-position: 0 -155px;
}
#GlobalNavi li#GlobalNavi07 a {
  background-position: 0 -186px;
}
#GlobalNavi li#GlobalNavi07 a:hover {
  background-position: 0 -186px;
}
#GlobalNavi li#GlobalNavi08 a {
  background-position: 0 -217px;
}
#GlobalNavi li#GlobalNavi08 a:hover {
  background-position: 0 -217px;
}
#GlobalNavi li#GlobalNavi09 a {
  background-position: 0 -248px;
}
#GlobalNavi li#GlobalNavi09 a:hover {
  background-position: 0 -248px;
}
#GlobalNavi li#GlobalNavi10 a {
  background-position: 0 -279px;
}
#GlobalNavi li#GlobalNavi10 a:hover {
  background-position: 0 -279px;
}
#GlobalNavi li#GlobalNavi11 a {
  background-position: 0 -310px;
}
#GlobalNavi li#GlobalNavi11 a:hover {
  background-position: 0 -310px;
}
#GlobalNavi li#GlobalNavi12 a {
  background-position: 0 -341px;
}
#GlobalNavi li#GlobalNavi12 a:hover {
  background-position: 0 -341px;
}

#TopPage #GlobalNavi01 a,
#NewsPage #GlobalNavi02 a,
#TheaterPage #GlobalNavi03 a,
#IntroductionPage #GlobalNavi04 a,
#StoryPage #GlobalNavi05 a,
#CharacterPage #GlobalNavi06 a,
#StaffCastPage #GlobalNavi07 a,
#TrailerPage #GlobalNavi08 a,
#SpecialPage #GlobalNavi09 a,
#GoodsPage #GlobalNavi10 a,
#LinkPage #GlobalNavi11 a,
#DownloadPage #GlobalNavi12 a {
  background: url(../Images/All/GlobalNavi/Navi/Active.png) no-repeat;
}

#TopPage #GlobalNavi ul {
  height: 0;
}

#InPage #GlobalNavi ul {
  padding-top: 30px;
}

@keyframes BGrotate {
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes BGrotate {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

/**=1-3
 * --------------------------------------
 * フッター
 * --------------------------------------
 */
#InPage footer {
  padding-top: 15px;
  background: url(../Images/All/Background/Line.png) no-repeat top;
}

footer {
  clear: both;
  width: 1280px;
  margin: auto;
}
footer li {
  float: left;
  margin-left: 20px;
}
footer a {
  background: url(../Images/All/Footer.png) no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
footer p {
  float: left;
}
footer p a {
  text-indent: 0;
  background: none;
}
footer #Official {
  float: left;
  width: 234px;
  height: 60px;
  margin-left: 10px;
}
footer #Official a {
  width: 234px;
  height: 60px;
  background: url(../Images/All/bayonetta.jpg);
}
footer #Link01 a {
  height: 50px;
  width: 120px;
  background-position: 0 -220px;
}
footer #Link02 a {
  height: 50px;
  width: 70px;
  background-position: 0 -170px;
}
footer #Link03 a {
  height: 50px;
  width: 160px;
  background-position: 0 -70px;
}
footer #Link04 a {
  height: 50px;
  width: 115px;
  background-position: 0 -120px;
}
footer #Link05 a {
  height: 50px;
  width: 26px;
  background-position: 0 -270px;
}
footer .Bayonetta2 {
  width: 234px;
  height: 60px;
  margin-left: 10px;
}
footer .Bayonetta2 a {
  width: 234px;
  height: 60px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/All/bayonetta2.jpg);
}
footer .BayonettaCrystalPrint {
  width: 234px;
  height: 60px;
  margin-left: 10px;
}
footer .BayonettaCrystalPrint a {
  width: 234px;
  height: 60px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/All/BayonettaCrystalPrint.jpg);
}
footer .GonzoStyle {
  width: 234px;
  height: 60px;
  margin-left: 10px;
}
footer .GonzoStyle a {
  width: 234px;
  height: 60px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/All/GonzoStyle.jpg);
}
footer address {
  float: right;
  margin-top: 10px;
  margin-right: 20px;
  font-size: 0.8em;
  color: #666666;
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/**=2
 * ================================================================================
 * トップページ
 * ================================================================================
 */
/**=2-1
 * --------------------------------------
 * メインアニメーション
 * --------------------------------------
 */
#Background {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 740px;
  overflow: hidden;
}
#Background #MainAnimation {
  margin: 0 auto;
  width: 1280px;
  text-align: center;
  height: 740px;
  position: relative;
}
#Background #MainAnimation li {
  position: absolute;
  top: 0;
  display: none;
}

/**=2-2
 * --------------------------------------
 * コンテンツエリア
 * --------------------------------------
 */
#Content {
  background: url(../Images/TopPage/Header.png) repeat-x;
  width: 100%;
  height: 740px;
  clear: both;
  position: relative;
}
#Content #Main {
  width: 1280px;
  height: 740px;
  margin: 0 auto;
  position: relative;
}
#Content #Ticket {
  width: 175px;
  height: 66px;
  position: absolute;
  bottom: 50px;
  right: 50px;
}
#Content #Ticket a {
  width: 175px;
  height: 66px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/TopPage/Background02/Ticket.png) no-repeat;
}
#Content #Ticket a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  opacity: 0.75;
}
#Content #Ticket02 {
  width: 175px;
  height: 66px;
  position: absolute;
  bottom: 50px;
  right: 50px;
}
#Content #Ticket02 a {
  width: 175px;
  height: 66px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/TopPage/Background02/Ticket02.png) no-repeat;
}
#Content #Ticket02 a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  opacity: 0.75;
}
#Content #TopTwitter {
  position: absolute;
  width: 320px;
  height: 90px;
  position: absolute;
  bottom: 150px;
  left: 300px;
}
#Content #TopTwitter a {
  width: 320px;
  height: 75px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
#Content #GoodsBtn {
  position: absolute;
  width: 320px;
  height: 75px;
  position: absolute;
  bottom: 80px;
  left: 320px;
}
#Content #GoodsBtn a {
  width: 320px;
  height: 75px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
#Content #Comment {
  position: absolute;
  width: 99px;
  height: 35px;
  bottom: 55px;
  left: 125px;
}
#Content #Comment a {
  background: url(../Images/TopPage/Comment.png) no-repeat;
  width: 99px;
  height: 35px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
#Content #Comment a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  opacity: 0.75;
}

/**=2-3
 * --------------------------------------
 * ニュースエリア
 * --------------------------------------
 */
#News {
  background: url(../Images/TopPage/NewsBackground.png) repeat-x top center;
  height: 55px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
#News .Box {
  background: url(../Images/TopPage/News.png) no-repeat;
  height: 55px;
  width: 1280px;
  margin: 0 auto;
  position: relative;
}
#News .Box a {
  color: #887c57;
}
#News .Box p {
  position: absolute;
  right: 10px;
  top: 2px;
  width: 83px;
  height: 38px;
}
#News .Box p a {
  width: 83px;
  height: 38px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/TopPage/Logo.png) no-repeat;
}
#News .Box ul {
  width: 1114px;
  margin: 2px auto;
  line-height: 38px;
  height: 38px;
  overflow: hidden;
  position: relative;
  font-weight: 700;
}

/**=3
 * ================================================================================
 * 内部ページ
 * ================================================================================
 */
/**=3-1
 * --------------------------------------
 * 共通設定
 * --------------------------------------
 */
.jQueryTextShadow {
  left: -5px;
}

#MainContent {
  width: 850px;
  float: right;
  position: relative;
  height: 740px;
}

/* 背景
--------------------------------------*/
#NewsPage {
  background: url(../Images/InPage/Background/News.jpg) no-repeat top center;
}

#TheaterPage {
  background: url(../Images/InPage/Background/Theater.jpg) no-repeat top center;
}

#IntroductionPage {
  background: url(../Images/InPage/Background/Introduction.jpg) no-repeat top center;
}

#StoryPage {
  background: url(../Images/InPage/Background/Story.jpg) no-repeat top center;
}

#CharacterPage {
  background: url(../Images/InPage/Background/Character.jpg) no-repeat top center;
}

#StaffCastPage {
  background: url(../Images/InPage/Background/StaffCast.jpg) no-repeat top center;
}

#TrailerPage {
  background: url(../Images/InPage/Background/Trailer.jpg) no-repeat top center;
}

#SpecialPage {
  background: url(../Images/InPage/Background/Special.jpg) no-repeat top center;
}

#GoodsPage {
  background: url(../Images/InPage/Background/Goods.jpg) no-repeat top center;
}

#LinkPage {
  background: url(../Images/InPage/Background/Link.jpg) no-repeat top center;
}

#DownloadPage {
  background: url(../Images/InPage/Background/Special.jpg) no-repeat top center;
}

/**=3-2
 * --------------------------------------
 * NEWS
 * --------------------------------------
 */
#NewsBox {
  margin-left: 20px;
  width: 761px;
  height: 640px;
  position: relative;
  text-align: left;
  margin-top: 100px;
}
#NewsBox .holder .jp-previous {
  top: -100px;
  left: 250px;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  height: 60px;
  width: 70px;
  background: url(../Images/InPage/Introduction/Btn.png) no-repeat;
  background-position: 0 -60px;
  z-index: 10;
}
#NewsBox .holder .jp-previous:hover {
  background-position: 0 0;
}
#NewsBox .holder .jp-next {
  bottom: 30px;
  left: 250px;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  height: 70px;
  width: 70px;
  background: url(../Images/InPage/Introduction/Btn.png) no-repeat;
  background-position: 0 -190px;
  z-index: 10;
}
#NewsBox .holder .jp-next:hover {
  background-position: 0 -120px;
}
#NewsBox .holder .jp-previous,
#NewsBox .holder .jp-next {
  display: block;
  cursor: pointer;
}
#NewsBox .holder a,
#NewsBox .holder span,
#NewsBox .holder .jp-disabled {
  display: none;
}
#NewsBox * {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#NewsBox #NewsList {
  float: left;
  width: 550px;
}
#NewsBox .scroll-pane {
  height: 100px;
  overflow: auto;
  width: 100%;
}
#NewsBox .EntryBody {
  background: url(../Images/All/Background/Frame/Left.png) repeat-y left top, url(../Images/All/Background/Frame/Right.png) repeat-y right top, url(../Images/All/Background/Frame/Top.png) repeat-x center top, rgba(0, 0, 0, 0.25) url(../Images/All/Background/Frame/Bottom.png) repeat-x center bottom;
  min-height: 500px;
  max-height: 540px;
  width: 550px;
  position: relative;
  float: left;
}
#NewsBox .EntryBody:before {
  content: "";
  background: url(../Images/All/Background/Frame/Icon01.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
}
#NewsBox .EntryBody:after {
  content: "";
  background: url(../Images/All/Background/Frame/Icon02.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
}
#NewsBox .EntryBody h2 {
  color: #887c57;
  text-align: center;
  margin-top: 30px;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 0 30px;
}
#NewsBox .EntryBody .Date {
  background: url(../Images/InPage/News/Date.png) no-repeat;
  line-height: 26px;
  color: #887c57;
  text-align: center;
  margin-bottom: 20px;
  padding: 0 30px;
}
#NewsBox .EntryBody .Text {
  color: #8b8a88;
  font-size: 0.9em;
  line-height: 1.7em;
  padding: 0 30px;
  height: 350px;
  margin-bottom: 30px;
}
#NewsBox .EntryBody .Text * {
  font-weight: 700;
}
#NewsBox .EntryBody .Text a {
  color: #887c57;
}
#NewsBox .EntryBody .Text .scroll-pane {
  width: 100%;
  height: 350px;
  overflow: auto;
}
#NewsBox .EntryBody .Text .jspVerticalBar {
  top: 0;
  right: 0;
}
#NewsBox #EntryList {
  width: 170px;
  float: right;
  margin-top: -30px;
}
#NewsBox #EntryList h3 {
  width: 170px;
  height: 60px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/InPage/News/Title.png);
}
#NewsBox #EntryList .scroll-pane {
  min-height: 280px;
  max-height: 480px;
  overflow: hidden;
}
#NewsBox #EntryList .List {
  position: relative;
  background: url(../Images/All/Background/Frame/Left.png) repeat-y left top, url(../Images/All/Background/Frame/Right.png) repeat-y right top, url(../Images/All/Background/Frame/Top.png) repeat-x center top, url(../Images/All/Background/Frame/Bottom.png) repeat-x center bottom;
  behavior: url(Templates/JavaScripts/PIE/PIE.php);
  background-color: #000000;
  width: 170px;
  min-height: 300px;
  max-height: 500px;
  padding: 10px 0;
}
#NewsBox #EntryList .List li {
  background: url(../Images/InPage/News/Line.png) no-repeat bottom center;
  padding: 10px 20px;
  margin-bottom: 10px;
  font-size: 0.9em;
  line-height: 1.3em;
}
#NewsBox #EntryList .List li a {
  color: #887c57;
}
#NewsBox #EntryList .List li span {
  display: block;
  color: #a50000;
  margin-top: 5px;
}

/**=3-3
 * --------------------------------------
 * THEATER
 * --------------------------------------
 */
#TheaterBox {
  margin-left: 20px;
  width: 761px;
  position: relative;
  text-align: left;
  margin-top: 50px;
  text-shadow: 0 0 5px #ffffff;
}
#TheaterBox a {
  color: #ffffff;
}
#TheaterBox h2 {
  width: 435px;
  height: 70px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/InPage/Theater/Title.png);
}
#TheaterBox .Finish {
  width: 710px;
  height: 80px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/InPage/Theater/Title02.png);
}
#TheaterBox .Box {
  behavior: url(Templates/JavaScripts/PIE/PIE.php);
  position: relative;
  background: url(../Images/All/Background/Frame/Left.png) repeat-y left top, url(../Images/All/Background/Frame/Right.png) repeat-y right top, url(../Images/All/Background/Frame/Top.png) repeat-x center top, url(../Images/All/Background/Frame/Bottom.png) repeat-x center bottom;
  padding: 30px;
  margin: 10px 5px;
}
#TheaterBox .Box:before {
  content: "";
  background: url(../Images/All/Background/Frame/Icon01.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
}
#TheaterBox .Box:after {
  content: "";
  background: url(../Images/All/Background/Frame/Icon02.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
}
#TheaterBox .Box table {
  width: 100%;
  border-spacing: 0 2px 5px 0;
}
#TheaterBox .Box table * {
  padding: 10px 15px;
}
#TheaterBox .Box th {
  background: url(../Images/InPage/Theater/Background01.png);
  text-align: center;
  width: 5em;
}
#TheaterBox .Box td {
  background: url(../Images/InPage/Theater/Background02.png);
}
#TheaterBox .Box td a:hover {
  color: #a50000;
  text-shadow: 0 0 5px #a50000;
}

/**=3-4
 * --------------------------------------
 * INTRODUCTION
 * --------------------------------------
 */
#IntroductionPage #Introduction {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  padding-left: 20px;
  height: 740px;
  float: left;
  width: 100%;
}
#IntroductionPage #Introduction .Title {
  margin-top: 150px;
  margin-left: -20px;
  width: 840px;
  height: 85px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/InPage/Introduction/Introduction/Title.png) no-repeat;
}
#IntroductionPage #Introduction .Title span {
  display: none;
}
#IntroductionPage #Introduction p {
  width: 820px;
  height: 285px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/InPage/Introduction/Introduction/Comment.png) no-repeat;
}
#IntroductionPage #Introduction p span {
  display: none;
}
#IntroductionPage #Game {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  margin-left: 20px;
  width: 761px;
  position: relative;
  height: 740px;
  text-align: left;
  float: left;
}
#IntroductionPage #Game .Line {
  margin-top: 100px;
}
#IntroductionPage #Game .Line:before {
  content: "";
  background: url(../Images/InPage/Introduction/Game/Line01.png);
  height: 14px;
  width: 100%;
  display: block;
}
#IntroductionPage #Game .Line:after {
  content: "";
  background: url(../Images/InPage/Introduction/Game/Line02.png);
  height: 14px;
  width: 100%;
  display: block;
}
#IntroductionPage #Game .Box {
  padding: 20px;
  background: url(../Images/InPage/Introduction/Game/Background.png);
}
#IntroductionPage #Game .Title {
  width: 500px;
  height: 250px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  z-index: 10;
  position: relative;
  background: url(../Images/InPage/Introduction/Game/Title.png) no-repeat;
  margin-bottom: 50px;
}
#IntroductionPage #Game .Title * {
  display: none;
}
#IntroductionPage #Game .Photo {
  background: url(../Images/InPage/Introduction/Game/Caption.png);
  width: 335px;
  height: 245px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  position: absolute;
  z-index: 0;
  top: 175px;
  right: 40px;
}
#IntroductionPage #Game .Package {
  background: url(../Images/InPage/Introduction/Game/Package.png);
  width: 200px;
  height: 160px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  float: right;
  position: relative;
  z-index: 10;
  margin-top: 30px;
}
#IntroductionPage #Game table {
  margin-left: 10px;
  margin-top: -50px;
}
#IntroductionPage #Game table td {
  padding: 5px;
  text-shadow: 0 0 5px #ffffff;
}
#IntroductionPage #Game .Comment {
  margin-left: 15px;
  margin-top: 10px;
  text-shadow: 0 0 5px #ffffff;
}
#IntroductionPage #Game .Comment a {
  color: #a50000;
  text-shadow: 0 0 5px #a50000;
}
#IntroductionPage #SlideBox {
  height: 740px;
  overflow: hidden;
  position: relative;
}
#IntroductionPage #BtnBack {
  height: 60px;
  width: 70px;
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -55px;
  z-index: 10;
}
#IntroductionPage #BtnBack a {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  height: 60px;
  width: 70px;
  background: url(../Images/InPage/Introduction/Btn.png) no-repeat;
  background-position: 0 -60px;
}
#IntroductionPage #BtnBack a:hover {
  background-position: 0 0;
}
#IntroductionPage #BtnNext {
  height: 70px;
  width: 70px;
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -55px;
  z-index: 10;
}
#IntroductionPage #BtnNext a {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  height: 70px;
  width: 70px;
  background: url(../Images/InPage/Introduction/Btn.png) no-repeat;
  background-position: 0 -190px;
}
#IntroductionPage #BtnNext a:hover {
  background-position: 0 -120px;
}

/**=3-5
 * --------------------------------------
 * STORY
 * --------------------------------------
 */
#StoryBox {
  margin-top: 125px;
  width: 840px;
  height: 650px;
  background: url(../Images/InPage/Story/Story.png) no-repeat;
}
#StoryBox div {
  display: none;
}

/**=3-6
 * --------------------------------------
 * CHARACTER
 * --------------------------------------
 */
#CharacterBox {
  margin-left: 20px;
  width: 761px;
  position: relative;
  text-align: left;
  margin-top: 150px;
  text-align: center;
}
#CharacterBox .Box {
  padding: 40px;
  background: url(../Images/InPage/Introduction/Game/Background.png);
}
#CharacterBox:before {
  content: "";
  background: url(../Images/InPage/Introduction/Game/Line01.png);
  height: 14px;
  width: 100%;
  display: block;
}
#CharacterBox:after {
  content: "";
  background: url(../Images/InPage/Introduction/Game/Line02.png);
  height: 14px;
  width: 100%;
  display: block;
}
#CharacterBox li {
  width: 125px;
  height: 125px;
  position: relative;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  /* Fix for IE7 */
  *display: inline;
  /* Fix for IE7 */
  z-index: 0;
  margin: 10px 0 30px 20px;
}
#CharacterBox li span {
  position: absolute;
  width: 125px;
  height: 125px;
}
#CharacterBox li a {
  width: 125px;
  height: 125px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
#CharacterBox li#Character01 a {
  background-size: cover;
  background-image: url(../Images/InPage/Character/Btn/Character01.png);
}
#CharacterBox li#Character02 a {
  background-size: cover;
  background-image: url(../Images/InPage/Character/Btn/Character02.png);
}
#CharacterBox li#Character03 a {
  background-size: cover;
  background-image: url(../Images/InPage/Character/Btn/Character03.png);
}
#CharacterBox li#Character04 a {
  background-size: cover;
  background-image: url(../Images/InPage/Character/Btn/Character04.png);
}
#CharacterBox li#Character05 a {
  background-size: cover;
  background-image: url(../Images/InPage/Character/Btn/Character05.png);
}
#CharacterBox li#Character06 a {
  background-size: cover;
  background-image: url(../Images/InPage/Character/Btn/Character06.png);
}
#CharacterBox li#Character07 a {
  background-size: cover;
  background-image: url(../Images/InPage/Character/Btn/Character07.png);
}
#CharacterBox li img.Name {
  position: relative;
  top: 130px;
  left: -12px;
  z-index: 10;
}

#CharacterImage01 {
  margin-top: 0;
  background: url(../Images/InPage/Character/Pop/Character01.png) no-repeat;
}

#CharacterImage02 {
  margin-top: 0;
  background: url(../Images/InPage/Character/Pop/Character02.png) no-repeat;
}

#CharacterImage03 {
  margin-top: 0;
  background: url(../Images/InPage/Character/Pop/Character03.png) no-repeat;
}

#CharacterImage04 {
  margin-top: 0;
  background: url(../Images/InPage/Character/Pop/Character04.png) no-repeat;
}

#CharacterImage05 {
  margin-top: 0;
  background: url(../Images/InPage/Character/Pop/Character05.png) no-repeat;
}

#CharacterImage06 {
  margin-top: 0;
  background: url(../Images/InPage/Character/Pop/Character06.png) no-repeat;
}

#CharacterImage07 {
  margin-top: 0;
  background: url(../Images/InPage/Character/Pop/Character07.png) no-repeat;
}

/**=3-7
 * --------------------------------------
 * CAST&STAFF
 * --------------------------------------
 */
#StaffCastBox {
  margin-left: 20px;
  width: 761px;
  position: relative;
  text-align: left;
  margin-top: 55px;
  text-align: center;
}
#StaffCastBox .Box {
  padding: 20px 40px;
  background: url(../Images/InPage/Introduction/Game/Background.png);
}
#StaffCastBox:before {
  content: "";
  background: url(../Images/InPage/Introduction/Game/Line01.png);
  height: 14px;
  width: 100%;
  display: block;
}
#StaffCastBox:after {
  content: "";
  background: url(../Images/InPage/Introduction/Game/Line02.png);
  height: 14px;
  width: 100%;
  display: block;
}
#StaffCastBox .Left {
  width: 420px;
}
#StaffCastBox .Left h2 {
  width: 120px;
  height: 30px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/InPage/StaffCast/Staff.png);
  margin: 10px auto 25px;
}
#StaffCastBox .Right {
  width: 250px;
}
#StaffCastBox .Right h2 {
  width: 105px;
  height: 30px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/InPage/StaffCast/Cast.png);
  margin: 10px auto 25px;
}
#StaffCastBox table {
  margin: 0 auto;
  border: none;
}
#StaffCastBox table th {
  padding: 2px;
  text-align: right;
  text-shadow: 0 0 5px #ffffff;
}
#StaffCastBox table th .jQueryTextShadow {
  left: auto;
  right: 5px;
}
#StaffCastBox table td {
  padding: 2px;
  text-shadow: 0 0 5px #ffffff;
}

/**=3-8
 * --------------------------------------
 * TRAILER
 * --------------------------------------
 */
#TrailerBox {
  position: relative;
  background: url(../Images/All/Background/Frame/Left.png) repeat-y left top, url(../Images/All/Background/Frame/Right.png) repeat-y right top, url(../Images/All/Background/Frame/Top.png) repeat-x center top, url(../Images/All/Background/Frame/Bottom.png) repeat-x center bottom;
  width: 680px;
  height: 450px;
  margin-top: 50px;
  text-shadow: 0 0 5px #ffffff;
}
#TrailerBox:before {
  content: "";
  background: url(../Images/All/Background/Frame/Icon01.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 10;
}
#TrailerBox:after {
  content: "";
  background: url(../Images/All/Background/Frame/Icon02.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 10;
}
#TrailerBox div {
  position: absolute;
  top: 2px;
  left: 2px;
  background: #000000;
  width: 676px;
  height: 446px;
  z-index: 0;
}

#TrailerArchiveBox {
  margin-top: 20px;
}
#TrailerArchiveBox .TrailerArchive {
  width: 230px;
  float: left;
  margin-right: 30px;
  margin-bottom: 30px;
  position: relative;
  background: url(../Images/All/Background/Frame/Left.png) repeat-y left top, url(../Images/All/Background/Frame/Right.png) repeat-y right top, url(../Images/All/Background/Frame/Top.png) repeat-x left top, url(../Images/All/Background/Frame/Bottom.png) repeat-x left bottom;
}
#TrailerArchiveBox .TrailerArchive a {
  padding: 10px;
  display: block;
  width: 210px;
  color: #ffffff;
  text-shadow: 0 0 5px #ffffff;
}
#TrailerArchiveBox .TrailerArchive a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  opacity: 0.75;
}
#TrailerArchiveBox .TrailerArchive:before {
  content: "";
  background: url(../Images/All/Background/Frame/Icon01.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
}
#TrailerArchiveBox .TrailerArchive:after {
  content: "";
  background: url(../Images/All/Background/Frame/Icon02.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
}

/**=3-9
 * --------------------------------------
 * LINK
 * --------------------------------------
 */
#LinkBox {
  margin-left: 20px;
  margin-top: 100px;
}
#LinkBox #Link01 a {
  background: url(../Images/InPage/Link/Link01.png) no-repeat center 20px;
}
#LinkBox #Link02 a {
  background: url(../Images/InPage/Link/Link02.png) no-repeat center 20px;
}
#LinkBox #Link03 a {
  background: url(../Images/InPage/Link/Link03.png) no-repeat center 20px;
}
#LinkBox #Link04 a {
  background: url(../Images/InPage/Link/Link04.png) no-repeat center 20px;
}
#LinkBox #Link05 a {
  background: url(../Images/InPage/Link/Link05.png) no-repeat center 20px;
}
#LinkBox #Link06 a {
  background: url(../Images/InPage/Link/Link06.png) no-repeat center 20px;
}
#LinkBox #Link07 a {
  background: url(../Images/InPage/Link/Link07.png) no-repeat center 20px;
}
#LinkBox .Link {
  width: 230px;
  height: 120px;
  float: left;
  margin-right: 30px;
  margin-bottom: 30px;
  position: relative;
  background: url(../Images/All/Background/Frame/Left.png) repeat-y left top, url(../Images/All/Background/Frame/Right.png) repeat-y right top, url(../Images/All/Background/Frame/Top.png) repeat-x left top, url(../Images/All/Background/Frame/Bottom.png) repeat-x left bottom;
}
#LinkBox .Link a {
  padding: 10px;
  padding-top: 80px;
  display: block;
  width: 210px;
  height: 45px;
  color: #ffffff;
  text-shadow: 0 0 5px #ffffff;
}
#LinkBox .Link a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  opacity: 0.75;
}
#LinkBox .Link:before {
  content: "";
  background: url(../Images/All/Background/Frame/Icon01.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
}
#LinkBox .Link:after {
  content: "";
  background: url(../Images/All/Background/Frame/Icon02.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
}

/**=3-10
 * --------------------------------------
 * SPECIAL
 * --------------------------------------
 */
#SpecialBox {
  margin-left: 20px;
  width: 761px;
  height: 640px;
  position: relative;
  text-align: left;
  margin-top: 100px;
}
#SpecialBox .holder .jp-previous {
  top: -100px;
  left: 250px;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  height: 60px;
  width: 70px;
  background: url(../Images/InPage/Introduction/Btn.png) no-repeat;
  background-position: 0 -60px;
  z-index: 10;
}
#SpecialBox .holder .jp-previous:hover {
  background-position: 0 0;
}
#SpecialBox .holder .jp-next {
  bottom: 30px;
  left: 250px;
  position: absolute;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  height: 70px;
  width: 70px;
  background: url(../Images/InPage/Introduction/Btn.png) no-repeat;
  background-position: 0 -190px;
  z-index: 10;
}
#SpecialBox .holder .jp-next:hover {
  background-position: 0 -120px;
}
#SpecialBox .holder .jp-previous,
#SpecialBox .holder .jp-next {
  display: block;
  cursor: pointer;
}
#SpecialBox .holder a,
#SpecialBox .holder span,
#SpecialBox .holder .jp-disabled {
  display: none;
}
#SpecialBox * {
  font-family: "Helvetica Neue", Helvetica, Arial, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#SpecialBox #SpecialList {
  float: left;
  width: 550px;
}
#SpecialBox .scroll-pane {
  height: 100px;
  overflow: auto;
  width: 100%;
}
#SpecialBox .EntryBody {
  background: url(../Images/All/Background/Frame/Left.png) repeat-y left top, url(../Images/All/Background/Frame/Right.png) repeat-y right top, url(../Images/All/Background/Frame/Top.png) repeat-x center top, rgba(0, 0, 0, 0.25) url(../Images/All/Background/Frame/Bottom.png) repeat-x center bottom;
  min-height: 500px;
  max-height: 800px;
  width: 490px;
  padding: 15px 30px;
  position: relative;
  float: left;
}
#SpecialBox .EntryBody:before {
  content: "";
  background: url(../Images/All/Background/Frame/Icon01.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
}
#SpecialBox .EntryBody:after {
  content: "";
  background: url(../Images/All/Background/Frame/Icon02.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
}
#SpecialBox .EntryBody h2 {
  width: 490px;
  height: 50px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/InPage/Special/Title.png);
}
#SpecialBox .EntryBody h2.Name01 {
  background-position: center 0;
}
#SpecialBox .EntryBody h2.Name02 {
  background-position: center -50px;
}
#SpecialBox .EntryBody h2.Name03 {
  background-position: center -100px;
}
#SpecialBox .EntryBody h2.Name04 {
  background-position: center -150px;
}
#SpecialBox .EntryBody h2.Name05 {
  background-position: center -200px;
}
#SpecialBox .EntryBody h2.Name06 {
  background-position: center -250px;
}
#SpecialBox .EntryBody h2.Name07 {
  background-position: center -300px;
}
#SpecialBox .EntryBody h2.Name08 {
  background-position: center -350px;
}
#SpecialBox .EntryBody .Text {
  margin-top: 10px;
  color: #8b8a88;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.5em;
}
#SpecialBox .EntryBody .Text a {
  color: #887c57;
}
#SpecialBox .EntryBody .Text .scroll-pane {
  width: 100%;
  height: 350px;
  overflow: auto;
}
#SpecialBox .EntryBody .Text .jspVerticalBar {
  top: 0;
  right: 0;
}
#SpecialBox #EntryList {
  width: 170px;
  float: right;
  background: url(../Images/InPage/Special/SideBg.png) repeat-y;
  position: relative;
}
#SpecialBox #EntryList:before {
  content: "";
  background: url(../Images/All/Background/Frame/Icon01.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 999;
}
#SpecialBox #EntryList:after {
  content: "";
  background: url(../Images/All/Background/Frame/Icon02.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 999;
}
#SpecialBox #EntryList .List {
  position: relative;
  background: url(../Images/All/Background/Frame/Left.png) repeat-y left top, url(../Images/All/Background/Frame/Right.png) repeat-y right top, url(../Images/All/Background/Frame/Top.png) repeat-x center top, url(../Images/All/Background/Frame/Bottom.png) repeat-x center bottom;
  behavior: url(Templates/JavaScripts/PIE/PIE.php);
  width: 170px;
  padding: 10px 0;
}
#SpecialBox #EntryList .List li {
  background: url(../Images/InPage/News/Line.png) no-repeat bottom center;
  padding: 10px 0;
  height: 45px;
}
#SpecialBox #EntryList .List li a {
  background: url(../Images/InPage/Special/Side.png) no-repeat;
}
#SpecialBox #EntryList .List li a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
#SpecialBox #EntryList .List li:last-child {
  background: none;
}
#SpecialBox #EntryList .List li.Navi01 a {
  height: 45px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-position: center -395px;
}
#SpecialBox #EntryList .List li.Navi02 a {
  height: 45px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-position: center -215px;
}
#SpecialBox #EntryList .List li.Navi03 a {
  height: 45px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-position: center -80px;
}
#SpecialBox #EntryList .List li.Navi04 a {
  height: 45px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-position: center -125px;
}
#SpecialBox #EntryList .List li.Navi05 a {
  height: 45px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-position: center -170px;
}
#SpecialBox #EntryList .List li.Navi06 a {
  height: 45px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-position: center -35px;
}
#SpecialBox #EntryList .List li.Navi07 a {
  height: 45px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-position: center -260px;
}
#SpecialBox #EntryList .List li.Navi08 a {
  height: 45px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-position: center -350px;
}
#SpecialBox #EntryList .List h2 {
  height: 35px;
  background: url(../Images/InPage/Special/Side.png) no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-position: center 0;
}
#SpecialBox #EntryList p {
  margin-top: 10px;
  background: url(../Images/InPage/Special/Comingsoon.png) no-repeat;
  width: 166px;
  height: 75px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

.GoodsPhoto {
  float: left;
  width: 160px;
  margin-bottom: 10px;
  text-align: center;
  color: #ffffff;
}
.GoodsPhoto img {
  margin-bottom: 5px;
}

#GoodsPage #EntryList {
  position: relative;
  background: url(../Images/InPage/Special/SideBg.png) repeat-y;
  margin-top: 0px;
}
#GoodsPage #EntryList .List {
  background: url(../Images/All/Background/Frame/Left.png) repeat-y left top, url(../Images/All/Background/Frame/Right.png) repeat-y right top, url(../Images/All/Background/Frame/Top.png) repeat-x center top, url(../Images/All/Background/Frame/Bottom.png) repeat-x center bottom;
  behavior: url(Templates/JavaScripts/PIE/PIE.php);
}
#GoodsPage #EntryList:before {
  content: "";
  background: url(../Images/All/Background/Frame/Icon01.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 999;
}
#GoodsPage #EntryList:after {
  content: "";
  background: url(../Images/All/Background/Frame/Icon02.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 999;
}
#GoodsPage #EntryList h2 {
  background: url(../Images/InPage/Goods/Side.png);
  width: 125px;
  margin: auto;
  height: 25px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  margin-bottom: 10px;
}
#GoodsPage .Text {
  position: relative;
}
#GoodsPage .SoundTruck {
  width: 470px;
  height: 50px;
  clear: both;
  padding-top: 20px;
  margin: auto;
  position: absolute;
  bottom: -20px;
}
#GoodsPage .SoundTruck a {
  width: 470px;
  height: 50px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background: url(../Images/InPage/Goods/SoundTruck.png) no-repeat;
  -webkit-box-shadow: 0 0 5px #333333;
  -moz-box-shadow: 0 0 5px #333333;
  box-shadow: 0 0 5px #333333;
  -pie-box-shadow: 0 0 5px #333333;
}
#GoodsPage .SoundTruck a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  opacity: 0.75;
}

/**=3-10
 * --------------------------------------
 * SPECIAL
 * --------------------------------------
 */
.DownloadBox {
  width: 380px;
  padding: 15px;
  position: relative;
  background: url(../Images/All/Background/Frame/Left.png) repeat-y left top, url(../Images/All/Background/Frame/Right.png) repeat-y right top, url(../Images/All/Background/Frame/Top.png) repeat-x left top, url(../Images/All/Background/Frame/Bottom.png) repeat-x left bottom;
}
.DownloadBox a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  opacity: 0.75;
}
.DownloadBox:before {
  content: "";
  background: url(../Images/All/Background/Frame/Icon01.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
}
.DownloadBox:after {
  content: "";
  background: url(../Images/All/Background/Frame/Icon02.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
}
.DownloadBox .DownloadImage {
  width: 200px;
  float: left;
}
.DownloadBox .Link {
  width: 160px;
  float: right;
  text-align: center;
}
.DownloadBox .Link h3 {
  font-size: 1.25em;
}
.DownloadBox .Link li {
  margin-top: 10px;
}
.DownloadBox .Link li a {
  display: inline-block;
  background-origin: border-box;
  position: relative;
  font-weight: bold;
  text-shadow: 1px -1px rgba(0, 0, 0, 0.1);
  background-color: #6a5a36;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF7B683F', endColorstr='#FF6A5A36');
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdiNjgzZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZhNWEzNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7b683f), color-stop(100%, #6a5a36));
  background: -webkit-linear-gradient(#7b683f 0%, #6a5a36 100%);
  background: -moz-linear-gradient(#7b683f 0%, #6a5a36 100%);
  background: -o-linear-gradient(#7b683f 0%, #6a5a36 100%);
  -pie-background: linear-gradient(#7b683f 0%, #6a5a36 100%);
  background: linear-gradient(#7b683f 0%, #6a5a36 100%);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -pie-border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) -1px 1px 0, rgba(255, 255, 255, 0.2) -1px 1px 0 inset;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) -1px 1px 0, rgba(255, 255, 255, 0.2) -1px 1px 0 inset;
  box-shadow: rgba(0, 0, 0, 0.1) -1px 1px 0, rgba(255, 255, 255, 0.2) -1px 1px 0 inset;
  -pie-box-shadow: rgba(0, 0, 0, 0.1) -1px 1px 0, rgba(255, 255, 255, 0.2) -1px 1px 0 inset;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  font-size: 1em;
  padding: 1em 2em;
  line-height: 1.5em;
  padding: 5px;
  display: block;
}
.DownloadBox .Link li a i {
  font-size: 130%;
  margin-right: 5px;
  color: rgba(255, 255, 255, 0.5);
}

#BackgroundBox .DownloadBox {
  width: 230px;
  float: left;
  margin: 10px;
}
#BackgroundBox .DownloadBox .DownloadImage {
  width: 100px;
}
#BackgroundBox .DownloadBox .Link {
  width: 120px;
}
#BackgroundBox .DownloadBox .Link h3 {
  font-size: 1.1em;
}

#BackgroundBox02 .DownloadBox {
  width: 160px;
  float: left;
  margin: 10px 10px 0;
}
#BackgroundBox02 .DownloadBox .DownloadImage {
  width: 160px;
}
#BackgroundBox02 .DownloadBox .Link {
  width: 160px;
}
#BackgroundBox02 .DownloadBox .Link h3 {
  font-size: 1.1em;
}

.TwitterIcon .Box {
  position: relative;
  width: 170px;
  padding: 10px;
  float: left;
  margin: 10px;
  background: url(../Images/All/Background/Frame/Left.png) repeat-y left top, url(../Images/All/Background/Frame/Right.png) repeat-y right top, url(../Images/All/Background/Frame/Top.png) repeat-x left top, url(../Images/All/Background/Frame/Bottom.png) repeat-x left bottom;
}
.TwitterIcon .Box:before {
  content: "";
  background: url(../Images/All/Background/Frame/Icon01.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  left: -6px;
}
.TwitterIcon .Box:after {
  content: "";
  background: url(../Images/All/Background/Frame/Icon02.png);
  height: 17px;
  width: 17px;
  display: block;
  position: absolute;
  top: -6px;
  right: -6px;
}
.TwitterIcon .Link a {
  display: inline-block;
  background-origin: border-box;
  position: relative;
  font-weight: bold;
  text-shadow: 1px -1px rgba(0, 0, 0, 0.1);
  background-color: #6a5a36;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF7B683F', endColorstr='#FF6A5A36');
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdiNjgzZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZhNWEzNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7b683f), color-stop(100%, #6a5a36));
  background: -webkit-linear-gradient(#7b683f 0%, #6a5a36 100%);
  background: -moz-linear-gradient(#7b683f 0%, #6a5a36 100%);
  background: -o-linear-gradient(#7b683f 0%, #6a5a36 100%);
  -pie-background: linear-gradient(#7b683f 0%, #6a5a36 100%);
  background: linear-gradient(#7b683f 0%, #6a5a36 100%);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -pie-border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) -1px 1px 0, rgba(255, 255, 255, 0.2) -1px 1px 0 inset;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) -1px 1px 0, rgba(255, 255, 255, 0.2) -1px 1px 0 inset;
  box-shadow: rgba(0, 0, 0, 0.1) -1px 1px 0, rgba(255, 255, 255, 0.2) -1px 1px 0 inset;
  -pie-box-shadow: rgba(0, 0, 0, 0.1) -1px 1px 0, rgba(255, 255, 255, 0.2) -1px 1px 0 inset;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  font-size: 1em;
  padding: 1em 2em;
  line-height: 1.5em;
  padding: 5px;
  display: block;
}
.TwitterIcon .Link a i {
  font-size: 130%;
  margin-right: 5px;
  color: rgba(255, 255, 255, 0.5);
}
.TwitterIcon .Link a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  opacity: 0.75;
}
.TwitterIcon .AllDownload {
  width: 25%;
  margin: 10px auto;
}

.TwitterIcon02 .Box {
  width: 100px;
}

#DownloadPage #BackgroundImages {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  padding-left: 20px;
  padding-top: 20px;
  height: 720px;
  float: left;
  width: 100%;
}
#DownloadPage #TwitterIcon {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  width: 100%;
  position: relative;
  height: 720px;
  float: left;
}
#DownloadPage #SlideBox {
  height: 740px;
  overflow: hidden;
  position: relative;
}
#DownloadPage #BtnBack {
  height: 60px;
  width: 70px;
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -55px;
  z-index: 10;
}
#DownloadPage #BtnBack a {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  height: 60px;
  width: 70px;
  background: url(../Images/InPage/Introduction/Btn.png) no-repeat;
  background-position: 0 -60px;
}
#DownloadPage #BtnBack a:hover {
  background-position: 0 0;
}
#DownloadPage #BtnNext {
  height: 70px;
  width: 70px;
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -55px;
  z-index: 10;
}
#DownloadPage #BtnNext a {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  height: 70px;
  width: 70px;
  background: url(../Images/InPage/Introduction/Btn.png) no-repeat;
  background-position: 0 -190px;
}
#DownloadPage #BtnNext a:hover {
  background-position: 0 -120px;
}