.titleArea {
  text-align: center; }

.mainArea header {
  position: relative;
  margin: 0 0 0;
  padding: 0 0 0;
  width: 100%;
  height: 228vw;
  background-color: transparent;
  z-index: 1; }
  .mainArea header .header_kv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .mainArea header .header_kv li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      pointer-events: none;
      -webkit-transition: opacity 400ms ease-out;
      -o-transition: opacity 400ms ease-out;
      transition: opacity 400ms ease-out; }
      .mainArea header .header_kv li:nth-child(1) .header_inner {
         }
      .mainArea header .header_kv li:nth-child(2) .header_inner {
        background-image: url(/dreaming/sp/assets/img/top/header_bg2_3.png); }
      .mainArea header .header_kv li:nth-child(3) .header_inner {
        background-image: url(/dreaming/sp/assets/img/top/header_bg2_2.png); }
      .mainArea header .header_kv li:nth-child(4) .header_inner {
        background-image: url(/dreaming/sp/assets/img/top/header_bg2.png); }
      .mainArea header .header_kv li figure {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; }
        .mainArea header .header_kv li figure img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          z-index: -2; }
          .mainArea header .header_kv li figure img:nth-child(1) {
            z-index: -3; }
          .mainArea header .header_kv li figure img:nth-child(2) {
            z-index: -4; }
      .mainArea header .header_kv li .header_inner {
        position: relative;
        width: 100%;
        height: 136vw;
        overflow: visible;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center bottom; }
  .mainArea header .header_logo {
    margin: 92vw auto 0;
    padding: 28vw 0 8vw;
    width: 100%;
    text-align: center; }
    .mainArea header .header_logo img {
      width: 42vw; }
  .mainArea header .header_text {
    position: absolute;
    top: -18vw;
    left: 30%;
    display: inline-block;
    width: 40%; }
    .mainArea header .header_text img {
      width: 100%; }
  .mainArea header .header_app {
    position: relative;
    margin: 0 0 8vw;
    padding: 7vw 0;
    width: 100%;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top, center bottom;
    background-image: url(/dreaming/sp/assets/img/footer_app_line.png), url(/dreaming/sp/assets/img/footer_app_line.png); }
    .mainArea header .header_app img {
      width: 100%; }
    .mainArea header .header_app h2 {
      position: relative;
      margin: 0 auto 3.4vw;
      padding: 0 0 0 21vw;
      width: 90%;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .mainArea header .header_app h2:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 17.2vw;
        height: 17vw;
        border: 3px solid #fff;
        border-radius: 24%;
        background-size: 100%;
        background-repeat: no-repeat;
        background-image: url(/dreaming/assets/img/game_icon.jpg); }
    .mainArea header .header_app a {
      display: inline-block;
      width: 44.6%; }
  .mainArea header[data-num="1"] .header_kv > li:nth-child(1) {
    opacity: 1;
    pointer-events: auto; }
  .mainArea header[data-num="2"] .header_kv > li:nth-child(2) {
    opacity: 1;
    pointer-events: auto; }
  .mainArea header[data-num="3"] .header_kv > li:nth-child(3) {
    opacity: 1;
    pointer-events: auto; }
  .mainArea header[data-num="4"] .header_kv > li:nth-child(4) {
    opacity: 1;
    pointer-events: auto; }

.banner_area {
  position: relative;
  padding: 8vw 0 4vw;
  background-color: #f0eded;
  z-index: 1; }
  .banner_area ol {
    margin: 0 auto;
    width: 86%;
    text-align: center; }
    .banner_area ol li {
      display: inline-block;
      margin: 0 0 4vw;
      width: 100%; }
      .banner_area ol li a {
        position: relative;
        display: inline-block;
        width: 100%;
        -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); }
        .banner_area ol li a img {
          width: 100%; }

.mainArea .storyArea {
  position: relative;
  padding: 8vw 0 0;
  width: 100%;
  height: 177vw;
  text-align: center;
  background-color: #fff;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url(/dreaming/sp/assets/img/top/top_story_bg.jpg);
  background-size: 100% auto;
  z-index: 100; }
  .mainArea .storyArea h2 {
    width: 30%; }
  .mainArea .storyArea p {
    display: inline-block;
    margin: 10vw 0 0;
    width: 70%; }
    .mainArea .storyArea p.story_btn {
      margin: 52vw 0 0;
      width: 57%; }

.mainArea .systemArea {
  position: relative;
  padding: 12vw 0 0;
  text-align: center;
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-image: url(/dreaming/sp/assets/img/top/top_system_bg.jpg);
  z-index: 101; }
  .mainArea .systemArea h2 {
    margin: 0 auto -9vw;
    width: 37vw; }
  .mainArea .systemArea .system_btn {
    display: inline-block;
    margin: 8vw auto 11vw;
    width: 70vw; }

.mainArea .charaArea {
  position: relative;
  padding: 9vw 0 0;
  text-align: center;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url(/dreaming/sp/assets/img/top/top_chara_bg.jpg);
  z-index: 101; }
  .mainArea .charaArea h2 {
    width: 57vw; }
  .mainArea .charaArea p {
    padding: 50vw 0 0; }
  .mainArea .charaArea .chara_btn {
    display: inline-block;
    margin: 2vw auto 8vw;
    padding: 0;
    width: 58vw; }

.mainArea .twArea {
  margin: -0.3vw 0 0;
  padding: 5vw 0 0;
  text-align: center;
  background-image: url(/dreaming/sp/assets/img/top/top_tw_bg.jpg); }
  .mainArea .twArea .twFrame {
    margin: 0 auto;
    padding: 1vw;
    width: 92vw;
    text-align: center;
    background-size: 100%;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#cdfdff), color-stop(50%, #e08cfc), to(#fff65c));
    background-image: -webkit-linear-gradient(top, #cdfdff 0%, #e08cfc 50%, #fff65c 100%);
    background-image: -o-linear-gradient(top, #cdfdff 0%, #e08cfc 50%, #fff65c 100%);
    background-image: linear-gradient(to bottom, #cdfdff 0%, #e08cfc 50%, #fff65c 100%); }
    .mainArea .twArea .twFrame .twitter-timeline {
      margin: 0 auto; }
  .mainArea .twArea .snsBtn {
    display: inline-block;
    margin: 6vw 0 9vw;
    width: 58vw; }

.mainArea .ytArea {
  position: relative;
  padding: 13vw 0 0;
  text-align: center;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-image: url(/dreaming/sp/assets/img/top/top_yt_bg.jpg);
  z-index: 101; }
  .mainArea .ytArea h2 {
    width: 42vw; }
  .mainArea .ytArea .snsText {
    margin: 8vw 0 0; }
  .mainArea .ytArea .snsBtn {
    display: inline-block;
    margin: 88vw auto 12vw;
    padding: 0;
    width: 58vw; }

/* ==================================
 newsArea
================================== */
.newsArea {
  position: relative;
  z-index: 100;
  background: url("/dreaming/sp/assets/img/top/news_bg.png") 50% 0 repeat-y;
  -webkit-background-size: 100%;
  background-size: 100%; }

.newsArea ul {
  position: relative;
  padding: 0 1% 8%;
  font-size: 0; }

.newsArea li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 1% 1%;
  width: 48%;
  height: 58vw;
  background: #fff;
  font-size: 14px;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); }

.newsArea li a {
  text-decoration: none; }

.newsArea .catMedia {
  background: url("/dreaming/assets/img/news/news_cat_media_bg.png") 100% 0/1.5vw repeat-y #fff; }

.newsArea .catInfo {
  background: url("/dreaming/assets/img/news/news_cat_info_bg.png") 100% 0/1.5vw repeat-y #fff; }

.newsArea .catMusic {
  background: url("/dreaming/assets/img/news/news_cat_music_bg.png") 100% 0/1.5vw repeat-y #fff; }

.newsArea .catEvent {
  background: url("/dreaming/assets/img/news/news_cat_event_bg.png") 100% 0/1.5vw repeat-y #fff; }

.newsArea .catSpecial {
  background: url("/dreaming/assets/img/news/news_cat_special_bg.png") 100% 0/1.5vw repeat-y #fff; }

.newsArea .catProduct {
  background: url("/dreaming/assets/img/news/news_cat_product_bg.png") 100% 0/1.5vw repeat-y #fff; }

.newsArea .catCampaign {
  background: url("/dreaming/assets/img/news/news_cat_campaign_bg.png") 100% 0/1.5vw repeat-y #fff; }

.newsArea .thumb img {
  width: 100%;
  height: auto; }

.newsArea .date {
  padding: 3vw;
  line-height: 1;
  font-size: 3vw;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  letter-spacing: .15em; }

.newsArea .catMedia .date {
  color: #26bc69; }

.newsArea .catInfo .date {
  color: #10c5f7; }

.newsArea .catMusic .date {
  color: #ff8400; }

.newsArea .catEvent .date {
  color: #fe4ba4; }

.newsArea .catSpecial .date {
  color: #8982fb; }

.newsArea .catProduct .date {
  color: #ffcc00; }

.newsArea .catCampaign .date {
  color: #d866ed; }

.newsArea .entry {
  padding: 0 3.5vw 0 3vw;
  height: 16vw;
  line-height: 1.3;
  color: #393838;
  font-size: 3vw;
  overflow: auto; }

.newsArea .cat {
  position: absolute;
  width: 20vw;
  bottom: 0;
  right: 0; }

.newsArea .cat span {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  padding: 5% 0 5%;
  color: #fff;
  font-size: 3vw;
  text-align: center;
  letter-spacing: .1em; }

.newsArea .catMedia .cat span {
  background: #26bc69; }

.newsArea .catInfo .cat span {
  background: #10c5f7; }

.newsArea .catMusic .cat span {
  background: #ff8400; }

.newsArea .catEvent .cat span {
  background: #fe4ba4; }

.newsArea .catSpecial .cat span {
  background: #8982fb; }

.newsArea .catProduct .cat span {
  background: #ffcc00; }

.newsArea .catCampaign .cat span {
  background: #d866ed; }

.newsArea .catMedia .cat span:after {
  content: "Media"; }

.newsArea .catInfo .cat span:after {
  content: "Info"; }

.newsArea .catMusic .cat span:after {
  content: "Music"; }

.newsArea .catEvent .cat span:after {
  content: "Event"; }

.newsArea .catSpecial .cat span:after {
  content: "Special"; }

.newsArea .catProduct .cat span:after {
  content: "Product"; }

.newsArea .catCampaign .cat span:after {
  content: "Campaign"; }

.newsArea .newIcon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 10vw;
  height: auto; }

.newsArea .newIcon img {
  width: 100%;
  height: auto; }

.newsArea figure {
  position: relative;
  margin: 0;
  width: 100%;
  color: #fff;
  text-align: center; }

.newsArea figure * {
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease; }

.newsArea figure img {
  width: 100%;
  height: auto; }

.newsArea .btn {
  position: relative;
  padding-bottom: 8%;
  text-align: center;
  z-index: 10; }

/* ==================================
 movieArea
================================== */
.movieArea {
  position: relative;
  z-index: 100; }

.movieArea .bg {
  position: relative; }

.movieArea .title {
  position: absolute;
  top: 30vw;
  left: 0; }

.movieArea .btn {
  position: absolute;
  top: 74vw;
  left: 0; }

/* ==================================
 twArea
================================== */
.twArea {
  position: relative;
  z-index: 100;
  background-size: 100%; }

.twArea .star {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; }

.twArea .star img {
  width: 100%;
  height: auto; }

.twArea .cloud {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto; }

.twArea .cloud img {
  width: 100%;
  height: auto; }

.twArea .windowArea {
  position: relative;
  z-index: 102; }

.twArea .windowWrap {
  position: relative;
  z-index: 102; }

.twArea .timeline {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 103;
  padding: 2% 10%; }

.twArea .btn {
  position: relative;
  z-index: 102;
  padding: 5% 0 10%; }

.bottomArea {
  position: relative;
  z-index: 100; }
  .bottomArea .bottomKv {
    position: relative;
    padding: 50% 0 0;
    width: 100%;
    height: 0;
    background-position: center top;
    background-size: 100% auto;
    background-image: url(/dreaming/assets/img/top/pc_new_kv_footer.jpg); }