@charset "utf-8";
html {
  overflow-x: hidden;
  overflow-y: scroll;
}
body {
  font-size: 10px;
  line-height: 1.75;
  max-width: 100vw;
  font-family: "Noto Sans JP", sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #000;
  color:#fff;
}
.no-overscroll,
.no-overscroll body {
  overscroll-behavior-y: none;
}
body,
body * {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
em {
  font-style: normal;
}
pre {
  padding: 5px 10px;
  background-color: #f1f1f1;
}
img {
  width: auto;
  height: auto;
  width: 100%;
}
a {
  color: initial;
  text-decoration: none;
  transition: opacity 0.24s;
}
button, a {
  -webkit-tap-highlight-color: transparent;
}
a[href]:hover {
  opacity: 0.65;
}
span.fill{
  margin-right: -0.3em;
}
.anm{
  opacity:0;
}
main {margin: 0 auto;width: 75em;/* height: 100vh; */position: relative;background: #000;overflow: hidden;display: block !important;opacity: 1 !important;min-height: 100svh;}
.font_p{
  font-family: "DotGothic16", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.type-char {
  visibility: hidden;
}

.type-char.is-visible {
  visibility: visible;
}
#pcbg{
  display:none;
}
.dbg {position: fixed;width: 100%;height: 100%;left:0;top:0;overflow: hidden;opacity: 0;}
.dbg.rev{
  transform:scaleX(-1);
}
.dbg .layer1,
.dbg .layer2{
  width:100%;
  height:100%;
  position:absolute;
}
.dbg .u1 {position: absolute;left: 31.2em;top: 51.6em;width: 6.4em;animation: rotate 15s infinite linear;}
.dbg .u2 {position: absolute;left: 47.6em;top: 2.6em;width: 34.1em;animation: rotate 25s infinite linear;animation-direction: reverse;}
.dbg .u3 {position: absolute;left: 39.7em;top: 54.6em;width: 10.4em;animation: rotate 6s infinite linear;}
.dbg .u4 {position: absolute;left: 34.3em;top: 37.6em;width: 16.4em;animation: rotate 10s infinite linear;}
.dbg .u5 {position: absolute;left: 8.5em;top: 69.4em;width: 19.7em;animation: rotate 15s infinite linear;animation-direction: reverse;}
.dbg .u6 {position: absolute;left: 55.7em;top: 49em;width: 28.4em;animation: rotate 25s infinite linear;}
.dbg .circle {position: absolute;width: 39em;height: 39em;left: -5.7em;top: 85.4em;transform-origin: 46em -30em;display: block;/* animation: zoomin 5s infinite cubic-bezier(0, 0.95, 0.09, 0.86); */}
.dbg .circle.s1 {width: 68em;height: 68em;top: 96.9em;left: 40.8em;transform: rotate(156deg);transform-origin: -4em -39em;}
.dbg .circle.s2 {width: 75em;height: 75em;top: 18.2em;left:0;transform-origin: 50% 50%;}
.dbg .circle.s3 {width: 77em;height: 77em;top: -39.1em;left: -39.4em;transform: rotate(155deg);opacity: 0.45;transform-origin: 80em 100em;}
.dbg .circle span{
  position:absolute;
  width:100%;
  height:100%;
  display: block;
}
.dbg .circle img {position: absolute;width: 138.667%;left: -19.3335%;top: -19.3335%;max-width: 200%;max-height: 200%;animation: rotate 30s infinite linear;}
.dbg .circle .c2 {width: 54.134%;left: 22.933%;top: 22.933%;animation: rotate 25s infinite linear;animation-direction: reverse;}
.dbg .circle .c3 {width: 96%;left: 2%;top: 2%;animation: rotate2 5s infinite ease;animation-direction: alternate;}

@keyframes rotate {
   0%{
      transform:rotate(0deg)
   }
   100%{
      transform:rotate(360deg)
   }
}
@keyframes rotate2 {
   0%{
      transform:rotate(-5deg)
   }
   100%{
      transform:rotate(15deg)
   }
}
@keyframes zoomout {
   0%{
     transform:scale(1);
     opacity:1;
   }
   100%{
     transform:scale(3);
     opacity:.2;
   }
}
@keyframes zoomin {
   0%{
     transform:scale(0);
     opacity:0;
   }
   100%{
     transform:scale(1);
     opacity:1;
   }
}

section{position: absolute;width: 100%;height: 100%;left:0;top:0;display: none;/* border-bottom: #f0f 200em solid; */}

.tachikoma {position: relative;pointer-events: none;}
.tachikoma .fkds {background: url(../img/fkds_bg.png) no-repeat;background-size: 100% 100% !important;width: 38.4em;height: 11.2em;margin: 6.1em 0 0 11.3em;position: relative;}
.tachikoma.end .fkds{
  animation: blink2 0.003s;
  animation-iteration-count: 70;
}
.tachikoma .fkds img{position:absolute;}
.tachikoma .fkds .p1 {right: 0;bottom: -1.2em;width: 1.5em;opacity: 0;}
.tachikoma .fkds .p2 {bottom: -1.3em;left: -1.3em;width: 10em;transform: translate(1.3em, -1.3em);opacity: 0;}
.tachikoma .fkds .p3 {width: 5.9em;right: -5.7em;top: 5.9em;-webkit-mask-image: linear-gradient(-75deg, transparent 50%, black 50%);mask-image: linear-gradient(-75deg, transparent 50%, black 50%);-webkit-mask-position-x: 100%;-webkit-mask-size: 270%;}
.tachikoma.end .fkds .p1 {
  animation: blink 0.3s;
  animation-iteration-count: 1;
  animation-delay: 0.7s;
  animation-fill-mode: forwards;
}
.tachikoma.end .fkds .p2 {
  transform: translate(0, 0);
  transition: transform 0.7s cubic-bezier(0.2, 2.15, 0.55, 0.64), opacity 0.1s;
  transition-delay: 0.4s;
  opacity: 1;
}
.tachikoma.end .fkds .p3 {
  -webkit-mask-position-x: 0%;
  transition: -webkit-mask-position-x 1.4s cubic-bezier(0.31, 0.24, 0.21, 0.95);
}
.tachikoma .fkds .serif {font-size: 2.2em;line-height: 1.7;letter-spacing: 0.04em;line-height: 1.45;padding: 1em 0 0 1.15em;text-shadow: #00f194 0 0 0.2em;pointer-events: none;user-select: none;-webkit-user-select: none;-webkit-touch-callout: none;-webkit-tap-highlight-color: transparent;touch-action: manipulation;}
.tachikoma .fkds span.name {position: absolute;right: -0.15em;bottom: -2.5em;letter-spacing: 0.04em;font-size: 2em;color: #01ff9d;opacity: 0;}
.tachikoma.end .fkds span.name{
  opacity: 1;
  transition: opacity 0.6s;
  transition-delay: 0.5s;
}
.tachikoma .fig {position: absolute;right: 4.4em;top: -4.5em;width: 19.5em;user-select: none;-webkit-user-select: none;-webkit-touch-callout: none;-webkit-tap-highlight-color: transparent;touch-action: manipulation;}
.tachikoma.anm .fig{
  margin-right: -5em;
  opacity: 0;
}
.tachikoma.anm.end .fig{
  margin-right: 0;
  transition: margin 0.7s cubic-bezier(0.25, 1.65, 0.52, 0.71), opacity 0.5s;
  opacity: 1;
}
.button {background: url(../img/btn_common_bg.png) no-repeat;background-size: 100% 100% !important;width: 52.4em;height: 9.2em;margin: 9.5em 0 0 11.3em;position: relative;justify-content: center;display: flex;align-items: center;cursor: pointer;z-index: 1;-webkit-tap-highlight-color: transparent;}
.button img{position:absolute;}
.button .p1 {left: -0.5em;top: -0.5em;width: 8em;}
.button .p2 {right: -0.5em;bottom: -1.4em;width: 13.2em;}
.button .p3 {left: 0;bottom: -1.3em;width: 1.4em;}
.button .serif {font-size: 2.8em;margin-bottom: .1em;letter-spacing: 0.04em;color: #01ff9d;position: relative;}
.copyright {font-family: "Shippori Mincho", serif;text-align: center;padding: 4.2em 0 1.6em;font-size: 1.6em;color: #8e8e93;font-weight: 600;user-select: none;-webkit-user-select: none;-webkit-touch-callout: none;-webkit-tap-highlight-color: transparent;touch-action: manipulation;}

/*============================
#secTl
============================*/
#secTl {display: block;position: relative;opacity: 0;}
#secTl .logo {padding: 3em 0 2.7em;margin: 0 auto;width: 51.9em;white-space: nowrap;}
#secTl .logo .smartnews {width: 26.6em;}
#secTl .logo .x {width: 2.9em;margin: -0.1em 2.1em 0 1.9em;}
#secTl .logo .kokaku {width: 18.4em;margin-top: -0.2em;}
#secTl .logo img{
  display: inline-block;
  vertical-align: middle;
}
#secTl h1 {width: 90.667%;font-size: 2em;margin: 0 0 0 1.7em;z-index: 1;position: relative;}
#secTl h1 img {width: 100%;}
#secTl h1.glitch-wrap{
  position: relative;
  display: inline-block;
}
#secTl h1.glitch-wrap img{
  width: 100%;
}
#secTl .h1-glitch-canvas{
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  display: block;
}
#secTl .bg {margin: -36.2em 0 1em;}
#secTl .copy {margin: -34.9em 0 0 8.7em;width: 56.4em;z-index: 1;position: relative;}
#secTl .tachikoma .fkds{
  margin: 6.1em 0 0 5.8em;
  background: url(../img/fkds_bg_l2.png) no-repeat;
  width: 41.7em;
  height: 11.2em;
}
.tachikoma .fkds .serif{
  font-size: 2.4em;
  letter-spacing: 0.04em;
  line-height: 1.36;
  padding: 0.87em 0 0 1.05em;
}
#secTl .tachikoma .fig{
  right: 4em;
  top: -2.8em;
  width: 21.6em;
}
#secTl .links{font-family: "Shippori Mincho", serif;text-align: center;padding: 0.3em 0 2.2em;font-size: 2em;color: #8e8e93;font-weight: 600;display: flex;justify-content: center;}
#secTl .links a{
  color: #8e8e93;
  padding: 0 0.7em;
}
/*============================
#secQuiz
============================*/
#secQuiz {/* display: block; */position: relative;}
#secQuiz .kick {font-family: "Shippori Mincho", serif;font-weight: 500;padding: 1.25em 0 0 0em;font-size: 3.8em;letter-spacing: -0.08em;text-align: center;}
#secQuiz .kick em{display:inline-block;white-space: nowrap;}
#secQuiz h2 {font-family: "Shippori Mincho", serif;font-size: 6.4em;color: #01ff9d;font-weight: 700;padding: 0.6em 0 0.35em 4.36em;line-height: 1.44;position: relative;}
#secQuiz .zoom{
  transform-origin:50% 40%;
}
#secQuiz h2 small {display: block;font-size: 0.5em;margin-left: 0.5em;}
#secQuiz h2 span {
}
#secQuiz h2 .line {position: absolute;bottom: 0;left: 0;width: 10.047em;}
#secQuiz h2 .light {width: 2.2657em;left: 1em;bottom: -0.24em;position: absolute;mix-blend-mode: hard-light;}
#secQuiz .quest {font-family: "DotGothic16", sans-serif;font-size: 3.3em;width: 72%;line-height: 1.45;letter-spacing: 0.02em;margin: 0.66em 14% -0.2em;text-shadow: #01ff9d 0 0 0.15em, #00c679 0 0 0.7em;min-height: 6.4em;display: flex;align-items: center;pointer-events: none;}
#secQuiz .quest span{display:inline-block;pointer-events: none;user-select: none;-webkit-user-select: none;-webkit-touch-callout: none;-webkit-tap-highlight-color: transparent;touch-action: manipulation;word-break: break-all;}
#secQuiz .visual {position: relative;transform-origin: 50% -23%;overflow: hidden;}
#secQuiz .visual .bg {width: 56.8em;margin-left: 9.1em;padding-bottom: 2.9em;}
#secQuiz .visual .embed {-webkit-mask-image: url('../img/mask_picture.png');mask-image: url('../img/mask_picture.png');-webkit-mask-size: contain;mask-size: contain;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-position: center;mask-position: center;position: absolute;left: 10em;top: 0.38em;}
#secQuiz .visual .embed img {width: 55em;height: 31.4em;}
#secQuiz .visual .light {position: absolute;left: 9.9em;top: -1em;width: 14.5em;mix-blend-mode: plus-lighter;z-index: 2;}
#secQuiz .visual .light.l2 {transform: rotate(90deg);left: 2.7em;top: 5.9em;}
#secQuiz .visual .light.l3 {left: 46.2em;top: 30.05em;}
#secQuiz .visual .note{
  position:absolute;
  right: 4.9em;
  bottom: 1.1em;
  text-align: right;
  width: 100%;
  font-size: 1.8em;
  font-weight: 500;
  font-family: "Shippori Mincho", serif;
  color: #dfdfdf;
}
#secQuiz .tachikoma.q1,
#secQuiz .tachikoma.q6,
#secQuiz .tachikoma.q8{
  transform:scaleX(-1)
}
#secQuiz .tachikoma.q1 p, #secQuiz .tachikoma.q1 .fig,
#secQuiz .tachikoma.q6 p, #secQuiz .tachikoma.q6 .fig,
#secQuiz .tachikoma.q8 p, #secQuiz .tachikoma.q8 .fig{
  transform:scaleX(-1)
}
#secQuiz .tachikoma.q1 .fkds,
#secQuiz .tachikoma.q6 .fkds,
#secQuiz .tachikoma.q8 .fkds{
  background: url(../img/fkds_bg_l1_r.png) no-repeat;
}
#secQuiz .tachikoma .fkds {margin: 2.9em 0 4em 8.4em;background: url(../img/fkds_bg_l1.png?2) no-repeat;width: 36.2em;height: 8em;}
#secQuiz .tachikoma.q2 .fkds{width: 45.1em;margin-left: 4.2em;}
#secQuiz .tachikoma.q3 .fkds{width: 38.9em;margin-left: 8.1em;}
#secQuiz .tachikoma.q4 .fkds{width: 41.4em;height: 11.2em;margin: 1.1em 0 -1.4em 7.5em;}
#secQuiz .tachikoma.q5 .fkds{width: 45.9em;margin-left: 4.7em;}
#secQuiz .tachikoma.q6 .fkds{width: 37.5em;margin-left: 8em;}
#secQuiz .tachikoma.q7 .fkds{width: 44em;height: 11.2em;margin: 1.1em 0 -1.4em 5.7em;}
#secQuiz .tachikoma.q8 .fkds{width: 43.1em;margin-left: 5.2em;}
#secQuiz .tachikoma.q9 .fkds{width: 46.2em;margin-left: 5.2em;}
#secQuiz .tachikoma.q10 .fkds{width: 40.3em;height: 11.2em;margin: 1.1em 0 -1.4em 5.7em;}

#secQuiz .tachikoma .fkds .p1 {bottom: -0.9em;}
#secQuiz .tachikoma .fkds .p2 {bottom: -0.9em;left: -1em;}
#secQuiz .tachikoma .fkds .p3 {top: 3.6em;right: -5.7em;}
#secQuiz .tachikoma.q10 .fkds .p3{
  top: 5.4em;
}
#secQuiz .tachikoma .fkds .serif {text-align: center;padding-left: 0;white-space: nowrap;padding-top: .95em;}
#secQuiz .tachikoma.q4 .fkds .serif{
  text-align: left;
  padding-left: 1em;
}
#secQuiz .tachikoma.q7 .fkds .serif{
  text-align: left;
  padding-left: 1.2em;
}
#secQuiz .tachikoma.q10 .fkds .serif{
  text-align: left;
  padding-left: 1.2em;
  padding-top: 1em;
}
#secQuiz .tachikoma .fig {width: 21.6em;right: 5.6em;top: -4.7em;}
#secQuiz .tachikoma.q2 .fig {width: 21.6em;right: 2.6em;top: -3.9em;}
#secQuiz .tachikoma.q3 .fig {width: 21.6em;right: 7.2em;top: -4.1em;}
#secQuiz .tachikoma.q4 .fig {width: 19.8em;right: 3.4em;top: -2.2em;}
#secQuiz .tachikoma.q5 .fig {width: 21.6em;right: 2.6em;top: -3.9em;}
#secQuiz .tachikoma.q6 .fig {width: 21.6em;right: 4.5em;top: -5.1em;}
#secQuiz .tachikoma.q7 .fig {width: 23.4em;right: 3.4em;top: -2em;}
#secQuiz .tachikoma.q8 .fig {width: 26.6em;right: 2.2em;top: -3.9em;}
#secQuiz .tachikoma.q9 .fig {width: 21.6em;right: 3.2em;top: -4.5em;}
#secQuiz .tachikoma.q10 .fig {width: 21.6em;right: 5.9em;top: -2.2em;}
#secQuiz .answer {display: flex;justify-content: center;gap: 1.8em;margin: 6.3em 0 1em;}
#secQuiz .answer button {display: block;font-size: 1em;width: 34em;height: 10.3em;position: relative;display: flex;justify-content: center;align-items: center;position: relative;display: inline-flex;align-items: center;justify-content: center;text-decoration: none;background: none;appearance: none;border: none;cursor: pointer;
#secQuiz .answer button img,
#secQuiz .answer button span {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

#secQuiz .answer button img {
  -webkit-user-drag: none;
  user-drag: none;
}

#secQuiz .answer button:focus,
#secQuiz .answer button:active {
  outline: none;
}
  /* スマホ操作改善 */user-select: none;-webkit-user-select: none;-webkit-touch-callout: none;-webkit-tap-highlight-color: transparent;touch-action: manipulation;}
#secQuiz .answer button img{
  animation: select1 1s infinite;
}
@keyframes select1 {
   0%,49.9%{
      opacity: 1; 
   }
   50%,99.9%{
      opacity: .75; 
   }
}
#secQuiz .answer button:nth-child(2) img{
  animation: select2 1s infinite;
}
@keyframes select2 {
   0%,49.9%{
      opacity: .8; 
   }
   50%,99.9%{
      opacity: 1; 
   }
}
#secQuiz .answer button.sel img{
  animation: blink 0.005s infinite;
}
@keyframes blink {
   0%,100%{
      opacity: 1; 
   }
   50%{
      opacity: 0; 
   }
}
@keyframes blink2 {
   0%,49.9%{
      opacity: 1; 
   }
   50%,99.9%{
      opacity: 0; 
   }
}
@keyframes blink3 {
   0%,49.9%{
      filter:brightness(1);
   }
   50%,99.9%{
      filter:brightness(4);
   }
}
#secQuiz .answer button img {position: absolute;width: 100%;}
#secQuiz .answer button span {font-family: "DotGothic16", sans-serif;position: relative;font-size: 2.8em;color: #ffffff;margin-bottom: 0.6em;letter-spacing: 0.04em;margin-left: 0.2em;}
#secQuiz .answer button.fake {}
#secQuiz .answer button.fake img {
}
#secQuiz .answer button.fake span {
  color: #fc3f3f;
}
#secQuiz .timer {width: 69.8em;height: 12em;position: relative;margin: 3.1em 0 0 2.6em;display: flex;align-items: center;justify-content: center;pointer-events: none;user-select: none;-webkit-user-select: none;-webkit-touch-callout: none;-webkit-tap-highlight-color: transparent;touch-action: manipulation;}
#secQuiz .timer .wave {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .3;
  -webkit-mask-image: url('../img/mask_counter.png');
  mask-image: url('../img/mask_counter.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
#secQuiz .timer .wave span{
  position: absolute;
  background: #fc3f3f;
  animation-play-state: paused !important;
}
#secQuiz .timer.active .wave span{
  animation-play-state: running !important;
}
#secQuiz .timer .wave span:nth-of-type(1) {
  top:0%;
  left: 50%;
  height: 17%;
  width: 0%;
  animation: timer1 5s linear infinite;
}
#secQuiz .timer .wave span:nth-of-type(2) {
  right: 0%;
  top:83%;
  height: 17%;
  width: 0%;
  animation: timer2 5s linear infinite;
}
#secQuiz .timer .wave span:nth-of-type(3) {
  left: 0%;
  bottom:17%;
  height: 0%;
  width: 7%;
  animation: timer3 5s linear infinite;
}
@keyframes timer1 {
   0%{
     left:50%;
     top:0%;
     width: 0%;
     height:17%;
   }
   10%{
     left:50%;
     top:0%;
     width: 50%;
     height:17%;
   }
   15%, 50%{
     left:50%;
     top:0%;
     width: 50%;
     height:83%;
   }
   60%{
     top:0%;
     left:94%;
     width:6%;
     height:83%;
   }
   65%,100%{
     left:94%;
     top:83%;
     width:6%;
     height:0%;
   }
}
@keyframes timer2 {
   0%,15%{
       width: 0%;
   }
   35%, 65%{
     right:0;
       width: 100%;
   }
   85%{
      width: 0%;
     right:100%;
   }
}
@keyframes timer3 {
   0%,35%{
    height: 0%;
   }
   40%{
    height: 83%;
    width: 7%;
   }
   50%, 85%{
     height: 83%;
     width: 50%;
     bottom:17%;
   }
   90%{
     left: 0%;
     height: 17%;
     width: 50%;
     bottom: 83%;
   }
   100%{
     height: 17%;
     bottom: 83%;
     left: 50%;
     width: 0%;
   }
}

#secQuiz .timer img {position: absolute;left: 0;top: 0;width: 100%;}
#secQuiz .timer .num {position: relative;font-family: "Orbitron", sans-serif;font-size: 4.2em;letter-spacing: 0.04em;margin-left: .02em;font-variant-numeric: tabular-nums;font-feature-settings: "tnum";}
#secQuiz .timer .num span{
  display: inline-block;
  width: 0.87em;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#secQuiz .copyright {padding-top: 1.3em;}

/*============================
#secLoad
============================*/
#secLoad {/* display: block; */position: fixed;height: 100svh;top: 0;width: 100%;background: #000;z-index: 4;width: 75em;right:0;left: auto;}
#secLoad .code {font-family: "DotGothic16", sans-serif;font-size: 2.9em;line-height: 1.45;letter-spacing: 0.155em;margin: -0.2em -0.1em;padding: 0;color: #01ff9d;text-shadow: #01ff9d 0 0 0.4em;animation: select2 0.07s infinite;height: calc(100svh - 18em);position: relative;}
#secLoad .code p {
  width: 101%;
  height: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#secLoad .code p .digit{
  display: inline-block;
  width: 1ch;
  text-align: center;
}
#secLoad .code p .digit.is-hidden{
  opacity: 0;
}

#secLoad .code p span.blink{
  animation: .5s blink2 infinite linear;
}
#secLoad .tachikoma {position: absolute;bottom: 29.1em;left: 2.6em;}
#secLoad .tachikoma .fkds {margin: 2.9em 0 4em 15.5em;background: url(../img/fkds_bg_l1.png?2) no-repeat;background-size: 100% 100%;width: 38.8em;height: 8em;animation: select2 0.3s infinite;}
#secLoad .tachikoma .fkds .p1 {bottom: -1em;}
#secLoad .tachikoma .fkds .p2 {bottom: 5em;left: -1.1em;transform: scaleY(-1);}
#secLoad .tachikoma .fkds .p3 {top: 8em;right: 16.7em;}
#secLoad .tachikoma .fkds .serif {text-align: center;padding-left: 0;}
#secLoad .tachikoma .fig {right: 3.1em;top: -9.8em;}
#secLoad .tachikoma .fig {right: -10.2em;top: 17.7em;width: 58.7em;animation: jump1 0.2s infinite;animation-delay: 0.2s;}
#secLoad .tachikoma .fig.t2 {right: 18.6em;transform: scaleX(-1);animation-delay: .2s;}
#secLoad .tachikoma .fig.t3 {right: -13.2em;animation-delay: .6s;}
#secLoad .tachikoma .fig.t4 {right: 34.3em;transform: scaleX(-1);animation-delay: .0s;}
#secLoad .copyright {position: absolute;bottom: -0.7em;width: 100%;}
@keyframes jump1 {
   0%,100%{
      margin-top:0em;
   }
   50%{
      margin-top:-.3em;
   }
}

/*============================
#secResult
============================*/
#secResult {/* display: block; */position: relative;}
#secResult h2 {padding: 1.8em 0 0 0.45em;width: 48.934em;}
#secResult h2 .tl_result {
}
#secResult h3 {font-family: "Shippori Mincho", serif;font-weight: 800;font-size: 10em;text-align: center;line-height: 1;letter-spacing: 0.04em;margin: 0.3em 0 0.54em 0.05em;color: #fc3f3f;}
#secResult h3.blink{
  animation: blink 0.005s;
  animation-iteration-count: 120;
}
#secResult .visual {width: 64.4em;margin: 0 0 2.3em 5.3em;position: relative;}
#secResult .visual .bg {pointer-events: none;user-select: none;-webkit-user-select: none;-webkit-touch-callout: none;-webkit-tap-highlight-color: transparent;touch-action: manipulation;}
#secResult .visual .embed {position: absolute;left: 0.7em;top: 0.8em;-webkit-mask-image: url(../img/mask_picture2.png);mask-image: url(../img/mask_picture2.png?2);-webkit-mask-size: contain;mask-size: contain;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-position: center;mask-position: ;width: 62.9em;height: 33.7em;}
#secResult .visual .embed img {user-select: none;-webkit-user-select: none;-webkit-touch-callout: none;-webkit-tap-highlight-color: transparent;touch-action: manipulation;pointer-events: none;}
#secResult .visual .light {position: absolute;left: 12em;top: -1.25em;width: 14.5em;mix-blend-mode: hard-light;z-index: 1;}
#secResult .visual .light.l2 {left: -6.7em;}
#secResult .visual .light.l3 {bottom: 0.4em;top: auto;left: 30.3em;}
#secResult .judge {font-size: 3.2em;margin-left: 3.25em;line-height: 1;letter-spacing: 0.04em;text-shadow: #01df89 0 0 0.3em;}
#secResult .judge .num {font-weight:400;font-family: "Orbitron", sans-serif;font-size: 1.68em;letter-spacing: 0.05em;margin-left: 0.05em;}
#secResult .judge .num em {font-size: 1.65em;}
#secResult .judge .num span{
  display: inline-block;
  width: 0.87em;
  text-align: center;
}
#secResult .judge.j2 {margin-top: 1em;}
#secResult .judge.j2 .num {display:inline-block;font-size: 1.02em;margin: 0 .1em;}
#secResult .comment {width: 62.8em;margin: 3.7em 0px 2.2em 6.1em;position: relative;}
#secResult .comment .bg {width: 100%;position: absolute;}
#secResult .comment p {position: relative;font-family: "DotGothic16", sans-serif;font-size: 3.3em;padding: 1.15em 1.33em;line-height: 1.5;text-shadow: #01df89 0 0 0.3em, #00a263 0 0 0.3em;height: auto !important;min-height: 8em;opacity: 0;}
#secResult .comment .light {position: absolute;left: 10em;top: -1.85em;width: 14.5em;opacity: 0.8;mix-blend-mode: hard-light;}
#secResult .comment .light.l2 {transform: rotate(90deg) translate(20em, 0px);opacity: 1;left: -7.2em;}
#secResult .comment .light.l3 {top: auto;bottom: -1.05em;left: 30em;}
#secResult .comment small {position: absolute;font-family: "DotGothic16", sans-serif;font-size: 2.2em;bottom: -2.5em;letter-spacing: 0.04em;padding-left: 2.03em;line-height: 1.6;text-shadow: #01df89 0 0 0.3em, #00a263 0 0 0.3em;}
#secResult .tachikoma {
  margin-top: 13.3em;
}
#secResult .tachikoma .fkds {margin: 6.1em 0 0 5em;width: 50.6em;}
#secResult .tachikoma .fkds .p1 {
}
#secResult .tachikoma .fkds .p2 {
}
#secResult .tachikoma .fkds .p3 {right: -5.4em;top: 3.6em;}
#secResult .tachikoma .fkds .serif {}
#secResult .tachikoma .fig {right: 1.8em;top: -1.6em;width: 21.6em;}
#secResult .links {display: flex;justify-content: space-between;align-items: start;width: 63em;margin: 6.4em 0 0 6em;}
#secResult .links .icon {width: 24.1em;margin-top: 0.2em;}
#secResult .links .applink {width: 32.4em;position: relative;z-index: 2;}
#secResult .links .applink a {
  display: block;
  margin-bottom: 1.9em;
}
#secResult .links .applink a img {
}
#secResult .button {background: url(../img/btn_x_share.png) no-repeat;width: 64em;height: 11.1em;margin: 6.3em 0 0 5.5em;position: relative;z-index: 2;}
#secResult .button.more {
  background: url(../img/btn_common_bg.png) no-repeat;
  height: 9.2em;
  width: 63.1em;
  margin: -0.7em 0 11.9em 5.9em;
}
#secResult .button.more .p2{
  width: 22.1em;
}
#secResult .button .serif {margin-bottom: 0.5em;margin-right: 2.1em;color: #fc3f3f;}
#secResult .button.more .serif{
  margin-bottom: .1em;
  margin-right: 0;
  color: #01ff9d;
}
#secResult .exp {z-index: 2;position: relative;}
#secResult .exp h3 {color: #01ff9d;margin: 1.45em 0 0.93em 0.05em;font-size: 5.6em;}
#secResult .exp ul {width: 84.2%;margin-left: 7.9%;margin-top: 8.4em;}
#secResult .exp ul.openList{
  max-height: 0;
  overflow: hidden;
}
#secResult .exp ul.openList.open{
  max-height:unset;
  margin-bottom: 8.2em;
  margin-top: -3.8em;
  transition: margin 0.8s cubic-bezier(0.56, 0.1, 0.25, 1);
  transition-delay: 0.4s;
}
#secResult .exp ul li{background: #fff;color: #000;margin: 4em 0 8.1em;position: relative;transition: filter .3s, padding .6s;filter: drop-shadow(0 0 0.4em #000) drop-shadow(0 0 0.4em #000);padding-bottom: 0em;}
#secResult .exp ul li.open{
  filter: drop-shadow(0 0 0.3em #01ff9d) drop-shadow(0 0 0.3em #01ff9d);
  padding-bottom: 6.8em;
}
#secResult .exp ul li:before{
  content:"";
  position:absolute;
  width: 100%;
  height: 3.3em;
  top: calc(-3.3em + 0.5px);
  background: url(../img/bg_a_top.png) bottom no-repeat;
  background-size: contain;
}
#secResult .exp ul li .openCts{
  max-height: 0em;
  overflow:hidden;
  transition: max-height 0.8s cubic-bezier(0.57, 0.09, 0.04, 1.01);
}
#secResult .exp ul li.open .openCts{
  max-height: 110em;
}
#secResult .exp ul li:after{
  content:"";
  background: url(../img/bg_a_bottom_off.png) no-repeat;
  background-size:contain !important;
  width: 2.8em;
  height:1em;
  position: absolute;
  left: 0;
  bottom: -2.2em;
}
#secResult .exp ul li.open:after{
  background: url(../img/bg_a_bottom.png) no-repeat;
}
#secResult .exp li h4 {font-size: 4em;font-family: "Shippori Mincho", serif;font-weight: 500;line-height: 1;padding-left: 1.1em;position: relative;padding-bottom: 0.8em;cursor: pointer;transition: padding 0.5s;-webkit-tap-highlight-color: transparent;}
#secResult .exp li.open h4{
  padding-bottom: 1em;
}
#secResult .exp li h4 .line {position: absolute;left: 0;bottom: 0;width: 92.5%;opacity: 0;}
#secResult .exp li.open h4 .line{
  opacity: 1;
}
#secResult .exp li h4 span.openmark {position: absolute;right: 1.17em;top: 0.55em;width: 0.7em;height: 1px;background: #000;}
#secResult .exp li h4 span.openmark:after{
  content:"";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  transform: rotate(90deg) scaleX(1);
  transition:transform .2s ease;
}
#secResult .exp li.open h4 span.openmark:after{
  transform: rotate(90deg) scaleX(0);
}
#secResult .exp li p {font-family: "DotGothic16", sans-serif;font-size: 3.3em;letter-spacing: 0.02em;line-height: 1.45;padding: 0.97em 1.4em 1.2em 1.4em;}
#secResult .exp li p.ex{
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: 2.6em;
  padding: 0.5em 1.5em 0 1.8em;
  line-height: 1.6;
}
#secResult .exp li p + small{
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-size: 2em;
  padding: 0.9em 2.1em 0 3.5em;
  text-align: right;
  display: block;
}
#secResult .exp li p + small a{
  text-decoration:underline;
}
#secResult .exp li .visual {width: 55em;margin: 0 0 3.4em 4.1em;height: 30.8em;}
#secResult .exp li .visual .embed {-webkit-mask-image: url('../img/mask_picture.png');mask-image: url('../img/mask_picture.png');-webkit-mask-size: contain;mask-size: contain;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-position: center;mask-position: ;left: 0;top: 0;width: 55em;height: 30.9em;}
#secResult .exp li .visual .embed img {
}
#secResult .exp li .visual .p1 {width: 2.8em;position: absolute;left: 0;bottom: -2.2em;}
#secResult .exp li .note{
  position: relative;
  display: block;
  font-size: 1.9em;
  text-align: right;
  width: 100%;
  bottom: 0;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  margin: -1.3em 0 0.7em -1.6em;
  line-height: 1.6;
  opacity: 0.7;
}
#secResult .exp li h5 {text-align: center;font-size: 4.6em;font-family: "Shippori Mincho", serif;font-weight: 500;color: #fc3f3f;}
#secResult .exp li h5 small {font-size: 0.6em;margin-left: 1.7em;letter-spacing: 0.02em;padding: 0;}
#secResult .tachikoma.t2 {margin-top: 5.5em;transform: scaleX(-1);margin-bottom: 3.7em;z-index: 3;}
#secResult .tachikoma.t2 .fkds {margin: 2.8em 0 0 8.7em;width: 38em;height: 7.8em;transform: scaleX(-1);}
#secResult .tachikoma.t2 .fkds .p1 {left: 0;}
#secResult .tachikoma.t2 .fkds .p2 {transform: scaleX(-1);right: -1em;left: auto;}
#secResult .tachikoma.t2 .fkds .p3 {transform: scaleX(-1);left: -4.3em;top: 3.7em;right: auto;width: 4.5em;}
#secResult .tachikoma.t2 .fkds .serif {padding: 0.9em 0 0 1.45em;}
#secResult .tachikoma.t2 .fig {right: 3em;top: -6.3em;width: 26.6em;}
#secResult .endstate {background: #000;position: relative;}
#secResult .endstate .top {position: absolute;top: -5.5em;z-index: 2;}
#secResult .endstate h3.serif {width: 56.8em;font-size: 1em;padding: 78.6em 0 0 3.4em;position: relative;z-index: 1;}
#secResult .endstate h3.serif img {
}
#secResult .endstate .bg {
    margin: 0;
    position: fixed;
    top: 0%;
    width: 100%;
    /* transform: translateY(-50%); */
    -webkit-mask-image: url(../img/mask_bottom.png?2);
    mask-image: url(../img/mask_bottom.png?2);
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: 0 100vh;
    will-change: mask-position;
    pointer-events: none;
    }
#secResult .endstate .copy {margin: 3.5em 0 0 3.3em;width: 68.4em;position: relative;}
#secResult .endstate .copy img {
}
#secResult .endstate .tachikoma {margin-top: 12.8em;}
#secResult .endstate .tachikoma .fkds {background: url(../img/fkds_bg_l1.png?2s) no-repeat;margin: 6.1em 0 0 5.5em;width: 45.5em;height: 8em;}
#secResult .endstate .tachikoma .fkds .p1 {
}
#secResult .endstate .tachikoma .fkds .p2 {bottom: -1em;left: -1em;}
#secResult .endstate .tachikoma .fkds .p3 {top: 3.2em;}
#secResult .endstate .tachikoma .fkds .serif {padding: 0.97em 0 0 1.35em;}
#secResult .endstate .tachikoma .fig {right: 1.8em;top: -5.4em;width: 19.8em;}
#secResult .endstate .button {margin: 10.3em 0 0 5.9em;background: url(../img/btn_common_bg_l.png?2asa) no-repeat;width: 63em;height: 9.2em;}
#secResult .endstate .button .p1 {
}
#secResult .endstate .button .p2 {width: 24.3em;}
#secResult .endstate .button .p3 {
}
#secResult .endstate .button .serif {margin-bottom: 0.1em;margin-right: -0.2em;color: #01ff9d;}
#secResult .logo {padding: 10.3em 0 0em 14.6em;position: relative;}
#secResult .logo .smartnews {width: 23.4em;}
#secResult .logo .x {width: 2.6em;margin: -0.1em 1.8em 0 1.7em;}
#secResult .logo .kokaku {width: 16.2em;margin-top: -0.2em;}
#secResult .logo img{
  display: inline-block;
  vertical-align: middle;
}
#secResult .endstate .copyright {padding: 1.5em 0 7.6em;position: relative;}

.mask{
  -webkit-mask-image: linear-gradient(-75deg, transparent 50%, black 60%);
  mask-image: linear-gradient(-75deg, transparent 50%, black 60%);
  -webkit-mask-position-x: 100%;
  -webkit-mask-size: 270%;
}
.mask.fix{
  -webkit-mask-position-x: 0%;
  transition: -webkit-mask-position-x 1.4s cubic-bezier(0.31, 0.24, 0.21, 0.95);
}
.mask.end{
  -webkit-mask-position-x: 0%;
  transition: -webkit-mask-position-x 0.9s cubic-bezier(0.56, 0.1, 0.21, 0.95);
}
.mask_v{
  -webkit-mask-image: linear-gradient(-0deg, transparent 51%, black 60%);
  mask-image: linear-gradient(-0deg, transparent 51%, black 60%);
  -webkit-mask-size: 100% 300%;
  -webkit-mask-position-y: 90%;
  transition-delay: 0.1s;
}
.mask_v.end{
  -webkit-mask-position-y: 1%;
  transition: -webkit-mask-position-y 1.5s cubic-bezier(0.18, 0.34, 0.4, 0.87)
}

@media (min-width: 1025px) {
  .forsp {
    display: none!important;
  }
  .button:hover{
    filter: brightness(1.4) saturate(1.6);
  }
  body::before{
    content:"";
    position:fixed;
    width:100%;
    height:100%;
    background: #000 url(../img/bg_pc.jpg) no-repeat 84% 10%;
    background-size:cover;
  }
  #pcbg{
    display:block;
    position: fixed;
    left: 0;
    width: calc(100% - 75em);
    height: 100%;
    background: linear-gradient(90deg, transparent 87%, #00000059);
    font-size: 0.72vh;
  }
  #pcbg .tl{
    position: absolute;
    top: 50%;
    height: 52em;
    max-height: 227px;
    transform: translateY(-48%);
    width: 100%;
    background: url(../img/tl_pc.png) no-repeat center;
    background-size: contain;
  }
  #pcbg .logo{
    position: absolute;
    bottom: 7.4em;
    height: 10em;
    max-height: 35px;
    width: 100%;
    background: url(../img/logo_pc.png) no-repeat center;
    background-size: contain;
  }
  #pcbg .copyright{
    bottom: 0.4em;
    position: absolute;
    left: 3.6em;
    font-size: 1.25em;
  }
  .dbg{
    width: 75em;
    position: fixed;
    left: auto;
    right:0;
    overflow:hidden;
  }
  main{
    margin: auto 0 0 auto;
    font-size: 0.555vh;
    font-size: 0.72vh;
  }
  #secResult .endstate .bg {
    width: 75em;
  }
}
@media (max-width: 1024px) {
  .forpc {
    display: none!important;
  }
  main{
    font-size: 1.33334vw;
  }
}