@charset "utf-8";
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-family:inherit;
	vertical-align:baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{
	display:block;
}
ol, ul{
	list-style:none;
}
blockquote, q{
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after{
	content:'';
	content:none;
}
h1, h2, h3, h4, h5, h6 {
	line-height:1.2;
	font-size:100%;
}
p {
	line-height:1.4;
	font-size:100%;
}
img{
	border:none;
	outline:none;
}
a{
	text-decoration:none;
	color:#000;
}
body {
  padding:0;
  margin:0;
  font-size:1rem;
  color:#000;
  line-height:1;
  -webkit-text-size-adjust:none;
	-webkit-font-smoothing:antialiased;
	-webkit-tap-highlight-color:transparent;
	-webkit-user-select:none;
  user-select:none;
  background-color:#1c1e4d;
  overflow:hidden;
  overflow-y:auto;
}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased}
*, *:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
button, input, textarea{
	padding:0;
	margin:0;
	border:none;
	outline:none;
	background:none;
	-webkit-appearance:none;
	font-family:inherit;
}

.fs-pc{
  display:block;
}
.fs-sp {
  display:none;
}
.fs-not-psp{
  display:block;
}
.fs-psp {
  display:none;
}

/*Font*/
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-BlackItalic.eot');
  src: url('../fonts/Montserrat-BlackItalic.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Montserrat-BlackItalic.woff2') format('woff2'),
      url('../fonts/Montserrat-BlackItalic.woff') format('woff'),
      url('../fonts/Montserrat-BlackItalic.ttf') format('truetype'),
      url('../fonts/Montserrat-BlackItalic.svg#Montserrat-BlackItalic') format('svg');
  font-weight: 900;
  font-style: italic;
  font-display:wrap;
}

/*Common*/
.game-content{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  font-family:'Montserrat', sans-serif;
  font-weight:900;
  font-style:italic;
  overflow:hidden;
}
.game-content::before{
  content:'';
  position:relative;
  display:block;
  width:100%;
  height:auto;
  padding-top:56.25%;
}
.game-items{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.logo{
  position:absolute;
  width:100%;
  height:auto;
  left:0;
  top:2.3148%;
  line-height:0;
  z-index:2;
  text-align:center;
}
.logo img {
  width:8.59375%;
  height:auto;
}
.footer{
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:auto;
  line-height:0;
  z-index:1;
  pointer-events:none;
}
.footer::before{
  content:'';
  position:relative;
  display:block;
  width:100%;
  height:auto;
  padding-top:27.29%;
}
.footer .bg{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:url(../images/footer-pc.png) no-repeat center bottom;
  background-size:100% auto;
}
.slogan-bot{
  position:absolute;
  left:17%;
  bottom:11%;
  width:auto;
  height:auto;
  font-size:2.2vw;
  color:#fff;
  text-transform:uppercase;
  -webkit-transform:rotate(-5deg);
  transform:rotate(-5deg);
}
.slogan-bot h2{
  font-size:100%;
}
.slogan-bot h3{
  font-size:62%;
}

.bottle{
  position:absolute;
  right:13.8%;
  bottom:4.6%;
  width:12.7%;
  height:auto;
  line-height:0;
}
.light{
  position:absolute;
  right:4%;
  bottom:-4%;
  width:28%;
  height:auto;
}
.light::before{
  content:'';
  position:relative;
  display:block;
  width:100%;
  height:auto;
  padding-top:68.75%;
}
.light span{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:url(../images/light-blue.png) no-repeat center center;
  background-size:cover;
}

.slogan-bot img, .bottle img{
  width:100%;
}
.flower{
  position:absolute;
}
.flower img {
  width:100%;
}

.flower-left .flower {
  width:4%;
}
.flower-right .flower{
  width:2%;
}

.flower-left .flower:nth-child(1) {
  left:4.4%;
  bottom:4.6%;
  width:2%;
}
.flower-left .flower:nth-child(2) {
  left:9%;
  bottom:5%;
  width:2.1%;
}

.flower-left .flower:nth-child(3) {
  left:12.4%;
  bottom:13%;
  width:3.2%;
}

.flower-right .flower:nth-child(1),
.flower-right .flower:nth-child(4) {
  width:4%;
}
.flower-right .flower:nth-child(2),
.flower-right .flower:nth-child(5) {
  width:2%;
}
.flower-right .flower:nth-child(3),
.flower-right .flower:nth-child(6) {
  width:3.2%;
}

.flower-right .flower:nth-child(1),
.flower-right .flower:nth-child(4) {
  right:33%;
  bottom:28%;
}
.flower-right .flower:nth-child(2),
.flower-right .flower:nth-child(5){
  right:38%;
  bottom:18%;
}
.flower-right .flower:nth-child(3),
.flower-right .flower:nth-child(6) {
  right:35%;
  bottom:2%;
}
.flower-end{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:auto;
  opacity:0;
}
.is-result .flower-right .flower{
  width:2%;
}

.is-result .flower-right .flower:nth-child(1),
.is-result .flower-right .flower:nth-child(4) {
  right:23%;
  bottom:28%;
}
.is-result .flower-right .flower:nth-child(2),
.is-result .flower-right .flower:nth-child(5){
  right:28%;
  bottom:18%;
}
.is-result .flower-right .flower:nth-child(3),
.is-result .flower-right .flower:nth-child(6) {
  right:25%;
  bottom:2%;
}

.item{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.bg {
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
}
.bg div{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.main-bg{
  background:url(../images/bg-main-pc.jpg) no-repeat center center;
  background-size:cover;
}
.sub-bg {
  background:url(../images/bg-sub-pc.jpg) no-repeat center center;
  background-size:cover;
}
.game-step{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  visibility:hidden;
	opacity:0;
	-webkit-transition:opacity 0.3s ease-in-out 0s, visibility 0s linear 0.3s;	
	transition:opacity 0.3s ease-in-out 0s, visibility 0s linear 0.3s;
}
.game-step.current {
  opacity:1;
	visibility:visible;
	-webkit-transition-delay:0s, 0s;
	transition-delay:0s, 0s
}
.game-but{
  position:absolute;
  z-index:2;
}
.game-but button{
  position:relative;
  display:inline-block;
  height:auto;
  cursor:pointer;
  -webkit-border-radius:50px;
  border-radius:50px;
  overflow:hidden;
}
.game-but button::after, .game-but a::after{
  content:'';
  display:block;
  position:absolute;
  width:5%;
  height:180%;
  left:0%;
  top:-45%;
  opacity:0;
  background-color:rgba(255,255,255,0.5);
  box-shadow:0 0 10px 0 rgba(255,255,255,1);
  -webkit-transform:rotate(10deg);
  transform:rotate(10deg);
}
.game-but button img{
  width:100%;
}


/*Home Screen*/
.headline{
  position:absolute;
  left:38.54%;
  top:25.5%;
  width:auto;
  height:auto;
  font-size:4.35vw;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 18px 18px rgba(0,0,0,0.3);
  -webkit-transform:rotate(-10deg);
  transform:rotate(-10deg);
  letter-spacing:-1.4px;
}
.headline h2{
  font-size:100%;
  line-height:1.2;
}
.headline h3{
  font-size:44.8%;
  line-height:1;
}
.headline span{
  font-size:68.75%;
}
.slogan{
  position:absolute;
  right:3%;
  top:28%;
  width:auto;
  height:auto;
  background-color:#fff;
  padding:2.7% 1.46%;
  -webkit-border-radius:3.24vh;
  border-radius:3.24vh;
}
.slogan h2{
  font-size:1.8vw;
  color:#121a51;
  text-align:center;
}
.slogan .game-but{
  width:100%;
  left:0;
  top:100%;
  margin-top:-1.3vw;
  text-align:center;
}
.slogan .game-but button{
  display:inline-block;
  width:68%;
  background-color:#fff17e;
  -webkit-border-radius:1.85vh;
  border-radius:1.85vh;
  -webkit-box-shadow:0 18px 13px rgba(0,0,0,0.2);
  box-shadow:0 18px 13px rgba(0,0,0,0.2);
}
.slogan .game-but span{
  position:relative;
  display:block;
  padding:8% 0;
  color:#111a50;
  font-size:1.77vw;
  font-weight:900;
  font-style:italic;
}
.clothes-box{
  position:absolute;
  left:33.645%;
  top:53.6%;
  width:38%;
  height:auto;
  background:url(../images/clothes.png) left center;
  background-size:auto 100%;
}
.clothes-box::before{
  content:'';
  position:relative;
  display:block;
  width:100%;
  height:auto;
  padding-top:100%;
}
.placement-main{
  position:absolute;
  left:0.26%;
  top:12.7777%;
  width:49.21875%;
  height:auto;
}
.placement-main::before{
  content:'';
  position:relative;
  display:block;
  width:100%;
  height:auto;
  padding-top:100%;
}
.placement-main span{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:url(../images/placement-main.png) left 0;
  background-size:auto 100%;
  z-index:1;
}
.light-place{
  position:absolute;
  left:5%;
  top:5%;
  width:100%;
  height:auto;
  z-index:0;
}
.light-place::before{
  content:'';
  position:relative;
  display:block;
  width:100%;
  height:auto;
  padding-top:68.75%;
}
.light-place div{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.light-place div::before,
.light-place div::after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:url(../images/light-blue.png) no-repeat center center;
  opacity:0.3;
  -webkit-transform:scale(0.8);
  transform:scale(0.8);
  background-size:cover;
  -webkit-transform-origin:center bottom;
  transform-origin:center bottom;
}

/*Placement Screen*/
.bubble{
  position:absolute;
  right:3.125%;
  top:11.48%;
  width:50.52%;
  line-height:0;
}
.placement{
  position:absolute;
  left:3%;
  bottom:1%;
  width:56.927%;
  background:url(../images/placement.png) left 0;
  background-size:auto 100%;
}
.placement::before{
  content:'';
  position:relative;
  display:block;
  width:100%;
  height:auto;
  padding-top:100%;
}

.bubble img , .placement img {
  width:100%;
}

/*Result Screen*/
.placement-result{
  position:absolute;
  left:35.41666%;
  bottom:0;
  width:38.54%;
  height:auto;
  background:url(../images/placement-result.png) left 0;
  background-size:auto 100%;
}
.placement-result::before{
  content:'';
  position:relative;
  display:block;
  width:100%;
  height:auto;
  padding-top:130.8%;
}

.result-info{
  position:absolute;
  left:4%;
  top:10.37%;
  width:32%;
  height:auto;
  padding:1.7% 2%;
  overflow:hidden;
}
.result-info::before{
  content:'';
  position:absolute;
  right:0;
  top:0;
  width:72%;
  height:100%;
  background-color:#fff17e;
  -webkit-border-radius:0 4.6vh 4.6vh 0;
  border-radius:0 4.6vh 4.6vh 0;
}
.info-avatar{
  position:relative;
  display:block;
  float:left;
  width:44%;
  height:auto;
}
.info-avatar::before{
  content:'';
  position:relative;
  display:block;
  width:100%;
  height:auto;
  padding-top:100%;
}
.circle{
  position:absolute;
  left:50%;
  top:50%;
  width:130%;
  height:130%;
  background-color:#fff17e;
  -webkit-border-radius:50%;
  border-radius:50%;
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}
.user-avatar{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  -webkit-border-radius:50%;
  border-radius:50%;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  background-color:#fff;
}
.info-txt{
  position:relative;
  display:block;
  padding-left:48%;
  padding-top:2%;
  color:#131b4d;
  text-transform:uppercase;
}
.info-txt h2{
  font-size:2vw;
  line-height:1;
}
.game-step .count-per {
  opacity:0.7;
}
.game-step .count-per.is-done{
  opacity:1;
}
.info-txt span{
  font-size:4.8vw;
  line-height:1;
}
.info-txt span small{
  font-size:inherit;
  line-height:inherit;
  font-family:inherit;
  font-style:inherit;
  font-weight:inherit;
}
.info-txt p{
  font-size:1.2vw;
  line-height:1.2;
}
.result-detail{
  position:absolute;
  left:4%;
  top:43%;
  width:32%;
  height:auto;
  background-color:#fff;
  padding:1.5% 2% 4% 2%;
  -webkit-border-radius:4.6vh;
  border-radius:4.6vh;
  z-index:3;

}
.box-txt {
  color:#131b4d;
}
.result-detail span{
  position:relative;
  display:inline-block;
  text-transform:uppercase;
  font-size:0.8vw;
  vertical-align:middle;
  line-height:1.2;
}
.result-detail li{
  display:block;
  margin-bottom:0.84vw;
}
.result-detail li span:nth-child(1) {
  width:20%;
  font-size:2.1vw;
}
.result-detail li span:nth-child(2) {
  width:16%;
}
.result-detail li span:nth-child(4) {
  width:34%;
  font-size:1.9vw;
  text-align:center;
}
.result-detail li:last-child{
  margin:0;
}
.result-detail .game-but{
  width:100%;
  left:0;
  top:100%;
  text-align:center;
  margin-top:-5.3vh;
}
.result-detail .game-but button{
  display:inline-block;
  width:64%;
  background-color:#fff17e;
  -webkit-border-radius:4.6vh;
  border-radius:4.6vh;
  box-shadow:0 18px 13px rgba(0,0,0,0.2);
}
.result-detail .game-but span{
  position:relative;
  display:block;
  padding:7% 0;
  color:#111a50;
  font-size:1.7vw;
  font-family:'Montserrat', sans-serif;
  font-weight:900;
  font-style:italic;
}

.headline-result{
  position:absolute;
  right:4%;
  top:20%;
  width:auto;
  height:auto;
  font-size:3.3vw;
  z-index:3;
}
.headline-result h2, .headline-result h3{
  -webkit-transform:rotate(-10deg);
  transform:rotate(-10deg);
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 18px 18px rgba(0,0,0,0.3);
  letter-spacing:-1.4px;
  white-space:nowrap;
}
.headline-result h2{
  font-size:100%;
  line-height:1.2;
  margin-bottom:2vw;
}
.headline-result h3{
  font-size:73.5%;
  margin-bottom:0.2vw;
}

.headline-result .game-but{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  text-align:center;
}
.headline-result a{
  position:relative;
  display:inline-block;
  width:66.4%;
  height:auto;
  -webkit-box-shadow:0 18px 13px rgba(0,0,0,0.2);
  box-shadow:0 18px 13px rgba(0,0,0,0.2);
  -webkit-border-radius:4.6vh;
  border-radius:4.6vh;
  background-color:#111a51;
  overflow:hidden;
  cursor:pointer;
}
.headline-result a span{
  position:relative;
  display:block;
  padding:8% 0;
  color:#fff;
  font-size:2.2vw;
}


/*By Height*/
.byHeight .game-content{
  height:100vh;
  width:calc(100vh * 1920/1080);
  margin:0 auto;
}
.byHeight .headline{
  font-size:7.6566vh;
}
.byHeight .slogan h2{
  font-size:3.3333vh;
}
.byHeight .slogan .game-but span{
  font-size:3.1vh;
}
.byHeight .slogan-bot{
  font-size:3.9vh;
}
.byHeight .bg{
  position:fixed;
}
.byHeight .info-txt h2 {
  font-size:3.55vh;
}
.byHeight .info-txt span{
  font-size:8.44vh;
}
.byHeight .info-txt p {
  font-size:2.1vh;
}

.byHeight .result-detail span{
  font-size:1.6vh;
}
.byHeight .result-detail li span:nth-child(1) {
  font-size:3.911vh;
}
.byHeight .result-detail li span:nth-child(4) {
  font-size:3.555vh;
}
.byHeight .result-detail .game-but span{
  font-size:3.0222vh;
}
.byHeight .headline-result a span{
  font-size:3.9vh;
}
.byHeight .headline-result{
  font-size:5.8666vh;
}

/*KeyFrame*/
@-webkit-keyframes fadeInUp {
  0%{
    opacity:0;
    -webkit-transform:translate3d(0,0,0) scale(1);
    transform:translate3d(0,0,0) scale(1);
  }
  90% {
    opacity:1;
    -webkit-transform:translate3d(30px,-250px,0) scale(1.5);
    transform:translate3d(30px,-250px,0) scale(1.5);
  }
  100% {
    opacity:0;
    -webkit-transform:translate3d(30px,-250px,0) scale(2);
    transform:translate3d(30px,-250px,0) scale(2);
  }
}
@keyframes fadeInUp {
  0%{
    opacity:0;
    -webkit-transform:translate3d(0,0,0) scale(1);
    transform:translate3d(0,0,0) scale(1);
  }
  90% {
    opacity:1;
    -webkit-transform:translate3d(30px,-250px,0) scale(1.5);
    transform:translate3d(30px,-250px,0) scale(1.5);
  }
  100% {
    opacity:0;
    -webkit-transform:translate3d(30px,-250px,0) scale(2);
    transform:translate3d(30px,-250px,0) scale(2);
  }
}
@-webkit-keyframes fadeInUp2 {
  0%{
    opacity:0;
    -webkit-transform:translate3d(0,0,0) scale(1);
    transform:translate3d(0,0,0) scale(1);
  }
  90% {
    opacity:1;
    -webkit-transform:translate3d(-30px,-250px,0) scale(1.5);
    transform:translate3d(-30px,-250px,0) scale(1.5);
  }
  100% {
    opacity:0;
    -webkit-transform:translate3d(-30px,-250px,0) scale(2);
    transform:translate3d(-30px,-250px,0) scale(2);
  }
}
@keyframes fadeInUp2 {
  0%{
    opacity:0;
    -webkit-transform:translate3d(0,0,0) scale(1);
    transform:translate3d(0,0,0) scale(1);
  }
  90% {
    opacity:1;
    -webkit-transform:translate3d(-30px,-250px,0) scale(1.5);
    transform:translate3d(-30px,-250px,0) scale(1.5);
  }
  100% {
    opacity:0;
    -webkit-transform:translate3d(-30px,-250px,0) scale(2);
    transform:translate3d(-30px,-250px,0) scale(2);
  }
}

@-webkit-keyframes Light {
  100%{
    -webkit-transform:rotate(4deg) scaleY(1.2);
    transform:rotate(4deg) scaleY(1.2);
  }
}
@keyframes Light {
  100%{
    -webkit-transform:rotate(4deg) scaleY(1.2);
    transform:rotate(4deg) scaleY(1.2);
  }
}
@-webkit-keyframes MoveScale1 {
  form{
    -webkit-transform:translate3d(0,0,0) scale(0.8);
    transform:translate3d(0,0,0) scale(0.8);
  }
  to{
    -webkit-transform:translate3d(15px,-20px,0) scale(1.02);
    transform:translate3d(15px,-20px,0) scale(1.02);
  }
}
@keyframes MoveScale1 {
  form{
    -webkit-transform:translate3d(0,0,0) scale(0.8);
    transform:translate3d(0,0,0) scale(0.8);
  }
  to{
    -webkit-transform:translate3d(15px,-20px,0) scale(1.02);
    transform:translate3d(15px,-20px,0) scale(1.02);
  }
}
@-webkit-keyframes MoveScale2 {
  form{
    -webkit-transform:translate3d(0,0,0) scale(0.8);
    transform:translate3d(0,0,0) scale(0.8);
  }
  to{
    -webkit-transform:translate3d(0,-15px,0) scale(1.02);
    transform:translate3d(0,-15px,0) scale(1.02);
  }
}
@keyframes MoveScale2 {
  form{
    -webkit-transform:translate3d(0,0,0) scale(0.8);
    transform:translate3d(0,0,0) scale(0.8);
  }
  to{
    -webkit-transform:translate3d(0,-15px,0) scale(1.02);
    transform:translate3d(0,-15px,0) scale(1.02);
  }
}

@-webkit-keyframes Rotate {
  100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
@keyframes Rotate {
  100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
@-webkit-keyframes Rotate45 {
  0%{
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
  }
  100% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
}
@keyframes Rotate45 {
  0%{
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
  }
  100% {
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
}
@-webkit-keyframes fadeIn {
  0%{
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@keyframes fadeIn {
  0%{
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
@-webkit-keyframes fadeOut {
  0%{
    opacity:1;
  }
  100% {
    opacity:0;
  }
}
@keyframes fadeOut {
  0%{
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes ScaleOut {
  0%{
    -webkit-transform:scale(1);
    transform:scale(1);
  }
  100%{
    -webkit-transform:scale(1.05);
    transform:scale(1.05);
  }
}
@keyframes ScaleOut {
  0%{
    -webkit-transform:scale(1);
    transform:scale(1);
  }
  100%{
    -webkit-transform:scale(1.05);
    transform:scale(1.05);
  }
}
@-webkit-keyframes lightAni {
  0%{
    opacity:0.3;
    transform:scale(0.8);
  }
  100%{
    opacity:0.5;
    transform:scale(1.3);
  }
}
@keyframes lightAni {
  0%{
    opacity:0.3;
    transform:scale(0.8);
  }
  100%{
    opacity:0.5;
    transform:scale(1.3);
  }
}

@-webkit-keyframes lightPlacement {
  0%{
    opacity:0.3;
    transform:scale(0.8);
  }
  100%{
    opacity:0.8;
    transform:scale(1.3);
  }
}

@keyframes lightPlacement {
  0%{
    opacity:0.3;
    transform:scale(0.8);
  }
  100%{
    opacity:0.8;
    transform:scale(1.3);
  }
}


@-webkit-keyframes btnAni {
  0%{
    -webkit-transform:scale(1);
    transform:scale(1);
  }
  100%{
    -webkit-transform:scale(1.05);
    transform:scale(1.05);
  }
}


@keyframes btnAni {
  0%{
    -webkit-transform:scale(1);
    transform:scale(1);
  }
  100%{
    -webkit-transform:scale(1.05);
    transform:scale(1.05);
  }
}


@keyframes ScaleFlower {
  0%{
    -webkit-transform:scale(1);
    transform:scale(1);
  }
  100%{
    -webkit-transform:scale(1.5);
    transform:scale(1.5);
  }
}

 @-webkit-keyframes fly {
  0%{
    opacity:0;
    -webkit-transform:translate3d(0,0,0) scale(1) rotate(0deg);
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
  }
  100% {
    opacity:1;
    -webkit-transform:translate3d(-25vw,-34vh,0) scale(1.2) rotate(360deg);
    transform:translate3d(-25vw,-34vh,0) scale(1.2) rotate(360deg);
  }
} 

@keyframes fly {
  0%{
    opacity:0;
    -webkit-transform:translate3d(0,0,0) scale(1) rotate(0deg);
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
  }
  100% {
    opacity:1;
    -webkit-transform:translate3d(-25vw,-34vh,0) scale(1.2) rotate(360deg);
    transform:translate3d(-25vw,-34vh,0) scale(1.2) rotate(360deg);
  }
}

@-webkit-keyframes flySP {
  0%{
    opacity:0;
    -webkit-transform:translate3d(0,0,0) scale(1) rotate(0deg);
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
  }
  100% {
    opacity:1;
    -webkit-transform:translate3d(-230px,-120px,0) scale(1.2) rotate(360deg);
    transform:translate3d(-230px,-120px,0) scale(1.2) rotate(360deg);
  }
}

@keyframes flySP {
  0%{
    opacity:0;
    -webkit-transform:translate3d(0,0,0) scale(1) rotate(0deg);
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
  }
  100% {
    opacity:1;
    -webkit-transform:translate3d(-230px,-120px,0) scale(1.2) rotate(360deg);
    transform:translate3d(-230px,-120px,0) scale(1.2) rotate(360deg);
  }
}

@-webkit-keyframes flyMax {
  0%{
    opacity:0;
    -webkit-transform:translate3d(0,0,0) scale(1) rotate(0deg);
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
  }
  100% {
    opacity:1;
    -webkit-transform:translate3d(-26vw,-30vh,0) scale(1.2) rotate(360deg);
    transform:translate3d(-26vw,-30vh,0) scale(1.2) rotate(360deg);
  }

}

@keyframes flyMax {
  0%{
    opacity:0;
    -webkit-transform:translate3d(0,0,0) scale(1) rotate(0deg);
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
  }
  100% {
    opacity:1;
    -webkit-transform:translate3d(-26vw,-30vh,0) scale(1.2) rotate(360deg);
    transform:translate3d(-26vw,-30vh,0) scale(1.2) rotate(360deg);
  }

}

@-webkit-keyframes flySmall {
  0%{
    opacity:0;
    -webkit-transform:translate3d(0,0,0) scale(1) rotate(0deg);
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
  }
  100% {
    opacity:1;
    -webkit-transform:translate3d(-26vw,-35vh,0) scale(1.2) rotate(360deg);
    transform:translate3d(-26vw,-35vh,0) scale(1.2) rotate(360deg);
  }

}

@keyframes flySmall {
  0%{
    opacity:0;
    -webkit-transform:translate3d(0,0,0) scale(1) rotate(0deg);
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
  }
  100% {
    opacity:1;
    -webkit-transform:translate3d(-26vw,-35vh,0) scale(1.2) rotate(360deg);
    transform:translate3d(-26vw,-35vh,0) scale(1.2) rotate(360deg);
  }
}

@-webkit-keyframes ClothesAni {
  100% {
    background-position:3100% center;
  }
}

@keyframes ClothesAni {
  100% {
    background-position:3100% center;
  }
}


@-webkit-keyframes PlacementMainAni {
  100% {
    background-position:200% 0;
  }
}

@keyframes PlacementMainAni {
  100% {
    background-position:200% 0;
  }
}

@-webkit-keyframes PlacementAni {
  100% {
    background-position:300% 0;
  }
}

@keyframes PlacementAni {
  100% {
    background-position:300% 0;
  }
}

@-webkit-keyframes BubbletAni {
  100%{
    -webkit-transform:rotate(3deg);
    transform:rotate(3deg);
  }
}

@keyframes BubbletAni {
  100%{
    -webkit-transform:rotate(3deg);
    transform:rotate(3deg);
  }
}

@-webkit-keyframes glenAni {
  0%{
    opacity:1;
    transform:translateX(0px) rotate(10deg);
  }
  100%{
    opacity:1;
    transform:translateX(400px) rotate(10deg);
  }
}


@keyframes glenAni {
  0%{
    opacity:1;
    transform:translateX(0px) rotate(10deg);
  }
  100%{
    opacity:1;
    transform:translateX(400px) rotate(10deg);
  }
}

/*Animations*/
.bg div.off {
  -webkit-animation:fadeOut 1s forwards;
  animation:fadeOut 1s forwards;
}
.footer.is-result .flower-right .flower{
  opacity:0;
}

.footer.is-result  .flower-right .flower:nth-child(1) {
  -webkit-animation:fly 6.5s 0.5s infinite;
  animation:fly 6.5s 0.5s infinite;
}
.footer.is-result  .flower-right .flower:nth-child(3) {
  -webkit-animation:fly 6.5s 0.7s infinite;
  animation:fly 6.5s 0.7s infinite;
}
.footer.is-result  .flower-right .flower:nth-child(5) {
  -webkit-animation:fly 6.5s 0.9s infinite;
  animation:fly 6.5s 0.9s infinite;
}
.footer.is-result  .flower-right .flower:nth-child(2) {
  -webkit-animation:fly 6.5s 2.5s infinite;
  animation:fly 6.5s 2.5s infinite;
}
.footer.is-result  .flower-right .flower:nth-child(4) {
  -webkit-animation:fly 6.5s 3.5s infinite;
  animation:fly 6.5s 3.5s infinite;
}
.footer.is-result  .flower-right .flower:nth-child(6) {
  -webkit-animation:fly 6.5s 4.5s infinite;
  animation:fly 6.5s 4.5s infinite;
}

.footer.is-result  .flower-right .flower .flower-end{
  -webkit-animation:fadeIn 6s 2.5s infinite alternate;
  animation:fadeIn 6s 2.5s infinite alternate;
}

.current .btnPlay {
  -webkit-animation:btnAni 0.5s infinite alternate;
  animation:btnAni 0.5s infinite alternate;
}

.current button.btnPlay::after, .current .game-but a.btnPlay::after{
  -webkit-animation:glenAni 1s infinite;
  animation:glenAni 1s infinite;
}

.light span{
  transform-origin:center bottom;
  opacity:0.3;
  -webkit-transform:scale(0.8);
  transform:scale(0.8);
}
.light span:nth-child(1) {
  -webkit-animation:lightAni 2s infinite alternate;
  animation:lightAni 2s infinite alternate;
}
.light span:nth-child(2) {
  -webkit-animation:lightAni 3s 1s infinite alternate;
  animation:lightAni 3s 1s infinite alternate;
}

.current .clothes-box{
  -webkit-animation:ClothesAni 4s steps(31) infinite;
  animation:ClothesAni 4s steps(31) infinite;
}

.current .placement-main span{
  -webkit-animation:PlacementMainAni 0.9s steps(2) infinite;
  animation:PlacementMainAni 0.9s steps(2) infinite;
}
.current .light-place div::before {
  -webkit-animation:lightPlacement 1.5s infinite alternate;
  animation:lightPlacement 1.5s infinite alternate;
}
.current .light-place div::after{
  -webkit-animation:lightPlacement 2s 0.5s infinite alternate;
  animation:lightPlacement 2s 0.5s infinite alternate;
}

.current .placement{
  -webkit-animation:PlacementAni 0.9s steps(3) infinite;
  animation:PlacementAni 0.9s steps(3) infinite;
}

.current .bubble {
  -webkit-animation:BubbletAni 0.5s 0.1s infinite alternate;
  animation:BubbletAni 0.5s 0.1s infinite alternate;
}

.current .placement-result{
  -webkit-animation:PlacementAni 0.9s steps(3) infinite;
  animation:PlacementAni 0.9s steps(3) infinite;
}

@media screen and (max-width:1100px) {
  body{
    overflow-y:auto;
  }
  .fs-pc{
    display:none;
  }
  .fs-sp {
    display:block;
  }
  .fs-not-psp{
    display:none;
  }
  .fs-psp {
    display:block;
  }

 .isDesk .logo,
  .logo{
    top:3.44%;
  }
  .isDesk .logo img,
  .logo img {
    width:19.6%;
  }
  .isDesk .game-content,
  .game-content{
    position:relative;
    width:100%;
    height:auto;
    overflow:hidden;
  }
  .isDesk .game-content::before,
  .game-content::before{
    padding-top:177.7777777777778%;
  }
  .isDesk .footer .bg,
  .footer .bg{
    background:url(../images/footer.png) no-repeat center bottom;
    background-size:100% auto;
  }
  .isDesk .footer::before,
  .footer::before{
    padding-top:38.325%;
  }
  .isDesk .slogan-bot,
  .slogan-bot{
    left:18%;
    bottom:16.8%;
    font-size:3vw;
    white-space:nowrap;
    z-index:2;
  }
  .isDesk .bottle,
  .bottle{
    right:4.2%;
    bottom:12%;
    width:19.6%;
  }
  .flower-left .flower:nth-child(1){
    width:3%;
    left:1.6%;
    bottom:10.92%;
  }
  .flower-left .flower:nth-child(2){
    width:3.2%;
    left:7%;
    bottom:13%;
  }
  .flower-left .flower:nth-child(3){
    width:4.4%;
    left:9.8%;
    bottom:24%;
  }
  .flower-right .flower:nth-child(1),
  .flower-right .flower:nth-child(4) {
    width:3%;
    right:32%;
    bottom:35%;
  }
  .flower-right .flower:nth-child(2),
  .flower-right .flower:nth-child(5){
    width:3.2%;
    right:26%;
    bottom:14%;
  }
  .flower-right .flower:nth-child(3),
  .flower-right .flower:nth-child(6) {
    width:4.4%;
    right:25%;
    bottom:46%;
  }
  .is-result .flower-right .flower{
    width:3%;
  }
  .main-bg{
    background:url(../images/bg-main.jpg) no-repeat center center;
    background-size:cover;
  }
  .sub-bg {
    background:url(../images/bg-sub.jpg) no-repeat center center;
    background-size:cover;
  }
  .light{
    right:-7%;
    bottom:-2%;
    width:44%;
  }
  
  .isDesk .headline,
  .headline{
    top:14.6%;
    left:50%;
    -webkit-transform:translate(-50%,0) rotate(-10deg);
    transform:translate(-50%,0) rotate(-10deg);
    font-size:9.8vw;
    white-space:nowrap
  }

  .isDesk .placement-main,
  .placement-main{
    width:76%;
    left:12%;
    top:auto;
    bottom:0;
  }
  .isDesk .placement-main::before,
  .placement-main::before{
    padding-top:158.29%;
  }
  .placement-main span{
    background:url(../images/placement-main-sp.png) left 0;
    background-size:auto 100%;
  }

  .isDesk .slogan,
  .slogan{
    right:auto;
    left:8%;
    top:auto;
    bottom:23%;
    width:84%;
    z-index:1;
    padding:4.5% 0;
  }
  .isDesk .slogan h2,
  .slogan h2{
    font-size:3vw;
  }
  .isDesk .slogan h2 br:nth-child(1), .isDesk .slogan h2 br:nth-child(3),
  .slogan h2 br:nth-child(1), .slogan h2 br:nth-child(3){
      display:none;
  }
  .isDesk .slogan .game-but,
  .slogan .game-but{
    margin-top:-2.6vw;
  }
  .isDesk .slogan .game-but button,
  .slogan .game-but button{
    width:52%;
    -webkit-border-radius:50px;
    border-radius:50px;
  }
  .isDesk .slogan .game-but span,
  .slogan .game-but span {
    padding:5.5% 0;
    font-size:4vw;
  }


  .isDesk .clothes-box,
  .clothes-box{
    left:-67%;
    top:46%;
    width:120%;
  }

  .isDesk .bubble,
  .bubble{
    right:0;
    top:24%;
    width:66%;
  }
  .isDesk .placement,
  .placement{
    left:-2%;
    top:auto;
    bottom:7%;
    width:94%;
  }

  .isDesk .placement-result,
  .placement-result{
    left:0;
    top:auto;
    bottom:2%;
    width:56%;
  }
  .isDesk .headline-result,
  .headline-result{
    left:49%;
    top:auto;
    bottom:20%;
    top:auto;
    font-size:5.4vw;
  }
  .isDesk .headline-result h2,
  .headline-result h2,
  .isDesk .headline-result h3,
  .headline-result h3 {
    -webkit-transform:rotate(-5deg);  
    transform:rotate(-5deg);
  }
  .isDesk .headline-result h2,
  .headline-result h2{
    margin-bottom:2.6vw;
  }
  .isDesk .headline-result .game-but,
  .headline-result .game-but{
    padding-left:10%;
    text-align:left;
  }
  .isDesk .headline-result a, .headline-result a{
    width:66%;
    text-align:center;
    -webkit-border-radius:50px;
    border-radius:50px;
  }
  .isDesk .headline-result a span,
  .headline-result a span{
    padding:9% 0 10% 0;
    font-size:3.4vw;
    line-height:1.2;
  }

  .isDesk .result-info,
  .result-info{
    position:absolute;
    left:10%;
    top:17.5%;
    width:80%;
    height:auto;
    padding:3%;
    overflow:hidden;
  }
  .isDesk .result-info::before,
  .result-info::before{
    width:78%;
    -webkit-border-radius:0 20px 20px 0;
    border-radius:0 20px 20px 0;
  }
  .isDesk .info-avatar,
  .info-avatar{
    width:39%;
  }
  .isDesk .circle,
  .circle{
    width:121%;
    height:121%;
  }
  .isDesk .info-txt,
  .info-txt{
    padding-top:0;
    padding-left:42%;
  }
  .isDesk .info-txt h2,
  .info-txt h2{
    font-size:5.5vw;
  }
  .isDesk .info-txt span,
  .info-txt span{
    font-size:15vw;
  }
  .isDesk .info-txt p,
  .info-txt p{
    font-size:2.6vw;
  }
  .isDesk .info-txt p br:nth-child(2),
  .info-txt p br:nth-child(2) {
    display:none;
  }
  .isDesk .result-detail,
  .result-detail{
    left:10%;
    top:39%;
    width:80%;
    padding:5% 4.5% 8.1% 4.5%;
    -webkit-border-radius:20px;
    border-radius:20px;
  }
  .isDesk .result-detail span,
  .result-detail span{
    position:relative;
    display:inline-block;
    text-transform:uppercase;
    font-size:2vw;
    vertical-align:middle;
    line-height:1.2;
  }
  .isDesk .result-detail .game-but,
  .result-detail .game-but{
    margin-top:-5.3vw;
  }
  .isDesk .result-detail .game-but span,
  .result-detail .game-but span{
    font-size:4vw;
  }
  .isDesk .result-detail li,
  .result-detail li{
    display:block;
    margin-bottom:1vw;
  }
  .isDesk .result-detail li span:nth-child(1),
  .result-detail li span:nth-child(1) {
    width:13vw;
    font-size:5.2vw;
  }
  .isDesk .result-detail li span:nth-child(2),
  .result-detail li span:nth-child(2) {
    width:10vw;
  }
  .isDesk .result-detail li span:nth-child(4),
  .result-detail li span:nth-child(4) {
    width:24vw;
    font-size:5vw;
    text-align:center;
  }
  .isDesk .result-detail .game-but button,
  .result-detail .game-but button {
    width:53%;
    -webkit-border-radius:50px;
    border-radius:50px;
  }
  
}

@media screen and (max-width:520px) and (orientation:portrait) {
  body:not(.isDesk){
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
  }
  body:not(.isDesk) .game-content{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
  }
  body:not(.isDesk) .game-content::before{
    display:none;
  }

  .footer.is-result .flower-right .flower:nth-child(1) {
    -webkit-animation:flySP 6.5s 0.5s infinite;
    animation:flySP 6.5s 0.5s infinite;
  }
  .footer.is-result  .flower-right .flower:nth-child(3) {
    -webkit-animation:flySP 6.5s 0.7s infinite;
    animation:flySP 6.5s 0.7s infinite;
  }
  .footer.is-result .flower-right .flower:nth-child(5) {
    -webkit-animation:flySP 6.5s 0.9s infinite;
    animation:flySP 6.5s 0.9s infinite;
  }
  .footer.is-result .flower-right .flower:nth-child(2) {
    -webkit-animation:flySP 6.5s 2.5s infinite;
    animation:flySP 6.5s 2.5s infinite;
  }
  .footer.is-result .flower-right .flower:nth-child(4) {
    -webkit-animation:flySP 6.5s 3.5s infinite;
    animation:flySP 6.5s 3.5s infinite;
  }
  .footer.is-result .flower-right .flower:nth-child(6) {
    -webkit-animation:flySP 6.5s 4.5s infinite;
    animation:flySP 6.5s 4.5s infinite;
  }

}

/*IP Xplus*/
@media screen and (max-width:420px)  and (min-width:400px) and (min-height:700px) and (max-height:740px) and (orientation:portrait) { 
  body:not(.isDesk) .headline{
    top:15.5%;
  }
  body:not(.isDesk) .placement-main{
    bottom:-3%;
  }
  
  body:not(.isDesk) .bubble {
    right:0%;
    top:20%;
    width:66%;
  }
  body:not(.isDesk) .placement{
    left:-3%;
    bottom:7%;
    width:100%;
  }

}

/*IP 6,7,8 Plus*/
@media screen and (max-width:420px)  and (min-width:400px) and (min-height:600px) and (max-height:630px) and (orientation:portrait) { 
  body:not(.isDesk) .logo {
    top:2%;
  }
  body:not(.isDesk) .headline{
    top:15.5%;
    font-size:8vw;
  }
  body:not(.isDesk) .placement-main{
    bottom:-12%;
  }
  body:not(.isDesk) .slogan{
    left:8%;
    width:84%;
    bottom:22%;
  }
  body:not(.isDesk) .slogan{
    padding:3.5% 0;
  }
  body:not(.isDesk) .slogan h2{
    font-size:3vw;
  }
  
  body:not(.isDesk) .slogan .game-but span {
    font-size:3.6vw;
  }

  
  body:not(.isDesk) .bubble {
    right:4%;
    top:16%;
    width:56%;
  }
  
  body:not(.isDesk) .result-info,
  body:not(.isDesk) .result-detail {
    -webkit-transform:scale(0.9);
    transform:scale(0.9);
  }
  body:not(.isDesk) .result-info {
    top:15%;
  }
  body:not(.isDesk) .result-detail{
    top:37%;
  }
  body:not(.isDesk)  .headline-result{
    font-size:5.2vw;
    left:43%;
    bottom:18%;
  }
  body:not(.isDesk) .placement-result{
    width:49%;
  }
  body:not(.isDesk) .headline-result a{
    width:62%;
  }
  body:not(.isDesk) .headline-result a span{
    font-size:3.5vw;
  }
  
}

/*GG*/
@media screen and (max-width:420px)  and (min-width:400px) and (min-height:600px) and (max-height:615px) and (orientation:portrait) { 
  body:not(.isDesk) .logo {
    top:2%;
  }
  body:not(.isDesk) .headline{
    top:15.5%;
    font-size:8vw;
  }
  body:not(.isDesk) .placement-main{
    bottom:-14%;
  }
  body:not(.isDesk) .slogan{
    padding:3.5% 0;
  }
  body:not(.isDesk) .slogan h2{
    font-size:3vw;
  }
  body:not(.isDesk) .slogan .game-but span{
    font-size:3.6vw;
  }

}

/*GG*/
@media screen and (max-width:390px)  and (min-width:380px) and (min-height:480px) and (max-height:510px) and (orientation:portrait) { 
  body:not(.isDesk) .logo {
    top:1%;
  }
  body:not(.isDesk) .headline{
    top:17%;
    font-size:6vw;
  }
  body:not(.isDesk) .placement-main{
    bottom:-24%;
  }
  body:not(.isDesk) .slogan{
    width:80%;
    left:10%;
    padding:3.5% 0;
    bottom:24%;
  }
  body:not(.isDesk) .slogan h2{
    font-size:2.8vw;
  }
  body:not(.isDesk) .slogan .game-but span{
    font-size:2.8vw;
  }

  body:not(.isDesk) .bubble {
    right:8%;
    top:15%;
    width:50%;
  }
  body:not(.isDesk) .placement{
   width:88%;
  }

  
  
  body:not(.isDesk) .result-info,
  body:not(.isDesk) .result-detail {
    -webkit-transform:scale(0.76);
    transform:scale(0.76);
  }
  body:not(.isDesk) .result-info {
    top:14%;
  }
  body:not(.isDesk) .result-detail{
    top:35%;
  }
  body:not(.isDesk)  .headline-result{
    font-size:5vw;
    left:38%;
    bottom:17%;
  }
  body:not(.isDesk) .placement-result{
    width:44%;
  }
  body:not(.isDesk) .headline-result a{
    width:62%;
  }
  body:not(.isDesk) .headline-result a span{
    font-size:3vw;
  }

}

/*GG*/
@media screen and (max-width:370px)  and (min-width:358px) and (min-height:540px) and (max-height:600px) and (orientation:portrait) { 
  body:not(.isDesk) .headline{
    top:16%;
    font-size:9vw;
  }
  body:not(.isDesk) .placement-main{
    bottom:-6%;
  }
  body:not(.isDesk) .slogan{
    bottom:20%;
  }
  body:not(.isDesk) .slogan h2{
    font-size:3.4vw;
  }
  body:not(.isDesk) .slogan .game-but span{
    font-size:4vw;
  }

  body:not(.isDesk) .bubble {
    right:1%;
    top:18%;
    width:64%;
  }
  body:not(.isDesk) .placement{
   width:98%;
  }

  
  body:not(.isDesk) .result-info,
  body:not(.isDesk) .result-detail {
    -webkit-transform:scale(0.9);
    transform:scale(0.9);
  }
  body:not(.isDesk) .result-info {
    top:15%;
  }
  body:not(.isDesk) .result-detail{
    top:35%;
  }
  
}

/*LG*/
@media screen and (max-width:370px)  and (min-width:358px) and (min-height:540px) and (max-height:594px) and (orientation:portrait) { 
  body:not(.isDesk) .headline{
    top:16%;
    font-size:8vw;
  }
  body:not(.isDesk) .placement-main{
    bottom:-6%;
  }
  body:not(.isDesk) .slogan{
    bottom:20%;
  }
  body:not(.isDesk) .slogan h2{
    font-size:3.4vw;
  }
  body:not(.isDesk) .slogan .game-but span{
    font-size:4vw;
  }

  
  body:not(.isDesk) .bubble {
    right:1%;
    top:18%;
    width:60%;
  }
  body:not(.isDesk) .placement{
   width:98%;
  }


}

/*GG*/
@media screen and (max-width:370px)  and (min-width:358px) and (min-height:500px) and (max-height:520px) and (orientation:portrait) { 
  body:not(.isDesk) .logo {
    top:1%;
  }
  body:not(.isDesk) .headline{
    top:16%;
    font-size:7vw;
  }
  body:not(.isDesk) .placement-main{
    bottom:-17%;
  }
  body:not(.isDesk) .slogan{
    width:80%;
    left:10%;
    padding:3.5% 0;
    bottom:24%;
  }
  body:not(.isDesk) .slogan h2{
    font-size:2.8vw;
  }
  body:not(.isDesk) .slogan .game-but span{
    font-size:3vw;
  }
  
  body:not(.isDesk) .bubble {
    right:8%;
    top:15%;
    width:54%;
  }
  body:not(.isDesk) .placement{
   width:92%;
  }

  body:not(.isDesk) .result-info,
  body:not(.isDesk) .result-detail {
    -webkit-transform:scale(0.86);
    transform:scale(0.86);
  }
  body:not(.isDesk) .result-info {
    top:14%;
  }
  body:not(.isDesk) .result-detail{
    top:36%;
  }
  body:not(.isDesk)  .headline-result{
    font-size:5vw;
    left:38%;
    bottom:17%;
  }
  body:not(.isDesk) .placement-result{
    width:46%;
  }
  body:not(.isDesk) .headline-result a{
    width:62%;
  }
  body:not(.isDesk) .headline-result a span{
    font-size:3vw;
  }
  

}

/*LG*/
@media screen and (max-width:370px)  and (min-width:358px) and (min-height:500px) and (max-height:510px) and (orientation:portrait) { 
  body:not(.isDesk) .logo {
    top:1%;
  }
  body:not(.isDesk) .headline{
    top:16%;
    font-size:6.6vw;
  }
  body:not(.isDesk) .placement-main{
    bottom:-17%;
  }
  body:not(.isDesk) .slogan{
    width:80%;
    left:10%;
    padding:3.5% 0;
    bottom:24%;
  }
  body:not(.isDesk) .slogan h2{
    font-size:2.8vw;
  }
  body:not(.isDesk) .slogan .game-but span{
    font-size:3vw;
  }
  
  body:not(.isDesk) .bubble {
    right:6%;
    top:15%;
    width:54%;
  }
  body:not(.isDesk) .placement{
   width:90%;
  }

}

/*SS S3  S4 S5 Note5*/
@media screen and (max-width:370px)  and (min-width:358px) and (min-height:550px) and (max-height:564px) and (orientation:portrait) { 
  body:not(.isDesk) .headline{
    top:17%;
    font-size:8vw;
  }
  body:not(.isDesk) .placement-main{
    bottom:-11%;
  }
  body:not(.isD7sk) .slogan{
    padding:3.5% 0;
    bottom:21%;
  }
  body:not(.isDesk) .slogan h2{
    font-size:3vw;
  }
  body:not(.isDesk) .slogan .game-but span{
    font-size:3.8vw;
  }
  body:not(.isDesk) .bubble {
    right:6%;
    top:18%;
    width:54%;
  }
  body:not(.isDesk) .placement{
   width:96%;
  }
  body:not(.isDesk) .result-info,
  body:not(.isDesk) .result-detail {
    -webkit-transform:scale(0.86);
    transform:scale(0.86);
  }
  body:not(.isDesk) .result-info {
    top:16%;
  }
  body:not(.isDesk) .result-detail{
    top:36%;
  }
  body:not(.isDesk) .placement-result{
    width:50%;
  }
  body:not(.isDesk)  .headline-result{
    font-size:5.2vw;
    left:44%;
  }
  body:not(.isDesk) .headline-result a span{
    font-size:3vw;
  } 
  
}

/*SS S8 S9 S9+*/
@media screen and (max-width:370px)  and (min-width:358px) and (min-height:580px) and (max-height:610px) and (orientation:portrait) { 
  body:not(.isDesk) .headline{
    top:17%;
    font-size:8vw;
  }
  body:not(.isDesk) .placement-main{
    bottom:-6%;
  }
  body:not(.isD7sk) .slogan{
    padding:3.5% 0;
    bottom:23%;
  }
  body:not(.isDesk) .slogan h2{
    font-size:3vw;
  }
  body:not(.isDesk) .slogan .game-but span{
    font-size:3.8vw;
  }
  body:not(.isDesk) .bubble {
    right:2%;
    top:19%;
    width:62%;
  }
  body:not(.isDesk) .placement{
    left:-3%;
    width:98%;
  }
  body:not(.isDesk) .result-info,
  body:not(.isDesk) .result-detail {
    -webkit-transform:scale(0.9);
    transform:scale(0.9);
  }
  body:not(.isDesk) .result-info {
    top:16%;
  }
  body:not(.isDesk) .result-detail{
    top:36%;
  }
  body:not(.isDesk) .placement-result{
    width:56%;
  }
  body:not(.isDesk)  .headline-result{
    font-size:5.2vw;
    left:48%;
    bottom:22%;
  }
  body:not(.isDesk) .headline-result a span{
    font-size:3vw;
  }

}

/*IP X XMAS*/
@media screen and (max-width:380px)  and (min-width:370px) and (min-height:580px) and (max-height:660px) and (orientation:portrait) { 
  body:not(.isDesk) .headline{
    top:15.5%;
  }
  body:not(.isDesk) .placement-main{
    bottom:-4%;
  }
  
  body:not(.isDesk) .bubble {
    right:0%;
    top:19%;
    width:66%;
  }
  body:not(.isDesk) .placement{
    left:-3%;
    bottom:7%;
    width:100%;
  }


}

/*IP  6,7,8*/
@media screen and (max-width:380px)  and (min-width:370px) and (max-height:560px) and (orientation:portrait) { 
  body:not(.isDesk) .logo {
    top:2%;
  }
  body:not(.isDesk) .headline{
    top:16.5%;
    font-size:7vw;
  }
  body:not(.isDesk) .placement-main{
    bottom:-12%;
  }
  body:not(.isDesk) .slogan{
    padding:3.5% 0;
  }
  body:not(.isDesk) .slogan h2{
    font-size:3vw;
  }
  body:not(.isDesk) .slogan .game-but span{
    font-size:3vw;
  }

  body:not(.isDesk) .bubble {
    right:4%;
    top:15%;
    width:58%;
  }

  body:not(.isDesk) .result-info,
  body:not(.isDesk) .result-detail {
    -webkit-transform:scale(0.86);
    transform:scale(0.86);
  }
  body:not(.isDesk) .result-info {
    top:15%;
  }
  body:not(.isDesk) .result-detail{
    top:36%;
  }
  body:not(.isDesk)  .headline-result{
    font-size:5.2vw;
    left:43%;
    bottom:18%;
  }
  body:not(.isDesk) .placement-result{
    width:49%;
  }
  body:not(.isDesk) .headline-result a{
    width:62%;
  }
  body:not(.isDesk) .headline-result a span{
    font-size:3.5vw;
  }
  

}

/*IP*/
@media screen and (max-width:350px) and (orientation:portrait) { 
  body:not(.isDesk) .logo {
    top:2%;
  }
  body:not(.isDesk) .headline{
    top:16.5%;
    font-size:7vw;
  }
  body:not(.isDesk) .placement-main{
    bottom:-16%;
  }
  body:not(.isDesk) .slogan{
    padding:3.5% 0;
  }
  body:not(.isDesk) .slogan h2{
    font-size:3vw;
  }
  body:not(.isDesk) .slogan .game-but span{
    font-size:4vw;
  }
  
  body:not(.isDesk) .bubble {
    right:11%;
    top:16%;
    width:48%;
  }
  
  
  body:not(.isDesk) .result-info,
  body:not(.isDesk) .result-detail {
    -webkit-transform:scale(0.8);
    transform:scale(0.8);
  }
  body:not(.isDesk) .result-info {
    top:14.5%;
  }
  body:not(.isDesk) .result-detail{
    top:35%;
  }
  body:not(.isDesk)  .headline-result{
    font-size:5.2vw;
    left:43%;
    bottom:18%;
  }
  body:not(.isDesk) .placement-result{
    width:50%;
  }
  body:not(.isDesk) .headline-result a{
    width:62%;
  }
  body:not(.isDesk) .headline-result a span{
    font-size:3.5vw;
  }
  

}



/*FaceBook InAPP*/
@media screen and (max-width:520px) and (orientation:portrait) {
  body.isFace {
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    height:auto;
    overflow:hidden;
    overflow-y:auto;
  }
  body.isFace .logo {
    top:3.44%;
  }
  body.isFace .bottle{
    width:19.6%;
  }
  body.isFace .game-content{
    position:relative;
    width:100%;
    height:auto;
    overflow:hidden;
  }
  body.isFace .game-content::before{
    display:block;
    padding-top:177.7777777777778%;
  }
  body.isFace .footer .bg{
    background:url(../images/footer.png) no-repeat center bottom;
    background-size:100% auto;
  }
  body.isFace .footer::before{
    padding-top:38.325%;
  }
  body.isFace .slogan-bot{
   left:18%;
   bottom:16.8%;
   font-size:3vw;
   white-space:nowrap;
   z-index:2;
 }
 body.isFace .bottle{
   right:4.2%;
   bottom:12%;
   width:19.6%;
 }
 body.isFace .flower-left .flower:nth-child(1){
   width:3%;
   left:1.6%;
   bottom:10.92%;
 }
 body.isFace .flower-left .flower:nth-child(2){
   width:3.2%;
   left:7%;
   bottom:13%;
 }
 body.isFace .flower-left .flower:nth-child(3){
   width:4.4%;
   left:9.8%;
   bottom:24%;
 }
 body.isFace .flower-right .flower:nth-child(1),
 body.isFace .flower-right .flower:nth-child(4) {
   width:3%;
   right:32%;
   bottom:35%;
 }
 body.isFace .flower-right .flower:nth-child(2),
 body.isFace .flower-right .flower:nth-child(5){
   width:3.2%;
   right:26%;
   bottom:14%;
 }
 body.isFace .flower-right .flower:nth-child(3),
 body.isFace .flower-right .flower:nth-child(6) {
   width:4.4%;
   right:25%;
   bottom:46%;
 }
 body.isFace .is-result .flower-right .flower{
   width:3%;
 }
 body.isFace .main-bg{
   background:url(../images/bg-main.jpg) no-repeat center center;
   background-size:cover;
 }
 body.isFace .sub-bg {
   background:url(../images/bg-sub.jpg) no-repeat center center;
   background-size:cover;
 }
 body.isFace .light{
   right:-7%;
   bottom:-2%;
   width:44%;
 }
 body.isFace .headline{
   top:14.6%;
   left:50%;
   -webkit-transform:translate(-50%,0) rotate(-10deg);
   transform:translate(-50%,0) rotate(-10deg);
   font-size:9.8vw;
   white-space:nowrap
 }
 body.isFace .placement-main{
   width:76%;
   left:12%;
   top:auto;
   bottom:0;
 }
 body.isFace .placement-main::before{
   padding-top:158.29%;
 }
 body.isFace .placement-main span{
   background:url(../images/placement-main-sp.png) left 0;
   background-size:auto 100%;
 }
 body.isFace .slogan{
   right:auto;
   left:8%;
   top:auto;
   bottom:24%;
   width:84%;
   z-index:1;
   padding:4.5% 0;
 }
 body.isFace .slogan h2{
   font-size:3vw;
 }
 body.isFace .slogan h2 br:nth-child(1), body.isFace .slogan h2 br:nth-child(3) {
     display:none;
 }
 body.isFace .slogan .game-but {
   margin-top:-2.6vw;
 }
 body.isFace .slogan .game-but button{
   width:52%;
   -webkit-border-radius:50px;
   border-radius:50px;
 }
 body.isFace .slogan .game-but span {
   padding:5.5% 0;
   font-size:5vw;
 }
 body.isFace .clothes-box{
   left:-67%;
   top:46%;
   width:120%;
 }
 body.isFace .bubble{
   right:0;
   top:24%;
   width:66%;
 }
 body.isFace .placement{
   left:-2%;
   top:auto;
   bottom:7%;
   width:94%;
 }
 body.isFace .placement-result{
   left:0;
   top:auto;
   bottom:2%;
   width:56%;
 }
 body.isFace .headline-result{
   left:49%;
   top:auto;
   bottom:20%;
   top:auto;
   font-size:5.4vw;
 }
 body.isFace .headline-result h2,
 body.isFace .headline-result h3 {
   -webkit-transform:rotate(-5deg);  
   transform:rotate(-5deg);
 }
 body.isFace .headline-result h2 {
   margin-bottom:2.6vw;
 }
 body.isFace .headline-result .game-but{
   padding-left:10%;
   text-align:left;
 }
 body.isFace .headline-result a {
   width:66%;
   text-align:center;
   -webkit-border-radius:50px;
   border-radius:50px;
 }
 body.isFace .headline-result a span{
   padding:9% 0 10% 0;
   font-size:3.4vw;
   line-height:1.2;
 }
 body.isFace .result-info{
   position:absolute;
   left:10%;
   top:17.5%;
   width:80%;
   height:auto;
   padding:3%;
   overflow:hidden;
 }
 body.isFace .result-info::before{
   width:78%;
   -webkit-border-radius:0 20px 20px 0;
   border-radius:0 20px 20px 0;
 }
 body.isFace .info-avatar{
   width:39%;
 }
 body.isFace .circle{
   width:121%;
   height:121%;
 }
 body.isFace .info-txt{
   padding-top:0;
   padding-left:42%;
 }
 body.isFace .info-txt h2{
   font-size:5.5vw;
 }
 body.isFace .info-txt span{
   font-size:15vw;
 }
 body.isFace .info-txt p{
   font-size:2.6vw;
 }
 body.isFace .info-txt p br:nth-child(2) {
   display:none;
 }
 body.isFace .result-detail{
   left:10%;
   top:39%;
   width:80%;
   padding:5% 4.5% 8.1% 4.5%;
   -webkit-border-radius:20px;
   border-radius:20px;
 }
 body.isFace .result-detail span{
   position:relative;
   display:inline-block;
   text-transform:uppercase;
   font-size:2vw;
   vertical-align:middle;
   line-height:1.2;
 }
 body.isFace .result-detail .game-but{
   margin-top:-5.3vw;
 }
 body.isFace .result-detail .game-but span{
   font-size:4vw;
 }
 body.isFace .result-detail li{
   display:block;
   margin-bottom:1vw;
 }
 body.isFace .result-detail li span:nth-child(1) {
   width:13vw;
   font-size:5.2vw;
 }
 body.isFace .result-detail li span:nth-child(2) {
   width:10vw;
 }
 body.isFace .result-detail li span:nth-child(4) {
   width:24vw;
   font-size:5vw;
   text-align:center;
 }
 body.isFace .result-detail .game-but button {
   width:53%;
   -webkit-border-radius:50px;
   border-radius:50px;
 }
}

@media screen and (max-width:840px) and (orientation:landscape) {
  /*Common*/  
  .fs-pc{
    display:none;
  }
  .fs-sp {
    display:block;
  }

  body:not(.isDesk) .game-content{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
  }
  body:not(.isDesk) .game-content::before{
    display:none;
  }

  /*Common*/  
  .fs-pc{
    display:none;
  }
  .fs-sp {
    display:block;
  }
  .logo{
    top:4%;
  }
  .logo img {
    width:8%;
  }

  body:not(.isDesk) .footer .bg{
    background:url(../images/footer-pc.png) no-repeat center bottom;
    background-size:100% auto;
  }
  body:not(.isDesk) .slogan-bot{
    left:20%;
    bottom:7%;
    font-size:2.4vw;
  }
  body:not(.isDesk) .bottle{
    right:12%;
    bottom:4%;
    width:10%;
  }
  
  .flower-left .flower:nth-child(1){
    width:2%;
    left:3%;
    bottom:3%;
  }
  .flower-left .flower:nth-child(2){
    width:2.2%;
    left:7%;
    bottom:4%;
  }
  .flower-left .flower:nth-child(3){
    width:3.4%;
    left:10%;
    bottom:12%;
  }
  .flower-right .flower:nth-child(1),
  .flower-right .flower:nth-child(4) {
    width:2%;
    right:32%;
    bottom:20%;
  }
  .flower-right .flower:nth-child(2),
  .flower-right .flower:nth-child(5){
    width:2.2%;
    right:28%;
    bottom:7%;
  }
  .flower-right .flower:nth-child(3),
  .flower-right .flower:nth-child(6) {
    width:3.4%;
    right:26%;
    bottom:26%;
  }

  .is-result .flower-right .flower{
    width:2%;
  }
  
  body:not(.isDesk) .main-bg{
    background:url(../images/bg-main.jpg) no-repeat center center;
    background-size:cover;
  }
  body:not(.isDesk) .sub-bg {
    background:url(../images/bg-sub.jpg) no-repeat center center;
    background-size:cover;
  }
  

  /*Home Screen*/
  body:not(.isDesk) .headline{
    left:50%;
    top:23%;
    -webkit-transform:translate(-50%,0) rotate(-10deg);
    transform:translate(-50%,0) rotate(-10deg);
    font-size:3.8vw;
  }
  body:not(.isDesk) .placement-main{
    position:absolute;
    left:1%;
    top:4%;
    width:48%;
    bottom:auto;
    height:auto;
  }
  body:not(.isDesk) .placement-main span{
    background:url(../images/placement-main.png) left 0;
    background-size:auto 100%;
  }
  body:not(.isDesk) .placement-main::before{
    padding-top:100%;
  }
  body:not(.isDesk) .clothes-box{
    left:32%;
    top:53%;
    width:42%;
  }
  body:not(.isDesk) .slogan{
    top:auto;
    width:auto;
    left:auto;
    right:4%;
    padding:1.5% 1.5% 3% 1.5%;
    bottom:48%;
  }
  body:not(.isDesk) .slogan h2 br:nth-child(1), body:not(.isDesk) .slogan h2 br:nth-child(3) {
    display:block;
  }
  body:not(.isDesk) .slogan h2{
    font-size:2vw;
  }
  body:not(.isDesk) .slogan .game-but button{
    width:64%;
  }
  body:not(.isDesk) .slogan .game-but span{
    font-size:2vw;
  }
  
  /*Placement Screen*/
  body:not(.isDesk) .bubble{
    right:10%;
    top:15%;
    width:44%;
    
  }
  body:not(.isDesk) .placement{
    left:12%;
    top:1%;
    width:44%;
    bottom:auto;
  }


  /*Result Screen*/
  body:not(.isDesk) .placement-result{
    left:38%;
    top:auto;
    bottom:-10%;
    width:34%;
  }
  body:not(.isDesk) .headline-result{
    left:auto;
    right:7%;
    top:16%;
    bottom:auto;
    font-size:3.2vw;
  }
  body:not(.isDesk) .result-info{
    left:4.5%;
    top:13%;
    width:33%;
    padding:0.5% 1%;
  }
  body:not(.isDesk) .result-info::before{
    width:78%;
    -webkit-border-radius:0 10px 10px 0;
    border-radius:0 10px 10px 0;
  }
  body:not(.isDesk) .info-avatar{
    width:38%;
  }
  body:not(.isDesk) .user-avatar{
    left:3%;
    top:3%;
    width:94%;
    height:94%;
  }
  body:not(.isDesk) .circle{
    width:109%;
    height:109%;
  }
  body:not(.isDesk) .info-txt{
    padding-top:5%;
    padding-left:40%;
  }
  body:not(.isDesk) .info-txt h2{
    font-size:1.6vw;
  }
  body:not(.isDesk) .info-txt span{
    font-size:4vw;
  }
  body:not(.isDesk) .info-txt p{
    font-size:1.2vw;
  }
  body:not(.isDesk) .info-txt p br:nth-child(2) {
    display:none;
  }
  body:not(.isDesk) .result-detail{
    left:4.5%;
    top:43%;
    width:33%;
    padding:1.5% 1% 3% 1.5%;
    -webkit-border-radius:10px;
    border-radius:10px;
    z-index:10;
  }
  body:not(.isDesk) .result-detail span{
    font-size:1vw;
  }
  body:not(.isDesk) .result-detail .game-but{
    margin-top:-2vw;
  }
  body:not(.isDesk) .result-detail .game-but span{
    font-size:1.4vw;
  }
  body:not(.isDesk) .result-detail li span:nth-child(1) {
    width:5.4vw;
    font-size:2.2vw;
  }
  body:not(.isDesk) .result-detail li span:nth-child(2) {
    width:4.6vw;
  }
  body:not(.isDesk) .result-detail li span:nth-child(4) {
    width:8vw;
    font-size:1.8vw;
  }
  body:not(.isDesk) .headline-result a{
    width:70%;
  }
  body:not(.isDesk)  .headline-result .game-but span{
    padding:8% 0 10% 0;
    font-size:2vw;
  }

  
  /*Animation*/
  .footer.is-result .flower-right .flower:nth-child(1) {
    -webkit-animation:flyMax 6.5s 0.5s infinite;
    animation:flyMax 6.5s 0.5s infinite;
  }
  .footer.is-result  .flower-right .flower:nth-child(3) {
    -webkit-animation:flyMax 6.5s 0.7s infinite;
    animation:flyMax 6.5s 0.7s infinite;
  }
  .footer.is-result .flower-right .flower:nth-child(5) {
    -webkit-animation:flyMax 6.5s 0.9s infinite;
    animation:flyMax 6.5s 0.9s infinite;
  }
  .footer.is-result .flower-right .flower:nth-child(2) {
    -webkit-animation:flyMax 6.5s 2.5s infinite;
    animation:flyMax 6.5s 2.5s infinite;
  }
  .footer.is-result .flower-right .flower:nth-child(4) {
    -webkit-animation:flyMax 6.5s 3.5s infinite;
    animation:flyMax 6.5s 3.5s infinite;
  }
  .footer.is-result .flower-right .flower:nth-child(6) {
    -webkit-animation:flyMax 6.5s 4.5s infinite;
    animation:flyMax 6.5s 4.5s infinite;
  }
  
}

@media screen and (max-width:840px) and (min-height:380px) and (max-height:420px) and (orientation:landscape),
screen and (max-width:700px) and (orientation:landscape) {
  /*Placement Screen*/
  body:not(.isDesk) .bubble{
    right:4%;
    top:17%;
    width:50%;
  }
  body:not(.isDesk) .placement{
    left:9%;
    top:6%;
    width:48%;
    bottom:auto;
  }

  body:not(.isDesk) .result-info{
    top:17%;
  }
  body:not(.isDesk) .placement-result{
    left:37%;
    top:auto;
    bottom:0;
    width:38%;
  }
  body:not(.isDesk) .headline-result{
    right:4%;
    font-size:3.4vw;
  }



  /*Animation*/
  .footer.is-result .flower-right .flower:nth-child(1) {
    -webkit-animation:flySmall 6.5s 0.5s infinite;
    animation:flySmall 6.5s 0.5s infinite;
  }
  .footer.is-result  .flower-right .flower:nth-child(3) {
    -webkit-animation:flySmall 6.5s 0.7s infinite;
    animation:flySmall 6.5s 0.7s infinite;
  }
  .footer.is-result .flower-right .flower:nth-child(5) {
    -webkit-animation:flySmall 6.5s 0.9s infinite;
    animation:flySmall 6.5s 0.9s infinite;
  }
  .footer.is-result .flower-right .flower:nth-child(2) {
    -webkit-animation:flySmall 6.5s 2.5s infinite;
    animation:flySmall 6.5s 2.5s infinite;
  }
  .footer.is-result .flower-right .flower:nth-child(4) {
    -webkit-animation:flySmall 6.5s 3.5s infinite;
    animation:flySmall 6.5s 3.5s infinite;
  }
  .footer.is-result .flower-right .flower:nth-child(6) {
    -webkit-animation:flySmall 6.5s 4.5s infinite;
    animation:flySmall 6.5s 4.5s infinite;
  }
  
}

/*Share css*/
.share-content{
  position:fixed;
  display:block;
  left:0;
  top:0;
  width:1080px;
  height:562px;
  font-family:'Montserrat', sans-serif;
  font-weight:900;
  font-style:italic;
  z-index:-10;
  opacity:0;
  pointer-events:none;
}
.share-content.is-share{
  opacity: 1;
}
.share-box{
  position:absolute;
  left:0;
  top:0;
  display:block;
  width:100%;
  height:auto;
}
.share-box img{
  width:100%;
}
.share-content .result-info{
  position:absolute;
  left:4% !important;
  top:15% !important;
  width:33% !important;
  height:auto;
  padding:1.7% 2% !important;
  overflow:hidden;
}
.share-content .result-info::before{
  content:'';
  position:absolute;
  right:0;
  top:0;
  width:72%;
  height:100%;
  background-color:#fff17e;
  -webkit-border-radius:0 30px 30px 0;
  border-radius:0 30px 30px 0;
}
.share-content .info-avatar{
  position:relative;
  display:block;
  float:left;
  width:44% !important;
  height:auto;
}
.share-content .info-avatar::before{
  content:'';
  position:relative;
  display:block;
  width:100%;
  height:auto;
  padding-top:100%;
}
.share-content .circle{
  position:absolute;
  left:50%;
  top:50%;
  width:130% !important;
  height:130% !important;
  background-color:#fff17e;
  -webkit-border-radius:50%;
  border-radius:50%;
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}
.share-content .user-avatar{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  -webkit-border-radius:50%;
  border-radius:50%;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  background-color:#fff;
}
.share-content .info-txt{
  position:relative;
  display:block;
  padding-left:48% !important;
  padding-top:2% !important;
  color:#131b4d;;
  text-transform:uppercase;
}
.share-content .info-txt h2{
  font-size:21px !important;
  line-height:1;
}
.share-content .info-txt span{
  font-size:45px !important;
  line-height:1;
}
.share-content .info-txt span small{
  font-size:inherit;
  line-height:inherit;
  font-family:inherit;
  font-style:inherit;
  font-weight:inherit;
}
.share-content .info-txt p{
  font-size:13px !important;
  line-height:1.2;
}
.share-content .result-detail{
  position:absolute;
  left:4%  !important;
  top:49% !important;
  width:33% !important;
  height:auto;
  background-color:#fff;
  padding:1.5% 2% !important;
  -webkit-border-radius:30px;
  border-radius:30px;
}
.share-content .box-txt {
  color:#131b4d;
}
.share-content .result-detail span{
  position:relative;
  display:inline-block;
  text-transform:uppercase;
  font-size:11px !important;
  vertical-align:middle;
  line-height:1.2;
}
.share-content .result-detail li{
  display:block;
  margin-bottom:16px;
}
.share-content .result-detail li span:nth-child(1) {
  width:17% !important;
  font-size:22px !important;
}
.share-content .result-detail li span:nth-child(2) {
  width:16% !important;
}
.share-content .result-detail li span:nth-child(4) {
  width:30% !important;
  font-size:18px !important;
  text-align:center;
}
.share-content .result-detail li:last-child{
  margin:0;
}
canvas{
  position:fixed;
  left:0;
  top:0;
  z-index:-9;
}