/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
@-webkit-keyframes drop {
  0% {
    -webkit-transform: translateY(-100vh);
            transform: translateY(-100vh); }
  80% {
    -webkit-transform: translateY(1vh);
            transform: translateY(1vh); }
  90% {
    -webkit-transform: translateY(-1vh) rotate(-2deg);
            transform: translateY(-1vh) rotate(-2deg); }
  95% {
    -webkit-transform: translateY(0) rotate(2deg);
            transform: translateY(0) rotate(2deg); }
  100% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0); } }
@keyframes drop {
  0% {
    -webkit-transform: translateY(-100vh);
            transform: translateY(-100vh); }
  80% {
    -webkit-transform: translateY(1vh);
            transform: translateY(1vh); }
  90% {
    -webkit-transform: translateY(-1vh) rotate(-2deg);
            transform: translateY(-1vh) rotate(-2deg); }
  95% {
    -webkit-transform: translateY(0) rotate(2deg);
            transform: translateY(0) rotate(2deg); }
  100% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0); } }

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }

@keyframes fadein {
  0% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
  100% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } }

@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } }

@keyframes fadeout {
  0% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } }

@-webkit-keyframes caret {
  from {
    background-color: rgba(255, 255, 255, 0.7); }
  to {
    background-color: rgba(255, 255, 255, 0); } }

@keyframes caret {
  from {
    background-color: rgba(255, 255, 255, 0.7); }
  to {
    background-color: rgba(255, 255, 255, 0); } }

@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } }

@keyframes blink {
  50% {
    opacity: 0.0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } }

@-webkit-keyframes complete-copy {
  0% {
    -webkit-transform: scale(0.7, 0.7);
            transform: scale(0.7, 0.7); }
  33.3333% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1); }
  66.6666% {
    -webkit-transform: scale(0.7, 0.7);
            transform: scale(0.7, 0.7); }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1); } }

@keyframes complete-copy {
  0% {
    -webkit-transform: scale(0.7, 0.7);
            transform: scale(0.7, 0.7); }
  33.3333% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1); }
  66.6666% {
    -webkit-transform: scale(0.7, 0.7);
            transform: scale(0.7, 0.7); }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1); } }

@font-face {
  font-family: "JF-Dot-MPlus12";
  src: url("../font/jf-dot-mplus12-webfont.eot");
  src: url("../font/jf-dot-mplus12-webfont.eot?#iefix") format("embedded-opentype"), url("../font/jf-dot-mplus12-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "JF-Dot-MPlusS10";
  src: url("../font/jf-dot-mpluss10-webfont.eot");
  src: url("../font/jf-dot-mpluss10-webfont.eot?#iefix") format("embedded-opentype"), url("../font/jf-dot-mpluss10-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "JF-Dot-MPlusS10B";
  src: url("../font/jf-dot-mpluss10b-webfont.eot");
  src: url("../font/jf-dot-mpluss10b-webfont.eot?#iefix") format("embedded-opentype"), url("../font/jf-dot-mpluss10b-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

.canvas #back_screen {
  height: 100vh;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated; }

.canvas #main_screen {
  height: 100vh;
  pointer-events: none;
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated; }

.canvas .screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto; }

.canvas .grid {
  height: 100vh;
  width: 150vh;
  background-size: contain;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  left: -2px; }

.ending_content {
  padding-top: 34px;
  width: 150vh;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 2.125vh;
  line-height: 1.5; }
  .ending_content #user:focus {
    outline: 0 none; }
  .ending_content .choosed:before {
    content: ">"; }
  .ending_content #question {
    position: absolute;
    left: 12.5vh;
    top: 6.25vh;
    width: 62.5vh; }
  .ending_content #result {
    position: absolute;
    right: 12.5vh;
    top: 12.5vh;
    width: 62.5vh; }
  .ending_content .endroll {
    overflow: hidden;
    position: relative;
    height: 70vh;
    margin-top: 15vh;
    text-align: center;
    pointer-events: none; }
    .ending_content .endroll .bg .image {
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: no-repeat center bottom;
      background-size: cover; }
      .ending_content .endroll .bg .image.show {
        -webkit-animation: fadein 3s ease 0s forwards;
                animation: fadein 3s ease 0s forwards; }
      .ending_content .endroll .bg .image.hide {
        -webkit-animation: fadeout 3s ease 0s forwards;
                animation: fadeout 3s ease 0s forwards; }
      .ending_content .endroll .bg .image[data-scene="prologue"] {
        background-image: url("../img/screenshot/prologue.png"); }
      .ending_content .endroll .bg .image[data-scene="normalA"] {
        background-image: url("../img/screenshot/normalA.png"); }
      .ending_content .endroll .bg .image[data-scene="normalB"] {
        background-image: url("../img/screenshot/normalB.png"); }
      .ending_content .endroll .bg .image[data-scene="normalC"] {
        background-image: url("../img/screenshot/normalC.png"); }
      .ending_content .endroll .bg .image[data-scene="normalD"] {
        background-image: url("../img/screenshot/normalD.png"); }
    .ending_content .endroll .wrap {
      -webkit-transform: translateY(-220vh);
              transform: translateY(-220vh); }
    .ending_content .endroll .rollarea {
      -webkit-transform: translateY(320vh);
              transform: translateY(320vh); }
      .ending_content .endroll .rollarea.finish {
        -webkit-animation: fadeout 3s ease 2s forwards;
                animation: fadeout 3s ease 2s forwards; }
    .ending_content .endroll .title {
      margin-bottom: 12.5vh; }
    .ending_content .endroll .cast {
      margin-bottom: 25vh; }
      .ending_content .endroll .cast .question {
        margin-bottom: 3.75vh; }
      .ending_content .endroll .cast .performer dt,
      .ending_content .endroll .cast .performer dd {
        display: inline-block; }
      .ending_content .endroll .cast .performer dt {
        vertical-align: top; }
      .ending_content .endroll .cast .performer dd {
        text-align: left; }
    .ending_content .endroll .logo {
      width: 62.5vh;
      margin: 25vh auto 6.25vh auto; }
      .ending_content .endroll .logo img {
        width: 100%; }

.extraA_content {
  padding-top: 34px;
  width: 150vh;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 2vh;
  line-height: 1.5; }
  .extraA_content #user:focus {
    outline: 0 none; }
  .extraA_content .choosed:before {
    content: ">"; }
  .extraA_content .left {
    position: relative;
    left: 27.25vh;
    top: 2.75vh;
    width: 62.5vh;
    line-height: 1.4em; }
  .extraA_content #pattern {
    position: absolute;
    left: 103.125vh;
    top: 12.5vh; }
    .extraA_content #pattern ul {
      width: 40vh;
      -webkit-column-count: 3;
         -moz-column-count: 3;
              column-count: 3; }

.extraB_content {
  padding-top: 34px;
  width: 76.3vh;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  color: #f00;
  font-size: 2vh;
  line-height: 1.5; }
  .extraB_content #user:focus {
    outline: 0 none; }
  .extraB_content #question,
  .extraB_content #answer {
    position: relative;
    left: -20vh; }
  .extraB_content #answer {
    width: 51vh; }
  .extraB_content .choosed:before {
    content: ">"; }
  .extraB_content .nametag {
    position: absolute;
    right: 10vh;
    background-color: #000;
    border: #c70000 1px solid;
    width: 18vh;
    height: 3vh;
    text-align: center; }
    .extraB_content .nametag[data-id="0"] {
      right: -6.5vh;
      top: 34vh;
      width: 11vh; }
    .extraB_content .nametag[data-id="1"] {
      right: 4vh;
      top: 61vh; }
    .extraB_content .nametag[data-id="2"] {
      right: -20.5vh;
      top: 61vh; }
    .extraB_content .nametag[data-id="3"] {
      right: 6vh;
      top: 95vh;
      width: 20vh; }
    .extraB_content .nametag[data-id="4"] {
      right: -14vh;
      top: 95vh; }
    .extraB_content .nametag[data-id="5"] {
      right: -34vh;
      top: 95vh; }
    .extraB_content .nametag[data-id="6"] {
      right: 28.5vh;
      top: 95vh; }

.extraC_content {
  padding-top: 34px;
  width: 76.3vh;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  color: #f00;
  font-size: 2vh;
  line-height: 1.5; }
  .extraC_content #user:focus {
    outline: 0 none; }
  .extraC_content #question,
  .extraC_content #answer {
    position: relative;
    left: -20vh;
    width: 115vh; }
  .extraC_content #answer {
    line-height: 1.1;
    font-size: 1.5vh; }
  .extraC_content .choosed:before {
    content: ">"; }
  .extraC_content .small {
    font-size: 1.5vh; }

.extraD_content {
  padding-top: 34px;
  width: 150vh;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  /* font-size: px(20); */
  font-size: 2vh;
  line-height: 1.5; }
  .extraD_content #user:focus {
    outline: 0 none; }
  .extraD_content .choosed:before {
    content: ">"; }
  .extraD_content #question {
    position: absolute;
    left: 12.5vh;
    top: 6.25vh;
    width: 62.5vh; }
  .extraD_content #result {
    position: absolute;
    right: 1.875vh;
    top: 18.75vh;
    width: 62.5vh; }

.extraEnding_content {
  padding-top: 34px;
  width: 150vh;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 2.5vh;
  line-height: 1.5; }
  .extraEnding_content #user:focus {
    outline: 0 none; }
  .extraEnding_content .choosed:before {
    content: ">"; }
  .extraEnding_content #question {
    position: absolute;
    left: 12.5vh;
    top: 6.25vh;
    width: 62.5vh; }
  .extraEnding_content #result {
    position: absolute;
    right: 12.5vh;
    top: 12.5vh;
    width: 62.5vh; }
  .extraEnding_content .endroll {
    overflow: hidden;
    position: relative;
    height: 70vh;
    margin-top: 15vh;
    color: #f00;
    text-align: center;
    pointer-events: none; }
    .extraEnding_content .endroll .bg .image {
      opacity: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: no-repeat center bottom;
      background-size: cover; }
      .extraEnding_content .endroll .bg .image.show {
        -webkit-animation: fadein 3s ease 0s forwards;
                animation: fadein 3s ease 0s forwards; }
      .extraEnding_content .endroll .bg .image.hide {
        -webkit-animation: fadeout 3s ease 0s forwards;
                animation: fadeout 3s ease 0s forwards; }
      .extraEnding_content .endroll .bg .image[data-scene="prologue"] {
        background-image: url("../img/screenshot/extraPrologue.png"); }
      .extraEnding_content .endroll .bg .image[data-scene="extraA"] {
        background-image: url("../img/screenshot/extraA.png"); }
      .extraEnding_content .endroll .bg .image[data-scene="extraB"] {
        background-image: url("../img/screenshot/extraB.png"); }
      .extraEnding_content .endroll .bg .image[data-scene="extraC"] {
        background-image: url("../img/screenshot/extraC.png"); }
      .extraEnding_content .endroll .bg .image[data-scene="extraD"] {
        background-image: url("../img/screenshot/extraD.png"); }
    .extraEnding_content .endroll .wrap {
      -webkit-transform: translateY(-210vh);
              transform: translateY(-210vh); }
    .extraEnding_content .endroll .rollarea {
      -webkit-transform: translateY(310vh);
              transform: translateY(310vh); }
      .extraEnding_content .endroll .rollarea.finish {
        -webkit-animation: fadeout 3s ease 2s forwards;
                animation: fadeout 3s ease 2s forwards; }
    .extraEnding_content .endroll .title {
      margin-bottom: 12.5vh; }
    .extraEnding_content .endroll .cast {
      margin-bottom: 25vh; }
      .extraEnding_content .endroll .cast .question {
        margin-bottom: 3.75vh; }
      .extraEnding_content .endroll .cast .performer dt,
      .extraEnding_content .endroll .cast .performer dd {
        display: inline-block; }
      .extraEnding_content .endroll .cast .performer dt {
        vertical-align: top; }
      .extraEnding_content .endroll .cast .performer dd {
        text-align: left; }
    .extraEnding_content .endroll .logo {
      width: 62.5vh;
      margin: 25vh auto 6.25vh auto; }
      .extraEnding_content .endroll .logo img {
        width: 100%; }

.extraTop_content {
  padding-top: 34px;
  width: 76.3vh;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 2vh;
  line-height: 1.5; }
  .extraTop_content .geeklogo {
    position: absolute;
    top: 11vh;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url("../img/op/corplogo-big.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 25vh;
    height: 4.5vh; }
  .extraTop_content .text {
    position: absolute;
    top: 35vh;
    left: -9vh;
    color: #fff;
    font-size: 3vh;
    width: 100vh; }
  .extraTop_content .nametag {
    position: absolute;
    top: 44.5vh;
    width: 20vh;
    height: 21vh;
    color: #fff;
    text-align: center; }
    .extraTop_content .nametag span {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 20vh;
      text-align: center; }
    .extraTop_content .nametag.choosed {
      color: #0f0; }
    .extraTop_content .nametag[data-lang="ja"] {
      letter-spacing: 0.4vh;
      font-size: 2.2vh; }
    .extraTop_content .nametag.clear:after {
      font-family: "JF-Dot-MPlusS10";
      content: "CLEAR!!!";
      position: absolute;
      bottom: -3vh;
      font-size: 2vh;
      left: 0;
      width: 20vh;
      letter-spacing: 0vh; }
    .extraTop_content .nametag[data-id="1"] {
      left: -9vh; }
    .extraTop_content .nametag[data-id="2"] {
      left: 16vh; }
    .extraTop_content .nametag[data-id="3"] {
      right: 15.5vh; }
    .extraTop_content .nametag[data-id="4"] {
      right: -9.5vh; }
    .extraTop_content .nametag[data-id="5"] {
      font-family: "JF-Dot-MPlusS10B";
      font-size: 2.5vh;
      text-align: left;
      left: 28.25vh;
      top: 72vh;
      height: 3vh;
      width: 21vh; }
    .extraTop_content .nametag[data-id="6"] {
      font-family: "JF-Dot-MPlusS10B";
      font-size: 2.5vh;
      text-align: left;
      left: 28.25vh;
      top: 76vh;
      height: 3vh;
      width: 21vh; }
    .extraTop_content .nametag[data-id="7"] {
      font-family: "JF-Dot-MPlusS10B";
      font-size: 2.5vh;
      text-align: left;
      left: 28.25vh;
      top: 80vh;
      height: 3vh;
      width: 21vh; }

.header {
  height: 34px;
  width: 150vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: black;
  border-bottom: solid 1px white; }
  .header .btn__wrapper {
    display: inline-block;
    float: right; }
    .header .btn__wrapper .sns_wrapper,
    .header .btn__wrapper .sound_wrapper {
      float: left; }
    .header .btn__wrapper .sns_wrapper {
      margin-right: 10px; }
    .header .btn__wrapper .sound_wrapper {
      position: relative;
      top: 7px; }
      .header .btn__wrapper .sound_wrapper.sound-on .sound_off {
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }
      .header .btn__wrapper .sound_wrapper.sound-off .sound_on {
        opacity: 0.5;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }
      .header .btn__wrapper .sound_wrapper .sound_off {
        position: relative;
        top: -2px; }
  .header .sns_btn {
    margin: 8px 8px 0 0;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -webkit-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated; }
  .header .geekout_logo {
    margin: 8px 0 0 15px;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: -webkit-crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated; }
  .header .help_modal_button {
    cursor: pointer;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 44px;
    right: 10px;
    background-image: url("/cp/code-quest/ver01/img/header/btn-hint-normal.png"); }
  .header .clear_button {
    cursor: pointer;
    width: 78px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 44px;
    right: 50px;
    background-image: url("/cp/code-quest/ver01/img/header/btn-CLEAR.png"); }
    .header .clear_button.extra {
      background-image: url("/cp/code-quest/ver01/img/header/btn-CLEAR-extra.png"); }

.extra .header .help_modal_button {
  background-image: url("/cp/code-quest/ver01/img/header/btn-hint-extra.png"); }

.prologue {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 12.5vh;
  width: 95.375vh;
  font-size: 3vh;
  line-height: 1.5; }

.top_content {
  padding-top: 34px;
  width: 76.3vh;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 2vh;
  line-height: 1.5; }
  .top_content .geeklogo {
    position: absolute;
    top: 11vh;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url("../img/op/corplogo-big.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 25vh;
    height: 4.5vh; }
  .top_content .text {
    position: absolute;
    top: 35vh;
    left: -9vh;
    color: #fff;
    font-size: 3vh;
    width: 100vh; }
  .top_content .nametag {
    position: absolute;
    top: 44.5vh;
    width: 20vh;
    height: 21vh;
    color: #fff;
    text-align: center; }
    .top_content .nametag span {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 20vh;
      text-align: center; }
    .top_content .nametag.choosed {
      color: #0f0; }
    .top_content .nametag[data-lang="ja"] {
      letter-spacing: 0.4vh;
      font-size: 2.4vh; }
    .top_content .nametag.clear:after {
      font-family: "JF-Dot-MPlusS10";
      content: "CLEAR!!!";
      position: absolute;
      bottom: -3vh;
      font-size: 2vh;
      left: 0;
      width: 20vh;
      letter-spacing: 0vh; }
    .top_content .nametag[data-id="1"] {
      left: -9vh; }
    .top_content .nametag[data-id="2"] {
      left: 16vh; }
    .top_content .nametag[data-id="3"] {
      right: 15.5vh; }
    .top_content .nametag[data-id="4"] {
      right: -9.5vh; }
    .top_content .nametag[data-id="5"] {
      font-family: "JF-Dot-MPlusS10B";
      font-size: 2.5vh;
      text-align: left;
      left: 28.25vh;
      top: 72vh;
      height: 3vh;
      width: 21vh; }
    .top_content .nametag[data-id="6"] {
      font-family: "JF-Dot-MPlusS10B";
      font-size: 2.5vh;
      text-align: left;
      left: 28.25vh;
      top: 76vh;
      height: 3vh;
      width: 21vh; }
    .top_content .nametag[data-id="7"] {
      font-family: "JF-Dot-MPlusS10B";
      font-size: 2.5vh;
      text-align: left;
      left: 28.2vh;
      top: 80vh;
      height: 3vh;
      width: 21vh; }

.modal_wrapper {
  position: absolute;
  width: 100%;
  min-width: 150vh;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); }

.extra #modal {
  background-image: url("../img/modal/frame_txt_red.png");
  color: #f00; }

.extra #modal .modal-text {
  color: #f00; }

#modal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 92.75vh;
  height: 60.25vh;
  background-image: url("../img/modal/frame_txt.png");
  background-size: cover;
  font-family: "JF-Dot-MPlusS10", sans-serif;
  overflow: auto;
  color: #0f0; }
  #modal .modal_content {
    padding: 3.125vh;
    font-size: 2vh;
    line-height: 1.5; }
  #modal .choosed:before {
    content: ">"; }
  #modal .modal_close {
    position: absolute;
    right: 0;
    top: 0;
    width: 3.75vh;
    height: 3.75vh; }
  #modal .modal-text {
    white-space: pre-wrap;
    color: #0f0; }
  #modal .modal-link {
    cursor: pointer; }

.normalA_content {
  padding-top: 34px;
  width: 150vh;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 2vh;
  line-height: 1.5; }
  .normalA_content #user:focus {
    outline: 0 none; }
  .normalA_content .choosed:before {
    content: ">"; }
  .normalA_content .left {
    position: relative;
    left: 27.25vh;
    top: 5.625vh;
    width: 62.5vh; }
  .normalA_content #pattern {
    position: absolute;
    left: 118.125vh;
    top: 12.5vh;
    width: 25vh; }

.normalB_content {
  padding-top: 34px;
  width: 76.3vh;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 2vh;
  line-height: 1.5; }
  .normalB_content #user:focus {
    outline: 0 none; }
  .normalB_content #question,
  .normalB_content #answer {
    position: relative;
    left: -20vh; }
  .normalB_content .choosed:before {
    content: ">"; }
  .normalB_content .nametag {
    position: absolute;
    right: 10vh;
    background-color: #000;
    border: #0f0 1px solid;
    width: 10vh;
    height: 3vh;
    text-align: center; }
    .normalB_content .nametag[data-id="0"] {
      right: -6.5vh;
      top: 34vh; }
    .normalB_content .nametag[data-id="1"] {
      right: 3vh;
      top: 61vh;
      width: 20vh; }
    .normalB_content .nametag[data-id="2"] {
      right: -17vh;
      top: 61vh; }
    .normalB_content .nametag[data-id="3"] {
      right: 26vh;
      top: 95vh; }
    .normalB_content .nametag[data-id="4"] {
      right: 6vh;
      top: 95vh;
      width: 13vh; }
    .normalB_content .nametag[data-id="5"] {
      right: -12vh;
      top: 95vh;
      width: 13vh; }
    .normalB_content .nametag[data-id="6"] {
      right: -35vh;
      top: 95vh;
      width: 20vh; }

.normalC_content {
  padding-top: 34px;
  width: 76.3vh;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 2vh;
  line-height: 1.5; }
  .normalC_content #user:focus {
    outline: 0 none; }
  .normalC_content #question,
  .normalC_content #answer {
    position: relative;
    left: -20vh;
    width: 115vh; }
  .normalC_content #answer {
    line-height: 1.1;
    font-size: 2vh; }
  .normalC_content .choosed:before {
    content: ">"; }
  .normalC_content .small {
    font-size: 1.8vh; }

.normalD_content {
  padding-top: 34px;
  width: 150vh;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  /* font-size: px(20); */
  font-size: 2vh;
  line-height: 1.5; }
  .normalD_content #user:focus {
    outline: 0 none; }
  .normalD_content .choosed:before {
    content: ">"; }
  .normalD_content #question {
    position: absolute;
    left: 12.5vh;
    top: 6.25vh;
    width: 62.5vh; }
  .normalD_content #result {
    position: absolute;
    right: 1.875vh;
    top: 18.75vh;
    width: 62.5vh; }

.sp_content {
  text-align: left; }
  .sp_content .title-logo {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    background-image: url("../img/sp/title-logo.png");
    background-size: contain;
    background-position: 50% 0%;
    background-repeat: no-repeat; }
  .sp_content .img-grid {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    background-image: url("../img/sp/img-grid.png");
    background-size: contain;
    background-position: 50% 100%;
    background-repeat: no-repeat; }
    .sp_content .img-grid .yusya,
    .sp_content .img-grid .king {
      position: absolute;
      bottom: 30px; }
      .sp_content .img-grid .yusya img,
      .sp_content .img-grid .king img {
        width: 100%; }
    .sp_content .img-grid .yusya {
      left: 20px;
      width: 8.8vh; }
    .sp_content .img-grid .king {
      right: 5px;
      width: 12vh; }
    .sp_content .img-grid .boxes,
    .sp_content .img-grid .bubbles {
      position: absolute;
      left: 0;
      width: 100%;
      text-align: center; }
      .sp_content .img-grid .boxes .item,
      .sp_content .img-grid .bubbles .item {
        display: inline-block; }
        .sp_content .img-grid .boxes .item img,
        .sp_content .img-grid .bubbles .item img {
          width: 100%; }
          .sp_content .img-grid .boxes .item img.copy-button.anime,
          .sp_content .img-grid .bubbles .item img.copy-button.anime {
            -webkit-animation: complete-copy 1s steps(1) 1;
                    animation: complete-copy 1s steps(1) 1; }
    .sp_content .img-grid .boxes {
      bottom: 30px; }
      .sp_content .img-grid .boxes .item {
        -webkit-transform: translateY(-100vh);
                transform: translateY(-100vh);
        width: 8vh;
        margin: 0 0.5vh; }
        .sp_content .img-grid .boxes .item.show {
          -webkit-animation: drop 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s forwards;
                  animation: drop 0.6s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s forwards; }
        .sp_content .img-grid .boxes .item.tw {
          -webkit-animation-delay: .1s;
                  animation-delay: .1s; }
        .sp_content .img-grid .boxes .item.copy {
          -webkit-animation-delay: .2s;
                  animation-delay: .2s; }
    .sp_content .img-grid .bubbles {
      bottom: calc(32px + 7vh); }
      .sp_content .img-grid .bubbles .item {
        display: none;
        width: 32vh; }
        .sp_content .img-grid .bubbles .item.show {
          display: inline-block; }
  .sp_content .textwrapper {
    position: absolute;
    width: 90vw;
    left: 5vw;
    top: 36vw;
    font-family: "JF-Dot-MPlusS10", sans-serif;
    color: #0f0;
    font-size: 3.8vw;
    line-height: 1.5; }
  .sp_content .geek-out-link {
    position: absolute;
    top: 0;
    height: 10vh;
    left: 30vw;
    width: 40vw; }

@media (max-width: 375px) {
  .canvas {
    display: none; }
  .pc-wrapper {
    display: none; } }

.pc-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 150vh;
  height: 100vh;
  font-family: "JF-Dot-MPlusS10", sans-serif;
  color: #0f0; }
  .pc-wrapper.enable-canvas-click {
    pointer-events: none; }
    .pc-wrapper.enable-canvas-click .normalA_content, .pc-wrapper.enable-canvas-click .normalB_content, .pc-wrapper.enable-canvas-click .normalC_content, .pc-wrapper.enable-canvas-click .normalD_content, .pc-wrapper.enable-canvas-click .extraA_content, .pc-wrapper.enable-canvas-click .extraB_content, .pc-wrapper.enable-canvas-click .extraC_content, .pc-wrapper.enable-canvas-click .extraD_content {
      pointer-events: auto; }

body {
  background-color: #000; }

#user-input {
  position: fixed;
  top: -20px;
  right: 100%;
  height: 20px;
  line-height: 20px;
  outline: none;
  border: none;
  background: #fff;
  color: #000;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

.caret {
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-animation-name: caret;
          animation-name: caret;
  -webkit-animation-duration: 1000ms;
          animation-duration: 1000ms;
  -webkit-animation-timing-function: steps(2, start);
          animation-timing-function: steps(2, start);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite; }

.blink {
  -webkit-animation: blink 1s step-end infinite;
          animation: blink 1s step-end infinite; }

.choosed {
  cursor: pointer; }

#user {
  white-space: pre-wrap; }

.js-dl:hover {
  opacity: 0.7;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }

.purple {
  color: #f0f; }

.green {
  color: #0f0; }

.yellow {
  color: #ff0; }

.orange {
  color: #f60; }

.blue {
  color: #0ff; }

.red {
  color: #f00; }

.white {
  color: #fff; }

.white-aa {
  letter-spacing: -0.06em;
  line-height: 1em; }

.gray {
  color: #888; }

.color-facebook {
  color: #4065b5; }

.color-twitter {
  color: #0693e3; }

.hidden {
  display: none; }

.inline {
  display: inline-block; }

.js-link {
  cursor: pointer; }

html, body {
  height: 100%; }