/* 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 { content: ''; content: none; }

q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

@font-face { font-family: 'GenJyuuGothic-Regular'; src: local("GenJyuuGothic-Regular"), local("GenJyuuGothic-Regular"), url("GenJyuuGothic-Regular.ttf"); font-weight: normal; }

@font-face { font-family: 'GenJyuuGothic-Bold'; src: local("GenJyuuGothic-Bold"), local("GenJyuuGothic-Bold"), url("GenJyuuGothic-Bold.ttf"); font-weight: normal; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; color: #6A3906; font-family: 'HelveticaRounded LT Bold', 'GenJyuuGothic-Regular', 'PingFang', 'Helvetica', sans-serif; }

a { text-decoration: none; }

.btn-icon { display: block; width: 36px; height: 36px; background-size: 100%; }

.btn-icon.icon-setting { background-image: url("../images/btn/setting.svg"); }

.btn-icon.icon-close { background-image: url("../images/btn/close.svg"); }

.btn-icon.icon-stop { background-image: url("../images/btn/stop.svg"); }

.btn-icon.icon-back, .btn-icon.icon-left, .btn-icon.icon-right { background-image: url("../images/btn/back.svg"); }

.btn-icon.icon-right { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

.btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 15px; min-width: 200px; height: 60px; background-image: url("../images/btn/primary.png"); background-size: 100%; color: #fff; font-size: 24px; font-family: 'GenJyuuGothic-Regular', 'HelveticaRounded LT Bold', sans-serif; font-weight: bold; text-shadow: 0 2px 4px rgba(200, 0, 22, 0.5); }

.btn.btn-sm { min-width: 105px; background-image: url("../images/btn/primary-s.png"); }

.btn:hover { background-color: transparent; cursor: default; }

.btn:active:not(.disable) { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }

.btn.disable { background-image: url("../images/btn/primary-disable.png"); text-shadow: 0 2px 4px rgba(153, 153, 153, 0.5); cursor: default; }

.fixed { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; width: 100vw; height: 100vh; }

.fixed.index { background: url("../images/cover.jpg") no-repeat; background-size: 100%; }

.fixed.home { background: url("../images/map.png") no-repeat; background-size: contain; }

.fixed.game { background: url("../images/scene/game.png"); background-size: 100%; -webkit-animation: mapMove 10s linear infinite; animation: mapMove 10s linear infinite; }

.fixed.work { background: url("../images/scene/work.png") no-repeat; background-size: contain; }

.fixed.notebook { background: url("../images/scene/book.png") no-repeat; background-size: contain; }

.fixed.material { background: url("../images/scene/material.png") no-repeat; background-size: contain; }

header { display: -webkit-box; display: -ms-flexbox; display: flex; height: 48px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 8px; }

header h2 { color: #fff; font-family: 'GenJyuuGothic-Bold', 'HelveticaRounded LT Bold', sans-serif; font-size: 24px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; }

.contain { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

footer { display: -webkit-box; display: -ms-flexbox; display: flex; height: 54px; background: url("../images/header/choco.png") no-repeat bottom; background-size: 100%; }

footer .nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

footer .nav li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background-size: auto 100%; background-position: center; background-repeat: no-repeat; }

footer .nav li a { display: block; height: 54px; }

footer .nav li:nth-child(2) { background-image: url("../images/btn/menu1.png"); }

footer .nav li:nth-child(2).active { background-image: url("../images/btn/menu1-active.png"); }

footer .nav li:nth-child(3) { background-image: url("../images/btn/menu2.png"); }

footer .nav li:nth-child(3).active { background-image: url("../images/btn/menu2-active.png"); }

footer .nav li:nth-child(4) { background-image: url("../images/btn/menu3.png"); }

footer .nav li:nth-child(4).active { background-image: url("../images/btn/menu3-active.png"); }

footer .nav li:nth-child(5) { background-image: url("../images/btn/menu4.png"); }

footer .nav li:nth-child(5).active { background-image: url("../images/btn/menu4-active.png"); }

footer .nav li .icon-setting { margin: 9px; }

.index { overflow: hidden; }

.index .game-name { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100vw; height: 100vw; }

.index .game-name::after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9; background: url("../images/title-light.png") no-repeat; background-size: 100%; -webkit-animation: light 20s linear infinite; animation: light 20s linear infinite; }

.index .game-name img { position: relative; display: block; width: 280px; margin-left: 30px; z-index: 10; margin-top: -20px; }

.index .popup-footer { position: relative; z-index: 100; margin: -110px auto 0; }

@-webkit-keyframes light { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@keyframes light { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

.home header { background: url("../images/header/lobby.png") no-repeat; background-size: 100%; }

.home .level { width: 50px; height: 50px; position: absolute; background-image: url("../images/level.png"); background-size: 100% 100%; -webkit-animation: levelAni 1s linear infinite; animation: levelAni 1s linear infinite; }

.home .level.level1 { bottom: 0px; left: 30px; }

.home .level.level2 { bottom: 70px; left: 90px; }

.home .level.level3 { bottom: 120px; left: 200px; }

.home .level.level4 { bottom: 210px; left: 225px; }

.home .level.level5 { bottom: 270px; left: 145px; }

.home .level.level6 { bottom: 360px; left: 145px; }

.home .level.level7 { bottom: 450px; left: 225px; }

.home .level.level8 { bottom: 490px; left: 125px; }

.game header { background: url("../images/header/game.png") no-repeat; background-size: 100%; }

.game footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.game footer .btn-icon { margin: 8px; }

.item-block { background-color: #F5E1BF; border-radius: 14px; width: 300px; height: 300px; padding: 20px 0; margin-top: 30px; -webkit-box-shadow: 0 1px 5px #E3C187 inset; box-shadow: 0 1px 5px #E3C187 inset; }

.item-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; max-width: 300px; margin: 0 auto; }

.item-wrap .item { position: relative; background: url("../images/item/item.png"); background-size: contain; width: 72px; height: 72px; padding: 4px; margin: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.item-wrap .item img { width: 100%; }

.item-wrap .item .badge { color: #fff; background-color: #6A3906; border-radius: 12px; position: absolute; display: block; bottom: -3px; right: -3px; padding: 3px 5px; min-width: 22px; text-align: center; }

.item-label { display: -webkit-box; display: -ms-flexbox; display: flex; min-width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 20px; }

.tab { width: 100vw; padding: 10px 20px; overflow: hidden; white-space: nowrap; margin-bottom: 20px; }

.tab span { display: inline-block; padding: 13px 0; text-align: center; width: 68px; height: 50px; background: url("../images/tab/tab-disable.png") no-repeat; background-size: 100%; }

.tab span.active { background-image: url("../images/tab/tab.png"); }

.popup { position: fixed; background-color: rgba(35, 0, 0, 0.8); top: 0; left: 0; right: 0; bottom: 0; display: none; }

.popup.opened { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.popup.opened .popup-wrap { height: 520px; -webkit-animation: popupAni 300ms ease-in; animation: popupAni 300ms ease-in; }

.popup.popup-label .popup-wrap { background-image: url("../images/popup-bg-label.png"); background-size: 100% 100%; }

.popup.popup-label .popup-header { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #235A00; text-shadow: 0 1px 4px #F9FF81; }

.popup.popup-label .note-wrap { margin-top: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.popup .popup-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 345px; height: 0px; overflow: hidden; background: url("../images/popup-bg.png") no-repeat; background-size: 100%; }

.popup .popup-header { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; padding: 20px 30px; font-size: 24px; font-family: 'GenJyuuGothic-Bold', 'HelveticaRounded LT Bold', sans-serif; }

.popup .popup-header .btn-icon { position: absolute; top: 13px; right: 13px; }

.popup .popup-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.popup .popup-footer { display: -webkit-box; display: -ms-flexbox; display: flex; height: 80px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.reward-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; margin-top: 20px; }

.reward-wrap .item-reward { display: block; width: 122px; height: 36px; }

.girl { position: absolute; bottom: 0; left: 150px; width: 53px; height: 97px; background: url("../images/girl-left.png") no-repeat; background-size: contain; -webkit-animation: girlRun 600ms linear infinite; animation: girlRun 600ms linear infinite; }

.material-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; padding: 20px; }

.material .material-wrap { margin-top: 40px; }

.work .material-wrap { margin-top: 5px; }

.material-wrap .material-item { width: 25%; height: 114px; color: #fff; text-align: center; background: url("../images/item/material-bg.png") no-repeat center top; background-size: 60px; }

.material-wrap .material-item .material-name { margin-bottom: 3px; font-size: 14px; }

.material-wrap .material-item img { width: 48px; height: 48px; }

.material-wrap .material-item .material-amount { margin-top: -3px; }

.material-wrap .material-item.active { position: relative; }

.material-wrap .material-item.active::before { content: ''; width: 48px; height: 48px; top: 20px; left: 15px; position: absolute; background: url("../images/item/check.png") no-repeat; background-size: 100%; }

.work .contain { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }

.work .work-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 20px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-line-pack: center; align-content: center; }

.work .work-wrap .work-item { width: 0; -webkit-transition: width 300ms ease; -o-transition: width 300ms ease; transition: width 300ms ease; background: url("../images/item/item.png") no-repeat; background-size: 100%; }

.work .work-wrap .work-item.active { width: 58px; height: 58px; padding: 5px; margin: 5px; -webkit-transition: width 300ms ease; -o-transition: width 300ms ease; transition: width 300ms ease; }

.work .work-wrap .work-item img { display: block; width: 100%; }

.work .work-btn { margin: 10px; text-align: center; }

.note-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 20px 30px; }

.note-wrap img { max-width: 200px; margin: 0px auto 30px; }

.note-wrap p { font-size: 21px; line-height: 1.5em; }

.anim-loading { position: absolute; top: 50%; left: 50%; width: 160px; height: 160px; margin-left: -80px; margin-top: -80px; background-image: url("../images/loading-1.png"); background-size: 100% 100%; background-repeat: no-repeat; -webkit-animation: loadingAni 300ms ease-in-out infinite; animation: loadingAni 300ms ease-in-out infinite; }

@-webkit-keyframes girlRun { 0% { background-image: url("../images/girl-left.png"); }
  30% { background-image: url("../images/girl-left.png"); }
  50% { background-image: url("../images/girl-right.png"); }
  80% { background-image: url("../images/girl-right.png"); }
  100% { background-image: url("../images/girl-left.png"); } }

@keyframes girlRun { 0% { background-image: url("../images/girl-left.png"); }
  30% { background-image: url("../images/girl-left.png"); }
  50% { background-image: url("../images/girl-right.png"); }
  80% { background-image: url("../images/girl-right.png"); }
  100% { background-image: url("../images/girl-left.png"); } }

@-webkit-keyframes popupAni { 0% { height: 0; }
  50% { height: 540px; }
  80% { height: 500px; }
  100% { height: 520px; } }

@keyframes popupAni { 0% { height: 0; }
  50% { height: 540px; }
  80% { height: 500px; }
  100% { height: 520px; } }

@-webkit-keyframes mapMove { 0% { background-position-y: 0; }
  100% { background-position-y: 640px; } }

@keyframes mapMove { 0% { background-position-y: 0; }
  100% { background-position-y: 640px; } }

@-webkit-keyframes loadingAni { 0% { background-image: url("../images/loading-1.png"); }
  50% { background-image: url("../images/loading-2.png"); }
  100% { background-image: url("../images/loading-1.png"); } }

@keyframes loadingAni { 0% { background-image: url("../images/loading-1.png"); }
  50% { background-image: url("../images/loading-2.png"); }
  100% { background-image: url("../images/loading-1.png"); } }

@-webkit-keyframes levelAni { 0% { -webkit-transform: scale(1, 1) translate(0, 0); transform: scale(1, 1) translate(0, 0); }
  33% { -webkit-transform: scale(1.05, 0.95) translate(0, 3px); transform: scale(1.05, 0.95) translate(0, 3px); }
  100% { -webkit-transform: scale(1, 1) translate(0, 0); transform: scale(1, 1) translate(0, 0); } }

@keyframes levelAni { 0% { -webkit-transform: scale(1, 1) translate(0, 0); transform: scale(1, 1) translate(0, 0); }
  33% { -webkit-transform: scale(1.05, 0.95) translate(0, 3px); transform: scale(1.05, 0.95) translate(0, 3px); }
  100% { -webkit-transform: scale(1, 1) translate(0, 0); transform: scale(1, 1) translate(0, 0); } }

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