@charset "UTF-8";
body {
  background: #000;
  overflow-x: hidden; }

img {
  width: 100%; }

/*センターに揃える*/
.row-center {
  text-align: center;
  letter-spacing: -0.4em; }

.row-center > [class*='col-'] {
  display: inline-block;
  letter-spacing: 0;
  vertical-align: top;
  float: none !important; }

.pagelink {
  display: block;
  margin-top: -58px !important;
  padding-bottom: 58px !important; }

.mb-00 {
  margin-bottom: 0 !important; }

.mb-20 {
  margin-bottom: 20px; }

.mb-30 {
  margin-bottom: 30px; }

.align-center {
  text-align: center; }

.align-left {
  text-align: left; }

.align-right {
  text-align: right; }

.border-top-glay {
  border-top: 1px solid #d4d4d4; }

.p00,
.pa-0 {
  padding: 0px !important; }

.pa-10 {
  padding: 10px !important; }

.pa-15 {
  padding: 15px !important; }

.pa-20 {
  padding: 20px !important; }

.pa-25 {
  padding: 25px !important; }

.pa-30 {
  padding: 30px !important; }

.bg-white {
  background: #fff; }

.bg-skyblue {
  background: #72b6e5; }

.bg-glay {
  background: #f8f8f8; }

.link-underline {
  text-decoration: underline !important; }

.bg-line {
  background: url(../img/assets_181215/bg-line.png) repeat-x;
  height: 4px;
  width: 100%; }

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }

*:after {
  display: block;
  clear: both; }

article, aside, figure, footer, header, hgroup, nav, section, main {
  display: block; }

html, body {
  -webkit-text-size-adjust: none;
  width: 100%;
  height: 100%; }

/*---------------------------*/
/*font*/
header .icon-switch {
  max-width: 47px;
  position: absolute;
  top: 0;
  right: 0; }

@media screen and (min-width: 576px) {
  header .icon-switch {
    max-width: 94px;
    position: absolute;
    top: 0;
    right: 0; } }

.background-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  min-width: 100%;
  min-height: 100%;
  overflow: hidden; }

.background-movie {
  position: relative; }

#sample {
  width: 124%;
  height: 124%;
  margin-top: -5%;
  margin-left: -12%; }

.background-cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/assets_181215/bg.png) repeat; }

.wrapper {
  width: 100%;
  overflow-x: hidden;
  position: absolute;
  z-index: 100; }
  .wrapper article {
    padding: 0 21px; }
  .wrapper .warp-infobox .warp-infobox__scroll {
    width: 200px;
    margin: 0 auto 50px; }
    .wrapper .warp-infobox .warp-infobox__scroll .warp-infobox__scroll--bar::before {
      background: #1dff00;
      background: -moz-linear-gradient(left, #1dff00 0%, #00d8ff 100%);
      background: -webkit-linear-gradient(left, #1dff00 0%, #00d8ff 100%);
      background: linear-gradient(to right, #1dff00 0%, #00d8ff 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1dff00', endColorstr='#00d8ff',GradientType=1 );
      animation: aniAnchor 1.8s ease infinite;
      -webkit-transform-origin: 0% 0%;
      -ms-transform-origin: 0% 0%;
      transform-origin: 0% 0%;
      width: 2px;
      z-index: 200;
      width: 2px;
      height: 40px;
      content: '';
      display: block;
      position: absolute; }
    .wrapper .warp-infobox .warp-infobox__scroll .warp-infobox__scroll--bar {
      position: relative;
      width: 2px;
      z-index: 1;
      height: 40px;
      display: block;
      margin: 0 auto 8px;
      background: #fff; }

@keyframes aniAnchor {
  0% {
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 0; }
  15% {
    -webkit-transform: scaleY(0);
    -ms-transform: scaleY(0);
    transform: scaleY(0);
    opacity: 1; }
  40% {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1; }
  70% {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1; }
  100% {
    -webkit-transform: scaleY(1);
    -ms-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1; } }
    .wrapper .warp-infobox .warp-infobox__scroll .warp-infobox__scroll--text {
      text-align: center;
      color: #fff !important;
      letter-spacing: 2px;
      display: block;
      font-size: 10px;
      text-shadow: 0px 1px 8px #000;
      font-weight: 300;
      font-family: fot-udkakugo-large-pr6n, sans-serif;
      font-weight: normal !important;
      font-style: normal; }
  .wrapper h1 {
    width: 100%; }
  .wrapper .youtube {
    max-width: 333px;
    margin: 20px auto 10px; }
  @media screen and (min-width: 576px) {
    .wrapper .warp-infobox {
      width: calc(100% - 6%);
      margin-left: 6%;
      margin-bottom: 50px; }
      .wrapper .warp-infobox .warp-infobox__scroll {
        max-width: 20px;
        position: fixed;
        left: 2.6%;
        bottom: 6%; }
        .wrapper .warp-infobox .warp-infobox__scroll .warp-infobox__scroll--text {
          -webkit-writing-mode: vertical-lr;
          -ms-writing-mode: tb-rl;
          writing-mode: vertical-lr;
          display: inline-block; }
      .wrapper .warp-infobox .warp-infobox__scroll.pos-stop {
        left: 2.6%;
        bottom: 440px;
        position: absolute; } }
  @media screen and (min-width: 940px) {
    .wrapper .youtube {
      max-width: 50%;
      margin: 0;
      text-align: right; } }

footer {
  background-color: rgba(0, 0, 0, 0.48);
  padding-top: 28px;
  padding-bottom: 28px;
  font-family: fot-udkakugo-large-pr6n, sans-serif;
  font-weight: normal !important;
  font-style: normal;
  text-shadow: 0px 1px 8px #000;
  letter-spacing: 2px; }
  footer .text-info {
    max-width: 80%;
    margin: 0 auto 18px;
    color: #fff;
    font-size: 11px; }
  footer nav ul {
    text-align: center;
    padding: 15px 0; }
  footer nav li {
    display: inline-block;
    max-width: 30px;
    margin: 0 8px; }
  footer .border-bottom {
    border-bottom: 1px solid #7e8484; }
  footer div {
    border-bottom: 1px solid #7e8484; }
  footer div:last-child {
    border-bottom: none; }
  footer .icon_switch {
    max-width: 49px;
    margin: 21px auto 18px; }
  footer .logo-colopl {
    max-width: 91px;
    margin: 23px auto 0; }
  footer small {
    display: block;
    max-width: 252px;
    margin: 23px auto 0;
    color: #fff;
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 190%;
    text-align: center;
    display: block; }
  @media screen and (min-width: 576px) {
    footer .text-info-wrap {
      max-width: 800px;
      margin: 0 auto 10px;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between; }
    footer .text-info {
      max-width: 350px;
      margin: 0 auto 18px; } }

.result {
  opacity: 0; }

.loading {
  width: 100%;
  height: 100%;
  background: #000000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000; }
  .loading .spinner {
    /* Size and position */
    top: 30%;
    font-size: 80px;
    /* 1em */
    width: 1em;
    height: 1em;
    margin: 100px auto;
    position: relative;
    /* Styles */
    list-style: none;
    border-radius: 50%;
    border: 0.01em solid rgba(150, 150, 150, 0.1);
    /* Subtle white line circling the dots */ }
  .loading .spinner li {
    width: .2em;
    height: .2em;
    position: absolute;
    border-radius: 50%; }
  .loading .spinner li:nth-child(1) {
    background: #1fcec3;
    /* Blue */
    top: 0;
    left: 50%;
    margin-left: -.1em;
    /* Width/2 */
    -webkit-transform-origin: 50% 250%;
    -ms-transform-origin: 50% 250%;
    transform-origin: 50% 250%;
    animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate; }
  .loading .spinner li:nth-child(2) {
    background: #fff;
    /* Red */
    top: 50%;
    right: 0;
    margin-top: -.1em;
    /* Height/2 */
    -webkit-transform-origin: -150% 50%;
    -ms-transform-origin: -150% 50%;
    transform-origin: -150% 50%;
    animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate; }
  .loading .spinner li:nth-child(3) {
    background: #a7f1ec;
    /* Yellow */
    bottom: 0;
    left: 50%;
    margin-left: -.1em;
    /* Width/2 */
    -webkit-transform-origin: 50% -150%;
    -ms-transform-origin: 50% -150%;
    transform-origin: 50% -150%;
    animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate; }
  .loading .spinner li:nth-child(4) {
    background: #c9ffe6;
    /* Green */
    top: 50%;
    left: 0;
    margin-top: -.1em;
    /* Height/2 */
    -webkit-transform-origin: 250% 50%;
    -ms-transform-origin: 250% 50%;
    transform-origin: 250% 50%;
    animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate; }

@keyframes rota {
  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes opa {
  12.0% {
    opacity: 0.80; }
  19.5% {
    opacity: 0.88; }
  37.2% {
    opacity: 0.64; }
  40.5% {
    opacity: 0.52; }
  52.7% {
    opacity: 0.69; }
  60.2% {
    opacity: 0.60; }
  66.6% {
    opacity: 0.52; }
  70.0% {
    opacity: 0.63; }
  79.9% {
    opacity: 0.60; }
  84.2% {
    opacity: 0.75; }
  91.0% {
    opacity: 0.87; } }

.topbox {
  padding: 6px;
  color: #fff;
  margin-top: 150px;
  margin-bottom: 30px;
  min-height: 50vh; }
  .topbox .keyvisual {
    width: 100%;
    border: 2px solid #fff;
    line-height: 100%;
    margin-bottom: 30px; }
    .topbox .keyvisual img {
      vertical-align: bottom; }
  .topbox h1 {
    background-color: rgba(0, 0, 0, 0.8);
    text-align: center;
    padding: 9px 0px 0;
    max-width: 80%;
    margin: auto; }
    .topbox h1 img {
      max-width: 313px;
      padding: 0 10px; }
  .topbox .read {
    font-size: 0.6rem;
    max-width: 68%;
    margin: 10px auto;
    background-color: rgba(0, 0, 0, 0.8);
    letter-spacing: 3px;
    line-height: 100%; }

h1.warp-infobox__title {
  text-align: center;
  color: #fff !important;
  letter-spacing: 4px;
  font-size: 12px;
  text-shadow: 0px 1px 8px #000;
  max-width: 131px;
  margin: 0px auto 10px; }

.none-pa {
  padding: 0 0; }

.detail-btn {
  max-width: 73px;
  display: block; }

.infobox {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  margin: 0 10px 30px;
  border-radius: 10px;
  letter-spacing: 3px;
  text-shadow: 0px 1px 8px #000;
  font-family: fot-udkakugo-large-pr6n, sans-serif;
  font-weight: normal !important;
  font-style: normal; }
  .infobox section {
    padding: 14px 10px; }
  .infobox .facility02-wrap .detail-btn {
    margin: 14px 0 0; }
  .infobox h1 {
    text-align: left;
    position: relative;
    font-size: 15px;
    padding-top: 14px;
    line-height: 100%;
    font-family: fot-udkakugo-large-pr6n, sans-serif;
    font-weight: normal !important;
    font-style: normal;
    letter-spacing: 3px; }
    .infobox h1 img {
      vertical-align: bottom; }
  .infobox h1::before {
    content: "";
    display: block;
    position: absolute;
    left: -22px;
    top: 62%;
    height: 4px;
    width: 14px;
    border-radius: 2px;
    background: #1dff00;
    background: -moz-linear-gradient(left, #1dff00 0%, #00d8ff 100%);
    background: -webkit-linear-gradient(left, #1dff00 0%, #00d8ff 100%);
    background: linear-gradient(to right, #1dff00 0%, #00d8ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1dff00', endColorstr='#00d8ff',GradientType=1 ); }
  .infobox p {
    text-align: left;
    font-size: 0.7em;
    line-height: 160%; }
    .infobox p span {
      margin-top: 15px;
      padding-top: 11px;
      border-top: 1px solid rgba(255, 255, 255, 0.3);
      display: inline-block;
      line-height: 180%; }
    .infobox p br {
      display: none; }
  .infobox .info_img06 {
    max-width: 140px;
    margin: 30px auto 0; }
  .infobox .wholeview-img {
    width: 140%;
    margin-top: -20px;
    margin-left: -20px; }
  .infobox .internal-img02 {
    width: 130%; }
  .infobox .facility-img01-text {
    margin-bottom: 24px; }
  .infobox .info_img07_wrap-text .detail-btn {
    margin-top: 20px; }

@media screen and (min-width: 720px) {
  .detail-btn {
    position: absolute;
    z-index: 10000; }
  .infobox section.internal-pa {
    padding: 3% 43px; }
  .detail-btn {
    max-width: 73px; }
  .topbox {
    margin-top: 10%;
    padding: 0 0; }
    .topbox h1 {
      width: 600px;
      text-align: left;
      margin-left: 10%;
      margin-top: -83px;
      line-height: 100%;
      z-index: 1000;
      position: absolute;
      padding: 3px 0px 0; }
      .topbox h1 img {
        max-width: 599px;
        line-height: 100%; }
    .topbox .read {
      font-size: 1.2rem;
      padding: 0 3px 3px;
      margin: 0px 0;
      text-align: center;
      width: 540px;
      margin-left: 10%;
      margin-top: 8px; }
    .topbox .keyvisual {
      border: 3px solid #fff;
      width: calc(100% - 29%);
      margin-left: 15%; }
  h1.warp-infobox__title {
    max-width: 100%;
    text-align: right;
    padding-right: 30px;
    margin: 4px 0 16px; }
    h1.warp-infobox__title img {
      width: 401px; }
  .infobox {
    margin: 0 0px 16% 10px;
    border-radius: 10px 0px 0px 10px; }
    .infobox h1 {
      font-size: 1.4rem; }
    .infobox h1::before {
      left: -33px;
      height: 4px;
      top: 62%;
      width: 21px;
      border-radius: 2px; }
    .infobox p {
      font-size: 0.75rem;
      letter-spacing: 3px;
      line-height: 200%; }
      .infobox p br {
        display: block; }
    .infobox .facility01-wrap {
      width: 44%;
      padding: 5% 43px 0px;
      position: absolute;
      z-index: 100; }
    .infobox section {
      padding: 54px 43px; }
    .infobox .wholeview-img {
      width: 120%;
      margin-top: -70px;
      margin-left: -20px; }
    .infobox .info_img07_wrap-text {
      max-width: 45%; }
    .infobox section.info_img07_wrap {
      padding: 10% 43px 0px;
      position: relative; }
    .infobox .facility-img01 {
      max-width: 65%;
      margin-top: -28%;
      margin-right: -34%; }
    .infobox .facility02-wrap {
      position: relative;
      height: auto;
      padding-bottom: 22%;
      max-width: 44%; }
      .infobox .facility02-wrap p {
        display: inline-block; }
      .infobox .facility02-wrap .detail-btn {
        margin: 0;
        padding-top: 10px;
        float: left; }
  .youtube-wrap {
    position: relative;
    content: '';
    display: block;
    padding-top: 100%; }
    .youtube-wrap h1 {
      padding: 11.6% 0; }
    .youtube-wrap h1::before {
      top: 49%; }
    .youtube-wrap .youtube {
      position: absolute;
      right: 5%;
      top: 50%;
      margin-top: -14.5%; } }

.move_wrap {
  position: relative;
  /*アニメーション効果 飛行島*/
  /*アニメーション効果 飛行島内部*/
  /*アニメーション効果 施設.1ギルド*/
  /*アニメーション効果 施設.2鍛冶屋*/
  /*アニメーション効果 マロン*/
  /*アニメーション効果 ボスモンスター*/ }
  .move_wrap .charabox01 {
    padding-top: 66%;
    position: relative;
    width: 120%;
    margin: auto;
    height: auto;
    background-size: 100% auto;
    z-index: 100; }
    .move_wrap .charabox01 .chara01_01::after {
      content: '';
      position: absolute;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      opacity: 0;
      top: -4%;
      left: -5%;
      background: url(../img/assets_181215/info_img01_sp.png) no-repeat center top;
      background-size: 100% auto;
      width: 110%;
      padding-top: 70%;
      z-index: 2;
      -webkit-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -o-transform-origin: center center;
      transform-origin: center center; }
  @media screen and (min-width: 720px) {
    .move_wrap .charabox01 {
      padding-top: 46%;
      width: 120%; }
      .move_wrap .charabox01 .chara01_01::after {
        top: -16%;
        left: 0%;
        background: url(../img/assets_181215/info_img01_pc.png) no-repeat center top;
        background-size: 100% auto;
        width: 100%; } }
  .move_wrap .internal-pa {
    padding: 14px 10px; }
    .move_wrap .internal-pa p {
      margin-bottom: 16px; }
  .move_wrap .internal-img01 {
    width: 100%;
    height: auto;
    background-size: 100% auto;
    z-index: 100; }
    .move_wrap .internal-img01 .internal-img01_01 {
      position: relative; }
    .move_wrap .internal-img01 .internal-img01_01::after {
      content: '';
      position: absolute;
      top: 0%;
      left: 2%;
      width: 96%;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      opacity: 0;
      background: url(../img/assets_181215/info_img02_sp.png) no-repeat center top;
      background-size: 100% auto;
      padding-top: 60%;
      z-index: 2;
      -webkit-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -o-transform-origin: center center;
      transform-origin: center center; }
    .move_wrap .internal-img01 .detail-btn {
      margin: 14px auto 14px;
      padding-top: 12%; }
  @media screen and (min-width: 720px) {
    .move_wrap .internal-img01 {
      padding-top: 0%;
      width: 55%;
      margin: 0px 0 0 46px; }
      .move_wrap .internal-img01 .internal-img01_01 {
        padding-top: 30%; }
      .move_wrap .internal-img01 .internal-img01_01::after {
        top: 20%;
        left: 0;
        margin-left: 0%;
        background: url(../img/assets_181215/info_img02_pc.png) no-repeat center top;
        background-size: 100% auto;
        width: 100%;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -ms-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center; } }
  .move_wrap .internal-img02 {
    width: 100%;
    padding-top: 60%;
    height: auto;
    background-size: 100% auto;
    z-index: 100; }
    .move_wrap .internal-img02 .internal-img01_02 {
      position: relative;
      padding-top: 46%; }
    .move_wrap .internal-img02 .internal-img01_02::after {
      content: '';
      position: absolute;
      top: -84%;
      right: -5%;
      transform: scale(1);
      padding-top: 100%;
      opacity: 0;
      background: url(../img/assets_181215/info_img03_sp.png) no-repeat center top;
      background-size: 100% auto;
      width: 100%;
      z-index: 2;
      -webkit-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -o-transform-origin: center center;
      transform-origin: center center; }
    .move_wrap .internal-img02 .detail-btn {
      margin: 14px auto 14px;
      padding-top: 12%; }
  .move_wrap .internal-img02-text {
    margin-top: -16px;
    padding-bottom: 20px; }
  @media screen and (min-width: 720px) {
    .move_wrap .internal-img02 {
      padding-top: 0%;
      width: 100%;
      margin: 0; }
      .move_wrap .internal-img02 .internal-img01_02 {
        margin-top: 0%;
        padding-top: 23%; }
      .move_wrap .internal-img02 .internal-img01_02::after {
        top: -106%;
        right: 0;
        left: auto;
        background: url(../img/assets_181215/info_img03_pc.png) no-repeat center top;
        padding-top: 45%;
        background-size: 100% auto;
        width: 58%;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -ms-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center; }
    .move_wrap .internal-img02-text {
      width: 23%;
      line-height: 160%;
      position: absolute;
      left: 74%;
      top: 84%; } }
  .move_wrap .charabox03 {
    width: 100%;
    margin: 0px auto 0;
    height: auto;
    background-size: 100% auto;
    padding-top: 80%;
    z-index: 1;
    position: relative; }
    .move_wrap .charabox03 .chara03_01::after {
      content: '';
      position: absolute;
      top: 0%;
      right: 0;
      transform: scale(1);
      opacity: 0;
      background: url(../img/assets_181215/info_img04_sp.png) no-repeat center top;
      background-size: 100% auto;
      width: 100%;
      padding-top: 76%;
      z-index: 2;
      -webkit-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -o-transform-origin: center center;
      transform-origin: center center; }
    .move_wrap .charabox03 .detail-btn {
      position: absolute;
      margin: 24px auto 14px;
      padding-top: 16%; }
  @media screen and (min-width: 720px) {
    .move_wrap .charabox03 {
      padding-top: 45%; }
      .move_wrap .charabox03 .chara03_01::after {
        top: 50%;
        right: 4%;
        margin-top: -21%;
        background: url(../img/assets_181215/info_img04_pc.png) no-repeat center top;
        padding-top: 45%;
        background-size: 100% auto;
        max-width: 58%;
        -webkit-transform-origin: right center;
        -moz-transform-origin: right center;
        -ms-transform-origin: right center;
        -o-transform-origin: right center;
        transform-origin: right center; }
      .move_wrap .charabox03 .detail-btn {
        position: absolute;
        right: 8%;
        bottom: 3%;
        margin: 14px 0 14px;
        padding-top: 12%; } }
  .move_wrap .facility-img02 {
    width: 100%;
    margin: 0 auto 0px;
    height: auto;
    background-size: 100% auto;
    padding-top: 100%;
    z-index: 100;
    position: relative; }
    .move_wrap .facility-img02 .facility-img02_01::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      transform: scale(1);
      opacity: 0;
      background: url(../img/assets_181215/info_img05_sp.png) no-repeat center top;
      background-size: 100% auto;
      width: 100%;
      padding-top: 100%;
      z-index: 2;
      -webkit-transform-origin: center center;
      -moz-transform-origin: center center;
      -ms-transform-origin: center center;
      -o-transform-origin: center center;
      transform-origin: center center; }
  @media screen and (min-width: 720px) {
    .move_wrap .facility-img02 {
      padding-top: 0%;
      padding-bottom: 0%;
      position: relative; }
      .move_wrap .facility-img02 .facility-img02_01::after {
        top: 50%;
        right: 6%;
        background: url(../img/assets_181215/info_img05_pc.png) no-repeat center bottom;
        margin-top: -46%;
        padding-top: 54%;
        background-size: 100% auto;
        width: 54%;
        -webkit-transform-origin: center center;
        -moz-transform-origin: center center;
        -ms-transform-origin: center center;
        -o-transform-origin: center center;
        transform-origin: center center; } }
  .move_wrap .animation--chara::after {
    animation: chara-after 1.2s ease-out forwards;
    -webkit-animation: chara-after 1.2s ease-out forwards; }

@keyframes chara-after {
  0% {
    opacity: 0.5;
    transform-origin: right top 0;
    -o-transform-origin: right top 0;
    -ms-transform-origin: right top 0;
    -moz-transform-origin: right top 0;
    -webkit-transform-origin: right top 0;
    transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
  .move_wrap .animation--inside::after {
    animation: inside-after 1.2s ease-out forwards;
    -o-animation: inside-after 1.2s ease-out forwards;
    -ms-animation: inside-after 1.2s ease-out forwards;
    -moz-animation: inside-after 1.2s ease-out forwards;
    -webkit-animation: inside-after 1.2s ease-out forwards; }

@keyframes inside-after {
  0% {
    opacity: 0.5;
    -webkit-transform: translateX(-40px);
    -moz-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    -o-transform: translateX(-40px);
    transform: translateX(-40px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px); } }
  .move_wrap .animation--facility01::after {
    -webkit-animation: facility01-after 0.7s ease-out forwards;
    -moz-animation: facility01-after 0.7s ease-out forwards;
    -ms-animation: facility01-after 0.7s ease-out forwards;
    -o-animation: facility01-after 0.7s ease-out forwards;
    animation: facility01-after 0.7s ease-out forwards; }

@keyframes facility01-after {
  0% {
    opacity: 0.5;
    -webkit-transform: translateX(-40px);
    -moz-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    -o-transform: translateX(-40px);
    transform: translateX(-40px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
  .move_wrap .animation--facility02::after {
    -webkit-animation: facility02-after 1s ease-out forwards;
    -moz-animation: facility02-after 1s ease-out forwards;
    -ms-animation: facility02-after 1s ease-out forwards;
    -o-animation: facility02-after 1s ease-out forwards;
    animation: facility02-after 1s ease-out forwards; }

@keyframes facility02-after {
  0% {
    -webkit-transform: translateX(-40px);
    -moz-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    -o-transform: translateX(-40px);
    transform: translateX(-40px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
  .move_wrap .animation--maron::after {
    animation: maron-after 1.3s ease-out forwards;
    -webkit-animation: maron-after 1.3s ease-out forwards;
    -moz-animation: maron-after 1.3s ease-out forwards;
    -ms-animation: maron-after 1.3s ease-out forwards;
    -o-animation: maron-after 1.3s ease-out forwards; }

@keyframes maron-after {
  0% {
    -webkit-transform: translateX(-40px);
    -moz-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    -o-transform: translateX(-40px);
    transform: translateX(-40px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
  .move_wrap .animation--boss::after {
    -webkit-animation: boss-after 1s ease-out forwards;
    -moz-animation: boss-after 1s ease-out forwards;
    -ms-animation: boss-after 1s ease-out forwards;
    -o-animation: boss-after 1s ease-out forwards;
    animation: boss-after 1s ease-out forwards; }

@keyframes boss-after {
  0% {
    -webkit-transform: translateX(-40px);
    -moz-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    -o-transform: translateX(-40px);
    transform: translateX(-40px); }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -o-transform: translateX(0px);
    transform: translateX(0px);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }

.topbox .keyvisual,
.topbox .titilemotion,
.topbox .read {
  text-align: center;
  position: relative; }

.topbox .keyvisual::before,
.topbox .titilemotion::before,
.topbox .read::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: '';
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: scale(0, 1);
  -moz-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  -o-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: transform .18s;
  -moz-transition: transform .18s;
  -ms-transition: transform .18s;
  -o-transition: transform .18s;
  transition: transform .18s; }

.topbox .keyvisual-bg {
  background: #eee; }

.topbox .keyvisual::before {
  background: #fff; }

.topbox .titilemotion::before,
.topbox .read::before {
  background: #1dff00;
  background: -moz-linear-gradient(left, #1dff00 0%, #00d8ff 100%);
  background: -webkit-linear-gradient(left, #1dff00 0%, #00d8ff 100%);
  background: linear-gradient(to right, #1dff00 0%, #00d8ff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1dff00', endColorstr='#00d8ff',GradientType=1 ); }

.topbox .motion-bg::before {
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1); }

.topbox .motion-bg-clear::before {
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: scale(0, 1);
  -moz-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  -o-transform: scale(0, 1);
  transform: scale(0, 1); }

.topics {
  width: 81%;
  max-width: 800px;
  margin: 3% auto;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px 24px;
  color: #000;
  text-align: center; }

@media screen and (max-width: 720px) {
  .topics {
    padding: 14px 24px; } }

.topics a {
  color: #000; }

.topics a .spOnly {
  display: none; }

@media screen and (max-width: 720px) {
  .topics a .spOnly {
    display: block; } }