@charset "UTF-8";
body {
  background-color: black;
}

#contents html, #contents body, #contents div, #contents span, #contents object, #contents iframe, #contents h1, #contents h2, #contents h3, #contents h4, #contents h5, #contents h6, #contents p, #contents blockquote, #contents pre, #contents abbr, #contents address, #contents cite, #contents code, #contents del, #contents dfn, #contents em, #contents img, #contents ins, #contents kbd, #contents q, #contents samp, #contents small, #contents strong, #contents sub, #contents sup, #contents var, #contents b, #contents i, #contents dl, #contents dt, #contents dd, #contents ol, #contents ul, #contents li, #contents fieldset, #contents form, #contents label, #contents legend, #contents table, #contents caption, #contents tbody, #contents tfoot, #contents thead, #contents tr, #contents th, #contents td, #contents article, #contents aside, #contents canvas, #contents details, #contents figcaption, #contents figure, #contents footer, #contents header, #contents hgroup, #contents menu, #contents nav, #contents section, #contents summary, #contents time, #contents mark, #contents audio, #contents video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
#contents body {
  line-height: 1;
}
#contents article, #contents aside, #contents details, #contents figcaption, #contents figure, #contents footer, #contents header, #contents hgroup, #contents menu, #contents nav, #contents section {
  display: block;
}
#contents nav ul {
  list-style: none;
}
#contents blockquote, #contents q {
  quotes: none;
}
#contents blockquote:before, #contents blockquote:after, #contents q:before, #contents q:after {
  content: none;
}
#contents a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
#contents ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
#contents mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
#contents del {
  text-decoration: line-through;
}
#contents abbr[title], #contents dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
#contents table {
  border-collapse: collapse;
  border-spacing: 0;
}
#contents hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
#contents input, #contents select {
  vertical-align: middle;
}
#contents,
#contents * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
#contents ul > li {
  font-size: 0;
}
#contents ul > li > * {
  font-size: 100%;
}
#contents {
  overflow: hidden;
  min-width: 980px;
  min-height: 750px;
}
#contents * {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
}
#contents #bgm-player {
  position: fixed;
  width: 0;
  height: 0;
  top: -1px;
  left: -1px;
}
#contents #bg {
  min-width: 980px;
  min-height: 750px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
}
#contents #bg.frontpage {
  background-image: url(../images/frontpage/bg.jpg);
}
#contents #bg.introduction {
  background-image: url(../images/introduction/bg.jpg);
}
#contents #bg.character {
  background-image: url(../images/character/bg.jpg);
}
#contents #bg.spec {
  background-image: url(../images/spec/bg.jpg);
}
#contents #bg.screen_shot {
  background-image: url(../images/screen_shot/bg.jpg);
  background-size: auto;
  background-position: center;
  background-color: black;
}
#contents #bg.overview {
  background-image: url(../images/overview/bg.jpg);
}
#contents #bg.movie {
  background-image: url(../images/movie/bg.jpg);
}
#contents #bg.soundtrack {
  background-image: url(../images/soundtrack/bg.jpg);
}
#contents #bg.wallpaper {
  background-image: url(../images/wallpaper/bg.jpg);
}
#contents #menu {
  position: absolute;
  display: block;
  width: 239px;
  height: 100%;
  top: 0;
  bottom: 0;
  left: -239px;
  margin-left: 0;
  background-image: url(../images/common/menu_bg.png), url(../images/common/menu_fg.png);
  background-repeat: repeat, repeat-x;
  background-position: 0 0, left bottom;
  background-color: rgba(108, 0, 5, 0.85);
  z-index: 1001;
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
#contents #menu .articles {
  display: block;
  margin: -5px auto 0;
}
#contents #menu .articles li {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 205px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center center;
}
#contents #menu .articles li a {
  cursor: pointer;
  display: block;
  width: 205px;
  height: 32px;
}
#contents #menu .articles li a img {
  vertical-align: middle;
  opacity: 0;
  -webkit-transition: opacity 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: opacity 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: opacity 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: opacity 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#contents #menu .articles li a .new {
  display: block;
  position: absolute;
  width: 44px;
  height: 22px;
  top: -4px;
  left: -4px;
  background-image: url(../images/common/menu-icon-new.png);
  background-repeat: no-repeat;
  background-position: left top;
}
#contents #menu .articles li:hover a img {
  opacity: 1;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents #menu .articles li.selected a {
  cursor: auto;
}
#contents #menu .articles li.selected a img {
  opacity: 1;
  -webkit-transition: opacity 0.25s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -moz-transition: opacity 0.25s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -ms-transition: opacity 0.25s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: opacity 0.25s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: opacity 0.25s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
#contents #menu .articles li + li {
  margin-top: 2px;
}
#contents #menu .articles li.spec {
  background-image: url(../images/common/menu-button_spec.png);
}
#contents #menu .articles li.introduction {
  background-image: url(../images/common/menu-button_introduction.png);
}
#contents #menu .articles li.character {
  background-image: url(../images/common/menu-button_character.png);
}
#contents #menu .articles li.screen_shot {
  background-image: url(../images/common/menu-button_screen_shot.png);
}
#contents #menu .articles li.movie {
  background-image: url(../images/common/menu-button_movie.png);
}
#contents #menu .articles li.soundtrack {
  background-image: url(../images/common/menu-button_soundtrack.png);
}
#contents #menu .articles li.overview {
  background-image: url(../images/common/menu-button_overview.png);
}
#contents #menu .articles li.wallpaper {
  background-image: url(../images/common/menu-button_wallpaper.png);
}
#contents #menu .banners {
  display: block;
  position: absolute;
  bottom: 40px;
  width: 239px;
  text-align: center;
}
#contents #menu .banners li {
  display: block;
}
#contents #menu .banners li a {
  display: inline-block;
  background-color: white;
}
#contents #menu .banners li a img {
  vertical-align: bottom;
  opacity: 1;
  -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents #menu .banners li a img:hover {
  opacity: 0.9;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents #menu .banners li.new:after {
  display: block;
  content: '';
  position: absolute;
  width: 44px;
  height: 22px;
  top: -7px;
  left: 17px;
  background-image: url(../images/common/menu-icon-new.png);
  background-repeat: no-repeat;
  background-position: left top;
}
#contents #menu .banners li + li {
  margin-top: 7px;
}
#contents #menu .guideline {
  display: block;
  position: absolute;
  bottom: 194px;
  width: 200px;
  height: 31px;
  margin-left: -100px;
  left: 50%;
  background-position: top left;
  background-image: url(../images/common/banner-guideline.png);
  background-repeat: no-repeat;
  opacity: 1;
  -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents #menu .guideline:hover {
  opacity: 0.6;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents #menu .guideline > a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  text-indent: -999em;
}
#contents #menu .manuals {
  display: block;
  position: absolute;
  bottom: 265px;
  width: 208px;
  height: 59px;
  margin-left: -105px;
  left: 50%;
  background-position: top left;
  background-image: url(../images/common/manual_field.png);
  background-repeat: no-repeat;
}
#contents #menu .manuals > a {
  display: block;
  position: absolute;
  width: 97px;
  height: 24px;
  opacity: 0;
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: -999em;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents #menu .manuals > a:hover {
  opacity: 1;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents #menu .manuals > a.ps4 {
  bottom: 8px;
  left: 15px;
  background-image: url(../images/common/manual_btn-ps4.png);
}
#contents #menu .manuals > a.xboxone {
  bottom: 8px;
  right: 7px;
  background-image: url(../images/common/manual_btn-xboxone.png);
}
#contents #menu .manuals.new:after {
  content: '';
  display: block;
  position: absolute;
  width: 44px;
  height: 22px;
  top: -2px;
  left: 4px;
  background-image: url(../images/common/menu-icon-new.png);
  background-repeat: no-repeat;
  background-position: left top;
}
#contents #menu .shop-list {
  display: block;
  position: absolute;
  bottom: 231px;
  width: 239px;
  height: 30px;
  text-align: center;
}
#contents #menu .shop-list img {
  vertical-align: bottom;
  opacity: 1;
  -webkit-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents #menu .shop-list img:hover {
  opacity: 0.6;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents #menu .shop-list.new:after {
  content: '';
  display: block;
  position: absolute;
  width: 44px;
  height: 22px;
  top: -7px;
  left: 17px;
  background-image: url(../images/common/menu-icon-new.png);
  background-repeat: no-repeat;
  background-position: left top;
}
#contents #menu .bgm-player-ui {
  display: block;
  position: absolute;
  bottom: 9px;
  width: 116px;
  height: 24px;
  overflow: hidden;
  left: 20px;
  text-align: left;
  background-position: top right;
  background-image: url(../images/common/bgm-button_label-base.png);
  background-repeat: no-repeat;
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
#contents #menu .bgm-player-ui .gauge {
  display: block;
  width: 14px;
  height: 14px;
  position: absolute;
  right: 24px;
  top: 5px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image: url(../images/common/bgm-button_track-frame.png);
  background-color: black;
}
#contents #menu .bgm-player-ui .gauge ul {
  display: block;
  width: 108px;
  height: 12px;
  margin: 1px;
  position: absolute;
  overflow: hidden;
}
#contents #menu .bgm-player-ui .gauge ul li {
  display: block;
  font-size: 0;
  vertical-align: bottom;
  width: 14px;
  height: 14px;
  margin: -1px;
  float: left;
  background-image: url(../images/common/bgm-button_track-nums.png);
  background-repeat: no-repeat;
  background-position: left top;
}
#contents #menu .bgm-player-ui .gauge ul li.track-1 {
  background-position: 0 0;
}
#contents #menu .bgm-player-ui .gauge ul li.track-2 {
  background-position: -13px 0;
}
#contents #menu .bgm-player-ui .gauge ul li.track-3 {
  background-position: -26px 0;
}
#contents #menu .bgm-player-ui .gauge ul li.track-4 {
  background-position: -39px 0;
}
#contents #menu .bgm-player-ui .gauge ul li.track-5 {
  background-position: -52px 0;
}
#contents #menu .bgm-player-ui .gauge ul li.track-6 {
  background-position: -65px 0;
}
#contents #menu .bgm-player-ui .gauge ul li.track-7 {
  background-position: -78px 0;
}
#contents #menu .bgm-player-ui .gauge ul li.track-8 {
  background-position: -91px 0;
}
#contents #menu .bgm-player-ui .gauge ul li.track-9 {
  background-position: -104px 0;
}
#contents #menu .bgm-player-ui .toggle-button {
  display: block;
  outline: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: absolute;
  width: 61px;
  height: 24px;
  background-color: transparent;
  background-image: url(../images/common/bgm-button_label-off.png);
  background-repeat: no-repeat;
  background-position: left top;
}
#contents #menu .bgm-player-ui .toggle-button:after {
  content: '';
  display: block;
  width: 61px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  background-color: transparent;
  background-image: url(../images/common/bgm-button_label-on.png);
  background-repeat: no-repeat;
  background-position: left top;
  -webkit-transition: opacity, 0.4s, cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity, 0.4s, cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity, 0.4s, cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity, 0.4s, cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity, 0.4s, cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents #menu .bgm-player-ui.playing .toggle-button:after {
  opacity: 1;
  -webkit-transition: opacity, 0.4s, cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity, 0.4s, cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity, 0.4s, cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity, 0.4s, cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity, 0.4s, cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents #menu .bgm-player-ui .next,
#contents #menu .bgm-player-ui .prev {
  width: 15px;
  height: 16px;
  cursor: pointer;
  position: absolute;
  top: 5px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
#contents #menu .bgm-player-ui .next {
  right: 8px;
  background-image: url(../images/common/bgm-button_track-btn-next.png);
}
#contents #menu .bgm-player-ui .prev {
  right: 39px;
  background-image: url(../images/common/bgm-button_track-btn-prev.png);
}
#contents #fg {
  position: absolute;
  visibility: hidden;
  right: 0;
  bottom: 0;
  width: 1200px;
  height: 750px;
  z-index: 2000;
  cursor: auto;
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
}
#contents #fg.selected {
  visibility: visible;
}
#contents #fg > .mask {
  position: absolute;
  overflow: hidden;
  width: 1200px;
  height: 750px;
  left: 0;
  top: 0;
  opacity: 0;
  margin-left: 145px;
  background-color: transparent;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: translate(100%, 0) skew(-32.45deg, 0);
  -moz-transform: translate(100%, 0) skew(-32.45deg, 0);
  -ms-transform: translate(100%, 0) skew(-32.45deg, 0);
  -o-transform: translate(100%, 0) skew(-32.45deg, 0);
  transform: translate(100%, 0) skew(-32.45deg, 0);
  -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
#contents #fg.selected:not(.ie9) > .mask {
  left: 0;
  margin-left: 0;
  opacity: 1;
  margin-left: 0;
  background-position: left top;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: translate(0, 0) skew(0, 0);
  -moz-transform: translate(0, 0) skew(0, 0);
  -ms-transform: translate(0, 0) skew(0, 0);
  -o-transform: translate(0, 0) skew(0, 0);
  transform: translate(0, 0) skew(0, 0);
  -webkit-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#contents #fg > .mask > .layer {
  width: 100%;
  height: 100%;
  position: absolute;
  margin-left: -145px;
  background-image: url(../images/frontpage/fg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: fixed;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: translate(-100%, 0) skew(32.45deg, 0);
  -moz-transform: translate(-100%, 0) skew(32.45deg, 0);
  -ms-transform: translate(-100%, 0) skew(32.45deg, 0);
  -o-transform: translate(-100%, 0) skew(32.45deg, 0);
  transform: translate(-100%, 0) skew(32.45deg, 0);
  -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
}
#contents #fg.selected:not(.ie9) > .mask > .layer {
  left: 0;
  margin-left: 0;
  opacity: 1;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: translate(0, 0) skew(0, 0);
  -moz-transform: translate(0, 0) skew(0, 0);
  -ms-transform: translate(0, 0) skew(0, 0);
  -o-transform: translate(0, 0) skew(0, 0);
  transform: translate(0, 0) skew(0, 0);
  -webkit-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#contents h1.logo {
  width: 235px;
  height: 165px;
  border: 1px solid transparent;
  margin-left: 0;
  margin-top: -5px;
  cursor: pointer;
}
#contents article {
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 239px;
  border: 1px solid transparent;
}
#contents #loading {
  position: absolute;
  width: auto;
  height: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 1000;
  background-color: black;
}
#contents #loading .sign {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  border: 2px solid transparent;
  border-color: transparent rgba(108, 0, 5, 0.85) transparent rgba(108, 0, 5, 0.85);
  border-radius: 100%;
  -webkit-box-shadow: 0 0 10px 5px rgba(255, 80, 66, 0.1), 0 0 20px 5px rgba(255, 80, 66, 0.1) inset;
  -moz-box-shadow: 0 0 10px 5px rgba(255, 80, 66, 0.1), 0 0 20px 5px rgba(255, 80, 66, 0.1) inset;
  -ms-box-shadow: 0 0 10px 5px rgba(255, 80, 66, 0.1), 0 0 20px 5px rgba(255, 80, 66, 0.1) inset;
  -o-box-shadow: 0 0 10px 5px rgba(255, 80, 66, 0.1), 0 0 20px 5px rgba(255, 80, 66, 0.1) inset;
  box-shadow: 0 0 10px 5px rgba(255, 80, 66, 0.1), 0 0 20px 5px rgba(255, 80, 66, 0.1) inset;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: rotate 1.5s infinite linear 0s;
  -moz-animation: rotate 1.5s infinite linear 0s;
  -ms-animation: rotate 1.5s infinite linear 0s;
  -o-animation: rotate 1.5s infinite linear 0s;
  animation: rotate 1.5s infinite linear 0s;
}
#contents article.frontpage {
  border: none;
}
#contents article.frontpage a.banner_steam {
  position: absolute;
  opacity: 0;
  bottom: 18px;
  left: 259px;
  width: 240px;
  height: 90px;
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
#contents article.frontpage a.banner_online {
  position: absolute;
  opacity: 0;
  bottom: 18px;
  left: 520px;
  width: 227px;
  height: 90px;
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
#contents article.frontpage a#switch.button {
  width: 286px;
  height: 453px;
  position: absolute;
  right: 0;
  bottom: 0;
  background-image: url(../images/frontpage/button-switch.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  cursor: pointer;
  opacity: 1;
  -webkit-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.frontpage a#switch.button:hover, #contents article.frontpage a#switch.button:active {
  opacity: 0.85;
  -webkit-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.spec section.detail {
  position: absolute;
  left: 251px;
  top: 13px;
  width: 800px;
  height: 650px;
  background-image: url(../images/spec/repeat-bg.png);
}
#contents article.spec section.detail img {
  vertical-align: bottom;
}
#contents article.spec section.detail h2 {
  margin: 0 0 0 37px;
}
#contents article.spec section.detail h2 img {
  margin: 35px 0 0 0;
}
#contents article.spec section.detail a {
  opacity: 1;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.spec section.detail a:hover, #contents article.spec section.detail a:active {
  opacity: 0.75;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.spec section.detail a.order {
  display: block;
  padding: 10px 46px;
  margin: 0 auto;
  width: 363px;
  height: 36px;
  background-image: url(../images/spec/btn_order.png);
  background-repeat: no-repeat;
}
#contents article.spec section.detail a.more-detail {
  display: block;
  padding: 10px 46px;
  margin: 0 auto;
  width: 363px;
  height: 36px;
  background-image: url(../images/spec/btn_more-detail.png);
  background-repeat: no-repeat;
}
#contents article.spec section.detail .thumb {
  display: inline-block;
  background-color: white;
}
#contents article.spec section.detail .thumb img {
  margin: 0;
  padding: 0;
  opacity: 1;
  -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
}
#contents article.spec section.detail .wrapper {
  margin: 0;
  padding: 0;
  width: 800px;
  height: 650px;
  font-size: 12px;
  background-repeat: no-repeat;
  background-image: url(../images/spec/frame.png);
  background-position: 13px 6px;
}
#contents article.spec section.detail .wrapper > div > p, #contents article.spec section.detail .wrapper > div > a {
  color: transparent;
  line-height: 1.5em;
}
#contents article.spec section.detail .wrapper .left {
  width: 50%;
  float: left;
}
#contents article.spec section.detail .wrapper .left .general {
  width: 328px;
  height: 82px;
  padding: 0 1px;
  margin: 10px 0 0 51px;
  background-image: url(../images/spec/spec_general.png);
  background-repeat: no-repeat;
}
#contents article.spec section.detail .wrapper .left .suzaku-edition {
  width: 371px;
  height: 215px;
  padding: 35px 21px 0;
  margin: 0 0 0 32px;
  background-image: url(../images/spec/spec_suzaku-edition.png);
  background-repeat: no-repeat;
}
#contents article.spec section.detail .wrapper .left .thumb {
  width: 165px;
  height: 110px;
  margin: 11px 5px 5px 50px;
}
#contents article.spec section.detail .wrapper .left .general + a {
  margin: 6px 0 0 36px;
}
#contents article.spec section.detail .wrapper .left .suzaku-edition + a {
  margin: 5px 0 0 33px;
}
#contents article.spec section.detail .wrapper .left .more-detail {
  margin-top: 4px;
  margin-left: 36px;
}
#contents article.spec section.detail .wrapper .right {
  margin-top: -20px;
  width: 50%;
  float: right;
}
#contents article.spec section.detail .wrapper .right .ultimate-box {
  width: 344px;
  height: 174px;
  padding: 6px 11px 0;
  margin: 0 37px 0 11px;
  background-image: url(../images/spec/spec_ultimate-box.png);
  background-repeat: no-repeat;
}
#contents article.spec section.detail .wrapper .right .thumb {
  width: 219px;
  height: 146px;
  margin: 1px 164px 5px 22px;
}
#contents article.spec section.detail .wrapper .right a {
  margin: 5px 0 0 4px;
}
#contents article.spec section.detail .wrapper .right .note {
  position: relative;
  margin: 4px 0 0 18px;
  width: 330px;
  height: 130px;
  background-image: url(../images/spec/spec_ultimate_note.png);
  background-repeat: no-repeat;
}
#contents article.spec section.detail .wrapper .right a.license {
  display: block;
  color: white;
  background-color: black;
  border: 3px double #957e32;
  padding: 0.2em 0 0 10px;
  text-decoration: none;
  width: 330px;
  margin-left: 18px;
  margin-top: 7px;
}
#contents article.spec section.detail .wrapper .right a.license:before {
  content: '■';
  display: inline-block;
}
#contents article.spec section.detail .wrapper:after {
  content: '';
  display: block;
  width: 1px;
  height: 1px;
  position: absolute;
  clear: both;
}
#contents article.introduction section.detail {
  position: absolute;
  right: 1.58333%;
  top: 15px;
  width: 520px;
  height: 650px;
  background-repeat: no-repeat;
  background-image: url(../images/introduction/detail_bg.png);
}
#contents article.introduction section.detail img {
  display: block;
  margin: 0 auto;
}
#contents article.introduction section.detail h2 {
  margin: 34px auto 0;
}
#contents article.introduction section.detail h3 {
  margin: 11px auto 0;
}
#contents article.introduction section.detail p {
  margin: 26px auto 0;
}
#contents article.introduction section.detail .hd {
  display: block;
  border: 1px solid transparent;
  margin: 27px auto -9px;
  width: 441px;
  height: 221px;
  background-repeat: no-repeat;
  background-image: url(../images/introduction/detail_hd_bg.jpg);
}
#contents article.introduction section.detail .hd h3 {
  border: 1px solid transparent;
  margin: 9px auto 0;
}
#contents article.introduction section.detail .hd p {
  margin: -1px auto 0;
}
#contents article.character section {
  position: absolute;
  margin: auto;
  width: 800px;
  height: 680px;
  left: 239px;
  right: 0;
  top: 0;
  bottom: 0;
}
#contents article.character section h2 {
  margin: 5px auto 0;
  text-align: center;
}
#contents article.character section .sections.index {
  margin-top: 130px;
}
#contents article.character section .sections.index li {
  display: block;
  margin: 15px 10px;
  width: 90px;
  height: 130px;
  float: left;
  background-repeat: no-repeat;
  background-color: white;
  background-image: url(../images/character/character_index_base.jpg);
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.65);
  -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.65);
  -ms-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.65);
  -o-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.65);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.65);
  z-index: 0;
}
#contents article.character section .sections.index li:hover {
  z-index: 2;
}
#contents article.character section .sections.index li:before {
  content: '';
  display: block;
  position: absolute;
  width: 140px;
  height: 200px;
  bottom: 0;
  left: -25px;
  background-repeat: no-repeat;
  background-position: center 100%;
}
#contents article.character section .sections.index li.new:after {
  display: block;
  content: '';
  position: absolute;
  bottom: 27px;
  left: -11px;
  width: 44px;
  height: 22px;
  background-image: url(../images/common/menu-icon-new.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}
#contents article.character section .sections.index li.ace:before {
  background-image: url(../images/character/character_thumb_ace.png);
}
#contents article.character section .sections.index li.queen:before {
  background-image: url(../images/character/character_thumb_queen.png);
}
#contents article.character section .sections.index li.nine:before {
  background-image: url(../images/character/character_thumb_nine.png);
}
#contents article.character section .sections.index li.machina:before {
  background-image: url(../images/character/character_thumb_machina.png);
}
#contents article.character section .sections.index li.rem:before {
  background-image: url(../images/character/character_thumb_rem.png);
}
#contents article.character section .sections.index li.eight:before {
  background-image: url(../images/character/character_thumb_eight.png);
}
#contents article.character section .sections.index li.king:before {
  background-image: url(../images/character/character_thumb_king.png);
}
#contents article.character section .sections.index li.sice:before {
  background-image: url(../images/character/character_thumb_sice.png);
}
#contents article.character section .sections.index li.cater:before {
  background-image: url(../images/character/character_thumb_cater.png);
}
#contents article.character section .sections.index li.jack:before {
  background-image: url(../images/character/character_thumb_jack.png);
}
#contents article.character section .sections.index li.cinque:before {
  background-image: url(../images/character/character_thumb_cinque.png);
}
#contents article.character section .sections.index li.seven:before {
  background-image: url(../images/character/character_thumb_seven.png);
}
#contents article.character section .sections.index li.deuce:before {
  background-image: url(../images/character/character_thumb_deuce.png);
}
#contents article.character section .sections.index li.trey:before {
  background-image: url(../images/character/character_thumb_trey.png);
}
#contents article.character section .sections.index li a {
  display: block;
  width: 122px;
  height: 130px;
  position: absolute;
  bottom: -3px;
  left: 50%;
  margin-left: -61px;
  background-repeat: no-repeat;
  background-position: center 100%;
  background-image: url(../images/character/character_index_label-field.png);
}
#contents article.character section .sections.index li a:after {
  width: 122px;
  height: 47px;
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
#contents article.character section .sections.index li.ace > a:after {
  background-image: url(../images/character/character_label_ace.png);
}
#contents article.character section .sections.index li.queen > a:after {
  background-image: url(../images/character/character_label_queen.png);
}
#contents article.character section .sections.index li.nine > a:after {
  background-image: url(../images/character/character_label_nine.png);
}
#contents article.character section .sections.index li.machina > a:after {
  background-image: url(../images/character/character_label_machina.png);
}
#contents article.character section .sections.index li.rem > a:after {
  background-image: url(../images/character/character_label_rem.png);
}
#contents article.character section .sections.index li.eight > a:after {
  background-image: url(../images/character/character_label_eight.png);
}
#contents article.character section .sections.index li.king > a:after {
  background-image: url(../images/character/character_label_king.png);
}
#contents article.character section .sections.index li.sice > a:after {
  background-image: url(../images/character/character_label_sice.png);
}
#contents article.character section .sections.index li.cater > a:after {
  background-image: url(../images/character/character_label_cater.png);
}
#contents article.character section .sections.index li.jack > a:after {
  background-image: url(../images/character/character_label_jack.png);
}
#contents article.character section .sections.index li.cinque > a:after {
  background-image: url(../images/character/character_label_cinque.png);
}
#contents article.character section .sections.index li.seven > a:after {
  background-image: url(../images/character/character_label_seven.png);
}
#contents article.character section .sections.index li.deuce > a:after {
  background-image: url(../images/character/character_label_deuce.png);
}
#contents article.character section .sections.index li.trey > a:after {
  background-image: url(../images/character/character_label_trey.png);
}
#contents article.character section .sections.index:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
}
#contents article.character section .details {
  display: none;
  width: 780px;
  height: 360px;
  position: absolute;
  top: 150px;
  background-color: transparent;
  margin: auto;
}
#contents article.character section .details ul.characters {
  display: block;
  position: relative;
  width: 780px;
  height: 360px;
}
#contents article.character section .details ul.characters > li {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 780px;
  height: 360px;
  background-repeat: no-repeat;
  background-position: left top;
}
#contents article.character section .details ul.characters > li.ace {
  background-image: url(../images/character-details/character_ace_bg.jpg);
}
#contents article.character section .details ul.characters > li.ace .chara-detail {
  background-image: url(../images/character-details/character_ace_detail.png);
}
#contents article.character section .details ul.characters > li.ace .chara-catch {
  background-image: url(../images/character-details/character_ace_pose.png);
}
#contents article.character section .details ul.characters > li.queen {
  background-image: url(../images/character-details/character_queen_bg.jpg);
}
#contents article.character section .details ul.characters > li.queen .chara-detail {
  background-image: url(../images/character-details/character_queen_detail.png);
}
#contents article.character section .details ul.characters > li.queen .chara-catch {
  background-image: url(../images/character-details/character_queen_pose.png);
}
#contents article.character section .details ul.characters > li.nine {
  background-image: url(../images/character-details/character_nine_bg.jpg);
}
#contents article.character section .details ul.characters > li.nine .chara-detail {
  background-image: url(../images/character-details/character_nine_detail.png);
}
#contents article.character section .details ul.characters > li.nine .chara-catch {
  background-image: url(../images/character-details/character_nine_pose.png);
}
#contents article.character section .details ul.characters > li.machina {
  background-image: url(../images/character-details/character_machina_bg.jpg);
}
#contents article.character section .details ul.characters > li.machina .chara-detail {
  background-image: url(../images/character-details/character_machina_detail.png);
}
#contents article.character section .details ul.characters > li.machina .chara-catch {
  background-image: url(../images/character-details/character_machina_pose.png);
}
#contents article.character section .details ul.characters > li.rem {
  background-image: url(../images/character-details/character_rem_bg.jpg);
}
#contents article.character section .details ul.characters > li.rem .chara-detail {
  background-image: url(../images/character-details/character_rem_detail.png);
}
#contents article.character section .details ul.characters > li.rem .chara-catch {
  background-image: url(../images/character-details/character_rem_pose.png);
}
#contents article.character section .details ul.characters > li.eight {
  background-image: url(../images/character-details/character_eight_bg.jpg);
}
#contents article.character section .details ul.characters > li.eight .chara-detail {
  background-image: url(../images/character-details/character_eight_detail.png);
}
#contents article.character section .details ul.characters > li.eight .chara-catch {
  background-image: url(../images/character-details/character_eight_pose.png);
}
#contents article.character section .details ul.characters > li.king {
  background-image: url(../images/character-details/character_king_bg.jpg);
}
#contents article.character section .details ul.characters > li.king .chara-detail {
  background-image: url(../images/character-details/character_king_detail.png);
}
#contents article.character section .details ul.characters > li.king .chara-catch {
  background-image: url(../images/character-details/character_king_pose.png);
}
#contents article.character section .details ul.characters > li.sice {
  background-image: url(../images/character-details/character_sice_bg.jpg);
}
#contents article.character section .details ul.characters > li.sice .chara-detail {
  background-image: url(../images/character-details/character_sice_detail.png);
}
#contents article.character section .details ul.characters > li.sice .chara-catch {
  background-image: url(../images/character-details/character_sice_pose.png);
}
#contents article.character section .details ul.characters > li.cater {
  background-image: url(../images/character-details/character_cater_bg.jpg);
}
#contents article.character section .details ul.characters > li.cater .chara-detail {
  background-image: url(../images/character-details/character_cater_detail.png);
}
#contents article.character section .details ul.characters > li.cater .chara-catch {
  background-image: url(../images/character-details/character_cater_pose.png);
}
#contents article.character section .details ul.characters > li.jack {
  background-image: url(../images/character-details/character_jack_bg.jpg);
}
#contents article.character section .details ul.characters > li.jack .chara-detail {
  background-image: url(../images/character-details/character_jack_detail.png);
}
#contents article.character section .details ul.characters > li.jack .chara-catch {
  background-image: url(../images/character-details/character_jack_pose.png);
}
#contents article.character section .details ul.characters > li.cinque {
  background-image: url(../images/character-details/character_cinque_bg.jpg);
}
#contents article.character section .details ul.characters > li.cinque .chara-detail {
  background-image: url(../images/character-details/character_cinque_detail.png);
}
#contents article.character section .details ul.characters > li.cinque .chara-catch {
  background-image: url(../images/character-details/character_cinque_pose.png);
}
#contents article.character section .details ul.characters > li.seven {
  background-image: url(../images/character-details/character_seven_bg.jpg);
}
#contents article.character section .details ul.characters > li.seven .chara-detail {
  background-image: url(../images/character-details/character_seven_detail.png);
}
#contents article.character section .details ul.characters > li.seven .chara-catch {
  background-image: url(../images/character-details/character_seven_pose.png);
}
#contents article.character section .details ul.characters > li.deuce {
  background-image: url(../images/character-details/character_deuce_bg.jpg);
}
#contents article.character section .details ul.characters > li.deuce .chara-detail {
  background-image: url(../images/character-details/character_deuce_detail.png);
}
#contents article.character section .details ul.characters > li.deuce .chara-catch {
  background-image: url(../images/character-details/character_deuce_pose.png);
}
#contents article.character section .details ul.characters > li.trey {
  background-image: url(../images/character-details/character_trey_bg.jpg);
}
#contents article.character section .details ul.characters > li.trey .chara-detail {
  background-image: url(../images/character-details/character_trey_detail.png);
}
#contents article.character section .details ul.characters > li.trey .chara-catch {
  background-image: url(../images/character-details/character_trey_pose.png);
}
#contents article.character section .details ul.characters > li .frame {
  display: block;
  position: absolute;
  width: 780px;
  height: 360px;
  top: 0;
  left: 0;
  background-repeat: repeat;
  background-position: left top;
  background-image: url(../images/character/character-detail_frame-fg.png);
}
#contents article.character section .details ul.characters > li .frame:after {
  content: '';
  display: block;
  position: absolute;
  width: 780px;
  height: 360px;
  top: 0;
  left: 0;
  z-index: 0;
  background-position: left top;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(../images/character/character-detail_frame.png);
}
#contents article.character section .details ul.characters > li .chara-catch {
  width: 350px;
  height: 531px;
  position: absolute;
  left: -48px;
  top: -67px;
  background-position: left top;
  background-repeat: no-repeat;
  z-index: 1;
}
#contents article.character section .details ul.characters > li .chara-detail {
  position: absolute;
  width: 780px;
  height: 360px;
  background-position: right top;
  background-repeat: no-repeat;
  z-index: 1;
}
#contents article.character section .details ul.characters > li .previews {
  display: block;
  position: absolute;
  top: 234px;
  left: 231px;
  z-index: 1;
}
#contents article.character section .details ul.characters > li .previews li {
  display: block;
  width: 160px;
  height: 90px;
  position: relative;
  float: left;
  background-color: black;
  -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
}
#contents article.character section .details ul.characters > li .previews li a {
  width: 160px;
  height: 90px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
#contents article.character section .details ul.characters > li .previews li a:after {
  content: '';
  display: block;
  width: 160px;
  height: 90px;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: left top;
}
#contents article.character section .details ul.characters > li .previews li + li {
  margin-left: 10px;
}
#contents article.character section .details ul.characters > li .previews .thumb > a:after {
  background-image: url(../images/character/character-detail_frame-image.png);
}
#contents article.character section .details ul.characters > li .previews .movie > a:after {
  background-image: url(../images/character/character-detail_frame-movie.png);
}
#contents article.character section .details ul.characters > li .previews .movie.soon {
  background-image: url(../images/character/character-detail_frame-movie_coming-soon.jpg);
}
#contents article.character section .details ul.characters > li .previews:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  clear: both;
}
#contents article.character section .details ul.characters li.active {
  display: block;
}
#contents article.character section .details ul.characters li:not(.active) {
  display: none;
}
#contents article.character section .details navi {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  margin-top: -360px;
  z-index: 2;
}
#contents article.character section .details navi a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#contents article.character section .details navi .prev {
  width: 43px;
  height: 63px;
  margin-left: -55px;
  margin-top: 147px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(../images/character/character-detail_btn-prev.png);
}
#contents article.character section .details navi .next {
  width: 44px;
  height: 63px;
  margin-left: 792px;
  margin-top: 147px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(../images/character/character-detail_btn-next.png);
}
#contents article.character section .details navi .back {
  width: 205px;
  height: 51px;
  left: 50%;
  top: 398px;
  margin-left: -102px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(../images/character/character-detail_btn-back.png);
}
#contents article.character section .details navi .back:after {
  content: '';
  display: block;
  width: 205px;
  height: 51px;
  left: 0;
  top: 0;
  z-index: 3;
  position: absolute;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url(../images/character/character-detail_btn-back_on.png);
  opacity: 0;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.character section .details navi .back:hover:after {
  opacity: 1;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.screen_shot section {
  position: absolute;
  margin: auto;
  width: 780px;
  height: 680px;
  left: 239px;
  right: 0;
  top: 0;
  bottom: 0;
}
#contents article.screen_shot section h2 {
  margin: 25px auto 0;
  text-align: center;
}
#contents article.screen_shot section .images {
  margin-top: 50px;
}
#contents article.screen_shot section .images .pages {
  position: absolute;
}
#contents article.screen_shot section .images .pages ul {
  display: table;
  border-spacing: 22px 16px;
}
#contents article.screen_shot section .images .pages ul li {
  display: table-cell;
  min-width: 160px;
  vertical-align: middle;
  text-align: center;
}
#contents article.screen_shot section .images .pages ul li a {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0);
  -webkit-transition: background-color 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: background-color 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: background-color 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: background-color 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: background-color 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#contents article.screen_shot section .images .pages ul li a img.thumb {
  vertical-align: middle;
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#contents article.screen_shot section .images .pages ul li a:after {
  display: inline-block;
  content: '\A';
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  background-repeat: no-repeat;
  background-position: left top;
}
#contents article.screen_shot section .images .pages ul li a img.icon-new {
  display: block;
  position: absolute;
  top: -9px;
  left: -3px;
  z-index: 5;
}
#contents article.screen_shot section .images .pages ul li a:hover {
  background-color: white;
  -webkit-transition: background-color 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: background-color 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: background-color 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: background-color 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background-color 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.screen_shot section .images .pages ul li a:hover img {
  opacity: 0.8;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.screen_shot section .images .pages ul li.portrait > a:after {
  height: 160px;
  background-image: url(../images/screen_shot/thumb-frame-portrait.png);
}
#contents article.screen_shot section .images .pages ul li.landscape > a:after {
  height: 89px;
  background-image: url(../images/screen_shot/thumb-frame-landscape.png);
}
#contents article.screen_shot section .page-index {
  visibility: hidden;
  opacity: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 40px;
  height: 26px;
  text-align: center;
  font-size: 0;
}
#contents article.screen_shot section .page-index a,
#contents article.screen_shot section .page-index span {
  width: 26px;
  height: 26px;
  overflow: hidden;
  text-indent: -999em;
  background-image: url(../images/screen_shot/page-index_sprite.png);
  background-position: left top;
  background-repeat: no-repeat;
}
#contents article.screen_shot section .page-index a {
  display: inline-block;
  font-size: 0;
  background-position: left top;
}
#contents article.screen_shot section .page-index a span {
  display: block;
  background-position: -26px top;
}
#contents article.screen_shot section .page-index a:hover, #contents article.screen_shot section .page-index a.active {
  background-position: left bottom;
}
#contents article.screen_shot section .page-index a:hover span, #contents article.screen_shot section .page-index a.active span {
  display: block;
  background-position: -26px bottom;
}
#contents article.screen_shot section .page-index a:active {
  top: 1px;
}
#contents article.screen_shot section .page-index a + a {
  margin-left: 11px;
}
#contents article.movie section {
  position: absolute;
  margin: auto;
  width: 100%;
  height: 680px;
  left: 239px;
  right: 0;
  top: 0;
  bottom: 0;
}
#contents article.movie section h2 {
  text-align: center;
  margin-right: 239px;
}
#contents article.movie section ul.pages {
  width: 800px;
  height: 100%;
  left: 50%;
  margin: 0 0 0 -500px;
  position: absolute;
  padding: 10px 0 0;
  text-align: left;
  font-size: 1px;
}
#contents article.movie section ul.pages li {
  display: inline-block;
  width: 240px;
  height: 130px;
  margin: 28px 10px 0;
  -webkit-box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.5);
}
#contents article.movie section ul.pages li a {
  display: block;
  width: 240px;
  height: 130px;
  overflow: hidden;
  backgroung-color: black;
}
#contents article.movie section ul.pages li a .thumb,
#contents article.movie section ul.pages li a .frame,
#contents article.movie section ul.pages li a .button {
  position: absolute;
  display: block;
}
#contents article.movie section ul.pages li a .thumb {
  opacity: 1;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.movie section ul.pages li a .button {
  left: 50%;
  top: 50%;
  margin: -25px 0 0 -37px;
  opacity: 1;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.movie section ul.pages li a:hover .thumb,
#contents article.movie section ul.pages li a:active .thumb {
  opacity: 0.6;
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.movie section ul.pages li a:hover .button,
#contents article.movie section ul.pages li a:active .button {
  opacity: 0.7;
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.movie section ul.pages li h3 {
  position: absolute;
  width: 235px;
  height: 51px;
  bottom: -17px;
  left: 3px;
  background-repeat: no-repeat;
  background-image: url(../images/movie/item_h3_bg.png);
  text-align: center;
}
#contents article.movie section ul.pages li h3 img.button {
  position: absolute;
  top: 14px;
  left: 31px;
}
#contents article.movie section ul.pages li h3.new:after {
  display: block;
  content: '';
  position: absolute;
  width: 43px;
  height: 22px;
  top: -3px;
  left: 20px;
  background-repeat: no-repeat;
  background-image: url(../images/movie/button_sign-new.png);
}
#contents article.movie section ul.pages:not(.first) {
  display: none;
}
#contents article.movie section ul.pages:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  clear: both;
}
#contents article.movie section ul.indexes {
  right: 239px;
  left: 0;
  bottom: 60px;
  height: 26px;
  text-align: center;
  position: absolute;
  font-size: 0;
}
#contents article.movie section ul.indexes a,
#contents article.movie section ul.indexes span {
  width: 26px;
  height: 26px;
  overflow: hidden;
  text-indent: -999em;
  background-image: url(../images/screen_shot/page-index_sprite.png);
  background-position: left top;
  background-repeat: no-repeat;
}
#contents article.movie section ul.indexes a {
  display: inline-block;
  font-size: 0;
  background-position: left top;
}
#contents article.movie section ul.indexes a span {
  display: block;
  background-position: -26px top;
}
#contents article.movie section ul.indexes a:hover, #contents article.movie section ul.indexes a.active {
  background-position: left bottom;
}
#contents article.movie section ul.indexes a:hover span, #contents article.movie section ul.indexes a.active span {
  display: block;
  background-position: -26px bottom;
}
#contents article.movie section ul.indexes a:active {
  top: 1px;
}
#contents article.movie section ul.indexes a + a {
  margin-left: 11px;
}
#contents article.soundtrack section.detail {
  position: absolute;
  left: 254px;
  top: 6px;
  width: 770px;
  height: 655px;
  background-image: url(../images/soundtrack/repeat-bg.png);
}
#contents article.soundtrack section.detail img {
  vertical-align: bottom;
}
#contents article.soundtrack section.detail h2 {
  margin: 0;
}
#contents article.soundtrack section.detail h2 img {
  margin: 43px 0 0 -6px;
}
#contents article.soundtrack section.detail a {
  opacity: 1;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.soundtrack section.detail a:hover, #contents article.soundtrack section.detail a:active {
  opacity: 0.75;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.soundtrack section.detail .thumb {
  display: inline-block;
  background-color: white;
}
#contents article.soundtrack section.detail .thumb img {
  margin: 0;
  padding: 0;
  opacity: 1;
  -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
}
#contents article.soundtrack section.detail .package.thumb {
  position: absolute;
  top: 52px;
  right: 45px;
  width: 142px;
  height: 195px;
  background-image: url(../images/soundtrack/thumb_package.jpg);
  background-repeat: no-repeat;
  background-position: left top;
  background-color: transparent;
}
#contents article.soundtrack section.detail .wrapper {
  margin: 0;
  padding: 0 40px;
  width: 770px;
  height: 655px;
  font-size: 12px;
  border-top: 1px solid transparent;
  background-repeat: no-repeat;
  background-image: url(../images/soundtrack/frame.png);
  background-position: 8px 11px;
}
#contents article.soundtrack section.detail .wrapper h3, #contents article.soundtrack section.detail .wrapper p {
  color: transparent;
  line-height: 1.5em;
}
#contents article.soundtrack section.detail .wrapper h3 {
  margin-top: 3px;
  margin-left: 2px;
  width: 525px;
  height: 120px;
  background-repeat: no-repeat;
  background-image: url(../images/soundtrack/str_overview.png);
}
#contents article.soundtrack section.detail .wrapper .hr {
  margin: 0 0 0 -18px;
}
#contents article.soundtrack section.detail .wrapper .detail {
  margin-top: 0px;
  margin-left: 5px;
}
#contents article.soundtrack section.detail .wrapper .detail .text {
  width: 420px;
  height: 258px;
  background-image: url(../images/soundtrack/str_detail.png);
  background-repeat: no-repeat;
  background-position: left top;
  float: left;
}
#contents article.soundtrack section.detail .wrapper .detail:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  clear: both;
}
#contents article.soundtrack section.detail .wrapper .movie {
  display: block;
  position: absolute;
  width: 230px;
  height: 130px;
  color: transparent;
  text-indent: -999em;
  background-position: left top;
  background-repeat: no-repeat;
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
}
#contents article.soundtrack section.detail .wrapper .movie img {
  display: inline-block;
}
#contents article.soundtrack section.detail .wrapper .movie.pv01 {
  right: 52px;
  bottom: 198px;
  background-image: url(../images/soundtrack/btn_thumb-pv01.jpg);
}
#contents article.soundtrack section.detail .wrapper .movie.pv02 {
  right: 52px;
  bottom: 48px;
  background-image: url(../images/soundtrack/btn_thumb-pv02.jpg);
}
#contents article.soundtrack section.detail .wrapper .movie:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  background-repeat: no-repeat;
  background-image: url(../images/soundtrack/btn_frame-movie.png);
  background-position: left top;
  background-color: transparent;
}
#contents article.soundtrack section.detail .wrapper .movie:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -16px;
  left: -2px;
  width: 235px;
  height: 51px;
  margin: auto;
  background-repeat: no-repeat;
  background-position: left top;
  background-color: transparent;
}
#contents article.soundtrack section.detail .wrapper .movie.pv01:after {
  background-image: url(../images/soundtrack/btn_label-pv01.png);
}
#contents article.soundtrack section.detail .wrapper .movie.pv02:after {
  background-image: url(../images/soundtrack/btn_label-pv02.png);
}
#contents article.soundtrack section.detail .wrapper .movie.pv01.new:after {
  background-image: url(../images/movie/button_sign-new.png), url(../images/soundtrack/btn_label-pv01.png);
  background-position: 20px 0px,-3px top;
}
#contents article.soundtrack section.detail .wrapper .movie.pv02.new:after {
  background-image: url(../images/movie/button_sign-new.png), url(../images/soundtrack/btn_label-pv02.png);
  background-position: 20px 0px,-3px top;
}
#contents article.soundtrack section.detail .wrapper .movie.new:after {
  background-repeat: no-repeat;
  background-color: transparent;
}
#contents article.soundtrack section.detail .wrapper .notes {
  margin-left: 3px;
  width: 414px;
  height: 14px;
  color: transparent;
  background-image: url(../images/soundtrack/str_note.png);
  background-repeat: no-repeat;
}
#contents article.soundtrack section.detail .wrapper a.order,
#contents article.soundtrack section.detail .wrapper a.composer-site {
  display: block;
  padding: 10px 46px;
  margin: 7px 0 8px -5px;
  width: 363px;
  height: 36px;
  color: transparent;
}
#contents article.soundtrack section.detail .wrapper a.composer-site {
  background-image: url(../images/soundtrack/btn_composer-site.png);
  background-repeat: no-repeat;
}
#contents article.soundtrack section.detail .wrapper a.order {
  background-image: url(../images/soundtrack/btn_order.png);
  background-repeat: no-repeat;
}
#contents article.overview section {
  position: absolute;
  margin: auto;
  width: 788px;
  height: 680px;
  left: 239px;
  right: 0;
  top: 0;
  bottom: 0;
}
#contents article.overview section h2 {
  margin: 5px auto 0;
  text-align: center;
}
#contents article.overview section .navi {
  display: block;
  margin: 20px auto 0;
  height: 51px;
  text-align: center;
}
#contents article.overview section .navi a {
  display: inline-block;
  margin: 0 -11px 0;
  width: 205px;
  height: 51px;
  line-height: 51px;
  color: transparent;
  background-image: url(../images/overview/navi-btn.png);
}
#contents article.overview section .navi a.new {
  background-image: url(../images/common/menu-icon-new.png), url(../images/overview/navi-btn.png);
  background-position: 18px 0, 0 0;
  background-repeat: no-repeat, no-repeat;
}
#contents article.overview section .navi a.new:before {
  background-image: url(../images/common/menu-icon-new.png), url(../images/overview/navi-btn_on.png);
  background-position: 18px 0, 0 0;
  background-repeat: no-repeat, no-repeat;
}
#contents article.overview section .navi a:before {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 205px;
  height: 51px;
  opacity: 0;
  background-image: url(../images/overview/navi-btn_on.png);
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .navi a:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 205px;
  height: 51px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-transition: background 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: background 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: background 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: background 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .navi a.graphics:after {
  background-image: url(../images/overview/navi_label_graphics.png);
}
#contents article.overview section .navi a.tuning:after {
  background-image: url(../images/overview/navi_label_tuning.png);
}
#contents article.overview section .navi a.music-voice:after {
  background-image: url(../images/overview/navi_label_music-voice.png);
}
#contents article.overview section .navi a.select:before, #contents article.overview section .navi a:hover:before, #contents article.overview section .navi a:active:before {
  opacity: 1;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .navi a.select.after, #contents article.overview section .navi a:hover.after, #contents article.overview section .navi a:active.after {
  -webkit-transition: background 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: background 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: background 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: background 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .navi a.select.graphics:after, #contents article.overview section .navi a:hover.graphics:after, #contents article.overview section .navi a:active.graphics:after {
  background-image: url(../images/overview/navi_label_graphics_on.png);
}
#contents article.overview section .navi a.select.tuning:after, #contents article.overview section .navi a:hover.tuning:after, #contents article.overview section .navi a:active.tuning:after {
  background-image: url(../images/overview/navi_label_tuning_on.png);
}
#contents article.overview section .navi a.select.music-voice:after, #contents article.overview section .navi a:hover.music-voice:after, #contents article.overview section .navi a:active.music-voice:after {
  background-image: url(../images/overview/navi_label_music-voice_on.png);
}
#contents article.overview section .navi a.select {
  cursor: default;
}
#contents article.overview section .buttons {
  width: 788px;
  height: 468px;
  position: absolute;
}
#contents article.overview section .buttons .next,
#contents article.overview section .buttons .prev {
  display: block;
  width: 55px;
  height: 74px;
  position: absolute;
  top: 50%;
  margin-top: -37px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
#contents article.overview section .buttons .next:after,
#contents article.overview section .buttons .prev:after {
  content: '';
  display: block;
  position: absolute;
  width: 55px;
  height: 74px;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .buttons .next:hover:after, #contents article.overview section .buttons .next:active:after,
#contents article.overview section .buttons .prev:hover:after,
#contents article.overview section .buttons .prev:active:after {
  opacity: 1;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .buttons .next {
  right: -55px;
  background-image: url(../images/overview/arrow-next.png);
}
#contents article.overview section .buttons .next:after {
  background-image: url(../images/overview/arrow-next_on.png);
}
#contents article.overview section .buttons .prev {
  left: -55px;
  background-image: url(../images/overview/arrow-prev.png);
}
#contents article.overview section .buttons .prev:after {
  background-image: url(../images/overview/arrow-prev_on.png);
}
#contents article.overview section .pages {
  width: 788px;
  height: 468px;
  top: 0;
  left: 0;
}
#contents article.overview section .pages .item {
  width: inherit;
  height: inherit;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background-image: url(../images/overview/frame.png), url(../images/overview/repeat-bg.png);
  background-repeat: no-repeat, repeat;
  background-position: 50% 50%, 0 0;
}
#contents article.overview section .pages .item.select {
  z-index: 10;
  opacity: 1;
}
#contents article.overview section .pages .item h3,
#contents article.overview section .pages .item p,
#contents article.overview section .pages .item a {
  color: transparent;
}
#contents article.overview section .pages > .graphics h3 {
  margin: 36px 36px 0;
  width: 202px;
  height: 44px;
  background-image: url(../images/overview/h3_graphics.png);
  background-repeat: no-repeat;
}
#contents article.overview section .pages > .graphics p {
  margin: 9px auto 0;
  width: 696px;
  height: 66px;
  background-image: url(../images/overview/graphics_p.png);
  background-repeat: no-repeat;
}
#contents article.overview section .pages > .graphics ul {
  display: block;
  width: 700px;
  margin: 18px auto 0;
}
#contents article.overview section .pages > .graphics ul li {
  display: block;
  float: left;
}
#contents article.overview section .pages > .graphics ul li.sample1, #contents article.overview section .pages > .graphics ul li.sample2 {
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
  -ms-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
  -o-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
}
#contents article.overview section .pages > .graphics ul li.sample1 span, #contents article.overview section .pages > .graphics ul li.sample2 span {
  cursor: pointer;
  display: inline-block;
  z-index: 0;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .graphics ul li.sample1 span:hover, #contents article.overview section .pages > .graphics ul li.sample1 span:active, #contents article.overview section .pages > .graphics ul li.sample2 span:hover, #contents article.overview section .pages > .graphics ul li.sample2 span:active {
  z-index: 1;
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .graphics ul li.sample1 .psp {
  margin: 0;
  width: 203px;
  height: 119px;
  background-image: url(../images/overview/graphics_sample-1_left.png);
  background-repeat: no-repeat;
}
#contents article.overview section .pages > .graphics ul li.sample1 .hd {
  margin: 1px 0 0 -60px;
  width: 200px;
  height: 118px;
  background-image: url(../images/overview/graphics_sample-1_right.png);
  background-repeat: no-repeat;
}
#contents article.overview section .pages > .graphics ul li.sample2 .psp {
  margin: 0;
  width: 203px;
  height: 119px;
  background-image: url(../images/overview/graphics_sample-2_left.png);
  background-repeat: no-repeat;
}
#contents article.overview section .pages > .graphics ul li.sample2 .hd {
  margin: 1px 0 0 -62px;
  width: 200px;
  height: 118px;
  background-image: url(../images/overview/graphics_sample-2_right.png);
  background-repeat: no-repeat;
}
#contents article.overview section .pages > .graphics ul li + li {
  margin-left: 15px;
}
#contents article.overview section .pages > .graphics ul:after {
  display: block;
  content: ' ';
  height: 0;
  clear: both;
}
#contents article.overview section .pages > .graphics a.movie {
  display: block;
  margin: 23px auto 0;
  width: 700px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: transparent;
  background-image: url(../images/overview/graphics_movie-bg-1.jpg);
  background-repeat: no-repeat;
  background-color: transparent;
  -webkit-box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0);
  -moz-box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0);
  -ms-box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0);
  -o-box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0);
  box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .graphics a.movie:hover, #contents article.overview section .pages > .graphics a.movie:active {
  opacity: 0.85;
  -webkit-box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.3);
  -moz-box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.3);
  -ms-box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.3);
  -o-box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.3);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .graphics a.movie:before {
  content: '';
  display: block;
  width: 700px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/overview/graphics_movie-btn.png);
  background-repeat: no-repeat;
}
#contents article.overview section .pages > .graphics a.movie:after {
  content: '';
  display: block;
  width: 415px;
  height: 51px;
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -207.5px;
  background-image: url(../images/overview/graphics_movie-label-1.png);
  background-repeat: no-repeat;
}
#contents article.overview section .pages > .graphics .previews {
  display: none;
  opacity: 0;
  position: absolute;
  top: -60px;
  left: -80px;
  right: -80px;
  bottom: -40px;
  z-index: 20;
  background-color: rgba(0, 0, 0, 0.75);
  background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
}
#contents article.overview section .pages > .graphics .previews .samples {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: double 3px #5e501e;
  background-color: rgba(0, 0, 0, 0.2);
}
#contents article.overview section .pages > .graphics .previews .samples .psp,
#contents article.overview section .pages > .graphics .previews .samples .hd {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 720px;
  height: 405px;
  -webkit-box-shadow: 0 0 20px 5px rgba(143, 144, 117, 0.21);
  -moz-box-shadow: 0 0 20px 5px rgba(143, 144, 117, 0.21);
  -ms-box-shadow: 0 0 20px 5px rgba(143, 144, 117, 0.21);
  -o-box-shadow: 0 0 20px 5px rgba(143, 144, 117, 0.21);
  box-shadow: 0 0 20px 5px rgba(143, 144, 117, 0.21);
}
#contents article.overview section .pages > .graphics .previews .samples.case1 .psp {
  background-image: url(../images/overview/1_psp.jpg);
}
#contents article.overview section .pages > .graphics .previews .samples.case1 .hd {
  background-image: url(../images/overview/1_hd.jpg);
}
#contents article.overview section .pages > .graphics .previews .samples.case2 .psp {
  background-image: url(../images/overview/2_psp.jpg);
}
#contents article.overview section .pages > .graphics .previews .samples.case2 .hd {
  background-image: url(../images/overview/2_hd.jpg);
}
#contents article.overview section .pages > .graphics .previews .switcher {
  width: 300px;
  height: 36px;
  text-align: center;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -150px;
}
#contents article.overview section .pages > .graphics .previews .switcher a {
  display: inline-block;
  width: 129px;
  height: 36px;
  opacity: 0.7;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .graphics .previews .switcher a.psp {
  background-image: url(../images/overview/btn_psp.png);
}
#contents article.overview section .pages > .graphics .previews .switcher a.hd {
  background-image: url(../images/overview/btn_hd.png);
}
#contents article.overview section .pages > .graphics .previews .switcher a:hover, #contents article.overview section .pages > .graphics .previews .switcher a:active {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .graphics .previews .switcher a.active {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .graphics .previews .close {
  display: block;
  width: 60px;
  height: 60px;
  position: absolute;
  right: 18px;
  top: 30px;
  background-image: url(../images/screen_shot/zoom_button-close.png);
  opacity: 1;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .graphics .previews .close:hover, #contents article.overview section .pages > .graphics .previews .close:active {
  opacity: 0.7;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .tuning h3 {
  margin: 39px 0 0 35px;
  width: 167px;
  height: 45px;
  background-image: url(../images/overview/h3_tuning.png);
  background-repeat: no-repeat;
}
#contents article.overview section .pages > .tuning p {
  margin: 8px auto 0;
  width: 701px;
  height: 66px;
  background-image: url(../images/overview/tuning_p.png);
}
#contents article.overview section .pages > .tuning ul {
  display: block;
  width: 700px;
  margin: 22px auto 0;
}
#contents article.overview section .pages > .tuning ul li:before {
  content: '';
  display: block;
  width: 224px;
  height: 126px;
  top: 0;
  left: 0;
  cursor: pointer;
  position: relative;
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
  -ms-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
  -o-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.4);
  background-repeat: no-repeat;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#contents article.overview section .pages > .tuning ul li {
  display: block;
  width: 220px;
  height: 210px;
  float: left;
  background-repeat: no-repeat;
  background-position: 50% 141px;
}
#contents article.overview section .pages > .tuning ul li.feature-1 {
  background-image: url(../images/overview/tuning_text-1.png);
}
#contents article.overview section .pages > .tuning ul li.feature-1:before {
  background-image: url(../images/overview/tuning_thumb-1.jpg);
}
#contents article.overview section .pages > .tuning ul li.feature-2 {
  background-image: url(../images/overview/tuning_text-2.png);
}
#contents article.overview section .pages > .tuning ul li.feature-2:before {
  background-image: url(../images/overview/tuning_thumb-2.jpg);
}
#contents article.overview section .pages > .tuning ul li.feature-3 {
  background-image: url(../images/overview/tuning_text-3.png);
}
#contents article.overview section .pages > .tuning ul li.feature-3:before {
  background-image: url(../images/overview/tuning_thumb-3.jpg);
}
#contents article.overview section .pages > .tuning ul li:hover:before, #contents article.overview section .pages > .tuning ul li:active:before {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: all 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#contents article.overview section .pages > .tuning ul li + li {
  margin-left: 17px;
}
#contents article.overview section .pages > .tuning ul:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
}
#contents article.overview section .pages > .tuning .previews {
  display: none;
  opacity: 0;
  position: absolute;
  top: -60px;
  left: -80px;
  right: -80px;
  bottom: -40px;
  z-index: 20;
  background-color: rgba(0, 0, 0, 0.75);
  background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
}
#contents article.overview section .pages > .tuning .previews .samples {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: double 3px #5e501e;
  background-color: rgba(0, 0, 0, 0.2);
}
#contents article.overview section .pages > .tuning .previews .samples .image {
  width: 720px;
  height: 405px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
  margin: auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-box-shadow: 0 0 100px 20px rgba(143, 144, 117, 0.3);
  -moz-box-shadow: 0 0 100px 20px rgba(143, 144, 117, 0.3);
  -ms-box-shadow: 0 0 100px 20px rgba(143, 144, 117, 0.3);
  -o-box-shadow: 0 0 100px 20px rgba(143, 144, 117, 0.3);
  box-shadow: 0 0 100px 20px rgba(143, 144, 117, 0.3);
}
#contents article.overview section .pages > .tuning .previews .samples.feature-1 > .image {
  background-image: url(../images/overview/feature_image-1.jpg);
}
#contents article.overview section .pages > .tuning .previews .samples.feature-2 > .image {
  background-image: url(../images/overview/feature_image-2.jpg);
}
#contents article.overview section .pages > .tuning .previews .samples.feature-3 > .image {
  background-image: url(../images/overview/feature_image-3.jpg);
}
#contents article.overview section .pages > .tuning .previews .switcher {
  width: 300px;
  height: 36px;
  text-align: center;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -150px;
}
#contents article.overview section .pages > .tuning .previews .switcher a {
  display: inline-block;
  width: 129px;
  height: 36px;
  opacity: 0.7;
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .tuning .previews .switcher a.psp {
  background-image: url(../images/overview/btn_psp.png);
}
#contents article.overview section .pages > .tuning .previews .switcher a.hd {
  background-image: url(../images/overview/btn_hd.png);
}
#contents article.overview section .pages > .tuning .previews .switcher a:hover, #contents article.overview section .pages > .tuning .previews .switcher a:active {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .tuning .previews .switcher a.active {
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .tuning .previews .close {
  display: block;
  width: 60px;
  height: 60px;
  position: absolute;
  right: 18px;
  top: 30px;
  background-image: url(../images/screen_shot/zoom_button-close.png);
  opacity: 1;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .tuning .previews .close:hover, #contents article.overview section .pages > .tuning .previews .close:active {
  opacity: 0.7;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .music-voice > h3 {
  margin: 34px 0 0 32px;
  width: 287px;
  height: 50px;
  background-image: url(../images/overview/h3_music-voice.png);
  background-repeat: no-repeat;
}
#contents article.overview section .pages > .music-voice p {
  margin: 5px 0 0 38px;
  width: 702px;
  height: 66px;
  background-image: url(../images/overview/music-voice_p.png);
}
#contents article.overview section .pages > .music-voice > h4 {
  margin: 10px 0 0 34px;
  width: 315px;
  height: 39px;
  background-image: url(../images/overview/h4_music-voice.png);
  background-repeat: no-repeat;
}
#contents article.overview section .pages > .music-voice ul {
  width: 724px;
  margin: 1px 0 0 32px;
  font-size: 0;
}
#contents article.overview section .pages > .music-voice ul li {
  font-size: 1rem;
  margin: 0 2px 6px;
  display: inline-block;
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
#contents article.overview section .pages > .music-voice ul li a.movie {
  width: 139px;
  height: 69px;
  display: block;
  background-color: transparent;
}
#contents article.overview section .pages > .music-voice ul li a.movie .thumb {
  opacity: 1;
  position: absolute;
  left: 4px;
  top: 4px;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview section .pages > .music-voice ul li a.movie .frame {
  position: absolute;
}
#contents article.overview section .pages > .music-voice ul li.new:after {
  display: block;
  content: '';
  position: absolute;
  top: -5px;
  left: 0;
  width: 44px;
  height: 22px;
  background-image: url(../images/common/menu-icon-new.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}
#contents article.overview section .pages > .music-voice ul li h3 {
  margin: -27px 0 0 -4px;
  width: 139px;
  height: 41px;
  pointer-events: none;
  background-image: url(../images/overview/music-voice_btn-label-bg.png);
  background-repeat: no-repeat;
}
#contents article.overview section .pages > .music-voice ul li h3 .label {
  position: absolute;
  top: 13px;
  left: 14px;
}
#contents article.overview section .pages > .music-voice ul li:hover, #contents article.overview section .pages > .music-voice ul li:active {
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}
#contents article.overview section .pages > .music-voice ul li:hover a > .thumb, #contents article.overview section .pages > .music-voice ul li:active a > .thumb {
  opacity: 0.7;
  -webkit-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.overview #movie-player {
  display: none;
  position: fixed;
  top: 0;
  left: 239px;
  right: 0;
  bottom: 0;
  z-index: 20;
  background-color: rgba(0, 0, 0, 0.75);
}
#contents article.overview #movie-player iframe {
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  bottom: 30px;
  right: 0;
  border: 4px double #867334;
  padding: 2px;
  width: 644px;
  height: 364px;
}
#contents article.overview #movie-player .button-close {
  border: none;
  margin: 0;
  padding: 0;
  outline: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 50%;
  margin: -259px -384px 0 0;
  width: 62px;
  height: 62px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-image: url(../images/screen_shot/zoom_button-close.png);
}
#contents article.wallpaper section {
  position: absolute;
  margin: auto;
  width: 100%;
  height: 680px;
  left: 239px;
  right: 0;
  top: 0;
  bottom: 0;
}
#contents article.wallpaper section h2 {
  text-align: center;
  margin-right: 239px;
}
#contents article.wallpaper section ul {
  width: 394px;
  height: 417px;
  left: 0;
  right: 240px;
  bottom: 0;
  top: 0;
  margin: auto;
  position: absolute;
  padding: 0;
  text-align: left;
  font-size: 1px;
}
#contents article.wallpaper section ul li {
  display: block;
  position: absolute;
  margin: auto;
  -webkit-box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 10px 4px rgba(0, 0, 0, 0.5);
}
#contents article.wallpaper section ul li.pc {
  width: 320px;
  height: 180px;
  top: 0;
  right: 0;
  left: 0;
}
#contents article.wallpaper section ul li.ios {
  width: 100px;
  height: 180px;
  bottom: 0;
  left: 0;
}
#contents article.wallpaper section ul li.android {
  width: 202px;
  height: 180px;
  bottom: 0;
  right: 0;
}
#contents article.wallpaper section ul li a {
  display: block;
  backgroung-color: black;
}
#contents article.wallpaper section ul li a .thumb,
#contents article.wallpaper section ul li a .button {
  position: absolute;
  display: block;
}
#contents article.wallpaper section ul li a .thumb {
  opacity: 1;
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.wallpaper section ul li a .button {
  left: 50%;
  top: 50%;
  margin: -25px 0 0 -37px;
  opacity: 1;
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.wallpaper section ul li a:hover .thumb,
#contents article.wallpaper section ul li a:active .thumb {
  opacity: 0.6;
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.wallpaper section ul li a:hover .button,
#contents article.wallpaper section ul li a:active .button {
  opacity: 0.7;
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents article.wallpaper section ul li h3 {
  position: absolute;
  width: 185px;
  height: 51px;
  bottom: -17px;
  margin-left: -92.5px;
  left: 50%;
  background-repeat: no-repeat;
  background-image: url(../images/wallpaper/item_h3_bg.png);
  text-align: center;
}
#contents article.wallpaper section ul li h3 img.button {
  position: absolute;
  top: 14px;
  left: 31px;
}
#contents article.wallpaper section ul li h3.new:after {
  display: block;
  content: '';
  position: absolute;
  width: 43px;
  height: 22px;
  top: -3px;
  left: 20px;
  background-repeat: no-repeat;
  background-image: url(../images/movie/button_sign-new.png);
}
#contents .modal-container {
  display: none;
  margin: auto;
  padding: 0;
  z-index: 9999;
}
#contents .modal-container .close {
  display: block;
  position: absolute;
  width: 62px;
  height: 62px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: transparent;
  background-image: url(../images/screen_shot/zoom_button-close.png);
}
#contents .modal-container button {
  border: none;
  background-color: transparent;
  margin: 0;
  padding: 0;
  outline: 0;
  cursor: pointer;
}
#contents #page-modal {
  width: 720px;
  height: 660px;
}
#contents #page-modal iframe {
  position: absolute;
  border: 1px solid #333;
  padding: 0;
  width: 720px;
  height: 660px;
}
#contents #page-modal .close {
  border: none;
  margin: 0;
  padding: 0;
  outline: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 50%;
  margin: -330px -410px 0 0;
}
#contents #image-modal {
  width: 644px;
  height: 364px;
}
#contents #image-modal img {
  border: double 3px #5e501e;
  position: absolute;
  padding: 3px;
  width: 644px;
  height: 364px;
}
#contents #image-modal .close {
  border: none;
  margin: 0;
  padding: 0;
  outline: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 50%;
  margin: -259px -384px 0 0;
}
#contents #movie-modal {
  width: 644px;
  height: 364px;
}
#contents #movie-modal iframe {
  position: absolute;
  border: 4px double #867334;
  padding: 2px;
  width: 644px;
  height: 364px;
}
#contents #movie-modal .close {
  border: none;
  margin: 0;
  padding: 0;
  outline: 0;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 50%;
  margin: -259px -384px 0 0;
}
#contents #preview-modal {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: black;
}
#contents #preview-modal .canvas {
  display: block;
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  background-color: black;
}
#contents #preview-modal .canvas img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
}
#contents #preview-modal .controls {
  position: absolute;
  top: 0;
}
#contents #preview-modal .tools {
  width: 251px;
  height: 48px;
  top: 17px;
  left: 10px;
  padding-top: 3px;
  background-repeat: no-repeat;
  background-image: url(../images/screen_shot/zoom_tool-bg.png);
}
#contents #preview-modal .tools .label {
  display: inline-block;
  margin: 21px 0 0 43px;
}
#contents #preview-modal .tools a.preset {
  font-size: 0;
  display: inline;
  -webkit-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  opacity: 0.5;
}
#contents #preview-modal .tools a.preset img {
  vertical-align: bottom;
}
#contents #preview-modal .tools a.preset.large {
  margin-left: -2px;
}
#contents #preview-modal .tools a.preset.selected {
  opacity: 1;
}
#contents #preview-modal .tools .zoom-buttons {
  display: inline;
  width: 31px;
  height: 31px;
  vertical-align: bottom;
  background-repeat: no-repeat;
}
#contents #preview-modal .tools .zoom-buttons.up {
  background-image: url(../images/screen_shot/zoom_tool-button-up.png);
}
#contents #preview-modal .tools .zoom-buttons.down {
  background-image: url(../images/screen_shot/zoom_tool-button-down.png);
}
#contents #preview-modal .tools button + button {
  margin-left: -5px;
}
#contents #preview-modal button.close {
  top: 20px;
  right: 25px;
  width: 62px;
  height: 62px;
  border: 1px solid transparent;
  background-repeat: no-repeat;
  background-image: url(../images/screen_shot/zoom_button-close.png);
  -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.5);
  -webkit-transition: border 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: border 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: border 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: border 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: border 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents #preview-modal button.close:hover {
  border: 1px solid rgba(255, 255, 255, 0.9);
  -webkit-transition: border 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -moz-transition: border 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -ms-transition: border 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: border 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: border 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#contents #preview-modal .loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 96px;
  height: 8px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-top-left-radius: 5px;
  -moz-border-top-right-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  -moz-border-bottom-left-radius: 5px;
  -ms-border-top-left-radius: 5px;
  -ms-border-top-right-radius: 5px;
  -ms-border-bottom-right-radius: 5px;
  -ms-border-bottom-left-radius: 5px;
  -o-border-top-left-radius: 5px;
  -o-border-top-right-radius: 5px;
  -o-border-bottom-right-radius: 5px;
  -o-border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
#contents #preview-modal .loading .dot {
  float: left;
  width: 8px;
  height: 8px;
  opacity: 0;
  margin: 0 4px;
  background: rgba(108, 0, 5, 0.85);
  -webkit-border-top-left-radius: 50%;
  -webkit-border-top-right-radius: 50%;
  -webkit-border-bottom-right-radius: 50%;
  -webkit-border-bottom-left-radius: 50%;
  -moz-border-top-left-radius: 50%;
  -moz-border-top-right-radius: 50%;
  -moz-border-bottom-right-radius: 50%;
  -moz-border-bottom-left-radius: 50%;
  -ms-border-top-left-radius: 50%;
  -ms-border-top-right-radius: 50%;
  -ms-border-bottom-right-radius: 50%;
  -ms-border-bottom-left-radius: 50%;
  -o-border-top-left-radius: 50%;
  -o-border-top-right-radius: 50%;
  -o-border-bottom-right-radius: 50%;
  -o-border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}
#contents #preview-modal .loading .dot:nth-child(1) {
  -webkit-animation: loading-fade 0.5s infinite 0.05s;
  -moz-animation: loading-fade 0.5s infinite 0.05s;
  -ms-animation: loading-fade 0.5s infinite 0.05s;
  -o-animation: loading-fade 0.5s infinite 0.05s;
  animation: loading-fade 0.5s infinite 0.05s;
}
#contents #preview-modal .loading .dot:nth-child(2) {
  -webkit-animation: loading-fade 0.5s infinite 0.1s;
  -moz-animation: loading-fade 0.5s infinite 0.1s;
  -ms-animation: loading-fade 0.5s infinite 0.1s;
  -o-animation: loading-fade 0.5s infinite 0.1s;
  animation: loading-fade 0.5s infinite 0.1s;
}
#contents #preview-modal .loading .dot:nth-child(3) {
  -webkit-animation: loading-fade 0.5s infinite 0.15s;
  -moz-animation: loading-fade 0.5s infinite 0.15s;
  -ms-animation: loading-fade 0.5s infinite 0.15s;
  -o-animation: loading-fade 0.5s infinite 0.15s;
  animation: loading-fade 0.5s infinite 0.15s;
}
#contents #preview-modal .loading .dot:nth-child(4) {
  -webkit-animation: loading-fade 0.5s infinite 0.2s;
  -moz-animation: loading-fade 0.5s infinite 0.2s;
  -ms-animation: loading-fade 0.5s infinite 0.2s;
  -o-animation: loading-fade 0.5s infinite 0.2s;
  animation: loading-fade 0.5s infinite 0.2s;
}
#contents #preview-modal .loading .dot:nth-child(5) {
  -webkit-animation: loading-fade 0.5s infinite 0.25s;
  -moz-animation: loading-fade 0.5s infinite 0.25s;
  -ms-animation: loading-fade 0.5s infinite 0.25s;
  -o-animation: loading-fade 0.5s infinite 0.25s;
  animation: loading-fade 0.5s infinite 0.25s;
}
#contents #preview-modal .loading .dot:nth-child(6) {
  -webkit-animation: loading-fade 0.5s infinite 0.3s;
  -moz-animation: loading-fade 0.5s infinite 0.3s;
  -ms-animation: loading-fade 0.5s infinite 0.3s;
  -o-animation: loading-fade 0.5s infinite 0.3s;
  animation: loading-fade 0.5s infinite 0.3s;
}
#contents #preview-modal .loading .dot:nth-child(7) {
  -webkit-animation: loading-fade 0.5s infinite 0.35s;
  -moz-animation: loading-fade 0.5s infinite 0.35s;
  -ms-animation: loading-fade 0.5s infinite 0.35s;
  -o-animation: loading-fade 0.5s infinite 0.35s;
  animation: loading-fade 0.5s infinite 0.35s;
}
#contents #lean_overlay {
  position: absolute;
  z-index: 10000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: black;
  display: none;
}

html.no-js #contents #menu {
  left: 0;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-ms-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loading-fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes loading-fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes loading-fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loading-fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}

/*# sourceMappingURL=main.css.map */