@charset "UTF-8";
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul, figure,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  font-family: inherit;
  text-align: left;
  vertical-align: baseline;
  font-family: "Rounded Mplus 1c", 'Varela Round', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff; }

.fade {
  cursor: pointer;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1; }

.fade:hover {
  filter: alpha(opacity=70);
  -moz-opacity: 0.70;
  opacity: 0.70;
  cursor: pointer; }

.wrap {
  position: relative;
  z-index: 1;
  min-width: 1200px; }

.coverArea {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10001;
  background: #fff; }

.coverArea .cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 614px;
  height: 500px;
  text-align: center;
  font-size: 12px;
  color: #bbb;
  font-family: 'Bellefair', serif; }

.coverArea .cover img {
  width: 100%; }

.off {
  opacity: 0; }

.bg {
  width: 100%;
  height: 100%;
  position: relative;
  height: auto; }

.bgImg {
  position: fixed;
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  background-size: cover;
  opacity: 1;
  z-index: 0; }

.bgImgBk {
  position: fixed;
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  background-size: cover;
  opacity: 0;
  z-index: 1; }

.motion {
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  opacity: 0;
  padding-top: 5%; }

.fadeInDown {
  opacity: 1;
  padding-top: 0; }

.motion02 {
  -webkit-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
  top: 0; }

.fadeInDown02 {
  top: 100vh !important; }

.globalNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 1000px;
  height: 50px;
  background: #f0eded;
  z-index: 10000;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }

.globalNav ul {
  height: 50px;
  font-size: 0;
  text-align: center;
  overflow: hidden; }

.globalNav li {
  position: relative;
  display: inline-block;
  height: 50px;
  vertical-align: middle;
  font-size: 16px; }

.globalNav li a {
  display: inline-block; }

.gnUpdate {
  position: relative;
  width: 100%; }

.gnUpdate p {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 4px 14px;
  font-size: 12px;
  font-family: 'Quicksand';
  color: #fff;
  background-color: #ff5eaf;
  border: 2px solid #fff;
  border-top: none;
  border-radius: 0px 0px 6px 6px;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); }

.gnUpdate p span {
  font-style: italic; }

.gnUpdate p.gnUpSystem {
  left: 51.2%; }

.globalNav li.gnTop,
.globalNav li.gnNews,
.globalNav li.gnMovie,
.globalNav li.gnSystem,
.globalNav li.gnStory,
.globalNav li.gnCharacter,
.globalNav li.gnProduct {
  width: 10%;
  text-align: center;
  -webkit-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease; }

.globalNav li.gnTop a,
.globalNav li.gnNews a,
.globalNav li.gnMovie a,
.globalNav li.gnSystem a,
.globalNav li.gnStory a,
.globalNav li.gnCharacter a,
.globalNav li.gnProduct a {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 16px 0 15px;
  color: #615f5f;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  text-decoration: none;
  -webkit-transition: all 100ms ease;
  -o-transition: all 100ms ease;
  transition: all 100ms ease;
  z-index: 2; }

.globalNav li:hover a {
  color: #fff; }

.globalNav li:hover .bg {
  top: 0; }

.globalNav li .bg {
  position: absolute;
  top: 47px;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 1;
  -webkit-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease; }

.globalNav li.gnTop .bg {
  background: #777; }

.globalNav li.gnNews .bg {
  background: #ff99cc; }

.globalNav li.gnMovie .bg {
  background: #ff8400; }

.globalNav li.gnSystem .bg {
  background: #ffcc00; }

.globalNav li.gnStory .bg {
  background: #26bc69; }

.globalNav li.gnCharacter .bg {
  background: #c8a5e9; }

.globalNav li.gnProduct .bg {
  background: #00c8fa; }

.globalNav li.current a {
  color: #fff; }

.globalNav li.current .bg {
  top: 0px; }

.indexPage .globalNav li.gnTop a,
.newsPage .globalNav li.gnNews a,
.movie .globalNav li.gnMovie a,
.story .globalNav li.gnStory a,
.system .globalNav li.gnSystem a,
.charaPage .globalNav li.gnCharacter a,
.product .globalNav li.gnProduct a {
  color: #fff; }

.indexPage .globalNav li.gnTop .bg,
.newsPage .globalNav li.gnNews .bg,
.movie .globalNav li.gnMovie .bg,
.story .globalNav li.gnStory .bg,
.system .globalNav li.gnSystem .bg,
.charaPage .globalNav li.gnCharacter .bg,
.product .globalNav li.gnProduct .bg {
  top: 0px; }

.globalNav li.gnLogo,
.globalNav li.gnSns {
  position: absolute;
  top: 0;
  height: 100%; }

.globalNav li.gnLogo {
  left: 0;
  width: 15%; }

.globalNav li.gnSns {
  right: 0;
  width: 10%; }

.globalNav li.gnSns ul {
  text-align: right;
  padding-right: 10px; }

.globalNav li.gnSns li {
  margin: 0 2px; }

.globalNav li.gnSns img {
  width: 38px;
  height: auto; }

/*==========================================
appArea
==========================================*/
.appArea {
  position: relative;
  width: 100%;
  height: auto;
  text-align: center;
  background: #04c5ef; }

.appArea .logo {
  padding-top: 50px;
  text-align: center; }

.appArea .text {
  position: relative;
  width: 290px;
  margin: 0 auto;
  padding: 36px 0 18px; }

.appArea .text li {
  font-size: 13px;
  color: #fff;
  padding: 10px 0; }

.appArea .draft {
  display: inline-block;
  width: 284px;
  margin: 40px auto 0;
  padding: 8px 0;
  background: #fff;
  color: #04c5ef;
  font-size: 18px;
  letter-spacing: .2em;
  text-align: center; }

.appArea p {
  padding: 6px 0 30px;
  color: #fff;
  text-align: center;
  font-size: 13px; }

.footer_app {
  margin: 40px auto 0;
  padding: 32px 0 0;
  width: 675px;
  height: 225px;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url(/dreaming/assets/img/pc_app_bg.png); }
  .footer_app h2 {
    position: relative;
    margin: -32px auto 11px;
    padding: 54px 0 0 168px;
    width: 350px;
    height: 92px; }
    .footer_app h2:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: 140px;
      height: 140px;
      border: 4px solid #fff;
      border-radius: 24%;
      background-size: 100%;
      background-repeat: no-repeat;
      background-image: url(/dreaming/assets/img/game_icon.jpg); }
  .footer_app a:last-child {
    margin: 0 0 0 10px; }

footer {
  padding: 20px 0;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  position: relative;
  background: #31394c; }

.footerBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  margin: 0 auto;
  width: 1000px;
  height: 57px; }

.footerCaution {
  margin: 0 0 0 12px; }

.footerCaution li {
  margin: 0 0 0 2em;
  line-height: 1.4;
  list-style: disc;
  list-style-position: outside; }

footer .appNotice {
  display: inline-block;
  width: 535px;
  margin: 15px auto 0;
  padding: 10px 20px;
  border-radius: 4px;
  line-height: 1.5;
  font-size: 10px; }

footer .appNotice li {
  margin: 0 0 10px 20px;
  list-style-type: disc; }

footer .appNotice li:last-child {
  margin: 0 0 0 5px;
  list-style-type: none; }

footer .link {
  padding: 30px 0;
  line-height: 1.5;
  text-align: center;
  font-size: 10px;
  color: #fff; }

footer .link a:link,
footer .link a:visited {
  color: #fff;
  padding: 0 15px; }

.copyright {
  margin-top: 0%;
  padding: 0 0 20px;
  text-align: center;
  font-size: 10px; }