.game-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  gap: 1%;
  background: url("../img/game-bg.jpg") #FFF no-repeat top center;
  background-size: 100% auto;
  overflow: hidden;
}
.game-wrap .title,
.game-wrap .index-img-1 {
  position: relative;
}
.game-wrap .title {
  margin-top: 3%;
}
.game-wrap .index-img-1 {
  max-height: 7%;
}
.game-wrap .result-score {
  position: relative;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.game-wrap .result-score img {
  width: 16%;
}
.game-wrap .result-score p {
  font-size: 6vw;
  font-weight: bold;
  color: #FFF;
  transform: translateY(-8%);
  text-shadow: 0 0 5px #0c7346, 0 0 10px #0c7346, 0 0 15px #0c7346, 0 0 20px #0c7346;
}
@media only screen and (min-width: 641px) {
  .game-wrap .result-score p {
    font-size: 38px;
  }
}
.game-wrap.playing .title {
  position: absolute;
  max-width: 50%;
  top: 0;
  left: 5%;
}
.game-wrap .game-bg {
  position: absolute;
  display: block;
  width: 150%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.game-wrap .game-bg .game-ip {
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  top: 18%;
  width: 15%;
  margin: auto;
  margin-right: 18%;
  transform-origin: bottom right;
}
.game-wrap .game-bg .game-ip.move {
  animation: gameip steps(2) 1s infinite;
}
@keyframes gameip {
  0% {
    transform: rotate(0) translate(0);
  }
  100% {
    transform: rotate(-25deg) translateY(-25%);
  }
}
.game-wrap .game-ppl-sprite {
  position: absolute;
  width: 30%;
  bottom: 70vw;
  left: 35%;
  padding-top: 37.5%;
  background: url("../img/game-ppl-sprite.png") no-repeat 0 0;
  background-size: 200% 100%;
  transition: transform 0.15s;
}
.game-wrap .game-ppl-sprite.move {
  animation: sprite 0.5s steps(2) infinite;
}
.game-wrap .game-ppl-sprite.left {
  transform: translateX(-70%);
}
.game-wrap .game-ppl-sprite.center {
  transform: translateX(0%);
}
.game-wrap .game-ppl-sprite.right {
  transform: translateX(70%);
}
@keyframes sprite {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 200% 0;
  }
}
.game-wrap .game-ppl-sprite .game-head {
  position: absolute;
  width: 90%;
  top: 0;
  left: 50%;
  transform: translate(-50%, -63%);
}
.game-wrap .game-ppl-sprite .game-head.move {
  animation: head 0.75s steps(2) infinite;
}
@keyframes head {
  to {
    transform: translate(-50%, -61%);
  }
}
.game-wrap .game-ppl-sprite .game-sweat {
  display: block;
  position: absolute;
  width: 20%;
  top: -50%;
  left: 0;
}
.game-wrap .game-ppl-sprite .game-words-1 {
  display: block;
  position: absolute;
  width: 50%;
  top: -30%;
  right: 0;
  transform: translateX(70%);
}
.game-wrap .game-ppl-sprite .game-words-2 {
  display: block;
  position: absolute;
  width: 50%;
  top: -20%;
  left: 0;
  transform: translateX(-80%);
}
.game-wrap .game-ppl-sprite .game-shock {
  display: block;
  position: absolute;
  width: 40%;
  bottom: 15%;
  left: 0;
  transform: translateX(-50%);
}
.game-wrap .game-ppl-sprite .game-surprise {
  display: block;
  position: absolute;
  width: 55%;
  top: -35%;
  left: 23%;
}
.game-wrap .game-ppl-sprite .game-hit {
  display: none;
}
.game-wrap .obstacle-wrap {
  position: absolute;
  width: 100%;
  padding-top: 91%;
  bottom: 0;
  left: 0;
}
.game-wrap .obstacle-wrap .obstacle-route {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1000%;
  will-change: transform;
}
.game-wrap .obstacle-wrap .obstacle-route img {
  position: absolute;
  display: block;
  width: 30%;
  top: 0;
  left: 35%;
}
.game-wrap .game-btn-wrap {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  bottom: 3%;
  gap: 5%;
  width: 100%;
}
.game-wrap .game-btn-wrap .btn-game-trigger {
  display: none;
  position: absolute;
  width: 18%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.game-wrap .game-btn-wrap.disabled a {
  pointer-events: none;
}
.game-wrap .game-btn-wrap a {
  position: relative;
  display: block;
  width: 18%;
}
.game-wrap .game-btn-wrap a.active {
  transform: scale(0.9);
}
.game-wrap .game-btn-wrap a.active .game-click {
  opacity: 1;
}
.game-wrap .game-btn-wrap a .game-click {
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 70%;
  opacity: 0;
}
.game-wrap .game-btn-wrap a .game-remind {
  display: none;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -45%;
  width: 100%;
  animation: shine 0.25s infinite alternate;
}
@keyframes shine {
  to {
    opacity: 0;
  }
}
.game-wrap .game-btn-wrap a:nth-child(1) .game-click {
  transform: scale(-1, 1) translate(80%, -50%);
}
.game-wrap .game-btn-wrap a:nth-child(2) .game-click {
  transform: rotate(-40deg) translate(35%, -70%);
}
.game-wrap .game-btn-wrap a:nth-child(3) .game-click {
  transform: translate(30%, -50%);
}
@keyframes gameclick {
  0%, 100% {
    opacity: 0;
  }
  10%, 90% {
    opacity: 1;
  }
}
.game-wrap .game-btn-wrap .score-block {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  justify-content: center;
  align-items: center;
  transform: translateY(-175%);
}
.game-wrap .game-btn-wrap .score-block img {
  width: 18%;
}
.game-wrap .game-btn-wrap .score-block p {
  font-size: 6vw;
  font-weight: bold;
  color: #FFF;
  transform: translateY(-5%);
  text-shadow: 0 0 5px #0c7346, 0 0 10px #0c7346, 0 0 15px #0c7346, 0 0 20px #0c7346;
}
@media only screen and (min-width: 641px) {
  .game-wrap .game-btn-wrap .score-block p {
    font-size: 38px;
  }
}
.game-wrap .game-intro {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}
.game-wrap:not(.intro-ing) .words-1,
.game-wrap:not(.intro-ing) .words-2,
.game-wrap:not(.intro-ing) .intro-bug,
.game-wrap:not(.intro-ing) .btn-game-run .hand-center,
.game-wrap:not(.intro-ing) .btn-game-left .hand-left {
  display: none;
}
.game-wrap.intro-ing .words-1,
.game-wrap.intro-ing .words-2 {
  position: absolute;
  top: 0;
  left: 20%;
  width: 60%;
  transform: translateY(-150%);
}
.game-wrap.intro-ing .obstacle-wrap .intro-bug {
  z-index: 1;
  display: block;
  position: absolute;
  top: 100%;
  left: 35%;
  width: 30%;
  animation: introbug 5s 2s forwards linear;
}
@keyframes introbug {
  to {
    transform: translateY(-400%) scale(0.7);
  }
}
.game-wrap.intro-ing .game-ppl-sprite {
  z-index: 1;
  transition: transform 1s 5s;
  transform: translateX(-70%);
}
.game-wrap.intro-ing .game-btn-wrap {
  z-index: 1;
}
.game-wrap.intro-ing .game-btn-wrap a {
  pointer-events: none;
}
.game-wrap.intro-ing .game-btn-wrap .btn-game-run {
  position: relative;
}
.game-wrap.intro-ing .game-btn-wrap .btn-game-run .hand-center {
  display: block;
  position: absolute;
  top: -25%;
  left: 25%;
  width: 125%;
  animation: hand 0.5s infinite alternate;
}
.game-wrap.intro-ing .game-btn-wrap .btn-game-left {
  position: relative;
}
.game-wrap.intro-ing .game-btn-wrap .btn-game-left .hand-left {
  display: block;
  position: absolute;
  top: -25%;
  left: -175%;
  width: 250%;
  animation: hand 0.5s infinite alternate;
}
@keyframes hand {
  to {
    transform: scale(1.05);
  }
}
.game-wrap .game-countdown {
  display: none;
  z-index: 3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.game-wrap .game-countdown img {
  position: absolute;
  display: none;
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 60%;
}
.game-wrap .game-time {
  display: none;
  position: absolute;
  pointer-events: none;
  top: 3%;
  right: 5%;
  width: 25%;
}
.game-wrap .game-time p {
  position: absolute;
  top: 62%;
  left: 27%;
  color: #009944;
  font-size: 10vw;
  transform: translate(-50%, -50%);
  font-weight: bold;
  text-shadow: 0 5px 15px #FFF, 0 5px 15px #FFF;
}
.game-wrap .game-timeup {
  position: absolute;
  display: none;
  top: 15%;
  left: 20%;
  width: 60%;
}
.game-wrap .game-result {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.game-wrap .game-result .game-result-block {
  display: none;
  position: absolute;
  bottom: 12%;
  width: 90%;
  height: 50%;
  left: 5%;
  transition: opacity 0.25s;
}
.game-wrap .game-result .game-result-block .result-ip {
  display: block;
  position: absolute;
  width: 60%;
  bottom: 20%;
  left: 12%;
  opacity: 0;
  transform: translateY(50%);
  animation: resultshow 1s 0.75s forwards;
}
.game-wrap .game-result .game-result-block .result-sprite {
  position: absolute;
  width: 45%;
  padding-top: 75%;
  right: 10%;
  bottom: 15%;
  opacity: 0;
  transform: translateY(50%);
  animation: resultshow 1s 1s forwards;
}
.game-wrap .game-result .game-result-block .result-sprite .sprite {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat !important;
  background-position: 0 0;
  background-size: 200% 100% !important;
  animation: sprite 0.75s steps(2) infinite;
}
.game-wrap .game-result .game-result-block .result-sprite .for-capture {
  position: absolute;
  display: block;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
.game-wrap .game-result .game-result-block .result-sprite .result-head {
  position: absolute;
  display: block;
  width: 70%;
  top: 26%;
  left: 50%;
  transform: translate(-50%, -63%);
  animation: head 0.75s steps(2) infinite;
}
.game-wrap .game-result .game-result-block .result-title {
  display: block;
  position: absolute;
  width: 80%;
  bottom: 0;
  left: 10%;
  opacity: 0;
  transform: translateY(50%);
  animation: resultshow 1s 0.5s forwards;
}
.game-wrap .game-result .game-result-btn {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 3%;
  width: 80%;
  left: 10%;
  gap: 3%;
  opacity: 0;
  transform: translateY(200%);
  animation: resultshow 1s 2s forwards;
  transition: opacity 0.25s;
}
.game-wrap .game-result .game-result-btn a {
  display: block;
}
@keyframes resultshow {
  to {
    opacity: 1;
    transform: translate(0);
  }
}
.game-wrap .capture-temp-block {
  display: none;
  position: absolute;
  bottom: 12%;
  width: 90%;
  height: 50%;
  left: 5%;
}
.game-wrap .capture-temp-block .result-ip {
  display: block;
  position: absolute;
  width: 60%;
  bottom: 20%;
  left: 12%;
}
.game-wrap .capture-temp-block .result-sprite {
  position: absolute;
  width: 45%;
  padding-top: 75%;
  right: 10%;
  bottom: 15%;
}
.game-wrap .capture-temp-block .result-sprite .sprite {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat !important;
  background-position: 0 0;
  opacity: 0;
  background-size: 200% 100% !important;
  animation: sprite 0.75s steps(2) infinite;
}
.game-wrap .capture-temp-block .result-sprite .for-capture {
  position: absolute;
  display: block;
  width: 100%;
  top: 0;
  left: 0;
}
.game-wrap .capture-temp-block .result-sprite .result-head {
  position: absolute;
  display: block;
  width: 70%;
  top: 26%;
  left: 50%;
  transform: translate(-50%, -63%);
}
.game-wrap .capture-temp-block .result-title {
  display: block;
  position: absolute;
  width: 80%;
  bottom: 0;
  left: 10%;
}

.capture-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .game-wrap.playing .title {
    max-width: 375px;
  }
  .game-wrap .game-bg {
    width: 1024px;
  }
  .game-wrap .game-ppl-sprite {
    width: 200px;
    bottom: 475px;
    left: calc(50% - 100px);
    padding-top: 250px;
  }
  .game-wrap .obstacle-wrap {
    padding-top: 620px;
  }
  .game-wrap .obstacle-wrap .obstacle-route {
    height: 1000%;
  }
  .game-wrap .obstacle-wrap .obstacle-route img {
    width: 200px;
    left: calc(50% - 100px);
  }
  .game-wrap .game-btn-wrap {
    bottom: 5%;
    width: 768px;
    margin: auto;
    left: 0;
    right: 0;
  }
  .game-wrap .game-btn-wrap a {
    width: 20%;
  }
  .game-wrap.intro-ing .words-1,
  .game-wrap.intro-ing .words-2 {
    left: calc(50% - 200px);
    width: 400px;
  }
  .game-wrap.intro-ing .obstacle-wrap .intro-bug {
    left: calc(50% - 100px);
    width: 200px;
  }
  .game-wrap .game-countdown img {
    width: 200px;
  }
  .game-wrap .game-time {
    width: 200px;
  }
  .game-wrap .game-time p {
    font-size: 74px;
  }
  .game-wrap .game-result .game-result-block {
    bottom: 150px;
    width: 640px;
    left: calc(50% - 320px);
  }
  .game-wrap .game-result .game-result-btn {
    width: 500px;
    left: calc(50% - 250px);
  }
  .game-wrap .capture-temp-block {
    bottom: 150px;
    width: 640px;
    left: calc(50% - 320px);
  }
}
@media only screen and (min-width: 641px) and (max-width: 768px) {
  .game-wrap.playing .title {
    max-width: 275px;
  }
  .game-wrap .game-bg {
    width: 768px;
  }
  .game-wrap .game-ppl-sprite {
    width: 150px;
    bottom: 360px;
    left: calc(50% - 75px);
    padding-top: 187.5px;
  }
  .game-wrap .obstacle-wrap {
    padding-top: 467px;
  }
  .game-wrap .obstacle-wrap .obstacle-route img {
    width: 150px;
    left: calc(50% - 75px);
  }
  .game-wrap .game-btn-wrap {
    bottom: 5%;
    width: 500px;
    margin: auto;
    left: 0;
    right: 0;
  }
  .game-wrap .game-btn-wrap a {
    width: 20%;
  }
  .game-wrap.intro-ing .words-1,
  .game-wrap.intro-ing .words-2 {
    left: calc(50% - 150px);
    width: 300px;
  }
  .game-wrap.intro-ing .obstacle-wrap .intro-bug {
    left: calc(50% - 75px);
    width: 150px;
  }
  .game-wrap .game-countdown img {
    width: 160px;
  }
  .game-wrap .game-time {
    width: 160px;
  }
  .game-wrap .game-time p {
    font-size: 64px;
  }
  .game-wrap .game-result .game-result-block {
    bottom: 120px;
    width: 480px;
    left: calc(50% - 240px);
  }
  .game-wrap .game-result .game-result-btn {
    width: 480px;
    left: calc(50% - 240px);
  }
  .game-wrap .capture-temp-block {
    bottom: 120px;
    width: 480px;
    left: calc(50% - 240px);
  }
}
@keyframes spark {
  to {
    transform: scale(0.9);
  }
}
@keyframes ipip {
  0%, 30% {
    transform: translateY(0);
  }
  15% {
    transform: translateY(-10%);
  }
}
.wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

audio {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

.preload {
  position: absolute;
  z-index: -1;
  opacity: 0;
  width: 25%;
  top: 0;
  left: 0;
  pointer-events: none;
}
.preload img {
  position: absolute;
  top: 0;
  left: 0;
}

.title {
  display: block;
  max-width: 70%;
  max-height: 20%;
  margin-top: 5%;
}

.index-img-1 {
  display: block;
  max-width: 65%;
  max-height: 8%;
}

.index-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("../img/index-bg.jpg") #1d6ab2 no-repeat bottom center;
  background-size: cover;
}
.index-wrap .index-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 1%;
}
.index-wrap .index-flex .index-img-2 {
  display: block;
  max-width: 80%;
  max-height: 14%;
}
.index-wrap .index-flex .btn-index {
  display: block;
  max-width: 50%;
  animation: spark 1s infinite alternate;
}
.index-wrap .index-flex .btn-detail {
  border-bottom: 1px solid #000;
}

.privacy-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("../img/privacy-bg.jpg") #1d6ab2 no-repeat bottom center;
  background-size: cover;
}
.privacy-wrap .privacy-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 1%;
}
.privacy-wrap .privacy-flex .privacy-block {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 80%;
  height: 50%;
  padding: 1em;
  border-radius: 3em;
  -webkit-border-radius: 3em;
  box-shadow: 0 0 1em #76ed56;
  background: #FFF;
  gap: 1em;
}
.privacy-wrap .privacy-flex .privacy-block > img {
  display: block;
  width: 50%;
}
.privacy-wrap .privacy-flex .privacy-block article {
  width: 100%;
  flex: 1 0 0;
  overflow-y: auto;
  font-size: 3.5vw;
  text-align: justify;
  -webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 641px) {
  .privacy-wrap .privacy-flex .privacy-block article {
    font-size: 22px;
  }
}
.privacy-wrap .privacy-flex .privacy-block .btn-check {
  position: relative;
  padding-left: 2em;
}
.privacy-wrap .privacy-flex .privacy-block .btn-check span {
  position: absolute;
  display: block;
  width: 1.5em;
  height: 1.5em;
  border: 2px solid #000;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #FFF;
}
.privacy-wrap .privacy-flex .privacy-block .btn-check.active span {
  background: url("../img/icon-check.svg") #FFF no-repeat center center;
  background-size: contain;
}
.privacy-wrap .privacy-flex .privacy-block .btn-start {
  display: block;
  max-width: 50%;
  pointer-events: none;
  opacity: 0.5;
}
.privacy-wrap .privacy-flex .privacy-block .btn-start.active {
  opacity: 1;
  pointer-events: all;
  animation: spark 1s infinite alternate;
}
.privacy-wrap .privacy-flex .privacy-ip {
  pointer-events: none;
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
}

.photo-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("../img/photo-bg.jpg") #1d6ab2 no-repeat bottom center;
  background-size: cover;
}
.photo-wrap .photo-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 1%;
}
.photo-wrap .photo-flex .photo-des {
  display: block;
  max-width: 75%;
  max-height: 9%;
}
.photo-wrap .photo-flex .crop-wrap {
  position: relative;
  width: 55%;
}
.photo-wrap .photo-flex .crop-wrap .photo-body {
  position: absolute;
  display: block;
  width: 70%;
  top: 40%;
  left: 15%;
}
.photo-wrap .photo-flex .upload-preview,
.photo-wrap .photo-flex .crop-block {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: url("../img/photo-temp.jpg");
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-color: #FFF;
  margin: 1.5% 0;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  box-shadow: 0 0 1em #76ed56;
  overflow: hidden;
}
.photo-wrap .photo-flex .upload-preview .result,
.photo-wrap .photo-flex .crop-block .result {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.photo-wrap .photo-flex .upload-preview .result .cropper-container,
.photo-wrap .photo-flex .upload-preview .result img,
.photo-wrap .photo-flex .crop-block .result .cropper-container,
.photo-wrap .photo-flex .crop-block .result img {
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.photo-wrap .photo-flex .upload-preview .cropper-bg,
.photo-wrap .photo-flex .crop-block .cropper-bg {
  background: none;
}
.photo-wrap .photo-flex .upload-preview .img-result,
.photo-wrap .photo-flex .crop-block .img-result {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.photo-wrap .photo-flex .upload-preview .img-result img,
.photo-wrap .photo-flex .crop-block .img-result img {
  display: block;
  width: 100%;
}
.photo-wrap .photo-flex .imageUpload {
  z-index: -1;
  position: absolute;
  opacity: 0;
}
.photo-wrap .photo-flex .btn-android-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
}
.photo-wrap .photo-flex .btn-android-flex .btn-android-photo,
.photo-wrap .photo-flex .btn-android-flex .btn-android-camera {
  display: block;
  width: 15%;
  animation: spark 1s infinite alternate;
}
.photo-wrap .photo-flex .btn-photo-ios {
  position: relative;
  display: block;
  width: 20%;
  animation: spark 1s infinite alternate;
}
.photo-wrap .photo-flex .photo-btn-flex {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3%;
}
.photo-wrap .photo-flex .photo-btn-flex a {
  display: block;
  width: 30%;
}

.buffering {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
}
.buffering p {
  position: absolute;
  width: 80px;
  height: 80px;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  border: 8px solid #009944;
  border-right-color: transparent;
  animation: spin 1s infinite linear;
}
@keyframes spin {
  to {
    transform: rotate(359deg);
  }
}

.fail-lightbox,
.download-lightbox,
.browser-lightbox {
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.fail-lightbox .fail-lightbox-block,
.fail-lightbox .download-lightbox-block,
.fail-lightbox .browser-lightbox-block,
.download-lightbox .fail-lightbox-block,
.download-lightbox .download-lightbox-block,
.download-lightbox .browser-lightbox-block,
.browser-lightbox .fail-lightbox-block,
.browser-lightbox .download-lightbox-block,
.browser-lightbox .browser-lightbox-block {
  padding: 2em 1.5em;
  color: #009944;
  font-size: 6vw;
  border-radius: 2.5em;
  -webkit-border-radius: 2.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  border: 1px solid #009944;
  background: #FFF;
  box-shadow: 0 0 1em #76ed56;
  text-align: center;
}
@media only screen and (min-width: 641px) {
  .fail-lightbox .fail-lightbox-block,
  .fail-lightbox .download-lightbox-block,
  .fail-lightbox .browser-lightbox-block,
  .download-lightbox .fail-lightbox-block,
  .download-lightbox .download-lightbox-block,
  .download-lightbox .browser-lightbox-block,
  .browser-lightbox .fail-lightbox-block,
  .browser-lightbox .download-lightbox-block,
  .browser-lightbox .browser-lightbox-block {
    font-size: 38px;
  }
}
.fail-lightbox .fail-lightbox-block h2,
.fail-lightbox .download-lightbox-block h2,
.fail-lightbox .browser-lightbox-block h2,
.download-lightbox .fail-lightbox-block h2,
.download-lightbox .download-lightbox-block h2,
.download-lightbox .browser-lightbox-block h2,
.browser-lightbox .fail-lightbox-block h2,
.browser-lightbox .download-lightbox-block h2,
.browser-lightbox .browser-lightbox-block h2 {
  font-size: 5vw;
  font-weight: normal;
}
@media only screen and (min-width: 641px) {
  .fail-lightbox .fail-lightbox-block h2,
  .fail-lightbox .download-lightbox-block h2,
  .fail-lightbox .browser-lightbox-block h2,
  .download-lightbox .fail-lightbox-block h2,
  .download-lightbox .download-lightbox-block h2,
  .download-lightbox .browser-lightbox-block h2,
  .browser-lightbox .fail-lightbox-block h2,
  .browser-lightbox .download-lightbox-block h2,
  .browser-lightbox .browser-lightbox-block h2 {
    font-size: 32px;
  }
}
.fail-lightbox .fail-lightbox-block article,
.fail-lightbox .download-lightbox-block article,
.fail-lightbox .browser-lightbox-block article,
.download-lightbox .fail-lightbox-block article,
.download-lightbox .download-lightbox-block article,
.download-lightbox .browser-lightbox-block article,
.browser-lightbox .fail-lightbox-block article,
.browser-lightbox .download-lightbox-block article,
.browser-lightbox .browser-lightbox-block article {
  font-size: 4vw;
  color: #000;
  text-align: justify;
  margin: 0.5em 0;
}
@media only screen and (min-width: 641px) {
  .fail-lightbox .fail-lightbox-block article,
  .fail-lightbox .download-lightbox-block article,
  .fail-lightbox .browser-lightbox-block article,
  .download-lightbox .fail-lightbox-block article,
  .download-lightbox .download-lightbox-block article,
  .download-lightbox .browser-lightbox-block article,
  .browser-lightbox .fail-lightbox-block article,
  .browser-lightbox .download-lightbox-block article,
  .browser-lightbox .browser-lightbox-block article {
    font-size: 25px;
  }
}
.fail-lightbox .fail-lightbox-block article ol,
.fail-lightbox .download-lightbox-block article ol,
.fail-lightbox .browser-lightbox-block article ol,
.download-lightbox .fail-lightbox-block article ol,
.download-lightbox .download-lightbox-block article ol,
.download-lightbox .browser-lightbox-block article ol,
.browser-lightbox .fail-lightbox-block article ol,
.browser-lightbox .download-lightbox-block article ol,
.browser-lightbox .browser-lightbox-block article ol {
  margin-left: 1.25em;
}
.fail-lightbox .fail-lightbox-block .btn-lightbox-again,
.fail-lightbox .fail-lightbox-block .btn-lightbox-download,
.fail-lightbox .fail-lightbox-block .btn-lightbox-browser,
.fail-lightbox .download-lightbox-block .btn-lightbox-again,
.fail-lightbox .download-lightbox-block .btn-lightbox-download,
.fail-lightbox .download-lightbox-block .btn-lightbox-browser,
.fail-lightbox .browser-lightbox-block .btn-lightbox-again,
.fail-lightbox .browser-lightbox-block .btn-lightbox-download,
.fail-lightbox .browser-lightbox-block .btn-lightbox-browser,
.download-lightbox .fail-lightbox-block .btn-lightbox-again,
.download-lightbox .fail-lightbox-block .btn-lightbox-download,
.download-lightbox .fail-lightbox-block .btn-lightbox-browser,
.download-lightbox .download-lightbox-block .btn-lightbox-again,
.download-lightbox .download-lightbox-block .btn-lightbox-download,
.download-lightbox .download-lightbox-block .btn-lightbox-browser,
.download-lightbox .browser-lightbox-block .btn-lightbox-again,
.download-lightbox .browser-lightbox-block .btn-lightbox-download,
.download-lightbox .browser-lightbox-block .btn-lightbox-browser,
.browser-lightbox .fail-lightbox-block .btn-lightbox-again,
.browser-lightbox .fail-lightbox-block .btn-lightbox-download,
.browser-lightbox .fail-lightbox-block .btn-lightbox-browser,
.browser-lightbox .download-lightbox-block .btn-lightbox-again,
.browser-lightbox .download-lightbox-block .btn-lightbox-download,
.browser-lightbox .download-lightbox-block .btn-lightbox-browser,
.browser-lightbox .browser-lightbox-block .btn-lightbox-again,
.browser-lightbox .browser-lightbox-block .btn-lightbox-download,
.browser-lightbox .browser-lightbox-block .btn-lightbox-browser {
  display: block;
  width: 50%;
  margin: auto;
  margin-top: 1em;
}

.index-lightbox {
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.index-lightbox .index-lightbox-block {
  padding: 2em 1.5em;
  background: #FFF;
  border-radius: 2.5em;
  -webkit-border-radius: 2.5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 85%;
}
.index-lightbox .index-lightbox-block .lightbox-close {
  position: absolute;
  width: 3em;
  top: -1em;
  right: -1em;
}
.index-lightbox .index-lightbox-block .index-lightbox-flex {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 1em;
}
.index-lightbox .index-lightbox-block .index-lightbox-flex article {
  flex: 1 0 0;
  width: 100%;
  text-align: justify;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 3.5vw;
}
@media only screen and (min-width: 641px) {
  .index-lightbox .index-lightbox-block .index-lightbox-flex article {
    font-size: 22px;
  }
}
.index-lightbox .index-lightbox-block .index-lightbox-flex article ul {
  margin-left: 1.5em;
}
.index-lightbox .index-lightbox-block .index-lightbox-flex article p {
  color: #009944;
}

.download-notice-ios,
.download-notice-other {
  display: none;
  position: absolute;
  bottom: 30%;
  left: 50%;
  padding: 0.5em 1em;
  color: #FFF;
  background: #009944;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.pc-kv {
  z-index: 9;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/pc-kv.png") #c9e2c1 no-repeat center center;
  background-size: auto 60%;
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
  .landscape {
    display: block !important;
    z-index: 9;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFF;
  }
  .landscape p {
    font-size: 5vw;
    color: #009944;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
@media only screen and (max-width: 1024px) and (orientation: landscape) and (min-width: 641px) {
  .landscape p {
    font-size: 32px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .photo-wrap .photo-flex .crop-wrap {
    width: 400px;
  }
  .photo-wrap .photo-flex .btn-android-flex .btn-android-photo,
  .photo-wrap .photo-flex .btn-android-flex .btn-android-camera {
    width: 120px;
  }
  .photo-wrap .photo-flex .btn-photo-ios {
    width: 135px;
  }
}
@media only screen and (min-width: 641px) and (max-width: 768px) {
  .photo-wrap .photo-flex .crop-wrap {
    width: 300px;
  }
  .photo-wrap .photo-flex .btn-android-flex .btn-android-photo,
  .photo-wrap .photo-flex .btn-android-flex .btn-android-camera {
    width: 100px;
  }
  .photo-wrap .photo-flex .btn-photo-ios {
    width: 120px;
  }
}/*# sourceMappingURL=index.css.map */