@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
@font-face {
  font-family: 'LineSeed';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Bd.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* reset */
* {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
h1, h2, h3, h4, h5, h6, p {margin: 0; padding: 0; font-size: inherit;}
p {display: inline-block;}
ol, ul {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none; color: inherit;}
button {padding: 0; cursor: pointer; line-height: 1.5; text-indent: -9999px;}
button, select {-webkit-appearance: none; background: none; border: none; outline: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
address {font-style: normal;}

html {overflow-x: hidden; background: #f5f8ff;}

body {height: 100vh; align-content: center;}

#wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 360px;
  width: 100%;
  height: 755px;
  margin: 0 auto;
  background: url(../img/bg-main.png) no-repeat 50% 50%;
  background-size: cover;
  box-shadow: 0px 0px 12px 8px #d7d9e5;
  font-family: "Jua", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #fff;
}

#wrap.jp {
  font-family: 'LineSeed', sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
}


#header {position: relative; background: url(../img/header-bg.png) no-repeat 50% 50%;}
#header:before {position: absolute; content: ''; width: 100%; height: 18px; bottom: -10px; left: 0; right: 0; background: url(../img/header-line.png) no-repeat 50% 50%; background-size: 360px; mix-blend-mode: color-dodge;}
#header .hd-top {display: flex; align-items: flex-start; padding: 22px 20px 0 20px;}
#header .logo {height: 31px; margin-right: 9px;}
#header .hd-tit h1 {font-size: 22px; text-shadow: 0px 3px 0 #08051f;}
#header .hd-tit h4 {font-size: 11px; text-shadow: 0px 3px 0 #08051f;}

.en #header .hd-tit h1 {font-size: 18px;}
.jp #header .hd-tit h1 {font-size: 18px;}

.lang-wrap {position: relative; width: 45px; margin-left: auto; border-radius: 4px; background: #fff;}

.lang-wrap .select_lng_txt {position: relative; font-size: 16px; line-height: 20px; cursor: pointer; text-align: center; color: #000;}
.lang-wrap .select_lng_txt p {font-size: 12px;}

.lang-wrap .lang-list {display: none; position: absolute; left: 0; right: 0; top: 28px; padding: 7px 0; text-align: center; border-radius: 4px; background-color: #fff;}
.lang-wrap .lang-list li {margin: 3px 0; padding: 4px 10px; cursor: pointer; font-size: 12px; font-family: 'jua', sans-serif; line-height: 1; transition: all 0.2s; color: black;}
.lang-wrap .lang-list.active {display: block;}


#header .hd-bottom {display: flex; align-items: center; justify-content: center; padding: 17px 0;}
#header .hd-bottom a {display: flex; margin: 0 6px;}
#header .hd-bottom a img {height: 35px;}


#main {position: relative; height: 100%; overflow: hidden;}
#main h4 {position: absolute; right: 20px; top: 22px; font-size: 19px; animation: moveMainCard 4s ease-in-out infinite alternate;}
#main .img-card {width: 100%; animation: moveMainCard 4s ease-in-out infinite alternate;}

@keyframes moveMainCard {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}


#main .main-view {display: block;}
/* #main .main-view {display: none;} */

#main .pick-view {display: none; width: 100%; height: 100%; flex-direction: column; justify-content: space-between; padding: 34px 32px 47px;}
#main .img-wrap {display: flex; justify-content: space-between;}
#main .img-wrap img {height: 35px;}

.a {animation: moveA 1.5s linear infinite alternate;}
.b {animation: moveB 1.5s linear infinite alternate;}
.c {animation: moveC 1.5s linear infinite alternate;}
.d {animation: moveD 1.5s linear infinite alternate;}

@keyframes moveA {
  0%   { transform: translate(0,0); }
  100% { transform: translate(6px, 6px); }
}
@keyframes moveB {
  0%   { transform: translate(0,0); }
  100% { transform: translate(-6px, 6px); }
}
@keyframes moveC {
  0%   { transform: translate(0,0); }
  100% { transform: translate(6px, -6px); }
}
@keyframes moveD {
  0%   { transform: translate(0,0); }
  100% { transform: translate(-6px, -6px); }
}

#main .pick-item {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 20px;}
#main .pick-item p {text-shadow: #fff 0px 0 8px;}

#main .pick-item .item {position: relative;}
#main .pick-item .inner {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;}
#main .pick-item .inner .prize {animation: itemMove 1.5s ease-in-out infinite alternate; -webkit-animation: itemMove 2s ease-in-out infinite alternate; animation-delay: 0.1s;}
#main .pick-item .bg {animation: itemBG 3s linear infinite alternate; -webkit-animation: itemBG 3s linear infinite alternate;}

@keyframes itemMove {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(-7deg);}
  100% {transform: rotate(7deg);}
}

@keyframes itemBG {
  0% {opacity: 1; transform: scale(1);}
  50% {opacity: 0.7; transform: scale(1.5);}
  100% {opacity: 1; transform: scale(1);}
}

#main .get-view {display: none; height: 100%; align-content: center;}
#main .get-view .pick-item {position: inherit; transform: none;}
#main .get-view .item-code {display: flex; justify-content: center; position: relative; margin-top: 12px; text-align: center; z-index: 1;}
#main .get-view .code-txt {margin-right: 8px; width: 210px; height: 50px; padding: 10px; line-height: 30px; color: #000; background: url(../img/main-coupon.png) no-repeat 50% 50%; background-size: cover;}

#main .get-view .btn-copy {width: 53px; height: 50px; background: url(../img/main-coupon-01.png) no-repeat 50% 50%; background-size: cover;}

#main .btn-guide {position: absolute; right: 21px; top: 24px; width: 70px; height: 70px; background: url(../img/btn-guide.png) no-repeat 50% 50%; background-size: cover; color: #fff; text-indent: 0; z-index: 2;}



#bottom {width: 100%; text-align: center; position: relative;}
#bottom .btn-wrap {position: absolute; left: 50%; transform: translateX(-50%); top: -21px; display: flex; z-index: 1;}
#bottom .btn-wrap button {width: 150px; height: 42px; text-indent: 0; background: url(../img/btn-draw.png) no-repeat 50% 50%; background-size: cover; color: #fff;}
#bottom .btn-wrap .btn-get {display: none;}
#bottom .btn-wrap .btn-gacha:disabled {background: url(../img/btn-draw-disabled.png) no-repeat 50% 50%; background-size: cover;}

#bottom .btn-wrap.re .btn-gacha {margin-left: 22px; background: url(../img/btn-retry.png) no-repeat 50% 50%; background-size: 115px;}
#bottom .btn-wrap.re .btn-gacha:disabled {background: url(../img/btn-retry-disabled.png) no-repeat 50% 50%; background-size: 115px;}
#bottom .btn-wrap.re .btn-get {display: block; background: url(../img/btn-draw-2.png) no-repeat 50% 50%; background-size: 115px;}
#bottom .btn-wrap.re button {width: 115px;}

#bottom .btn-wrap .remain-time {display: none; position: absolute; top: -30px; right: 20px; align-items: center; font-size: 18px;}
#bottom .btn-wrap .remain-time img {width: 25px; margin-right: 5px;}

#bottom .bt-con {padding: 36px 0 32px; background: url(../img/bottom-bg.png) no-repeat 50% 50%; background-size: cover;}
#bottom .bt-con:before {position: absolute; content: ''; width: 100%; height: 18px; top: -10px; left: 0; right: 0; background: url(../img/header-line.png) no-repeat 50% 50%; background-size: 360px; mix-blend-mode: color-dodge;}
#bottom .bt-con p {display: block; font-size: 14px; letter-spacing: -0.4px;}
#bottom .bt-con .get-txt {display: none; margin-left: 25px; font-size: 16px; color: #ffe8b1;}

.en #bottom .bt-con {padding-left: 40px;}
.en #bottom .bt-con .get-txt {margin-left: 0; font-size: 15px;}

.jp #bottom .btn-rule {left: 10px;}
.jp #bottom .bt-con {padding-left: 20px;}
.jp #bottom .bt-con p {font-size: 12px;}

#bottom .btn-rule {position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 35px; height: 35px; background: url(../img/bottom-btn-percent.png) no-repeat 50% 50%; background-size: cover;}



.modal {display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 9%; background: rgba(0,0,0,0.8); flex-direction: column; justify-content: center; align-items: center; z-index: 10;}
.modal > div {display: none;}
.modal .guide-outer {height: 80%; overflow: hidden;}
.modal .guide-outer .guide {height: 100%; overflow: hidden; border-radius: 12px; background: #fff;}
.modal .guide-outer .guide .scroll {height: 100%; padding: 15px 20px; overflow: auto; scrollbar-width: thin;}
.modal .btn-close {width: 32px; height: 32px; margin-left: auto; margin-bottom: 8px; background: url(../img/m-btn-close.png) no-repeat 50% 50%; background-size: cover;}
.modal img {width: 100%;}


@media screen and (max-width: 510px) {
  #wrap {max-width: none; height: 100vh;}
}