@charset "UTF-8";
body main,#ctsHeader,#modal{
    font-family: "Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ StdN", 'Noto Sans JP', 'Noto Sans Japanese', "游ゴシック体",YuGothic,"游ゴシック","Yu Gothic","Hiragino Sans","Meiryo","メイリオ",sans-serif;
    color: #fff;
    letter-spacing: -0.02em;
    font-weight: 400;
    box-shadow: #bba417 0 0 2.5em;
}
html{
  overflow:hidden;
}
html.scr{
  overflow-y:scroll;
}
body{
  overflow:hidden;
}
body{
    background: #f7db34;
    font-size: 16px;
    overflow: hidden;
}
body,
body * {
  margin:0;
  padding:0;
  -webkit-touch-callout: none;
  -webkit-user-callout: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-modify: none;
  -webkit-highlight: none;
}


html.fix{
    overflow-y:hidden;
}
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 { font-size:1.5em;}
img{
vertical-align: bottom;display: inline-block;width: 100%;
max-width: initial;}
li{
    list-style:none;
}
main{max-width: 750px;
width:100%;margin: 0 auto;text-align: center;/* overflow: hidden; */background: #fff;position: relative;}
main section{
    position:
    relative;
    height: 100%;
    overflow:
    hidden;
}
html.scr main{
  height:auto;
}
body main a:link,
body main a:visited{
    color: #0011e2;
}

/* #ctsTitle */
#ctsTitle {position: absolute;z-index: 3;width: 100%;height: 100vh;overflow: hidden;max-height: 100%;}
#ctsTitle:after{
  content:
  "";
  width:100%;
  height: 100%;
  position:  absolute;
  bottom: -150%;
  left:0;
  background:#000;
  min-height: 100vh;
  z-index: 1;
}
#ctsTitle.tu:after{
  bottom: -50%;
  transition:
  bottom .5s;
}
#ctsTitle h1 {
}
#ctsTitle h1 .stl {width: 96.8%;margin-bottom: -0.6%;}
#ctsTitle h2 {
}
#ctsTitle p {
}
#ctsTitle span {
}
#ctsTitle .tl {
}
#ctsTitle .tl h1 {width: 85.1%;display: block;margin: 0% 0 0 7.8%;position: relative;z-index: 1;}
#ctsTitle .tl img {
}
#ctsTitle .bg {width: 100%;height: 100%;background: url(../img/bg1.jpg) no-repeat 50% 27%;background-size: cover;position: absolute;z-index: -1;}
#ctsTitle .daioh {position: absolute;bottom: 0;left: 50%;width: 100%;margin: 0 0 0% 0;transform: translateX(-50%);/* max-width: 137%; */}
#ctsTitle .sound {position: absolute;width: 3.5em;height: 3.5em;background: #000 url(../img/icon_sound.svg) no-repeat;background-size: contain !important;border-radius: 50%;margin: 4% 0 0 4.8%;}
#ctsTitle .sound.off{
    background: #000 url(../img/icon_sound_off.svg) no-repeat;
}
#ctsTitle .logo {width: 34.534%;margin: 2.6% 0 3.4%;z-index: 1;position: relative;}
#ctsTitle .start {position: absolute;bottom: 0;width: 75.47%;display: block;margin: 0 0 10em 12.2%;border-radius: 2.2em;}
#ctsTitle .start img {width: 100%;}
#ctsTitle .howto {position: absolute;bottom: 0;width: 45.07%;display: block;margin: 0 0 1.3em 27.5%;}
#ctsTitle .howto img {width: 100%;}
#ctsTitle .tutorial {position: absolute;width: 100%;bottom: -100vh;height: 100%;left: 0;position: absolute;z-index: 4;transition: bottom 0.6s cubic-bezier(0.5, 0, 0.1, 1);overflow: auto;-webkit-overflow-scrolling: touch;}
#ctsTitle .tutorial .scroll{
    position: relative;
}
#ctsTitle .tutorial .scroll .mission{
  background: #000 url(../img/bg_howto.jpg) no-repeat;
  background-size: cover;
  padding-bottom: 6.4em;
  position: relative;
}
#ctsTitle.tu .tutorial{
  bottom: 0;
}
#ctsTitle .tutorial h2 {width: 61.47%;FONT-VARIANT: JIS04;margin: 0 auto 1.9%;padding-top: 17.4%;}
#ctsTitle .tutorial h3 {width: 85.734%;display: block;margin: 5.4% auto 4.9%;}
#ctsTitle .tutorial .bdaioh {width: 41.6%;position: absolute;bottom: 0;left: 0;}
#ctsTitle .tutorial .bdaioh.left{
    right: 0;
    left: auto;
    width: 40.8%;
}
#ctsTitle .tutorial p {
    width: 88.934%;
    display: inline-block;
    margin: 2.6% auto 0;
}
#ctsTitle .tutorial p.bottom {
    width: 77.867%;
    margin: 9.6% auto 0;
    padding-right: 2.6%;
    position: relative;
    z-index: 1;
}
#ctsTitle .tutorial p + p {
    width: 92.4%;
    margin: 5.7% auto 0;
    padding-right: 1.8%;
}
#ctsTitle .tutorial .start {
  position:
  relative;
  margin: 3.1% 0 0 12.7%;
  position: relative;
  z-index: 1;
}
/*#ctsTitle .tutorial .totop{
  opacity:0;
}
#ctsTitle.tu .tutorial .totop{
  opacity:1;
  position: fixed;
  right: 50%;
  bottom: 0;
  z-index: 2;
  width: 6.3em;
  margin: 0 -21.7em 2.6% 0;
}*/

#ctsTitle .tutorial .totop{
  position:absolute;
  bottom:0;
  right:0;
  width: 13.334%;
  z-index: 2;
  margin: 0 4% 2.6% 0;
}
#ctsTitle .tutorial .howto2{
  position:
  relative;
  width: 92%;
  margin: 9.4% 0 1.3em 4.1%;
  display: block;
}
#ctsTitle .tutorial span {display: inline-block;}
#ctsTitle .tutorial .style{
  width: 91.5%;
  background: rgb(255 255 255 / 75%);
  margin: 8.4% 2.5% 4%;
  border: #fff 1px solid;
  color: #000;
  padding-bottom: 10%;
  border-radius: 2.3em;
}
#ctsTitle .tutorial .style h4{
    width: 53.35%;
    margin: 11.4% auto 1%;
}
#ctsTitle .tutorial .style p{
    font-size: 1.85em;
    font-weight: 700;
    line-height: 2.1;
    letter-spacing: -0.03em;
    margin: 4.8% 0 5%;
    white-space: nowrap;
}
#ctsTitle .tutorial .style .icon{
    display: inline-block;
    width: 37.89%;
    margin: 0 2.2%;
}
#ctsTitle .share{
  background: #000;
  width: 100%;
  padding: 10.8% 0 14%;
}
#ctsTitle .share h5{
  width: 66.67%;
  margin: 14.6% auto 5%;
}
#ctsTitle .share a{
  display:
  inline-block;
  width: 16%;
  margin: 0 2.6%;
}
#ctsTitle .share a img.x{
  width: 103.334%;
  margin: -1.667%;
}
#ctsTitle .share a.banner{
  display:
  inline-block;
  width: 92%;
  text-align: left;
}
#ctsTitle .share a.banner span{
  position:
  relative;
  text-align: left;
  color: #fff;
  text-decoration: underline;
  font-size: 1.8em;
  font-size: 1.4em;
  font-weight: 500;
  margin-left: 1em;
  margin-top: 2%;
}
#ctsTitle .share a.banner span:before{
  content:
  "";
  border: #fff 1px solid;
  width: 0.4em;
  height: 0.4em;
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(45deg);
  border-left: 0;
  border-bottom: 0;
  margin: 5.2% 0 0 -10%;
}
#ctsTitle .modal{
  position:
  fixed;
  top: 0;
  z-index: 2;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: none;
  -webkit-overflow-scrolling: touch;
}
#ctsTitle .modal .bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.7;
}
#ctsTitle .modal .cts{position: relative;width: 92%;max-width: 550px;background: #fff;color: #000;margin: 0 auto;margin: 11.6em auto 6em;border-radius: 1.8em;padding-bottom: 6.4em;}
#ctsTitle .modal .close{
  position: absolute;
  top: 0;
  right: 0;
  margin: -15.3% -0.5% 0 0;
  width: 3.25em;
  padding: 1em;
}
#ctsTitle .modal h3{
  width: 54.53%;
  padding: 4.1em 0 0;
}
#ctsTitle .modal p{
  width: 84.7%;
  text-align: left;
  line-height: 1.35;
  margin-bottom: 5.3%;
}
#ctsTitle .modal p span{
  font-size: 1.91em;
  vertical-align: middle;
  font-weight: 600;
}
#ctsTitle .modal p img{
  width: 13.865%;
  vertical-align: middle;
  margin-right: 4%;
}

#ctsTitle .modal .fig{
  width: 82.8%;
  margin-bottom: 5.5%;
}
#ctsTitle .modal .btn_close{
  width: 57.98%;
  display: block;
  margin: 2.8% auto 0;
}

/* #ctsLoading */
#ctsLoading {background: #fbe762 url(../img/bg_loading.jpg) no-repeat center;background-size: cover;position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 5;}
#ctsLoading h2 {width: 77.87%;margin: 25.9% 0 0 11.2%;}
#ctsLoading a img {background: #000;border-radius: 50%;margin-bottom: 0.2em;}
#ctsLoading p {
}
#ctsLoading a {display: inline-block;width: 4.2em;margin: 0 3.4%;color: #000;font-weight: 700;text-decoration: none;font-size: 2.3em;}
#ctsLoading .attention {background: rgb(255 255 255 / 50%);border-radius: 0.5em;width: 74.3%;margin: 4.5% auto 5%;color: #000;text-align: left;padding: 1.1em 0em 0.8em 2.1em;box-sizing: border-box;font-size: 2.1em;font-weight: 700;}
#ctsLoading .attention p {margin-bottom: 0.3em;text-indent: -1em;padding-left: 1em;}


/* #ctsPlay */
#ctsPlay .sound {position: absolute;width: 3.5em;height: 3.5em;background: #000 url(../img/icon_sound.svg) no-repeat;background-size: contain !important;border-radius: 50%;margin: 4% 0 0 4.8%;cursor: pointer;pointer-events: all !important;}
#ctsPlay .sound.off{
    background: #000 url(../img/icon_sound_off.svg) no-repeat;
}
#ctsPlay{
  z-index:2;
}
#ctsPlay .bg,
#ctsClear .bg0{
  width:100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  background: url(../img/bg_play.jpg) no-repeat;
  background-size: cover;
}
#ctsPlay .bg.shadbg{
  background:#000;
  opacity:.8;
  z-index: 1;
  display: none;
}
#ctsPlay span {
}
#ctsPlay #camera {
  display:
  block;
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  transform-origin: 50% -12%;
  z-index: 2;
}
#ctsPlay .d {position: absolute;left: 50%;top: 26.2%;width: 100%;}
#ctsPlay .d img{width: 14.334%;position: absolute;top: 0;left: 0;margin: -7% -8.5%;transform-origin: 47.1% 33.4%;}
#ctsPlay .d span{width: 14.334%;position: absolute;top: 0;left: 0;margin: -7% -8.5%;transform-origin: 47.1% 33.4%;}
#ctsPlay .d span img{width: 100%;position: absolute;top: 0;left: 0;margin:0;}
#ctsPlay .d span .r{
    width: 150%;
    bottom: 0em;
    top: auto;
    height: 82.5em;
    background: url(../img/fig_deoshs.png) repeat-y bottom;
    background-size: contain;
    position: absolute;
}
#ctsPlay .arrow {position: absolute;bottom: 3.05em;width: 20.7em;left: 50%;padding-left: 2.2%;opacity: 0.5;transform-origin: 0 50%;}
#ctsPlay .aleft {transform: scaleX(-1);}
#ctsPlay .aright {
}
#ctsPlay .p {bottom: 3.55%;left: 50%;width: 13.334%;position: absolute;transform-origin: 0% 80%;}
#ctsPlay .p .pt {
  position:
  absolute;
  left:0;
  top:0;
  width: 173%;
  margin: 72% 0 0 -90%;
  display: none;
}
#ctsPlay .p .pt:nth-child(1){
  transform-origin:100% 100%;
}
#ctsPlay .p .pt:nth-child(2){
  transform-origin: 19% 24%;
}
#ctsPlay .p .pt:nth-child(3){
  transform-origin: 64% 30%;
}
#ctsPlay .p .buru {width: 65%;margin: 89% 0 0 -33%;z-index: 2;transform-origin: 50% -10%;}
#ctsPlay .p.buru .i{
  animation:buru .07s infinite;
}
#ctsPlay .p .deosh {width: 179%;margin: -67% 0 0 -88%;z-index: 2;transform-origin: 50% -10%;}

#ctsPlay .p .blue {
  width: 204%;
  margin: -20% 0 0 -105%;
  display: block;
  transform: scale(.7);
  opacity:0;
  transition: 0s;
}
#ctsPlay .p.aura .i{
  filter: brightness(1.25);
}
#ctsPlay .p.aura .blue {
  animation: zoom3 1.4s cubic-bezier(0.34, 0.04, 0.29, 1) 1;
}
#ctsPlay .p.noanm .blue {
  animation: none;
}
#ctsPlay .btn {width: 9.9em;height: 9.6em;position: absolute;top: 37.4%;left: -86%;border-radius: 50%;border: #000 0.4em solid;overflow: hidden;z-index: 1;}
#ctsPlay .btn span {
  background: url(../img/bg_uzu.png?2) no-repeat center;
  background-size: 102%;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  animation: spin 3s linear infinite;
  z-index: 1;
}
#ctsPlay .ret{position:absolute;right: 2em;top: 4em;background: #94b097;width: 6em;height: 6em;border-radius: 50%;display: none;}

#ctsPlay .tut{
  position:
  absolute;
  width: 100%;
  top: 36.3%;
  display: none;
  z-index: 1;
}
#ctsPlay .tut h3,
#ctsPlay .tut p img,
#ctsPlay .tut .fig,
#ctsPlay .mes img.deo{
  filter: drop-shadow(0px 0px 0.4em #766520) drop-shadow(0px 0px 0.4em #766520) drop-shadow(0px 0px 0.4em #766520) drop-shadow(0px 0px 0.4em #766520);
}
#ctsPlay .tut h3{
    width: 36.8%;
    display: block;
    margin: 0 auto;
}
#ctsPlay .tut p{
    display: block;
    margin: 2.8% auto 3.7%;
    padding-right: 1%;
    width: 83.1585%;
}
#ctsPlay .tut a{
    position: relative;
    width: 11%;
    padding-right: 1%;
    display: block;
    margin: 0 auto;
    animation: zoom2 1.2s ease-in-out infinite;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  cursor:
    pointer;
}
#ctsPlay .tut a .fig{}
#ctsPlay .tut a .txt{
    position: absolute;
    left: -10.3%;
    top: 60.8%;
    width: 114.9%;
    animation: zoom2 1.2s ease-in-out infinite;
}
#ctsPlay .mes{
  position:
  absolute;
  width: 100%;
  top: 32.6%;
  z-index: 1;
  display: none;
}
#ctsPlay .count{
  position:
  absolute;
  width: 100%;
  top: 43.5%;
  z-index: 1;
  left: 0;
}
#ctsPlay .count img{
  position:
  absolute;
  width: 13.867%;
  margin-left: -7.1%;
  display:none;
}

#ctsPlay .mes img{
    width: 89.47%;
    margin: -1.5% 0 0 0;
}
#ctsPlay .mes img.deo{
    width: 18.4%;
    display: block;
    margin: -2.5% 0 0 40.3%;
}

@keyframes spin {
   0% {
     transform: rotate(0deg) scale(1); 
   }
   45%{
      transform: rotate(180deg) scale(1.5); 
   }
   100% {
     transform: rotate(360deg) scale(1); 
   }
}
#ctsPlay .h {position: absolute;width: 62%;margin: 135.4% 0 0 -63%;z-index: 1;animation: zoom 1.85s infinite;}

@keyframes zoom {
   0%,100%{
      transform: scale(.9); 
   }
   25%{
      transform: scale(1.2); 
   }
}
@keyframes zoom2 {
   50%{
      transform: scale(1.15);
      filter:brightness(1.3);
   }
}
@keyframes zoom3 {
   0%{
      transform: scale(0.8);
      opacity:0;
   }
   20%{
      transform: scale(.97);
      opacity:1;
   }
   100%{
      transform: scale(.85);
      opacity:0;
   }
}
@keyframes buru {
   50%{
      transform: translateX(.04em);
   }
   0%,100%{
      transform: translateX(-.04em);
   }
}
#ctsPlay .i {width: 135%;margin: 0 0 0 -100.5%;position: relative;z-index: 1;transition:filter .6s}
#ctsPlay .g {width: 14.534%;bottom: 21.2%;position: absolute;left: 50%;margin: 0 0 -6.66% -7.5%;opacity: 0;z-index: 6;}
#ctsPlay .o {position:absolute;width: 135%;margin: -4% 0 0 -100.5%;z-index: 1;}

/* #ctsClear */
#ctsClear {
   position:
   absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 68.75em;
   overflow: hidden;
}
#ctsClear img{
   position:
   absolute;
   top:0;
   left:0;
   opacity: 0;
}
#ctsClear span {
}
#ctsClear figure {
}
#ctsClear .s1 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;display: none;}
#ctsClear .s2 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;display: none;}
#ctsClear .bg1 {position: absolute;top: 50%;left: 50%;width: 100%;height: 100%;transform: translate(-50%,-50%);}

#ctsClear .bg1 {position: absolute;height: 125.5%;width: auto;left: 50.4%;top: 0;margin-top: -21.3%;transform: translateX(-50%);-webkit-mask-image: url('../img/fuwa.png');-webkit-mask-position: 49% 58%;-webkit-mask-repeat: no-repeat}
#ctsClear .bg1.fix {
    animation: smell 5s 1;
    -webkit-mask-size: 120em;
    opacity: 1;
}
#ctsClear .gas1 {transform: rotate(107deg);margin: 34% 0 0 7%;width: 87%;}
#ctsClear .gas2 {transform: rotate(210deg);margin: 48.8% 0 0 -1.3%;width: 89%;}
#ctsClear .gas3 {
    margin: 45.5% 0 0 11%;
    width: 89%;
}
#ctsClear .moya {width: 87.2%;margin: 30.8% 0 0 5.9%;}
#ctsClear .earth {background: url(../img/bg_good.jpg) no-repeat;background-size: cover;width: 100%;height: 100%;z-index: 10;}
#ctsClear .earth span {width: 100%;height: 47.3%;background: url(../img/bg_good02.jpg) no-repeat bottom;background-size: cover;display: block;top: 0;left: 0;margin-top: 98.05%;margin-bottom: 0.4%;position: absolute;/* opacity: 0; */}
#ctsClear .earth figure {position: absolute;width: 100%;height: 110%;background: url(../img/bg01_good.png?22) repeat-x;background-size: 98.7em;background-position-x: 62.1%;top: -13%;}
#ctsClear .bom1 {width: 104.6%;margin: 30.1% 0 0 -1.1%;}
#ctsClear .bom2 {width: 72.6%;margin: 23.8% 0 0 18.3%;}
#ctsClear .bom3 {width: 72%;margin: 47.4% 0 0 -6.1%;}
#ctsClear .bom4 {width: 71.6%;margin: 49.5% 0 0 38.3%;}
#ctsClear .txt1 {width: 29.6%;top: auto;bottom: 0;margin: 0 0 14.8% 1.5%;}
#ctsClear .txt2 {width: 29.7%;top: auto;bottom: 0;margin: 0 0 23% 30.5%;}
#ctsClear .txt3 {width: 39.5%;top: auto;bottom: 0;margin: 0 0 14.4% 59%;}
#ctsClear .chiri {width: 100%;}
#ctsClear .wa {width: 90%;height: 61.4%;position: absolute;top: 9%;left: 5%;animation: rotate 8s cubic-bezier(0.77, 0.45, 0.57, 0.76) infinite; }
#ctsClear .wa span {position: absolute;left: 44.4%;top: -1%;background: url(../img/fig01_good.png?) no-repeat;width: 4.5em;transform-origin: 50% 494%;height: 4.313em;background-size: contain;}
#ctsClear .wa span:nth-child(2){
    transform: rotate(95deg);
}
#ctsClear .wa span:nth-child(3){
    transform: rotate(135deg);
}
#ctsClear .wa span:nth-child(4){
    transform: rotate(180deg);
}
#ctsClear .wa span:nth-child(5){
    transform: rotate(225deg);
}
#ctsClear .wa span:nth-child(6){
    transform: rotate(270deg);
}
#ctsClear .wa span:nth-child(7){
    transform: rotate(315deg);
}
#ctsClear .wa span:nth-child(8){
    transform: rotate(45deg);
}
#ctsClear .dai {width: 85.334%;margin: 26.5% 0 0 7.4%;}
#ctsClear .obi {width: 100%;background: url(../img/obi_good.jpg) no-repeat;background-size: cover;height: 4.9em;position: absolute;top: 0;}
#ctsClear .obi span{width: 100%;background: url(../img/obi_good.png?) repeat-x;background-size: 16.13em;height: 4.9em;position: absolute;top: 9.4%;left: 0;animation: obi2 2s linear infinite;}

#ctsClear .bottom {top: auto;bottom: 0;}
#ctsClear .bottom.obi span{animation: obi1 2s linear infinite;}
/* #ctsOver */
#ctsOver {
   /* display:none; */
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 68.75em;
   display: none;
   height: 100%;
}
#ctsOver img{opacity:0;position:absolute;top:0;left:0;}
#ctsOver .bg1 {position: absolute;height: 100%;width: auto;left: 58%;top: 50%;transform: translate(-50%,-50%);}
#ctsOver .bg2 {position: absolute;height: 125.5%;width: auto;left: 50.4%;margin-top: -21.3%;transform: translateX(-50%);-webkit-mask-image: url('../img/fuwa.png');-webkit-mask-position: 46% 50%;-webkit-mask-repeat: no-repeat}
#ctsOver .bg2.fix {
    animation: smell 4s 1;
    -webkit-mask-size: 120em;
    opacity: 1;
}
#ctsOver .splash1 {width: 128.9%;margin: 17.5% 0 0 -11.4%;}
#ctsOver .splash2 {width: 128.9%;margin: 17.5% 0 0 -11.4%;}
#ctsOver .splash3 {width: 128.9%;margin: 17.5% 0 0 -11.4%;}
#ctsOver .kira{
    position: absolute;
    margin-top: 17%;
    width: 100%;
    height: 46em;
    position: relative;
}

#ctsOver .kira1 {width: 11%;margin: -6.4% 0 0 77.6%;}
#ctsOver .kira2 {width: 11%;margin: 71.1% 0 0 9.6%;}
#ctsOver .kira3 {width: 10%;margin: 9% 0 0 58.8%;}
#ctsOver .kira4 {width: 10.6%;margin: 47.7% 0 0 -0.1%;}
#ctsOver .kira5 {width: 6.4%;margin: 60.6% 0 0 85.6%;}
#ctsOver .kira6 {width: 6.4%;margin: 74.9% 0 0 69%;}
#ctsOver .kira7 {width: 8%;margin: 5.5% 0 0 16.8%;}
#ctsOver .kira8 {width: 8.2%;margin: 36.6% 0 0 81.6%;}
#ctsOver .soap {width: 62.1%;margin: 36.7% 0 0 18.4%;}
#ctsOver .cover{
  display: none;width:100%;
  height: 100%;
  position:
  absolute;
  top:0;
  left:0;
  background:#000;
  min-height: 100vh;
}

/* #ctsResult */
#ctsResult{
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
}
#ctsResult {background: url(../img/bg_success.jpg?2) no-repeat;background-size: cover;padding-bottom: 2em;width: 100%;display: none;overflow-y: scroll;overflow-x: hidden;position: absolute;height: 100%;/* max-height: 68.75em; */top: 0;pointer-events: all !important;padding-bottom: 5em;box-sizing: border-box;-webkit-overflow-scrolling: touch;z-index: 1;}
#ctsResult.fail {
    background-size: cover !important;
}
#ctsResult.f1 {
    background: url(../img/bg_bad01.jpg) no-repeat top;
}
#ctsResult.f2 {
    background: url(../img/bg_bad02.png) no-repeat top;
}
#ctsResult.f3 {
    background: url(../img/bg_bad03.png) no-repeat top;
}
#ctsResult.f4 {
    background: url(../img/bg_bad04.jpg) no-repeat top;
}
#ctsResult.f5 {
    background: url(../img/bg_bad05.jpg) no-repeat top;
}
#ctsResult.f6 {
    background: url(../img/bg_bad06.jpg) no-repeat top;
}
#ctsResult.f7 {
    background: url(../img/bg_bad07.png) no-repeat top;
}
#ctsResult.f8 {
    background: url(../img/bg_bad08.png) no-repeat top;
}
#ctsResult h2 {width: 54.27%;margin: 11.9% auto 0;position: relative;z-index: 2;}
#ctsResult .mes {width: 92%;margin: 2.6% auto 5.3%;position: relative;z-index: 2;}

#ctsResult h3 {width: 83%;margin: 12.1% 0 -0.4% 7%;white-space: nowrap;position: relative;z-index: 2;}
#ctsResult h3.f {margin: 12.3% 0 2.2% 6.6%;}
#ctsResult h3 img{
  display:
  inline-block;
  width: 19.1%;
  vertical-align: top;
  margin: 0 0.8%;
}
#ctsResult .kaiun {
  position:
  absolute;
  z-index:2;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  left: 0;
  display: none;
}
#ctsResult h4 {width: 68%;margin: 9.4% 0 2.8% 26.6%;}
#ctsResult h4.f {width: 66.67%;margin: 8.7% 0 3% 27.3%;}
#ctsResult .dai {width: 26.025%;}
#ctsResult .f .dai {width: 24.58%;}
#ctsResult .sei {margin: 0 -1.4% 0 -2.4%;width: 26.67%;}
#ctsResult .kou {margin: 0 -3.2% 0 -0.2%;width: 26.025%;}
#ctsResult .f {display: none !important;}
#ctsResult.fail .s {
  display: none !important;
}
#ctsResult.fail .f {
  display: block !important;
}
#ctsResult .shi {width: 24.58%;margin: 0 -0.8% 0 -0.7%;}
#ctsResult .pai {margin: 0 -3.6% 0 0.8%;width: 27.15%;}
#ctsResult .img1 {width: 100%;display: block;margin: -7.9% auto -7.3%;position: relative;z-index: 2;}
#ctsResult .img2 {width: 95%;height: auto;display: block;margin: 2.5% auto 3.2%;border-radius: 0.6em;}
#ctsResult.fail .img2 {display:none;}
#ctsResult .btn {display: block;width: 92%;margin: 0 auto 4%;border-radius: 2.1em;position: relative;}
#ctsResult .btn:after{content:"";background: #000;position: absolute;width: 100%;height: 100%;max-height: 9.7em;left: 0.4em;bottom: -0.3em;border-radius: 2.1em;filter: blur(0.6em);opacity: 0.2;}
#ctsResult .b1 {padding-top: 5em;margin-top: -5em;cursor: pointer;}
#ctsResult .btn.b1 img {overflow: hidden;}
#ctsResult .b1 .fig {position: absolute;left: 0;bottom: 0;width: 34.9%;}
#ctsResult .b1 .fig.f {width: 34.3%;left: -0.3%;}
#ctsResult .b4 {margin-bottom: 3em;}
#ctsResult .btn img {
    border-radius: 2.1em;
    z-index: 1;
    position: relative;
}
#ctsResult .btn img.x{
  border:#fff2f6 2px solid;
  margin:-1px;
}
#ctsResult.fail .btn img.x{
  border-color:#878787;
}
#ctsResult .b3 {}
#ctsResult .b3 img {
}
#ctsResult .cover{
  width:100%;
  height: 168%;
  position:
  absolute;
  top:0;
  left:0;
  background:#fff;
  z-index: 1;
  min-height: 100vh;
}
#ctsResult.fail .cover{
  background:#000;
}


@keyframes smell {
   0%{
     opacity:0.5;
      -webkit-mask-size: 0em;
   }
   70%{
     opacity:1;
     -webkit-mask-size: 120em;
   }
   100%{
     -webkit-mask-size: 120em;
   }
}
@keyframes rotate {
   0%{
     transform:rotate(0deg);
   }
   100%{
     transform:rotate(360deg);
   }
}
@keyframes obi1 {
   0%{
     background-position-x:0em;
   }
   100%{
     background-position-x:16.13em;
     filter:hue-rotate(360deg)
   }
}
@keyframes obi2 {
   0%{
     background-position-x:0em;
   }
   100%{
     background-position-x:-16.13em;
     filter:hue-rotate(-360deg)
   }
}

@media (max-width: 768px) {
    body main{
        font-size: 2.133334vw;
        box-shadow: none;
        height: 100%;
        background: #000;
    }
    body {
      height:100%;
      background:#000;
  }
  body,html {
      height:100%;
      /* overflow-y: visible; */
  }
}
@media (min-width: 769px) {
    .forsp{
        display:none !important;
    }
    html{
    overflow-y: hidden;
  }
  #ctsResult {
    overflow-y: hidden !important;
  }
  #ctsResult.fix {
    overflow-y: auto !important;
  }
  /* #ctsWallpaperText */
  #ctsWallpaperText {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-left: 0;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
  }
  #ctsWallpaperText .txt1 {
  position: absolute;
  width: 5.38em;
  height: auto;
  right: 0;
  top: 0;
  margin: 6.5% -17.7% 0 0;
  filter: drop-shadow(0px 0px 0.4em #fee02e) drop-shadow(0px 0px 0.4em #fee02e) drop-shadow(0px 0px 0.4em #fee02e);
  }
  #ctsWallpaperText .txt2 {
  position: absolute;
  width: 5.96em;
  height: auto;
  left: 0;
  bottom: 0;
  margin: 0 0 6.7% -18.5%;
  filter: drop-shadow(0px 0px 0.4em #fee02e) drop-shadow(0px 0px 0.4em #fee02e) drop-shadow(0px 0px 0.4em #fee02e);
  }
  /* #ctsWallpaper */
  #ctsWallpaper {
  position: fixed;
  background: url(../img/bg_wallpaper.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  }
  #ctsWallpaper .fig1 {
  position: absolute;
  height: 97vh;
  width: auto;
  bottom: 0;
  left: 0;
  }
  #ctsWallpaper .fig2 {
  position: absolute;
  height: 96.9vh;
  width: auto;
  bottom: 0;
  right: 0;
  }

}
@media (max-width: 768px) {
    .forpc{
        display:none !important;
    }
  #ctsLoading h2 {
    margin-top:calc(50vh  - 15.5em);
  }
  #ctsPlay,
  #ctsOver,
  #ctsClear{
    position: absolute;
    height: 68.75em;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
  }
}

@media (min-width: 768px) {
  @media (min-aspect-ratio: 36 / 53) {
     main{
       height:100vh;
       width: 68vh;
       font-size: 1.454vh;
       max-width: 9999px;
    }
  }
}