@charset "UTF-8";
/* reset
============================================== */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url(https://fonts.googleapis.com/css?family=Dancing+Script:700);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, main, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, main, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* google font api

	font-family: 'Yanone Kaffeesatz';
============================================== */
/* $variable
============================================== */
/* layout
============================================== */
html {
  font-size: 62.5%;
  /* 1rem=10px, 1.1rem=11px ...*/
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #50B1C7 url(./image/background.jpg) no-repeat 0 0;
  text-align: left;
  font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", Osaka, Arial, sans-serif;
  font-size: 13px;
  font-size: 1.3rem;
  line-height: 1.5;
  color: #555555;
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
}

#background {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
}

#background #twitter {
  position: fixed;
  left: 150px;
  top: 720px;
}

#wrapper {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  position: relative;
}

header {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
}

main {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  left: 0;
}

/* page style
============================================== */
body *::-moz-selection {
  background-color: rgba(222, 178, 115, 0.8);
}

a {
  outline: 0;
  text-decoration: none;
}

a:link {
  color: #CC7512;
}

a:visited {
  color: #CC7512;
}

a:active {
  color: #E38314;
  text-decoration: underline;
}

a:hover {
  color: #E38314;
  text-decoration: underline;
}

em {
  font-weight: bold;
}

strong {
  font-weight: bold;
}

h1 {
  background: transparent url(./image/logo.png) no-repeat 0 0;
  width: 438px;
  height: 78px;
  text-indent: -9999px;
  position: absolute;
  top: 20px;
  left: 741px;
}

h2 {
  margin: 0 0 10px;
  font-family: 'Dancing Script', "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", Osaka, Arial, sans-serif cursive;
  font-size: 30px;
  font-size: 3.0rem;
  color: #333333;
}

.box {
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.5);
  min-width: 380px;
  box-shadow: 0px 0px 30px white;
  border-radius: 30px;
  position: absolute;
}

#suwako {
  position: absolute;
  right: -50px;
  bottom: 50px;
  animation: spi 3s linear 1;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* box position
============================================== */
#information {
  top: 150px;
  left: 100px;
}

#tracklist {
  top: 150px;
  left: 590px;
}

#staffcredit {
  top: 450px;
  left: 100px;
}

#player {
  position: absolute;
  top: 850px;
  left: 590px;
}

#shop {
  top: 150px;
  left: 1080px;
}

/* information style
============================================== */
#information td:first-child {
  padding-right: 10px;
  font-weight: bold;
}

/* tracklist style
============================================== */
#tracklist dt {
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
}
#tracklist dd {
  margin-bottom: 15px;
}
#tracklist dd:last-child {
  margin-bottom: 0;
}

/* shop style
============================================== */
/* staffcredit style
============================================== */
#staffcredit {
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8), 0px 0px 5px white;
}

/* link style
============================================== */
/* .ghoul style
============================================== */
body.ghoul {
  background: #000000 none repeat 0 0;
  color: #FFFFFF;
}

body.ghoul #background {
  background: #000000 none repeat 0 0;
}

body.ghoul #background #wing {
  opacity: 1;
}

body.ghoul #background #seiga {
  background: transparent url(./image/seiga.png) no-repeat -400px 0;
}

body.ghoul h1 {
  background: transparent url(./image/title.png) no-repeat 0 -200px;
}

body.ghoul h2 {
  background: transparent url(./image/h2.png) no-repeat 0 0;
}

body.ghoul div.information > h2 {
  background-position: -190px 0;
}

body.ghoul div.event > h2 {
  background-position: -190px -40px;
}

body.ghoul div#tr01 > h2 {
  background-position: -190px -80px;
}

body.ghoul div#tr02 > h2 {
  background-position: -190px -120px;
}

body.ghoul div#tr03 > h2 {
  background-position: -190px -160px;
}

body.ghoul div#tr04 > h2 {
  background-position: -190px -200px;
}

body.ghoul div#tr05 > h2 {
  background-position: -190px -240px;
}

body.ghoul div.shop > h2 {
  background-position: -190px -280px;
}

body.ghoul div.staffcredit > h2 {
  background-position: -190px -320px;
}

body.ghoul div.tile {
  background: transparent url(./image/tile_background_ghoul.png) repeat-x 0 0;
}

/* ■■■■■IE用バグ対策■■■■■ */
br {
  letter-spacing: 0;
}