@charset "UTF-8";
html {
  font-size: 230%; }

body {
  width: 100%; }

article {
  overflow: hidden; }

.pc {
  display: none; }

.sp {
  display: block; }

header {
  padding: 177% 0 0;
  background-image: url(../img/sp/header_main_0409.jpg); }
  header h1 {
    position: absolute;
    top: 166vw;
    left: 20%;
    padding: 0;
    width: 60%; }

.menu_wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 10000;
  overflow: hidden;
  -webkit-transition: all 400ms ease-out;
  -o-transition: all 400ms ease-out;
  transition: all 400ms ease-out;
  -webkit-transform-origin: center top;
  -ms-transform-origin: center top;
  transform-origin: center top;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  background-image: url(../img/sp/menu_bg.png);
  background-color: rgba(185, 144, 59, 0.95); }
  .menu_wrap[data-state-open="0"] {
    height: 0%; }
  .menu_wrap[data-state-open="1"] {
    height: 100%; }

.sns {
  position: absolute;
  top: 38rem;
  right: 0;
  width: 100%;
  text-align: center;
  z-index: 10020; }
  .sns li {
    display: inline-block;
    margin: 0 0.6rem;
    width: 10%;
    font-size: 0; }
    .sns li button {
      display: inline-block;
      width: 100%;
      height: 100%;
      cursor: pointer; }
      .sns li button img {
        width: 100%; }

.button_menu_open {
  position: fixed;
  top: 1.4%;
  right: 6%;
  display: block;
  width: 10%;
  height: 10%;
  z-index: 10010;
  outline: none; }
  .button_menu_open img {
    width: 100%; }

.button_menu_open[data-state="1"] {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  background-image: url(../img/sp/btm_menu_close.png); }
  .button_menu_open[data-state="1"] img {
    opacity: 0; }

menu,
menu[data-state="fixed"] {
  position: absolute;
  top: 5rem;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: calc(100% - 5rem);
  z-index: 1000;
  background-image: none; }
  menu[data-state="open"],
  menu[data-state="fixed"][data-state="open"] {
    height: 100%; }
  menu ol,
  menu[data-state="fixed"] ol {
    padding: 0;
    width: 100%; }
    menu ol:after,
    menu[data-state="fixed"] ol:after {
      content: none; }
    menu ol li,
    menu[data-state="fixed"] ol li {
      display: block;
      width: 100%;
      height: 6rem; }
      menu ol li:after,
      menu[data-state="fixed"] ol li:after {
        content: none; }
      menu ol li a:before, menu ol li a:after,
      menu[data-state="fixed"] ol li a:before,
      menu[data-state="fixed"] ol li a:after {
        content: '';
        display: inline-block;
        margin: 0 .5em;
        width: 1em;
        height: 1em;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-image: url(../img/sp/icon_menu.png); }

.sec_lead {
  padding: 0; }
  .sec_lead-bottom {
    padding: 6rem 0;
    background-size: cover;
    background-position: center;
    background-image: url(../img/sp/lead_bottom_bg.jpg); }
  .sec_lead h2 {
    display: inline-block;
    width: 100%; }
    .sec_lead h2 img {
      width: 100%; }
  .sec_lead p {
    margin: 0 0 1.4rem;
    display: inline-block;
    font-size: 1.4rem; }

.event_info {
  margin: 5% auto 0;
  padding: 6% 0;
  width: 94%; }
  .event_info .event_info_box {
    margin: 5% auto 0;
    width: 90%; }
    .event_info .event_info_box h4 {
      margin: 4% auto 4%;
      width: 100%;
      height: 14vw; }
      .event_info .event_info_box h4 img {
        width: auto;
        height: 100%; }
      .event_info .event_info_box h4:nth-of-type(2) {
        margin: 80px auto 20px; }
    .event_info .event_info_box .event_info_timeline {
      width: 100%;
      height: 240vw;
      overflow: auto;
      -webkit-overflow-scrolling: touch; }
      .event_info .event_info_box .event_info_timeline div {
        width: 100%; }
    .event_info .event_info_box a {
      display: inline-block;
      width: 80%; }
      .event_info .event_info_box a img {
        width: 100%; }
    .event_info .event_info_box:first-child {
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1; }
    .event_info .event_info_box:last-child {
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2; }

.sec_about,
.sec_cast {
  position: relative;
  margin: 0 0 258vw 0;
  width: 100%;
  background-image: url(../img/sp/about_bg_left.png), url(../img/sp/about_bg_right.png), -webkit-gradient(linear, left top, left bottom, from(#e9ca87), color-stop(48%, #d1aa54), to(#c6a04e));
  background-image: url(../img/sp/about_bg_left.png), url(../img/sp/about_bg_right.png), -webkit-linear-gradient(#e9ca87, #d1aa54 48%, #c6a04e);
  background-image: url(../img/sp/about_bg_left.png), url(../img/sp/about_bg_right.png), -o-linear-gradient(#e9ca87, #d1aa54 48%, #c6a04e);
  background-image: url(../img/sp/about_bg_left.png), url(../img/sp/about_bg_right.png), linear-gradient(#e9ca87, #d1aa54 48%, #c6a04e);
  background-repeat: no-repeat;
  background-position: 1% top, 99% bottom, center top;
  background-size: 3% auto, 3% auto, 100% 100%;
  overflow: visible; }
  .sec_about:after,
  .sec_cast:after {
    top: inherit;
    bottom: -258vw;
    left: 0;
    height: 258vw;
    background-size: 100%;
    z-index: 100; }
  .sec_about div,
  .sec_cast div {
    max-width: 100%; }
    .sec_about div h2,
    .sec_cast div h2 {
      margin: 0 auto;
      width: 36%; }
      .sec_about div h2 img,
      .sec_cast div h2 img {
        width: 100%; }
    .sec_about div h3,
    .sec_cast div h3 {
      margin: 2rem auto 0;
      width: 80%; }
      .sec_about div h3 img,
      .sec_cast div h3 img {
        width: 100%; }

.sec_about {
  padding: 5rem 0;
  width: 100%; }
  .sec_about:after {
    left: 0;
    background-position: center top;
    background-size: auto 100%;
    background-image: url(../img/sp/about_bg.jpg); }
  .sec_about div {
    margin: 0;
    width: 100%; }
    .sec_about div dl {
      margin: 2rem auto 0;
      display: block;
      width: 90%;
      max-width: 90%; }
      .sec_about div dl dd {
        font-size: 1.1rem; }
        .sec_about div dl dd span {
          font-size: 1rem; }
    .sec_about div p {
      font-size: 1.3rem; }

.sec_cast {
  padding: 5rem 0;
  text-align: center;
  background-image: url(../img/sp/cast_bg_left.png), url(../img/sp/cast_bg_right.png), -webkit-gradient(linear, left top, left bottom, from(#e9ca87), color-stop(48%, #d1aa54), to(#c6a04e));
  background-image: url(../img/sp/cast_bg_left.png), url(../img/sp/cast_bg_right.png), -webkit-linear-gradient(#e9ca87, #d1aa54 48%, #c6a04e);
  background-image: url(../img/sp/cast_bg_left.png), url(../img/sp/cast_bg_right.png), -o-linear-gradient(#e9ca87, #d1aa54 48%, #c6a04e);
  background-image: url(../img/sp/cast_bg_left.png), url(../img/sp/cast_bg_right.png), linear-gradient(#e9ca87, #d1aa54 48%, #c6a04e); }
  .sec_cast:after {
    left: 0;
    background-position: center top;
    background-image: url(../img/sp/cast_bg.jpg); }
  .sec_cast div {
    margin: 0 auto;
    width: 90%;
    max-width: 90%; }
    .sec_cast div p {
      font-size: .8rem; }

.sec_ticket,
.sec_access {
  background-repeat: no-repeat;
  background-position: 1% top, 99% bottom;
  background-size: 3% auto, 3% auto; }

.sec_ticket {
  padding: 2rem  0;
  background-image: url(../img/sp/ticket_bg_left.png), url(../img/sp/ticket_bg_right.png); }
  .sec_ticket:before, .sec_ticket:after {
    display: none; }
  .sec_ticket h2 {
    margin: 2rem auto;
    width: 34%; }
    .sec_ticket h2 img {
      width: 100%; }
  .sec_ticket h3 {
    margin: 1rem auto 3.2rem;
    width: 88%; }
    .sec_ticket h3 img {
      width: 100%; }
  .sec_ticket > p {
    font-size: 1.2rem; }
  .sec_ticket .ticket_menu {
    padding: 0 0 2rem;
    width: 90%;
    max-width: 94%; }
    .sec_ticket .ticket_menu h4 {
      padding: 0.4rem 0;
      width: 100%;
      max-width: 100%;
      text-align: center;
      font-size: 1.8rem;
      color: #fff;
      background-color: #d1aa54; }
    .sec_ticket .ticket_menu h5 {
      margin: 0 1.2rem;
      padding: 0.3rem .3rem;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 1.1rem; }
      .sec_ticket .ticket_menu h5 span {
        display: block;
        font-size: .8rem; }
    .sec_ticket .ticket_menu p {
      margin: 1.2rem;
      font-size: 1rem; }
    .sec_ticket .ticket_menu dl {
      position: relative;
      margin: 1rem 0 1rem 1.2rem;
      color: #32508d;
      font-size: .8rem;
      line-height: 1.5; }
      .sec_ticket .ticket_menu dl dt {
        display: inline; }
      .sec_ticket .ticket_menu dl dd {
        display: inline;
        word-break: break-all; }
        .sec_ticket .ticket_menu dl dd::after {
          content: "\A";
          white-space: pre; }
    .sec_ticket .ticket_menu hr {
      position: relative;
      margin: 0 auto 2rem;
      padding: 0;
      width: calc(100% - 2.5rem);
      height: 1px;
      border-style: none;
      background-color: #d1aa54;
      overflow: visible; }
      .sec_ticket .ticket_menu hr:after {
        content: '';
        position: absolute;
        top: -0.5rem;
        left: calc(50% - 1.7rem);
        display: block;
        width: 3.4rem;
        height: 1rem;
        background-repeat: no-repeat;
        background-size: 100%;
        background-image: url(../img/pc/icon_crown.png); }
  .sec_ticket .ticket_caution {
    margin: 4rem auto 2rem;
    padding: 0;
    max-width: 1020px;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .sec_ticket .ticket_caution h4 {
      font-size: 1.2rem;
      color: #d1aa54; }
    .sec_ticket .ticket_caution h5 {
      font-size: 1rem; }
    .sec_ticket .ticket_caution h6 {
      padding: .5rem;
      font-size: 1rem;
      color: #fff;
      background-color: #d1aa54; }
      .sec_ticket .ticket_caution h6:before {
        content: ' ▼ '; }
    .sec_ticket .ticket_caution p {
      padding: 1rem 0 2rem;
      font-size: 1rem; }
    .sec_ticket .ticket_caution-area {
      -webkit-overflow-scrolling: touch; }
  .sec_ticket .ticket_info {
    margin: 2rem auto;
    padding: 0 0 2rem;
    max-width: 1020px;
    text-align: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }
    .sec_ticket .ticket_info h4 {
      font-size: 1.2rem;
      color: #d1aa54; }
    .sec_ticket .ticket_info p {
      word-break: break-all; }

.sec_goods {
  padding: 3rem 0;
  background-size: 100% auto;
  background-image: url(../img/sp/goods_bg_left.png), url(../img/sp/goods_bg_right.png), -webkit-gradient(linear, left top, left bottom, from(#e9ca87), color-stop(48%, #d1aa54), to(#c6a04e));
  background-image: url(../img/sp/goods_bg_left.png), url(../img/sp/goods_bg_right.png), -webkit-linear-gradient(#e9ca87, #d1aa54 48%, #c6a04e);
  background-image: url(../img/sp/goods_bg_left.png), url(../img/sp/goods_bg_right.png), -o-linear-gradient(#e9ca87, #d1aa54 48%, #c6a04e);
  background-image: url(../img/sp/goods_bg_left.png), url(../img/sp/goods_bg_right.png), linear-gradient(#e9ca87, #d1aa54 48%, #c6a04e);
  background-repeat: no-repeat;
  background-position: 1% top, 99% bottom, center top;
  background-size: 3% auto, 3% auto, 100% 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .sec_goods:before, .sec_goods:after {
    display: none; }
  .sec_goods h2 {
    margin: 2rem auto;
    width: 36%; }
    .sec_goods h2 img {
      width: 100%; }
  .sec_goods > p {
    margin: 3rem auto 0;
    padding: 0 5% 2rem; }
    .sec_goods > p img {
      width: 100%; }
  .sec_goods .goods_table {
    margin: 0 auto; }
    .sec_goods .goods_table ul {
      width: 100%; }
      .sec_goods .goods_table ul li {
        font-size: 1rem; }
    .sec_goods .goods_table a {
      display: inline-block;
      margin: 8% auto 0;
      width: 60%; }
  .sec_goods .goods_wrap .goods_wrap_caution {
    margin: 3rem auto 0;
    font-size: 1.2rem; }
  .sec_goods .goods_wrap .goods_coming {
    margin: 2rem 0 0;
    font-size: 1.4rem; }
  .sec_goods .goods_item h3 {
    padding: 0.8rem 5.2rem 0.8rem 3.8rem;
    font-size: 1.2rem;
    line-height: 1.3;
    background-size: 4% auto; }
  .sec_goods .goods_item:nth-child(1) .goods_list {
    max-height: 186rem; }
  .sec_goods .goods_item:nth-child(2) .goods_list {
    max-height: 992rem; }
  .sec_goods .goods_item:nth-child(3) .goods_list {
    max-height: 62rem; }
  .sec_goods .goods_item:nth-child(4) .goods_list {
    max-height: 992rem; }
  .sec_goods .goods_item .goods_list > li {
    margin: 2.4%;
    padding: 1.4% 5% 34%;
    width: 100%; }
    .sec_goods .goods_item .goods_list > li:after {
      font-size: 1.1rem; }
    .sec_goods .goods_item .goods_list > li h4 {
      font-size: 1.4rem; }
    .sec_goods .goods_item .goods_list > li .goods_thumb_list {
      position: relative;
      width: 100%; }
    .sec_goods .goods_item .goods_list > li .goods_buy {
      font-size: 1.3rem; }
    .sec_goods .goods_item .goods_list > li .goods_ques:after {
      top: 0.7rem;
      right: 8rem; }
    .sec_goods .goods_item .goods_list > li .goods_item_info {
      bottom: 2.7rem; }
  .sec_goods .goods_bonus h4 {
    padding: 0.6rem 0;
    font-size: 1.2rem; }
  .sec_goods .goods_bonus h5 {
    margin: 0 auto;
    width: 60%;
    text-align: left; }
  .sec_goods .goods_bonus p {
    width: 90%; }
  .sec_goods .goods_after_info img {
    width: 100%; }
  .sec_goods .goods_after_info ul {
    margin: 1% auto 0;
    width: 55%; }
    .sec_goods .goods_after_info ul li {
      font-size: 0.7rem; }

.sec_access {
  padding: 1rem 5% 2rem;
  max-width: 90%;
  width: 90%;
  background-image: url(../img/sp/access_bg_left.png), url(../img/sp/access_bg_right.png); }
  .sec_access h2 {
    margin: 2rem auto;
    padding: 1rem 0;
    width: 36%; }
    .sec_access h2 img {
      width: 100%; }
  .sec_access .access_map {
    margin: 0 auto;
    width: 100%;
    height: 14rem; }
  .sec_access button {
    display: block;
    margin: 1rem auto 0;
    text-align: center; }
    .sec_access button a {
      display: inline-block;
      padding: .6rem 1rem;
      color: #fff;
      font-size: 1.4rem;
      background-color: #d1aa54;
      text-decoration: none; }
  .sec_access p {
    padding: 1.2rem 0;
    font-size: 1.2rem; }
  .sec_access ul li {
    font-size: .6rem; }

/*==========================================
appArea
==========================================*/
.appArea .logo {
  padding-top: 2rem;
  margin: 0 auto;
  width: 50%; }
  .appArea .logo img {
    width: 100%; }

.appArea .text {
  position: relative;
  margin: 0 auto;
  width: 55%;
  padding: 1rem 0 1rem;
  text-align: left; }
  .appArea .text li {
    font-size: .8rem;
    line-height: 1.6;
    color: #fff; }

.appArea .draft {
  display: inline-block;
  width: 50%;
  margin: 1rem auto 0;
  padding: .4rem .8rem;
  background: #fff;
  color: #d1aa54;
  font-size: 1rem;
  letter-spacing: .2rem;
  text-align: center; }

.appArea p {
  padding: .6rem 1rem 2rem;
  color: #fff;
  text-align: center;
  font-size: .8rem; }

.footer_app {
  margin: 4rem auto 0;
  padding: 2rem 0 .5rem;
  width: 96%;
  height: auto;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  background-image: url(../img/pc/pc_app_bg.png); }
  .footer_app h2 {
    position: relative;
    margin: -2.2rem auto 0.3rem;
    padding: 2.2rem 0 0 6.8rem;
    width: 16rem;
    height: 3.8rem; }
    .footer_app h2 img {
      width: 100%; }
    .footer_app h2:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: 6rem;
      height: 6rem;
      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 {
    display: inline-block;
    margin: 0.4rem 0 0;
    width: 38%; }
    .footer_app a img {
      width: 100%; }
  .footer_app a:last-child {
    margin: 0 0 0 10px; }

footer {
  padding: 1rem 0;
  color: #fff;
  position: relative;
  text-align: center;
  background: #31394c; }

.footerBox {
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.coloplLogo {
  margin: 0 auto;
  width: 40%; }
  .coloplLogo img {
    width: 100%; }

.footerCaution {
  margin: 1rem 0 0 1rem; }
  .footerCaution li {
    margin: 0;
    font-size: .5rem;
    line-height: 1.4;
    list-style: disc;
    list-style-position: outside;
    text-align: left; }

footer .link {
  padding: 1rem 0;
  line-height: 1.5;
  text-align: center;
  font-size: .7rem;
  color: #fff; }

footer .link a:link,
footer .link a:visited {
  color: #fff;
  padding: 0 .6rem; }

.copyright {
  margin-top: 0%;
  padding: 0 0 1rem;
  text-align: center;
  font-size: 1rem; }