body {
  background-color: transparent !important; }

header {
  position: relative;
  margin: 50px 0 0 0;
  padding: 46.8% 0 0;
  width: 100%; }
  header .header_kv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    header .header_kv > li {
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: right;
      opacity: 0;
      pointer-events: none;
      -webkit-transition: opacity 400ms ease-out;
      -o-transition: opacity 400ms ease-out;
      transition: opacity 400ms ease-out; }
      header .header_kv > li img {
        width: 100%; }
  header .header_kv_btns {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 20px;
    text-align: center; }
    header .header_kv_btns li {
      display: inline-block;
      margin: 0 5px;
      width: 20px;
      height: 20px;
      background-color: #fff;
      border-radius: 10px;
      cursor: pointer; }
  header[data-num="1"] .header_kv > li:nth-child(1) {
    opacity: 1;
    pointer-events: auto; }
  header[data-num="1"] .header_kv_btns > li:nth-child(1) {
    background-color: #159fff; }
  header[data-num="2"] .header_kv > li:nth-child(2) {
    opacity: 1;
    pointer-events: auto; }
  header[data-num="2"] .header_kv_btns > li:nth-child(2) {
    background-color: #159fff; }
  header[data-num="3"] .header_kv > li:nth-child(3) {
    opacity: 1;
    pointer-events: auto; }
  header[data-num="3"] .header_kv_btns > li:nth-child(3) {
    background-color: #159fff; }
  header[data-num="4"] .header_kv > li:nth-child(4) {
    opacity: 1;
    pointer-events: auto; }
  header[data-num="4"] .header_kv_btns > li:nth-child(4) {
    background-color: #159fff; }
  header .header_block {
    position: absolute;
    top: 0;
    left: 2%;
    padding: 30% 0 0;
    width: 12.2%;
    height: 0;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    background-image: url(/dreaming/assets/img/top/pc_top_header_app_bg.png); }
    header .header_block img {
      width: 100%; }
    header .header_block > h1, header .header_block > h2 {
      position: absolute;
      top: 0;
      left: 11%;
      padding: 30% 0 0;
      width: 78%;
      text-align: center; }
    header .header_block > p {
      position: absolute;
      top: 0;
      left: 20%;
      padding: 10% 0 0;
      width: 60%;
      text-align: center; }
    header .header_block .header_app {
      position: absolute;
      bottom: 0;
      left: 10%;
      padding: 0 0 17%;
      width: 80%;
      height: auto;
      text-align: center; }
      header .header_block .header_app h2 {
        display: inline-block;
        padding: 0 0 4%;
        width: 100%;
        text-align: center; }
        header .header_block .header_app h2:before {
          content: '';
          display: inline-block;
          padding: 23% 0 0 0;
          width: 23%;
          background-repeat: no-repeat;
          background-size: 100%;
          background-position: center;
          background-image: url(/dreaming/assets/img/game_icon.jpg);
          border: 2px solid #fff;
          border-radius: 23%; }
        header .header_block .header_app h2 > img {
          display: inline-block;
          padding: 0 0 6% 2%;
          width: 70%; }
      header .header_block .header_app > a {
        display: inline-block;
        padding: 3% 0 0; }
  header .header_kv > li:nth-child(1) .header_block {
    top: 50%;
    left: 6.4%;
    padding: 32% 0 0;
    width: 13%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-image: none; }
  header .header_kv > li:nth-child(2) .header_block {
    top: 50%;
    left: 1.7%;
    padding: 32% 0 0;
    width: 13%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-image: none; }

.banner_area {
  position: relative;
  width: 100%;
  background-color: #f0eded; }
  .banner_area ol {
    position: relative;
    margin: 0 auto;
    padding: 42px 0;
    width: 1188px;
    text-align: center; }
    .banner_area ol li {
      display: inline-block;
      padding: 0 0.3%;
      width: 24%;
      font-size: 0; }
      .banner_area ol li a {
        position: relative;
        display: inline-block;
        -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:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.5);
          -webkit-transition: all 200ms ease-out;
          -o-transition: all 200ms ease-out;
          transition: all 200ms ease-out;
          opacity: 0; }
        .banner_area ol li a:hover:before {
          opacity: 1; }
        .banner_area ol li a img {
          width: 100%; }

/*==========================================
newsArea
==========================================*/
.newsArea {
  position: relative;
  padding: 0 0 40px;
  width: 100%;
  height: auto;
  text-align: center;
  overflow: hidden;
  background: url("/dreaming/assets/img/news/news_bg.jpg") 50% 0 repeat-y; }

.newsArea .newsStar {
  position: absolute;
  width: 100%;
  height: 782px;
  text-align: center;
  overflow: hidden;
  background: url("/dreaming/assets/img/news/news_star.png") 50% 0 no-repeat; }

.newsArea .title {
  position: relative;
  margin-top: 70px;
  text-align: center; }

.newsArea ul {
  position: relative;
  margin: 38px auto;
  width: 1200px;
  font-size: 0;
  text-align: center; }

.newsArea li {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 10px 15px;
  width: 366px;
  height: 366px;
  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 repeat-y #fff; }

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

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

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

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

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

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

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

.newsArea .date {
  margin: 18px 18px 12px;
  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 18px 18px;
  line-height: 1.6;
  color: #393838;
  font-size: 16px; }

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

.newsArea .cat span {
  display: inline-block;
  vertical-align: middle;
  width: 88px;
  padding: 6px 0 5px;
  color: #fff;
  font-size: 14px;
  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: 53px;
  height: 50px; }

.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 figure .bg {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 2; }

.newsArea li:hover figure .bg {
  background: rgba(0, 0, 0, 0.7); }

.newsArea figcaption {
  position: absolute;
  top: 0;
  left: -10px;
  width: 160px;
  margin: 90px 107px;
  padding: 8px 5px;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  font-family: 'Quicksand', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: .5em;
  text-align: center;
  z-index: 3;
  opacity: 0; }

.newsArea li:hover figcaption {
  left: 0;
  width: 140px;
  letter-spacing: .2em;
  opacity: 1; }

.newsArea .btn {
  position: relative;
  padding-top: 30px;
  text-align: center;
  z-index: 10; }

/*==========================================
storyArea
==========================================*/
.storyArea {
  position: relative;
  padding: 80px 0 0;
  width: 100%;
  height: 919px;
  text-align: center;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url(/dreaming/assets/img/top/top_story_bg.jpg); }
  .storyArea h2 {
    display: inline-block;
    width: 100%;
    text-align: center; }
  .storyArea p {
    display: inline-block;
    margin: 50px 0 0;
    width: 100%;
    text-align: center; }
    .storyArea p.story_btn {
      margin: 355px 0 0; }

.systemArea {
  position: relative;
  width: 100%;
  height: 795px;
  text-align: center;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url(/dreaming/assets/img/top/system_bg.jpg); }
  .systemArea h2 {
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 60px 0 0; }
  .systemArea figure {
    text-align: center; }
  .systemArea p {
    display: inline-block; }
    .systemArea p.system_btn {
      margin: 30px 0 0; }

/*==========================================
movieArea
==========================================*/
.movieArea {
  position: relative; }

.movie_frame {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative; }

.movie_cont {
  padding-top: 56.25%;
  position: relative;
  width: 100%; }

.movie_cont iframe {
  height: 100% !important;
  left: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100% !important;
  z-index: 1; }

.movie_area_cover {
  position: relative;
  z-index: 7;
  width: 100%;
  height: 100%;
  pointer-events: none; }

.movie_area_cover:after {
  position: absolute;
  display: inline-block;
  content: "";
  background: rgba(0, 0, 30, 0.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10; }

.movieArea .title {
  position: absolute;
  top: 15vw;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10; }

.movieArea .btn {
  position: absolute;
  top: 26vw;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 10; }

.charaArea {
  position: relative;
  width: 100%;
  height: 809px;
  text-align: center;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url(/dreaming/assets/img/top/chara_bg.jpg); }
  .charaArea h2 {
    display: block;
    text-align: center;
    margin: 0 auto;
    padding: 58px 0 0; }
  .charaArea p {
    display: inline-block;
    margin: 520px 0 0; }

.snsArea {
  position: relative;
  margin: 0 auto;
  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;
  min-width: 1200px;
  height: 1005px;
  font-size: 0;
  background-size: 150% auto;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url(/dreaming/assets/img/top/sns_bg.jpg);
  text-align: center;
  vertical-align: top; }
  .snsArea section {
    position: relative;
    display: inline-block;
    width: 50%;
    height: 1005px;
    text-align: center; }
    .snsArea section h3 {
      margin: 64px 0 0;
      text-align: center; }
    .snsArea section .twFrame {
      padding: 6px 0 0;
      margin: 0 auto;
      width: 538px;
      height: 576px;
      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%); }
    .snsArea section p {
      display: block;
      width: 100%;
      text-align: center; }
      .snsArea section p a {
        display: inline-block;
        text-align: center; }
      .snsArea section p.snsText {
        margin: 50px 0 20px; }
      .snsArea section p.snsBtn {
        position: absolute;
        bottom: 100px;
        width: 100%; }
  .snsArea .ytArea {
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(/dreaming/assets/img/top/youtube_img_1.png); }

.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); }