@charset "utf-8";

/* ---------------------------------------------
Reset
--------------------------------------------- */
/* Modern browser */
*,
*::before,
*::after{box-sizing:border-box}
*{margin:0;padding:0;}
img,
picture,
video,
canvas,
svg{display:block;max-width:100%}
input,
button,
textarea,
select{font:inherit}
p,
h1,
h2,
h3,
h4,
h5,
h6{overflow-wrap:break-word}


/* addition */
img,
video {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
em {
  font-style: normal;
}
small {
  font-size: 70%;
}

ul,ol,li {
  padding: 0;
  list-style: none;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}


/* ---------------------------------------------
font
--------------------------------------------- */
html {
  font-family: "Noto Serif JP", serif;
}

html body,
table th,
table td {
  line-height: 1.6;
  color: #000;
  font-size: 3.4vw;
}
@media screen and (min-width:751px) {
  html body,
  table th,
  table td {
    font-size: 16px;
  }
}

strong, em {
  font-weight: 700;
}


/* ---------------------------------------------
link
--------------------------------------------- */
a,
a:link,
a:visited
a:focus  {
  text-decoration: none;
  outline: none;
}


/* ---------------------------------------------
width
--------------------------------------------- */
.lp_page__wrapper {
  width: 100%;
  margin: 0 auto;
}

.contentsWrapper {
  width: 94%;
  margin: 0 auto;
}
@media screen and (min-width:751px) {
  .contentsWrapper {
    width: 100%;
  }
}

.wrapper_main {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 6.6666vw 2vw rgba(255,255,255,.9);
}
@media screen and (min-width:751px) {
  .wrapper_main {
    width: 500px;
    box-shadow: 0 0 50px 15px rgba(255,255,255,.9);
  }
}


/* ---------------------------------------------
cmn
--------------------------------------------- */
.lp_page__class .sec {
  margin: 0 auto;
}

.lp_page__class p {
  margin: 0;
}

.lp_page__class sup {
  font-size: 40%;
  vertical-align: super;
}

.lp_page__class .btn a:hover {
  filter: saturate(130%);
}

.lp_page__class .red1 {
  color: #d50001;
}
.lp_page__class .blu1 {
  color: #00008a;
}

.lp_page__class .taC {
  text-align: center;
}
.lp_page__class .taR {
  text-align: right;
}

.lp_page__class .brPc {
  display: none;
}
@media screen and (min-width:751px) {
  .lp_page__class .brSp {
    display: none;
  }
  .lp_page__class .brPc {
    display: block;
  }
  }

.lp_page__class .note small {
  font-size: 2.7vw;
  font-weight: 600;
  display: block;
}
@media screen and (min-width:751px) {
  .lp_page__class .note small {
    font-size: 13px;
  }
}
.lp_page__class .note1 small {
  padding-left: 1em;
  text-indent: -1em;
}
.lp_page__class .note2 small {
  padding-left: 2em;
  text-indent: -2em;
}

.lp_page__class .txt_sty1 {
  color: #fff;
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, 0 1px 1px #000, 0 -1px 1px #000, -1px 0 1px #000, 1px 0 1px #000, 2px 2px 1px #000, -2px -2px 1px #000, -2px 2px 1px #000, 2px -2px 1px #000, 0 2px 1px #000, 0 -2px 1px #000, -2px 0 1px #000, 2px 0 1px #000, 3px 3px 1px #000, -3px -3px 1px #000, -3px 3px 1px #000, 3px -3px 1px #000, 0 3px 1px #000, 0 -3px 1px #000, -3px 0 1px #000, 3px 0 1px #000;
}
.lp_page__class .txt_sty2 * {
  line-height: 1;
  background-color: #fff;
  display: inline !important;
}

/* glitch */
.lp_page__class .js-glitch {
  position: relative;
  z-index: 1;
  display: block;
}
.lp_page__class .js-glitch_item {
  width : 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  display: block;
} 
.lp_page__class .txt_hidden {
  color: transparent;
  font-size: 0;
  opacity: 0;
  display: block;
}

/* animation delay */
.lp_page__class .anim_delay1 {
  animation-delay: .7s !important;
}
.lp_page__class .anim_delay2 {
  animation-delay: 1.4s !important;
}

/* toggle */
.lp_page__class .toggleArea .toggleCont {
  display: none;
}


/* ---------------------------------------------
#pageHeader
--------------------------------------------- */
#pageHeader {
  margin: 0;
  padding: 1.5em 0 1em;
  background-color: #000;
  position: relative;
  z-index: 1;
}
@media screen and (min-width:751px) {
  #pageHeader {
    padding: 1em 0 .5em;
  }
}
#pageHeader .logo {
  width: 22.6666vw;
  margin: 0 auto;
}
@media screen and (min-width:751px) {
  #pageHeader .logo {
    width: 22.667%;
  }
}


/* ---------------------------------------------
#mainContents
--------------------------------------------- */
.wrapper_main {
  overflow: hidden;
  position: relative;
  z-index: 3;
  background-color: #000;
}
.wrapper_main.is-visible {
  display: block;
  animation: is-visible 2s cubic-bezier(1,0,1,1);
}
@keyframes is-visible {
  0%,85% {
    opacity: 0;
    display: block;
  }
  100% {
    opacity: 1;
  }
}
#mainContents {
  position: relative;
  z-index: 2;
}


/* contentHeader */
#mainContents .contentHeader #hero {
  position: relative;
}
#mainContents .contentHeader #hero .pageTitle {
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
#mainContents .contentHeader #hero .figVideo {
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 10;
}


/* contents */
#mainContents #sec1 .videoArea {
  position: relative;
}
#mainContents #sec1 .videoArea .txtArea {
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
#mainContents #sec1 .videoArea .figVideo {
  width: 100%;
  position: relative;
  z-index: 10;
}


#mainContents #sec_character .rotateArea {
  position: relative;
  overflow: hidden;
}
@keyframes rotate1 {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
#mainContents #sec_character .rotateArea::after {
  content: "";
  width: 160vw;
  height: 160vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 53%;
  left: 50%;
  z-index: 1;
  transform-origin: center;
  animation: rotate1 50s linear infinite;
}
@media screen and (min-width:751px) {
  #mainContents #sec_character .rotateArea::after {
    width: 850px;
    height: 850px;
  }
}
.webp #mainContents #sec_character .rotateArea::after {
  background-image: url(../images/sec_character_bg1.webp);
}
.no-webp #mainContents #sec_character .rotateArea::after {
  background-image: url(../images/sec_character_bg1.jpg);
}
#mainContents #sec_character .rotateArea .rotateArea_cont {
  position: relative;
  z-index: 2;
}
#mainContents #sec_character .rotateArea .rotateArea_cont .secTtlArea {
  margin: 0 auto;
}
#mainContents #sec_character .rotateArea .rotateArea_cont .secTtlArea .secTtl {
  width: 92%;
  margin: 0 auto;
}
#mainContents #sec_character .rotateArea .rotateArea_cont .cont {
  position: relative;
}
#mainContents #sec_character .rotateArea .rotateArea_cont .cont .figImg {
  position: relative;
  z-index: 1;
}
#mainContents #sec_character .rotateArea .rotateArea_cont .cont .txtArea {
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: block;
}
#mainContents #sec_character .rotateArea .rotateArea_cont .cont .txtArea {
  width: 84%;
  margin: 0 auto;
  padding-top: 5%;
  display: block;
}

#mainContents #sec2 .secTtlArea {
  position: relative;
}
#mainContents #sec2 .secTtlArea .secTtl {
  width: 93.334%;
  position: absolute;
  top: 14vw;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
}
@media screen and (min-width:751px) {
  #mainContents #sec2 .secTtlArea .secTtl {
    top: 19%;
  }
}
#mainContents #sec2 .secTtlArea .secTtl .js-glitch {
  width: 100%;
  aspect-ratio: 35 / 18;
}
.webp #mainContents #sec2 .secTtlArea .secTtl .js-glitch_item {
  background-image: url(../images/sec2_img1.webp);
}
.no-webp #mainContents #sec2 .secTtlArea .secTtl .js-glitch_item {
  background-image: url(../images/sec2_img1.png);
}
#mainContents #sec2 .secTtlArea .bg {
  position: relative;
  z-index: 1;
}
#mainContents #sec2 .secTtlArea .bg video {
  aspect-ratio: 75 / 52;
}
#mainContents #sec2 .videoArea {
  position: relative;
}
#mainContents #sec2 .videoArea .frame {
  position: relative;
  z-index: 10;
}
#mainContents #sec2 .videoArea .frame .btn {
  width: 11.7333vw;
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
}
@media screen and (min-width:751px) {
  #mainContents #sec2 .videoArea .frame .btn {
    width: 88px;
  }
}
#mainContents #sec2 .videoArea .frame .img {
  position: relative;
  z-index: 1;
}
#mainContents #sec2 .videoArea .figVideo {
  width: 86%;
  aspect-ratio: 5 / 4;
  position: absolute;
  top: 8.36%;
  left: 6.934%;
z-index: 1;
}
#mainContents #sec2 .videoArea .figVideo video {
  aspect-ratio: 4 / 3;
}
#mainContents #sec2 .btnArea {
  position: relative;
}
#mainContents #sec2 .btnArea .txtArea {
  width: 100%;
  position: absolute;
  z-index: 2;
  top: 6.6666vw;
  left: 0;
}
@media screen and (min-width:751px) {
  #mainContents #sec2 .btnArea .txtArea {
    top: 50px;
  }
}
#mainContents #sec2 .btnArea .txtArea .btn {
  width: 81.867%;
  margin: 0 auto .5em;
}
#mainContents #sec2 .btnArea .bg {
  position: relative;
  z-index: 1;
}


#mainContents #sec3 a {
  color: #000;
}
#mainContents #sec3 .bg {
  padding: 2.6666vw 0 9.3333vw;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .bg {
    padding: 2.667% 0px 9.334%;
  }
}
.webp #mainContents #sec3 .bg {
  background-image: url(../images/sec3_bg1.webp);
}
.no-webp #mainContents #sec3 .bg {
  background-image: url(../images/sec3_bg1.jpg);
}
#mainContents #sec3 .secTtl {
  margin: 0 auto 66.4vw;
  position: relative;
  z-index: 2;
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .secTtl {
    margin-bottom: 65.6%;
  }
}
#mainContents #sec3.js-inView .secTtl {
  top: 1em;
  opacity: 0;
  transition: all .5s;
}
#mainContents #sec3.js-inView.in-view .secTtl {
  top: 0;
  opacity: 1;
}
#mainContents #sec3 .txtArea1 {
  width: 100%;
  margin: 0 auto 1em;
  position: absolute;
  top: 26vw;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  overflow: hidden;
}
@media screen and (min-width:751px) {
  #mainContents #sec3 .txtArea1 {
    top: 21.833%;
  }
}
#mainContents #sec3.js-inView .txtArea1 {
  opacity: 0;
  transition: opacity 1s;
  transition-delay: .5s;
}
#mainContents #sec3.js-inView.in-view .txtArea1 {
  opacity: 1;
}
#mainContents #sec3.js-inView.in-view .txtArea1.js-rotate .js-rotate__item {
  animation: js-rotate .8s cubic-bezier(.61,.35,.74,.49);
  animation-delay: .5s;
  opacity: 1;
  will-change: transform;
}
@keyframes js-rotate {
  0% {
    opacity: 0;
    transform: rotate(180deg) scale(0);
  }
  .1% {
    opacity: 1;
  }
  92% {
    transform: rotate(720deg) scale(.8);
  }
  92% {
    transform: rotate(720deg) scale(1);
  }
  96% {
    transform: rotate(720deg) scale(1.1);
  }
  100% {
    transform: rotate(720deg) scale(1);
  }
}
#mainContents #sec3 .txtArea1 .txt {
  width: 94.667%;
  margin: 0 auto;
  display: block;
}
#mainContents #sec3 .noteArea1 {
  padding: 0 1em;
  text-align: right;
}
#mainContents #sec3 .noteArea1 .note {
  text-align: left;
  display: inline-block;
}


#mainContents #sec4 {
  position: relative;
  z-index: 1;
}
#mainContents #sec4 .secTtlArea {
  position: relative;
}
#mainContents #sec4 .secTtlArea .secTtl {
  position: relative;
  z-index: 1;
}
#mainContents #sec4 .secTtlArea .note {
  line-height: 1.4;
  position: absolute;
  bottom: 1.3333vw;
  left: 4.6666vw;
  z-index: 2;
}
@media screen and (min-width:751px) {
  #mainContents #sec4 .secTtlArea .note {
    bottom: 10px;
    left: 35px;
  }
}
#mainContents #sec4 .bg1 {
  padding: 2vw 0 4.6666vw;
  background: url(../images/sec4_bg1.jpg) no-repeat center top / cover;
}
@media screen and (min-width:751px) {
  #mainContents #sec4 .bg1 {
    padding: 1.867% 0 4.6667%;
  }
}
#mainContents #sec4 .secrets .ttlArea {
  margin: 0 0 -1em;
  overflow: hidden;
}
#mainContents #sec4 .secrets .ttlArea .ttl {
  width: 104.2666vw;
  position: relative;
  left: -2.6666vw;
}
@media screen and (min-width:751px) {
  #mainContents #sec4 .secrets .ttlArea .ttl {
    width: 104.267%;
    left: -2.667%;
  }
}
.webp #mainContents #sec4 .secrets .ttlArea .ttl .js-glitch {
  width: 100%;
  aspect-ratio: 35 / 22;
  overflow: hidden;
}
.webp #mainContents #sec4 .secrets .ttlArea .ttl .js-glitch_item {
  background-image: url(../images/sec4_img2.webp);
}
.no-webp #mainContents #sec4 .secrets .ttlArea .ttl .js-glitch_item {
  background-image: url(../images/sec4_img2.png);
}
#mainContents #sec4 .secrets .secret {
  padding: 6em 0 1em;
  position: relative;
}
#mainContents #sec4 .secrets .secret .ttlArea2 {
  width: 100%;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.webp #mainContents #sec4 .secrets .secret .ttlArea2 .js-glitch {
  overflow: hidden;
}
.webp #mainContents #sec4 .secrets .secret1 .ttlArea2 .js-glitch {
  width: 100%;
  aspect-ratio: 75 / 32;
}
.webp #mainContents #sec4 .secrets .secret1 .ttlArea2 .js-glitch_item {
  background-image: url(../images/sec4_img3.webp);
}
.no-webp #mainContents #sec4 .secrets .secret1 .ttlArea2 .js-glitch_item {
  background-image: url(../images/sec4_img3.png);
}
.webp #mainContents #sec4 .secrets .secret2 .ttlArea2 .js-glitch {
  width: 100%;
  aspect-ratio: 75 / 29;
}
.webp #mainContents #sec4 .secrets .secret2 .ttlArea2 .js-glitch_item {
  background-image: url(../images/sec4_img5.webp);
}
.no-webp #mainContents #sec4 .secrets .secret2 .ttlArea2 .js-glitch_item {
  background-image: url(../images/sec4_img5.png);
}
.webp #mainContents #sec4 .secrets .secret3 .ttlArea2 .js-glitch {
  width: 100%;
  aspect-ratio: 3 / 1;
}
.webp #mainContents #sec4 .secrets .secret3 .ttlArea2 .js-glitch_item {
  background-image: url(../images/sec4_img7.webp);
}
.no-webp #mainContents #sec4 .secrets .secret3 .ttlArea2 .js-glitch_item {
  background-image: url(../images/sec4_img7.png);
}
#mainContents #sec4 .secrets .secret .secret_cnt {
  position: relative;
  z-index: 1;
}
#mainContents #sec4 .secrets .secret .figImg {
  margin: 0 0 1.5em;
  position: relative;
  z-index: 1;
}
#mainContents #sec4 .secrets .secret .btnArea {
  width: 89.334%;
  margin: 0 auto;
  position: absolute;
  top: 75%;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}
#mainContents #sec4 .secrets .secret .noteArea {
  color: #fff;
}

#mainContents #sec4 .secrets .secret1 .btnArea {
  top: 75%;
}
#mainContents #sec4 .secrets .secret1 {
  padding-bottom: 0;
}
#mainContents #sec4 .secrets .secret2 {
  padding-bottom: 1.5em;
}
#mainContents #sec4 .secrets .secret3 {
  padding-top: 1em;
}
#mainContents #sec4 .btnArea2 {
  padding: 1em 0 0;
}
#mainContents #sec4 .btnArea2 .btn {
  width: 100%;
  margin: 0 auto;
}
#mainContents #sec4 .secrets .secret .btn.shake {
  margin: 0 auto;
  animation: shake .1s ease-in-out infinite;
}
@keyframes shake {
  0%, 100% {
    transform: translate(0, 0) rotateZ(0);
  }
  25% {
    transform: translate(2px, 2px) rotateZ(1deg);
  }
  50% {
    transform: translate(0, 2px) rotateZ(0);
  }
  75% {
    transform: translate(2px, 0) rotateZ(-1deg);
  }
}


#mainContents #sec5 {
  position: relative;
  z-index: 2;
}
#mainContents #sec5 .bg1 {
  padding: 0 0 .5em;
  background: url(../images/sec5_bg1.jpg) no-repeat center top #000;
  background-size: 100% auto;
}
#mainContents #sec5 .secTtlArea {
  margin-bottom: 50vw;
  position: relative;
  z-index: 2;
}
@media screen and (min-width:751px) {
  #mainContents #sec5 .secTtlArea {
    margin-bottom: 50%;
    margin-bottom: min(50%, 375px);
  }
}
#mainContents #sec5.js-inView .secTtlArea {
  transition: opacity .5s;
  opacity: 0;
}
#mainContents #sec5.js-inView.in-view .secTtlArea {
  opacity: 1;
}
#mainContents #sec5 .secTtlArea .secTtl {
  position: relative;
  top: -.8em;
}
#mainContents #sec5 .ufo {
  width: 52%;
  position: absolute;
  top: 49.3333vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
@media screen and (min-width:751px) {
  #mainContents #sec5 .ufo {
    top: 240px;
  }
}
#mainContents #sec5 .ufo .ufo_unit {
  width: 100%;
}
#mainContents #sec5.js-inView .ufo .ufo_unit {
  opacity: 0;
}
#mainContents #sec5 .ufo .ufo_1 {
  position: relative;
  z-index: 1;
}
#mainContents #sec5.js-inView .ufo .ufo_1 {
  transition: opacity .5s;
  transition-delay: .3s;
}
#mainContents #sec5.js-inView.in-view .ufo .ufo_1 {
  opacity: 1;
}
#mainContents #sec5 .ufo .ufo_2 {
  position: absolute;
  top: 74%;
  z-index: 2;
}
#mainContents #sec5.js-inView .ufo .ufo_2 {
  transition: opacity 0s;
  transition-delay: 1s;
}
#mainContents #sec5.js-inView.in-view .ufo .ufo_2 {
  opacity: 1;
}
#mainContents #sec5.js-inView.in-view .ufo .ufo_2 .clip {
  clip-path: ellipse(200% 200% at 50% 0%);
  animation: clip .2s cubic-bezier(.88,-0.01,1,.56);
  animation-delay: 1s;
}
@keyframes clip {
  0% {
    clip-path: ellipse(200% 0 at 50% 0%);
  }
  100% {
    clip-path: ellipse(200% 200% at 50% 0%);
  }
}
#mainContents #sec5 .ufo .ufo_3 {
  position: absolute;
  top: 143%;
  z-index: 3;
}
#mainContents #sec5.js-inView .ufo .ufo_3 {
  transition: opacity 0s;
  transition-delay: 1.5s;
}
#mainContents #sec5.js-inView.in-view .ufo .ufo_3 {
  opacity: 1;
}
#mainContents #sec5.js-inView.in-view .ufo .ufo_3 .js-floating {
  position: relative;
  top: 0;
  animation: floating 4s cubic-bezier(.35,.83,.34,1);
  animation-delay: 1.5s;
  opacity: 1;
}
@keyframes floating {
  0% {
    top: 33.3333vw;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    top: 0;
  }
}
@media screen and (min-width:751px) {
  @keyframes floating {
    0% {
      top: 250px;
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    100% {
      top: 0;
    }
  }
}
#mainContents #sec5 .mysteries {
  position: relative;
  z-index: 2;
}
#mainContents #sec5.js-inView .mysteries {
  opacity: 0;
  transition: opacity 1s;
  transition-delay: 1.3s;
}
#mainContents #sec5.js-inView.in-view .mysteries {
  opacity: 1;
}
#mainContents #sec5 .mysteries .mystery {
  margin: 0 auto 5em;
  padding-bottom: 3em;
  background: url(../images/sec5_bg2_1.png) no-repeat center top;
  background-size: 100% auto;
  position: relative;
}
#mainContents #sec5 .mysteries .mystery::after {
  content: "";
  width: 100%;
  height: 10.6666vw;
  background: url(../images/sec5_bg2_2.png) no-repeat center;
  background-size: 100% auto;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  transform: translateY(50%);
}
@media screen and (min-width:751px) {
  #mainContents #sec5 .mysteries .mystery::after {
    height: 80px;
  }
}
#mainContents #sec5 .mysteries .mystery .ttlArea {
  width: 76%;
  margin: 0 auto;
}
#mainContents #sec5 .mysteries .mystery .ttlArea .ttl {
  position: relative;
  top: -1em;
}
#mainContents #sec5 .mysteries .mystery .mystery_cont {
  width: 84%;
  margin: 0 auto;
}
#mainContents #sec5 .mysteries .mystery .btn {
  width: 8.2666vw;
  height: 8.2666vw;
  border: .5333vw solid #fff;
  border-radius: 50%;
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  box-shadow: .2666vw .5333vw 0 0 rgba(0,0,0,.5);
  transform: translate(-50%, -100%);
  cursor: pointer;
}
@media screen and (min-width:751px) {
  #mainContents #sec5 .mysteries .mystery .btn {
    width: 62px;
    height: 62px;
    border: 4px solid #fff;
    box-shadow: 2px 4px 0 0 rgba(0,0,0,.5);
  }
}
#mainContents #sec5 .mysteries .mystery .btn::before {
  content: "";
  width: 4vw;
  height: 2.2666vw;
  background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%20data-name%3D%22%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2031.4%2018.24%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23fff%3B%20stroke-miterlimit%3A%2010%3B%20stroke-width%3A%205px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpolyline%20class%3D%22cls-1%22%20points%3D%2229.7%2016.41%2015.7%203.41%201.7%2016.41%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
  background-size: 100% auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  transition: all .3s;
}
@media screen and (min-width:751px) {
  #mainContents #sec5 .mysteries .mystery .btn::before {
    width: 30px;
    height: 17px;
  }
}
#mainContents #sec5 .mysteries .mystery.active .btn::before {
  transform: translate(-50%, -50%) rotate(0);
}
#mainContents #sec5 .mysteries .mystery .btn:hover::before {
  margin-top: .3em;
}
#mainContents #sec5 .mysteries .mystery.active .btn:hover::before {
  margin-top: -.3em;
}
#mainContents #sec5 .mysteries .mystery1 .btn {
  background-color: #ad0000;
}
#mainContents #sec5 .mysteries .mystery2 .btn {
  background-color: #0071bc;
}
#mainContents #sec5 .mysteries .mystery3 .btn {
  background-color: #008745;
}


#mainContents #sec6 .bg1 {
  padding: 10vw 0 8vw;
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #000;
  background-size: 100% auto;
  position: relative;
}
@media screen and (min-width:751px) {
  #mainContents #sec6 .bg1 {
    padding: 10% 0 8%;
  }
}
.webp #mainContents #sec6 .bg1 {
  background-image: url(../images/sec6_bg1.webp);
}
.no-webp #mainContents #sec6 .bg1 {
  background-image: url(../images/sec6_bg1.jpg);
}
#mainContents #sec6 .secTtl {
  margin-bottom: 59.3333vw;
}
@media screen and (min-width:751px) {
  #mainContents #sec6 .secTtl {
    margin-bottom: 59.334%;
  }
}
.webp #mainContents #sec6 .secTtl .js-glitch {
  width: 100%;
  aspect-ratio: 25 / 4;
  overflow: hidden;
}
.webp #mainContents #sec6 .secTtl .js-glitch_item {
  background-image: url(../images/sec6_img1.webp);
}
.no-webp #mainContents #sec6 .secTtl .js-glitch_item {
  background-image: url(../images/sec6_img1.png);
}
#mainContents #sec6 .videoArea {
  width: 85.713%;
  aspect-ratio: 551 / 395;
  position: absolute;
  top: 15.0666vw;
  left: 7.7333vw;
}
@media screen and (min-width:751px) {
  #mainContents #sec6 .videoArea {
    top: 9%;
    left: 8.3%;
  }
}
#mainContents #sec6 .videoArea .tvFrame {
  position: relative;
  z-index: 2;
}
#mainContents #sec6 .videoArea .video {
  width: 50.6666vw;
  aspect-ratio: 43 / 34;
  position: absolute;
  top: 2.6666vw;
  left: 2.6666vw;
  z-index: 1;
}
@media screen and (min-width:751px) {
  #mainContents #sec6 .videoArea .video {
    width: 68.966%;
    top: 20px;
    left: 20px;
  }
}
#mainContents #sec6 .videoArea .video video {
  width: 100%;
}
.webp #mainContents #sec6 .txtArea1 .js-glitch {
  width: 100%;
  aspect-ratio: 75 / 43;
}
.webp #mainContents #sec6 .txtArea1 .js-glitch_item {
  background-image: url(../images/sec6_img2.webp);
}
.no-webp .webp #mainContents #sec6 .txtArea1 .js-glitch_item {
  background-image: url(../images/sec6_img2.png);
}
#mainContents #sec6 .btn_tv {
  margin-bottom: 3em;
  position: relative;
}
#mainContents #sec6 .btn_tv .btn_tv__list {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt {
  position: absolute;
  overflow: hidden;
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt .btnArea {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt button {
  width: 100%;
  height: 100%;
  display: block;
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt .txt {
  width: 100%;
  height: 100%;
  display: block;
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt1 {
  width: 43.734%;
  aspect-ratio: 328 / 325;
  top: 5.13%;
  left: 16%;
  clip-path: polygon(0 10.6666vw, 88% 0, 100% 80%, 10% 100%);
}
@media screen and (min-width:751px) {
  #mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt1 {
    clip-path: polygon(0 80px, 88% 0, 100% 80%, 10% 100%);
  }
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt1 .txt {
  margin-left: 9.15%;
  padding-top: 3.05%;
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt2 {
  width: 42.667%;
  aspect-ratio: 4 / 3;
  top: 56.411%;
  left: 3.334%;
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt2 .txt {
  margin-left: 4.69%;
  padding-top: 12.5%;
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt3 {
  width: 40%;
  aspect-ratio: 6 / 5;
  top: 48.077%;
  right: 3.334%;
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt3 .txt {
  margin-left: 3.334%;
  padding-top: 10%;
}
@keyframes blink{
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt .txt.blinking {
  opacity: 0;
  animation:blink 4s ease-in-out infinite alternate;
  animation-delay: 3s;
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt2 .txt.blinking {
  animation-delay: 3.5s;
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt3 .txt.blinking {
  animation-delay: 4s;
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt .js-glitch {
  width: 100%;
  height: 100%;
  display: block;
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt .js-glitch .js-glitch_item {
  width: 100%;
  height: 100%;
  display: block;
  background-position: left center;
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt1 .js-glitch .js-glitch_item {
  background-size: 33.4666vw auto;
}
@media screen and (min-width:751px) {
  #mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt1 .js-glitch .js-glitch_item {
    background-size: 68% auto;
  }
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt2 .js-glitch .js-glitch_item {
  background-size: 40.5333vw auto;
}
@media screen and (min-width:751px) {
  #mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt2 .js-glitch .js-glitch_item {
    background-size: 91% auto;
  }
}
#mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt3 .js-glitch .js-glitch_item {
  background-size: 37.3333vw auto;
}
@media screen and (min-width:751px) {
  #mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt3 .js-glitch .js-glitch_item {
    background-size: 85% auto;
  }
}
.webp #mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt1 .js-glitch .js-glitch_item {
  background-image: url(../images/sec6_img4.webp);
}
.no-webp #mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt1 .js-glitch .js-glitch_item {
  background-image: url(../images/sec6_img4.png);
}
.webp #mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt2 .js-glitch .js-glitch_item {
  background-image: url(../images/sec6_img5.webp);
}
.no-webp #mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt2 .js-glitch .js-glitch_item {
  background-image: url(../images/sec6_img5.png);
}
.webp #mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt3 .js-glitch .js-glitch_item {
  background-image: url(../images/sec6_img6.webp);
}
.no-webp #mainContents #sec6 .btn_tv .btn_tv__list .btn_tv__txt.txt3 .js-glitch .js-glitch_item {
  background-image: url(../images/sec6_img6.png);
}

#mainContents #sec6 .btn_tv .figImg {
  position: relative;
  z-index: 1;
}
#mainContents #sec6 .btnArea .btn {
  width: 47.2%;
  margin: 0 auto;
}



/* ---------------------------------------------
#pageFooter
--------------------------------------------- */
#pageFooter {
  padding: 2em 0;
  text-align: center;
  background-color: #fff;
}
#pageFooter .name,
#pageFooter .add {
  font-weight: 600;
}
#pageFooter .add {
  margin-bottom: 1em;
}
#pageFooter .footerNav {
  margin: 0 0 2em;
  text-align: center;
}
#pageFooter .footerNav ul {
  display: flex;
  justify-content: center;
}
#pageFooter .footerNav ul li {
  margin: 0 1em;
  padding: 0;
}
#pageFooter .footerNav ul li a:link,
#pageFooter .footerNav ul li a:visited {
  color: #000;
}
#pageFooter .copyright {
  font-size: 2vw;
}
@media screen and (min-width:751px) {
  #pageFooter .copyright {
    font-size: 14px;
  }
}


/* ---------------------------------------------
floatingBtn
--------------------------------------------- */
.floatingBtn {
  width: 26.4vw;
  position: fixed;
  right: 2.6666vw;
  bottom: 2.6666vw;
  z-index: 2;
  animation: upDown 2s infinite ease;
}
@media screen and (min-width:751px) {
  .floatingBtn {
    width: 198px;
    right: 20px;
    bottom: 20px;
  }
}
@media screen and (min-width:1186px) {
  .floatingBtn {
    right: auto;
    left: calc(50% + 395px);
  }
}
@keyframes upDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
}


/* ---------------------------------------------
micromodal
--------------------------------------------- */
@keyframes mmfadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes mmfadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}
@keyframes mmslideIn {
  from {transform: translateY(15%);}
  to {transform: translateY(0);}
}
@keyframes mmslideOut {
  from {transform: translateY(0);}
  to {transform: translateY(-10%);}
}
.modal {
  display: none;
  position: relative;
  z-index: 1000;
}
.modal.is-open {
  display: block;
}
.modal[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.modal[aria-hidden="false"] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.modal[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.modal[aria-hidden="true"] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.modal .modal__container,
.modal .modal__overlay {
  will-change: transform;
}
.modal .modal__container {
  position: relative;
}
.modal__overlay {
  background: rgba(0, 0, 0, .7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal__container {
  width: 100%;
  max-height: 100vh;
  overflow-y: auto;
}
@media screen and (min-width:751px) {
  .modal__container {
    width: 500px;
  }
}
.modal .stickyArea {
  text-align: right;
  position: sticky;
  top: 0;
  z-index: 2;
}
.modal .modal__close {
  white-space: nowrap;
  font-size: 2vw;
  font-weight: 600;
  border: 0;
  position: absolute;
  outline: 0;
  cursor: pointer;
}
@media screen and (min-width:751px) {
  .modal .modal__close {
    font-size: 13px;
  }
}
.modal .modal__close:before {
  content: "\2715";
  line-height: 1;
  font-weight: 300;
  font-size: 6.6666vw;
  display: block;
  transition: transform .2s;
}
@media screen and (min-width:751px) {
  .modal .modal__close:before {
    font-size: 33px;
  }
}
.modal .modal__close:hover:before {
  transform: scale(.8);
}
.modal .modal_cont {
  width: 100%;
  position: relative;
  left: 0;
  z-index: 1;
}

.modal.sec2_modal .modal__container {
  overflow: visible;
}
.modal.sec2_modal .stickyArea {
  position: absolute;
  top: -10.6666vw;
  right: 0;
}
@media screen and (min-width:751px) {
  .modal.sec2_modal .stickyArea {
    top: 0;
    right: -60px;
  }
}
.modal.sec2_modal .modal__close {
  color: #fff;
  top: 0em;
  right: .5em;
}

.modal.sec4_modal .modal__close {
  top: 2.5em;
  right: 5em;
}
@media screen and (min-width:751px) {
  .modal.sec4_modal .modal__close {
    right: 3em;
  }
}
.modal.sec6_modal .modal__close {
  color: #fff;
  top: 0em;
  right: .5em;
}
.modal.sec6_modal .modal_cont {
  padding: 1em 0;
  text-align: center;
  background-color: rgba(0, 0, 0, .7);
  position: relative;
}
.modal.sec6_modal .modal_cont::after {
  content: '';
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  filter: grayscale(1) opacity(.15);
}
.webp .modal.sec6_modal .modal_cont::after {
  background-image: url(../images/sec_character_bg1.webp);
}
.no-webp .modal.sec6_modal .modal_cont::after {
  background-image: url(../images/sec_character_bg1.jpg);
}
.modal.sec6_modal .modal_cont .modal_cont_inner {
  position: relative;
  z-index: 2;
}
.modal.sec6_modal .modal_cont .ttlArea {
  width: 55vw;
  margin: 0 auto;
  padding: 1em 0 .5em;
}
@media screen and (min-width:751px) {
  .modal.sec6_modal .modal_cont .ttlArea {
    width: 55%;
  }
}
.modal.sec6_modal .modal_cont .figVideo {
  width: 83vw;
  margin: 0 auto 1em;
}
@media screen and (min-width:751px) {
  .modal.sec6_modal .modal_cont .figVideo {
    width: 75%;
  }
}
.modal.sec6_modal .modal_cont .btnArea {
  width: 53.3333vw;
  margin: 0 auto;
}
@media screen and (min-width:751px) {
  .modal.sec6_modal .modal_cont .btnArea {
    width: 50%;
  }
}


/* ---------------------------------------------
bg layers
--------------------------------------------- */
.bg_lay {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}
.bg_lay2 {
  z-index: -2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media screen and (max-width:750px) {
  .bg_lay2 {
    display: none;
  }
}
@media screen and (min-width:751px) {
  .webp .bg_lay2 {
    background-image: url(../images/bg_lay_img.webp);
  }
  .no-webp .bg_lay2 {
    background-image: url(../images/bg_lay_img.jpg);
  }
}