@charset "UTF-8";
/*------------------------------------------------------------------------------------------------

            Reset CSS

------------------------------------------------------------------------------------------------*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
/*
body {
  line-height: 1;
}
*/
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after {
  content: "";
  content: none;
}
q:before, q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html, body {
  margin: 0;
  padding: 0;
  font-family: "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
  width: 100%;
  -webkit-text-size-adjust: 100%;
  background-color: #FFF2F2;
}
img {
  width: 100%;
  vertical-align: bottom;
}
div, p, h1, h2 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
a:link, a:active, a:visited {
  text-decoration: none;
}
ol, ul {
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
  /*  letter-spacing: -.40em;*/
}
ol > li, ul > li {
  letter-spacing: normal;
}
/* ClearFix */
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}
.tac {
  text-align: center;
}
.front {
     flex: 1;
  position: relative;
  z-index: 100;
  display: flex;
  flex-direction: column;
    height: 100%;
}
#hit_msg {
flex: 1;
    display: flex;
    flex-direction: column;
}
.wrapper {
  position: relative;
  min-height: 100vh;
  background: url("./bg.webp") center top / cover no-repeat;
  overflow: hidden;
}
.wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1170 / 780 * 100vw);
  height: calc(995 / 780 * 100vw);
  background: url("./earth.webp") center bottom / cover no-repeat;
  filter:
    drop-shadow(0 0 10px rgba(180, 220, 255, .7)) drop-shadow(0 0 30px rgba(180, 220, 255, .5)) drop-shadow(0 0 60px rgba(180, 220, 255, .3));
}
.wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: calc(262 / 780 * 100vw);
  height: calc(230 / 780 * 100vw);
  background: url("./a_img2.webp") center top / cover no-repeat;
}
.wrapper2 {
  position: relative;
  min-height: 100vh;
  background: url("./bg.webp") center top / cover no-repeat;
  overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.wrapper2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1010 / 780 * 100vw);
  height: calc(995 / 780 * 100vw);
  background: url("./earth.webp") center bottom / cover no-repeat;
  filter:
    drop-shadow(0 0 10px rgba(180, 220, 255, .7)) drop-shadow(0 0 30px rgba(180, 220, 255, .5)) drop-shadow(0 0 60px rgba(180, 220, 255, .3));
}
.wrapper3 {
  position: relative;
  min-height: 100vh;
  background: url("./bg.webp") center top / cover no-repeat;
  overflow: hidden;
}
.wrapper3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1150 / 780 * 100vw);
  height: calc(995 / 780 * 100vw);
  background: url("./earth.webp") center bottom / cover no-repeat;
  filter:
    drop-shadow(0 0 10px rgba(180, 220, 255, .7)) drop-shadow(0 0 30px rgba(180, 220, 255, .5)) drop-shadow(0 0 60px rgba(180, 220, 255, .3));
}
.txt1 {
  width: calc(530 / 780 * 100vw);
  margin: 0 auto;
}
.txt1 {
  display: flex;
  align-items: center;
  padding-right: 10vw;
  padding: 10vw 12vw 0 0;
}
.dots {
  display: flex;
  gap: 1.5vw;
  margin-top: 14vw;
  margin-left: -4vw;
}
.dots span {
  width: 2.5vw;
  height: 2.5vw;
  background: #062150;
  border: 1px solid #f0fcff;
  border-radius: 9999px;
  opacity: 0;
  box-shadow: 0 0 5px #095Ae7, 0 0 15px #095Ae7, 0 0 30px #095Ae7;
}
.dots span:nth-child(1) {
  animation: dot1 1.5s infinite;
}
.dots span:nth-child(2) {
  animation: dot2 1.5s infinite;
}
.dots span:nth-child(3) {
  animation: dot3 1.5s infinite;
}
@keyframes dot1 {
  0% {
    opacity: 0;
  }
  25%, 100% {
    opacity: 1;
  }
}
@keyframes dot2 {
  0%, 25% {
    opacity: 0;
  }
  50%, 100% {
    opacity: 1;
  }
}
@keyframes dot3 {
  0%, 50% {
    opacity: 0;
  }
  75%, 100% {
    opacity: 1;
  }
}
.tShadow {
  text-shadow:
    0 1px 2px #000, 0 2px 4px #000;
}
.txt2 {
  font-size: calc(16 / 390 * 100vw);
  color: #FFF;
  text-align: center;
  margin: 1em auto 1em;
    position: relative;
    z-index: 10;
}
.txt3 {
    display: none;
  font-size: calc(16 / 390 * 100vw);
  color: #FFF;
  text-align: center;
  margin: 1em auto 1em;
    position: relative;
    z-index: 10;
}
.redBox {
    flex: 1;
  background-color: #FF0033;
  padding: calc(20 / 390 * 100vw) calc(15 / 390 * 100vw) calc(30 / 390 * 100vw)
}
.tBox {
  padding: calc(20 / 390 * 100vw) calc(15 / 390 * 100vw) calc(30 / 390 * 100vw)
}
.tBox {
  display: none;
  transition: opacity 0.5s ease;
}

.show {
  display: block;
}
.hide {
  display: none;
}
.box2 {
  text-align: center;
}

.wrapper2 {
  position: relative;
  z-index: 1;
}
.wrapper2::before {
  animation: aura 4s ease-in-out infinite;
}

@keyframes aura {
  0%, 100% {
    transform: translateY(0) scale(0.95);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-2vw) scale(1.08);
    opacity: 1;
  }
}
.item {
  width: calc(450 / 780 * 100vw);
  margin: 0 auto;
}
.item {
  animation: firstPrize 0.7s ease-out forwards;
}
@keyframes firstPrize {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
  70% {
    transform: scale(0.9);
  }
  85% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.head {
  width: calc(638 / 780 * 100vw);
  margin: calc(30 / 390 * 100vw) auto calc(20 / 390 * 100vw) ;
}
.img1 {
  width: calc(606 / 780 * 100vw);
  margin: calc(25 / 780 * 100vw) auto;
}
.img2 {
  width: calc(574 / 768 * 100vw);
  margin: calc(32 / 768 * 100vw) auto calc(74 / 768 * 100vw);
}
.img3 {
  width: calc(701 / 768 * 100vw);
  margin: 0 auto;
}
.img4 {
  width: calc(780 / 780 * 100vw);
  margin: calc(50 / 390 * 100vw) auto 0;
}
.img5 {
  width: calc(701 / 780 * 100vw);
  margin: calc(30 / 390 * 100vw) auto 0;
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}
.img2 {
  animation: float 2.5s ease-in-out infinite;
}
.videoWrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.videoWrap iframe {
  width: 100%;
  height: 100%;
}