html {
  font-size: 62.5%; }

body {
  font-size: 1.0rem; }

html,
body {
  margin: 0;
  overflow: hidden;
  padding: 0;
  font-size: 10px;
  font-family: sans-serif; }

canvas {
  -webkit-tap-highlight-color: transparent; }

input {
  display: none; }

ul {
  list-style: none; }

#mitaiou {
  width: 100%;
  height: 100%;
  background: white;
  position: fixed;
  display: none; }
  #mitaiou p {
    width: 80%;
    margin: 0;
    padding: 5% 10% 0% 10%;
    text-align: left;
    font-size: 2.2rem;
    line-height: 2.2rem; }
  #mitaiou .copyright {
    text-align: center;
    margin: 0 auto; }

.mitaiou #mitaiou {
  display: block; }
.mitaiou #first_page, .mitaiou #webgl, .mitaiou #canvas_wrap, .mitaiou #hanshi_page, .mitaiou #confirm_page, .mitaiou #fin_page, .mitaiou #loading {
  display: none; }

#sorry {
  position: fixed;
  /*padding-top: 3rem;*/
  width: 100%;
  height: 100%;
  font-size: 4rem;
  text-align: center;
  background: rgba(221, 0, 0, 0.7);
  color: white;
  padding: 50% 1rem; }

#loading {
  width: 100%;
  height: 100%;
  background: white url(../img/loading.gif) center center no-repeat;
  position: fixed; }

#ttl {
  width: 100%;
  text-align: center; }

.copyright {
  font-size: 2rem;
  text-align: center;
  font-weight: bold; }

#first_page,
#hanshi_page,
#fin_page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3); }

#first_page {
  font-size: 2rem;
  text-align: center;
  background: url(../img/top_bg1.png) center 46.66667% no-repeat;
  background-size: cover; }
  #first_page h2 {
    margin: 0;
    margin-bottom: 38%; }
  #first_page div {
    width: 100%;
    position: fixed;
    bottom: 0; }
    #first_page div p {
      margin: 1.33333% auto;
      width: 79.33333%;
      text-align: center; }
  #first_page #view_kakizome_btn {
    display: none; }

#confirm_page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/confirm_bg.png) center center no-repeat;
  background-size: cover; }
  #confirm_page div {
    position: fixed;
    bottom: 0;
    width: 100%; }
    #confirm_page div .txt1 {
      width: 100%;
      margin: 0 auto; }
    #confirm_page div .txt2 {
      width: 100%;
      margin: 0 auto; }
    #confirm_page div .privacy {
      display: block;
      width: 16.93333%;
      max-width: 120px;
      margin: 0 auto 4% auto; }
    #confirm_page div ul {
      width: 77.33333%;
      margin: 0 auto;
      padding: 0;
      list-style: none; }
      #confirm_page div ul:after {
        content: "";
        display: block;
        clear: both; }
      #confirm_page div ul li {
        float: left;
        width: 48.7931%; }
        #confirm_page div ul li a {
          display: block; }
        #confirm_page div ul li:last-child {
          float: right; }

#hanshi_page {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background: white url(../img/confirm_bg.png) center center no-repeat;
  background-size: cover; }
  #hanshi_page p {
    margin: 0; }
  #hanshi_page #hanshi {
    margin-top: 4% !important;
    box-shadow: 0px 0px 0px 5px #b07e1c; }
  #hanshi_page #hanshi_finger {
    display: none;
    position: absolute;
    right: -25%;
    top: 13.33333%; }
  #hanshi_page div {
    position: fixed;
    bottom: 0;
    width: 100%; }
    #hanshi_page div a {
      display: block;
      width: 90.625%;
      margin: 0 auto;
      margin-bottom: 1.5625%; }
  #hanshi_page #hanshi {
    display: block;
    margin: 0 auto; }

#confirm_page,
#hanshi_page {
  display: none; }

.btn {
  display: block;
  font-family: sans-serif;
  width: 100%;
  height: 1em;
  margin: 0;
  font-size: 3em;
  font-weight: bold;
  appearance: none;
  -webkit-appearance: none;
  border-style: none;
  border-radius: 0.8em;
  color: white;
  line-height: 1.2em;
  text-align: center;
  padding: 0.7em 0;
  cursor: pointer;
  background: orange;
  box-shadow: 0px 0.2em 0px #DA8D00;
  text-decoration: none; }
  .btn:active {
    transform: translateY(0.1em);
    box-shadow: 0px 0.1em 0px #DA8D00; }

#canvas_wrap {
  height: 0;
  overflow: hidden;
  width: 100%;
  margin: 0; }

#canvas_wrap canvas {
  overflow: hidden;
  display: block;
  width: 480px;
  height: 640px;
  margin: 0 auto; }

#hanshi,
#loadImg {
  background: white; }

canvas#loadImg_mosaic {
  display: none; }

#fin_page {
  display: none;
  font-size: 2rem; }
  #fin_page #fin_box {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: url(../img/fin_page_bg2.png) center top no-repeat;
    background-size: contain; }
    #fin_page #fin_box div {
      width: 79.33333%;
      margin: 0 auto; }
      #fin_page #fin_box div h3 {
        width: 80.67227%;
        margin: 0 auto; }
      #fin_page #fin_box div .logo {
        width: 44.70588%;
        margin: 0 auto;
        display: block;
        margin-bottom: 4.20168%; }
      #fin_page #fin_box div ul {
        width: 38.65546%;
        margin: 0 auto;
        padding: 0;
        padding-bottom: 12.43697%; }
        #fin_page #fin_box div ul:after {
          content: "";
          display: block;
          clear: both; }
        #fin_page #fin_box div ul li {
          float: left;
          width: 39.13043%; }
          #fin_page #fin_box div ul li:last-child {
            margin-left: 17.3913%; }
    #fin_page #fin_box #replay_btn {
      width: 77.33333%;
      margin: 0 auto;
      display: block; }
    #fin_page #fin_box #try_btn {
      width: 77.33333%;
      margin: 0 auto;
      display: none;
      margin-top: 6.66667%; }

#sns_box {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%; }
  #sns_box p {
    text-align: center;
    font-size: 3rem;
    color: #D08605;
    margin: 3% 0; }
  #sns_box ul {
    width: 31.25%;
    margin: 0 auto;
    padding: 0;
    padding-bottom: 1.5625%; }
    #sns_box ul:after {
      content: "";
      display: block;
      clear: both; }
    #sns_box ul .try_btn_wrap {
      display: none; }
    #sns_box ul li {
      float: left;
      width: 45%; }
      #sns_box ul li:last-child {
        margin-left: 10%; }

.pcmode #first_page {
  width: 640px; }
  .pcmode #first_page h2 {
    max-width: 640px;
    margin: 0 auto; }
  .pcmode #first_page div {
    max-width: 640px; }
    .pcmode #first_page div p {
      max-width: 320px;
      margin: 0 auto; }
.pcmode #confirm_page p {
  max-width: 320px;
  margin: 0 auto; }
.pcmode #confirm_page ul {
  max-width: 320px;
  margin: 0 auto 10px auto; }
.pcmode #confirm_page .privacy {
  max-width: 60px; }
.pcmode #hanshi_page div a {
  max-width: 320px;
  margin: 0 auto 20px auto; }
.pcmode #hanshi_page #kakizome_txt {
  max-width: 400px;
  margin: 0 auto; }
.pcmode #hanshi_page #hanshi_finger {
  max-width: 750px;
  margin: 0 auto; }
.pcmode #fin_page #fin_box {
  max-width: 640px;
  background: url(../img/fin_page_bg_pc.png) center top no-repeat;
  background-size: contain; }
  .pcmode #fin_page #fin_box div {
    max-width: 570px;
    margin: 0 auto; }
.pcmode #fin_page a {
  max-width: 320px;
  margin: 0 auto; }
.pcmode .copyright {
  font-size: 1rem;
  text-align: center;
  font-weight: bold; }
.pcmode #sns_box ul {
  max-width: 140px; }

.viewmode #sns_box ul {
  width: 79.6875%;
  max-width: 1000px; }
  .viewmode #sns_box ul:after {
    content: "";
    display: block;
    clear: both; }
  .viewmode #sns_box ul li {
    display: block;
    width: 17.64706%;
    margin-right: 3.92157%; }
    .viewmode #sns_box ul li:last-child {
      margin-left: 0;
      margin-right: 0; }
  .viewmode #sns_box ul .try_btn_wrap {
    display: block;
    width: 54.90196%; }
.viewmode #fb_btn,
.viewmode #tw_btn {
  /*visibility: hidden;*/ }
.viewmode #camera_kakizome_btn,
.viewmode #draw_kakizome_btn {
  display: none; }
.viewmode #first_page #view_kakizome_btn {
  display: block; }
.viewmode #fin_page #fin_box #replay_btn {
  display: none; }
.viewmode #fin_page #fin_box #try_btn {
  display: block; }
.viewmode #fin_page #fin_box div ul {
  padding: 0; }
.viewmode #fin_page #fin_box div h3 {
  /*padding-top: (100/595)*55%;*/ }

/*# sourceMappingURL=style.css.map */