@charset "UTF-8";
/* ==========================================================================
	計測タグの余白をリセット
========================================================================== */
iframe[name=google_conversion_frame] {
  position: absolute;
  height: 0;
}

/* ==========================================================================
	はてぶアイコン
========================================================================== */
.fa-hatena:before {
  font-family: Verdana;
  font-weight: bold;
  content: "B!";
}

/*! sanitize.css v4.0.0 | CC0 License | github.com/10up/sanitize.css */
/* Display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  /* 1 */
  display: block;
}

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
  display: none;
}

/* Elements of HTML (https://www.w3.org/TR/html5/semantics.html)
   ========================================================================== */
/**
 * 1. Remove repeating backgrounds in all browsers (opinionated).
 * 2. Add box sizing inheritence in all browsers (opinionated).
 */
*,
::before,
::after {
  box-sizing: inherit;
  /* 2 */
  background-repeat: no-repeat;
  /* 1 */
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritence in all browsers (opinionated).
 */
::before,
::after {
  text-decoration: inherit;
  /* 1 */
  vertical-align: inherit;
  /* 2 */
}

/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Add the default cursor in all browsers (opinionated).
 * 3. Add a flattened line height in all browsers (opinionated).
 * 4. Prevent font size adjustments after orientation changes in IE and iOS.
 */
html {
  box-sizing: border-box;
  /* 1 */
  font-family: sans-serif;
  /* 3 */
  line-height: 1.5;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 5 */
  -ms-text-size-adjust: 100%;
  /* 4 */
  cursor: default;
  /* 2 */
}

/* Sections (https://www.w3.org/TR/html5/sections.html)
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}

/**
 * Correct the font sizes and margins on `h1` elements within
 * `section` and `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  margin: 0.67em 0;
  font-size: 2em;
}

/* Grouping content (https://www.w3.org/TR/html5/grouping-content.html)
   ========================================================================== */
/**
 * 1. Correct font sizing inheritance and scaling in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * 1. Correct the height in Firefox.
 * 2. Add visible overflow in Edge and IE.
 */
hr {
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
nav ol,
nav ul {
  list-style: none;
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Add a bordered underline effect in all browsers.
 * 2. Remove text decoration in Firefox 40+.
 */
abbr[title] {
  text-decoration: none;
  /* 2 */
  border-bottom: 1px dotted;
  /* 1 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}

/**
 * Add the correct colors in IE 9-.
 */
mark {
  color: #000000;
  background-color: #ffff00;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Correct the font size in all browsers.
 */
small {
  font-size: 83.3333%;
}

/**
 * Change the positioning on superscript and subscript elements
 * in all browsers (opinionated).
 * 1. Correct the font size in all browsers.
 */
sub,
sup {
  position: relative;
  font-size: 83.3333%;
  /* 1 */
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
 * Remove the text shadow on text selections (opinionated).
 * 1. Restore the coloring undone by defining the text shadow (opinionated).
 */
::-moz-selection {
  color: #000000;
  /* 1 */
  text-shadow: none;
  background-color: #b3d4fc;
  /* 1 */
}

::selection {
  color: #000000;
  /* 1 */
  text-shadow: none;
  background-color: #b3d4fc;
  /* 1 */
}

/* Embedded content (https://www.w3.org/TR/html5/embedded-content-0.html)
   ========================================================================== */
/*
 * Change the alignment on media elements in all browers (opinionated).
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
svg {
  fill: currentColor;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Links (https://www.w3.org/TR/html5/links.html#links)
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove the gaps in underlines in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}

/**
 * Remove the outline when hovering in all browsers (opinionated.
 */
:hover {
  outline-width: 0;
}

/* Tabular data (https://www.w3.org/TR/html5/tabular-data.html)
   ========================================================================== */
/*
 * Remove border spacing in all browsers (opinionated).
 */
table {
  border-spacing: 0;
  border-collapse: collapse;
}

/* transform-style:  (https://www.w3.org/TR/html5/forms.html)
   ========================================================================== */
/**
 * 1. Remove the default styling in all browsers (opinionated).
 * 3. Remove the margin in Firefox and Safari.
 */
button,
input,
select,
textarea {
  margin: 0;
  /* 3 */
  font-size: 1em;
  /* 1 */
  color: inherit;
  /* 1 */
  background-color: transparent;
  /* 1 */
  border-style: none;
  /* 1 */
}

/**
 * Correct the overflow in IE.
 * 1. Correct the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance in Edge, Firefox, and IE.
 * 1. Remove the inheritance in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent the WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
  /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/**
 * Correct the focus styles unset by the previous rule.
 */
:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the border, margin, and padding in all browsers.
 */
fieldset {
  padding: 0.35em 0.625em 0.75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 2 */
  white-space: normal;
  /* 1 */
}

/**
 * 1. Remove the vertical scrollbar in IE.
 * 2. Change the resize direction on textareas in all browsers (opinionated).
 */
textarea {
  overflow: auto;
  /* 1 */
  resize: vertical;
  /* 2 */
}

/**
 * Remove the padding in IE 10-.
 */
[type=checkbox],
[type=radio] {
  padding: 0;
}

/**
 * Correct the cursor style on increment and decrement buttons in Chrome.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari for OS X.
 */
::-webkit-search-cancel-button,
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Correct the text style on placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* WAI-ARIA (https://www.w3.org/TR/html5/dom.html#wai-aria)
   ========================================================================== */
/**
 * Change the cursor on busy elements (opinionated).
 */
[aria-busy=true] {
  cursor: progress;
}

/*
 * Change the cursor on control elements (opinionated).
 */
[aria-controls] {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements (opinionated).
 */
[aria-disabled] {
  cursor: default;
}

/* User interaction (https://www.w3.org/TR/html5/editing.html)
   ========================================================================== */
/*
 * Remove the tapping delay on clickable elements (opinionated).
 * 1. Remove the tapping delay in IE 10.
 */
a,
area,
button,
input,
label,
select,
textarea,
[tabindex] {
  /* 1 */
  touch-action: manipulation;
}

/*
 * Change the display on visually hidden accessible elements (opinionated).
 */
[hidden][aria-hidden=false] {
  position: absolute;
  display: inherit;
  clip: rect(0, 0, 0, 0);
}

[hidden][aria-hidden=false]:focus {
  clip: auto;
}

/* ==========================================================================
	BASE
========================================================================== */
body {
  height: 100%;
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  -webkit-text-size-adjust: 100%;
  background: #000;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@media (min-width: 751px) {
  body {
    overflow: hidden;
  }
}

/* sanitize overwrite */
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt {
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

ol, ul, li {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

a:focus {
  outline: none;
}

.l-footer {
  position: relative;
  color: #fff;
  font-size: 1.125rem;
  width: 750px;
  margin: 0 auto;
  padding: 16px 24px;
  background: #000;
  margin-top: -1px;
}
.l-footer__link {
  display: flex;
}
.l-footer__link__item:before {
  content: "▶";
  font-size: 1rem;
  margin-right: 4px;
}
.l-footer__link__item + .l-footer__link__item {
  margin-left: 24px;
}
.l-footer__notice {
  margin-top: 8px;
}

.l-main {
  /* position: relative;
  height: 100%;
  overflow: hidden;

  @media (min-width: 750px) {
      ///height: 100vh;
      max-width: 750px;
      margin: 0 auto;
  } */
}

.l-screen {
  position: relative;
  width: 750px;
  height: 100%;
  margin: 0 auto;
  transform-origin: top;
  overflow: hidden;
}

@-webkit-keyframes itenInOpa {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes itenInOpa {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes itenOutOpa {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes itenOutOpa {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes itemInY {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes itemInY {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes itemInLR {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@keyframes itemInLR {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@-webkit-keyframes itemInRL {
  0% {
    -webkit-clip-path: inset(0 0 0 100%);
            clip-path: inset(0 0 0 100%);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@keyframes itemInRL {
  0% {
    -webkit-clip-path: inset(0 0 0 100%);
            clip-path: inset(0 0 0 100%);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@-webkit-keyframes itemInTB {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@keyframes itemInTB {
  0% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@-webkit-keyframes itemInCRL {
  0% {
    -webkit-clip-path: inset(0 100% 0 100%);
            clip-path: inset(0 100% 0 100%);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@keyframes itemInCRL {
  0% {
    -webkit-clip-path: inset(0 100% 0 100%);
            clip-path: inset(0 100% 0 100%);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@-webkit-keyframes itenRotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes itenRotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes kirakira {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes kirakira {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.c-bodytxt {
  font-size: 1.9375rem;
  line-height: 1.8;
}

.c-str {
  font-style: normal;
  font-weight: bold;
}

.c-yakumono {
  margin-left: -0.5em;
}

.c-dash {
  letter-spacing: -0.1em;
}

.c-hidetxt {
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
}

.c-hide {
  opacity: 0;
  display: none;
}

.c-visible {
  opacity: 1;
  display: block;
}

/* ==========================================================================
    utility:clearfix
========================================================================== */
.u-clearfix:after {
  display: block;
  clear: both;
  content: "";
}

/* ==========================================================================
    utility:guide
========================================================================== */
.u-guide {
  z-index: 9999;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: url(../..//sp/assets/img/common/guide.png) repeat-y top center;
  position: fixed;
  top: 0;
  left: 0;
}

.howto {
  position: absolute;
  top: 0;
  left: 0;
  background: url(../..//assets/img/howto/bg_1.png) repeat-y bottom center/100% auto;
  width: 100%;
  height: calc(100% - 88px);
  opacity: 0;
  transition: all 0.5s;
  transform: translateY(-20px);
  visibility: hidden;
  z-index: 1;
}
.-inmodal .howto {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.howto::after {
  position: absolute;
  left: 0;
  bottom: -87px;
  background: url(../..//assets/img/howto/bg_2.png) no-repeat 0 0/contain;
  content: "";
  height: 88px;
  width: 100%;
}

.howto__logo {
  margin: 0 auto;
  width: 171px;
}

.howto__inner {
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}

.howto__close {
  position: absolute;
  top: 40px;
  right: 40px;
  background: url(../..//assets/img/howto/close.svg) no-repeat;
  height: 72px;
  width: 72px;
  z-index: 2;
}

.howto__ttl {
  display: block;
  margin: 26px auto 0;
  width: 668px;
  /* margin: 0 auto;
  width: 680px;
  height: 314px;
  background: url(../..//assets/img/howto/ttl.png)no-repeat;
  animation: howto_ttl 1s steps(2) infinite; */
}

@-webkit-keyframes howto_ttl {
  to {
    background-position: 0 -628px;
  }
}

@keyframes howto_ttl {
  to {
    background-position: 0 -628px;
  }
}
.howto__txt {
  display: block;
  margin: 68px auto 0;
  width: 668px;
}

.shoulder_logo {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 1;
}

.shoulder_logo__inner {
  display: flex;
}

.shoulder_logo__imte {
  transform-origin: bottom;
  display: block;
}
[data-status=game] .shoulder_logo__imte {
  -webkit-animation: anim_shlogo 4s 1s infinite;
          animation: anim_shlogo 4s 1s infinite;
}
.shoulder_logo__imte.-item2 {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  margin-left: -3.5px;
}
.shoulder_logo__imte.-item3 {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
  margin-left: -2.7px;
}
.shoulder_logo__imte.-item4 {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
  margin-left: -4.3px;
}
.shoulder_logo__imte.-item5 {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
  margin-left: -1.6px;
}
.shoulder_logo__imte.-item6 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  margin-left: -4.1px;
}
.shoulder_logo__imte img {
  height: 46px;
  width: auto;
}

@-webkit-keyframes anim_shlogo {
  0% {
    transform: translateY(0px) scaleY(1);
  }
  3% {
    transform: translateY(-10px) scaleY(1.1);
  }
  6% {
    transform: translateY(0px) scaleY(0.8);
  }
  12% {
    transform: translateY(0px) scaleY(1);
  }
  20% {
    transform: translateY(0px) scaleY(1);
  }
  100% {
    transform: translateY(0px) scaleY(1);
  }
}

@keyframes anim_shlogo {
  0% {
    transform: translateY(0px) scaleY(1);
  }
  3% {
    transform: translateY(-10px) scaleY(1.1);
  }
  6% {
    transform: translateY(0px) scaleY(0.8);
  }
  12% {
    transform: translateY(0px) scaleY(1);
  }
  20% {
    transform: translateY(0px) scaleY(1);
  }
  100% {
    transform: translateY(0px) scaleY(1);
  }
}
.tweetbtn {
  position: absolute;
  top: 729px;
  left: 75px;
  display: block;
  z-index: 1;
  width: 278px;
}

.pullbtn {
  display: none;
  position: absolute;
  bottom: 190px;
  right: 16px;
  width: 266px;
  height: 266px;
  z-index: 1;
  background: url(../..//assets/img/layout/btn_pull.png) no-repeat 0 0/100%;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
  transition: all 0.2s 0s ease;
}
.pullbtn:active {
  transform: scale(0.8);
}

.pullbtn__hand {
  position: absolute;
  top: 57px;
  left: 69px;
  width: 128px;
  height: 96px;
  background: url(../..//assets/img/layout/btn_pull_hand.png) no-repeat 0 0/100%;
  -webkit-animation: anim_pull 1s steps(2) infinite;
          animation: anim_pull 1s steps(2) infinite;
}

.pullbtn__txt {
  text-align: center;
}

@-webkit-keyframes anim_pull {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(30deg);
  }
}

@keyframes anim_pull {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(30deg);
  }
}
.backbtn {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 132px;
  z-index: 1;
}
.backbtn img {
  width: 100%;
}

.stage__bag {
  position: absolute;
  top: 260px;
  left: 200px;
  width: 350px;
  height: 500px;
}
.stage__bag.bag1 {
  background: url(../..//assets/img/bag/bag_1.png) no-repeat;
}
.stage__bag.bag2 {
  background: url(../..//assets/img/bag/bag_2.png) no-repeat;
}
.stage__bag.bag3 {
  background: url(../..//assets/img/bag/bag_3.png) no-repeat;
}
.stage__bag.bag4 {
  background: url(../..//assets/img/bag/bag_4.png) no-repeat;
}
.stage__bag.bag5 {
  background: url(../..//assets/img/bag/bag_5.png) no-repeat;
}
.stage__bag.bag6 {
  background: url(../..//assets/img/bag/bag_6.png) no-repeat;
}
.stage__bag.bag7 {
  background: url(../..//assets/img/bag/bag_7.png) no-repeat;
}
.stage__bag.bag8 {
  background: url(../..//assets/img/bag/bag_8.png) no-repeat;
}
.stage__bag.bag9 {
  background: url(../..//assets/img/bag/bag_9.png) no-repeat;
}
.stage__bag.bag10 {
  background: url(../..//assets/img/bag/bag_10.png) no-repeat;
}
.stage__bag.bag11 {
  background: url(../..//assets/img/bag/bag_11.png) no-repeat;
}
.stage__bag.bag12 {
  background: url(../..//assets/img/bag/bag_12.png) no-repeat;
}
.stage__bag.bag13 {
  background: url(../..//assets/img/bag/bag_13.png) no-repeat;
}
.stage__bag.bag14 {
  background: url(../..//assets/img/bag/bag_14.png) no-repeat;
}
.stage__bag.bag15 {
  background: url(../..//assets/img/bag/bag_15.png) no-repeat;
}
.stage__bag.bag16 {
  background: url(../..//assets/img/bag/bag_16.png) no-repeat;
}
.stage__bag.bag17 {
  background: url(../..//assets/img/bag/bag_17.png) no-repeat;
}
.stage__bag.bag18 {
  background: url(../..//assets/img/bag/bag_18.png) no-repeat;
}
.stage__bag.bag19 {
  background: url(../..//assets/img/bag/bag_19.png) no-repeat;
}
.stage__bag.bag20 {
  background: url(../..//assets/img/bag/bag_20.png) no-repeat;
}
.stage__bag.bag21 {
  background: url(../..//assets/img/bag/bag_21.png) no-repeat;
}
.stage__bag.bag22 {
  background: url(../..//assets/img/bag/bag_22.png) no-repeat;
}

.stage {
  position: relative;
  height: 100%;
  min-height: 1150px;
  background: url(../..//assets/img/stage/base_bg.jpg) no-repeat 0 0/100%;
}
.stage__dark {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 900px;
}
.stage__dark.is-top {
  background: rgba(0, 0, 0, 0.8);
}
.stage__person {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 166px;
  background: url(../..//assets/img/stage/person.png) no-repeat;
}
.stage__spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 892px;
  background: url(../..//assets/img/stage/spotlight.png) no-repeat;
  mix-blend-mode: overlay;
}
@-webkit-keyframes anim_lights {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes anim_lights {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.stage__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../..//assets/img/stage/dot.png);
}

.stage__light {
  position: absolute;
  top: 0;
  left: 50%;
  background: url(../..//assets/img/stage/ph_light.png) no-repeat 0 0/100%;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  height: 784px;
  transform: translateX(-50%);
  width: 500px;
}
[data-status=game] .stage__light {
  -webkit-animation: itemInTB 0.5s 2s forwards;
          animation: itemInTB 0.5s 2s forwards;
}

.stage__lights__item {
  position: absolute;
  bottom: 135px;
  opacity: 0;
}
.stage__lights__item.-item1 {
  background: url(../..//assets/img/stage/ph_blight_1.png) no-repeat;
}
.stage__lights__item.-item2 {
  background: url(../..//assets/img/stage/ph_blight_2.png) no-repeat;
}
.stage__lights__item.-item3 {
  background: url(../..//assets/img/stage/ph_blight_3.png) no-repeat;
}
.stage__lights__item.-item4 {
  background: url(../..//assets/img/stage/ph_blight_4.png) no-repeat;
}
[data-status=game] .stage__lights__item {
  -webkit-animation: itenInOpa 0.2s 0.9s forwards;
          animation: itenInOpa 0.2s 0.9s forwards;
}
.stage__lights__item.-item1 {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  right: 560px;
  height: 871px;
  width: 721px;
}
.stage__lights__item.-item2 {
  left: -155px;
  height: 1119px;
  width: 500px;
}
.stage__lights__item.-item3 {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  right: -155px;
  height: 1119px;
  width: 500px;
}
.stage__lights__item.-item4 {
  left: 560px;
  height: 871px;
  width: 721px;
}

.stage__stage {
  position: absolute;
  top: 668px;
  left: 50%;
  background: url(../..//assets/img/stage/ph_stage.png) no-repeat 0 0/100%;
  height: 234px;
  opacity: 0;
  transform: translate(-50%, 0);
  width: 478px;
}
[data-status=game] .stage__stage {
  -webkit-animation: stageIn 0.5s 0.8s forwards;
          animation: stageIn 0.5s 0.8s forwards;
}

@-webkit-keyframes stageIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -100px);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, 30px);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -10px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes stageIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -100px);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, 30px);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -10px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.stage__curtain {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  pointer-events: none;
  width: 100%;
  z-index: 1;
}

.stage__curtain__item {
  background: #f684a7;
  border-radius: 0 0 999px 999px;
  height: 120%;
  transform: translateY(0);
  transform-origin: top center;
  width: 12.5%;
}
.stage__curtain__item:nth-child(2n) {
  background: #ffc4da;
}
.ready .stage__curtain__item {
  -webkit-animation: curtainOut 0.5s 1.2s forwards;
          animation: curtainOut 0.5s 1.2s forwards;
}
.stage__curtain__item.-item1 {
  -webkit-animation-delay: 1.25s;
          animation-delay: 1.25s;
}
.stage__curtain__item.-item2 {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
.stage__curtain__item.-item3 {
  -webkit-animation-delay: 1.35s;
          animation-delay: 1.35s;
}
.stage__curtain__item.-item4 {
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.stage__curtain__item.-item5 {
  -webkit-animation-delay: 1.45s;
          animation-delay: 1.45s;
}
.stage__curtain__item.-item6 {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.stage__curtain__item.-item7 {
  -webkit-animation-delay: 1.55s;
          animation-delay: 1.55s;
}
.stage__curtain__item.-item8 {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

@-webkit-keyframes curtainOut {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-90%);
  }
}

@keyframes curtainOut {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-90%);
  }
}
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1e1e28;
  pointer-events: none;
  z-index: 9999;
}

.loader__txt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 389px;
  height: 110px;
  background: url(../..//assets/img/loader/txt.png) no-repeat 0 0/100%;
  transform: translate(-50%, -50%);
}

.top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.top__backlight {
  position: absolute;
  top: 140px;
  left: 0;
  width: 750px;
  height: 760px;
  background: url(../..//assets/img/top/backlight.png) no-repeat;
}

@-webkit-keyframes toplogo_icoanim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(25deg);
  }
}

@keyframes toplogo_icoanim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(25deg);
  }
}
.top__logo {
  position: absolute;
  top: 168px;
  left: 75px;
  height: 600px;
  width: 600px;
  background: url(../..//assets/img/top/logo/ph_1.png) no-repeat 0 0/100%;
}
.top__logo .hidetxt {
  display: none;
}
.top__logo span {
  display: block;
  transform-origin: bottom;
  -webkit-animation: anim_shlogo 4s 0s infinite;
          animation: anim_shlogo 4s 0s infinite;
}
.top__logo .ico {
  position: absolute;
  top: 465px;
  left: 440px;
  height: 153px;
  width: 128px;
  background: url(../..//assets/img/top/logo/ph_ico.png) no-repeat 0 0/100%;
  -webkit-animation: toplogo_icoanim 1s steps(2) infinite;
          animation: toplogo_icoanim 1s steps(2) infinite;
}
.top__logo .t1 {
  position: absolute;
  top: 133px;
  left: 128px;
  height: 162px;
  width: 150px;
  background: url(../..//assets/img/top/logo/txt_mo.png) no-repeat 0 0/100%;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.top__logo .t2 {
  position: absolute;
  top: 140px;
  left: 286px;
  height: 150px;
  width: 202px;
  background: url(../..//assets/img/top/logo/txt_ba.png) no-repeat 0 0/100%;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.top__logo .t3 {
  position: absolute;
  top: 300px;
  left: 90px;
  height: 146px;
  width: 104px;
  background: url(../..//assets/img/top/logo/txt_l.png) no-repeat 0 0/100%;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.top__logo .t4 {
  position: absolute;
  top: 300px;
  left: 208px;
  height: 150px;
  width: 40px;
  background: url(../..//assets/img/top/logo/txt_i.png) no-repeat 0 0/100%;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.top__logo .t5 {
  position: absolute;
  top: 296px;
  left: 271px;
  height: 154px;
  width: 126px;
  background: url(../..//assets/img/top/logo/txt_v.png) no-repeat 0 0/100%;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.top__logo .t6 {
  position: absolute;
  top: 304px;
  left: 409px;
  height: 143px;
  width: 110px;
  background: url(../..//assets/img/top/logo/txt_e.png) no-repeat 0 0/100%;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.top__star {
  opacity: 0;
}
.top__star.-ver1 {
  background: url(../..//assets/img/top/deco_star_1.png) no-repeat;
  height: 38px;
  width: 32px;
}
.top__star.-ver2 {
  background: url(../..//assets/img/top/deco_star_2.png) no-repeat;
  height: 56px;
  width: 48px;
}
.ready .top__star {
  -webkit-animation: starMove 2s 3s infinite;
          animation: starMove 2s 3s infinite;
}
.top__star.-star1 {
  position: absolute;
  top: 162px;
  left: 120px;
}
.top__star.-star2 {
  position: absolute;
  top: 238px;
  left: 570px;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.top__star.-star3 {
  position: absolute;
  top: 198px;
  left: 596px;
}
.top__star.-star4 {
  position: absolute;
  top: 770px;
  left: 118px;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.top__star.-star5 {
  position: absolute;
  top: 796px;
  left: 75px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.top__star.-star6 {
  position: absolute;
  top: 802px;
  left: 626px;
}
.top__star.-star7 {
  position: absolute;
  top: 772px;
  left: 656px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}

@-webkit-keyframes starMove {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes starMove {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
.top__start {
  position: absolute;
  top: 827px;
  left: 164px;
  width: 430px;
  height: 114px;
  background: url(../..//assets/img/top/btn_start.png) no-repeat top center;
}
@media (min-width: 751px) {
  .top__start:active {
    background-position: 0 bottom;
  }
}

@-webkit-keyframes anim_play {
  to {
    background-position: 0 -660px;
  }
}

@keyframes anim_play {
  to {
    background-position: 0 -660px;
  }
}
@-webkit-keyframes anim_logo {
  to {
    background-position: 0 -1100px;
  }
}
@keyframes anim_logo {
  to {
    background-position: 0 -1100px;
  }
}
.cutin {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.cutin__01 {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 328px;
  transform: translate(0, -50%);
  background: url(../..//assets/img/cutin/cut.png) no-repeat 0 0/100%;
}

.paper {
  position: absolute;
  top: 196px;
  left: 75px;
  width: 610px;
  height: 510px;
  opacity: 0;
  background: url(../..//assets/img/layout/ph_paper.png) no-repeat 0 0/100%;
  display: flex;
  align-items: center;
}

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

.word {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.word__light {
  position: absolute;
  top: -80px;
  left: -175px;
  width: 1100px;
  height: 1100px;
  background: url(../..//assets/img/word/normal_bg.png);
  opacity: 0;
  -webkit-animation: anim_spin 15s linear infinite;
          animation: anim_spin 15s linear infinite;
}
@-webkit-keyframes anim_spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes anim_spin {
  to {
    transform: rotate(360deg);
  }
}

.word__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.word__special {
  display: none;
}

.word__txt {
  font-size: 4.5rem;
  font-weight: 700;
  text-align: center;
  position: relative;
  word-break: break-all;
  padding: 0 80px;
  line-height: 1.2222222222;
}

.word__person {
  font-size: 2.5rem;
  font-weight: 500;
  text-align: center;
  margin-top: 45px;
  line-height: 1;
}

.word__place {
  height: 50px;
  text-align: center;
  line-height: 1;
  margin-top: 20px;
}
.word__place img {
  vertical-align: top;
  width: auto;
  height: 100%;
}

.word__icospecial {
  position: absolute;
  top: 0;
  right: 0;
  width: 156px;
  height: 156px;
  background: url(../..//assets/img/layout/ico_special.png) no-repeat 0 0/100%;
  transform: translate(35%, -35%);
}