@charset "utf-8";

/* -----reset----- */

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fdfdfd;
  font-family: "M PLUS 2", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 24px;
  line-height: 2.4rem;
}

rt {
  font-size: 14px;
}

ul li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: inherit;
}

/* -----syling from here!!!!----- */

/* -----common----- */

.for-adult,
.for-adult p {
  font-size: 18px;
  line-height: 1.8rem;
}

.img-circle {
  display: block;
  border-radius: 100%;
}

main {
  background-color: #052544;
}

.button01 {
  width: 100%;
  border: #0dedfa solid 5px;
  background-color: #052544;
  border-radius: 80px;
  margin-top: 45px;
  padding: 30px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.button01:hover {
  border: #fff352 solid 5px;
  background-color: #cd74ef;
}

/* -----header----- */
header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  z-index: 99999;
}

h1 {
  width: 300px;
  padding: 0 40px;
  margin: auto 0;
}

/* -----menu----- */
#menu-btn {
  display: none;
}

.btn span img {
  cursor: pointer;
  width: 120px;
  position: fixed;
  top: 40px;
  right: 40px;
  z-index: 999;
}

.g-nav {
  position: fixed;
  top: 0;
  right: -200%;
  width: 100%;
  height: 100vh;
  background-color: #052544f9;
  z-index: 100;
  transition: 0.7s ease-in-out;
}

.g-nav li img {
  width: 120px;
}

#menu-btn:checked ~ .g-nav {
  right: 0;
}

.menu-area {
  position: relative;
}

.g-nav::before {
  content: "";
  border: solid 1px #f2f2f2;
  display: block;
  width: 450px;
  height: 450px;
  border-radius: 100%;
  position: absolute;
  top: -140px;
  right: -140px;
}

.g-nav::after {
  content: "";
  border: solid 1px #f2f2f2;
  display: block;
  width: 650px;
  height: 650px;
  border-radius: 100%;
  position: absolute;
  top: -240px;
  right: -240px;
}

.menu-area::before {
  content: "";
  border: solid 1px #f2f2f2;
  display: block;
  width: 925px;
  height: 925px;
  border-radius: 100%;
  position: absolute;
  top: -390px;
  right: -390px;
}

.menu-area::after {
  content: "";
  border: solid 1px #f2f2f2;
  display: block;
  width: 1200px;
  height: 1200px;
  border-radius: 100%;
  position: absolute;
  top: -540px;
  right: -540px;
}

.g-nav li:first-of-type {
  position: absolute;
  top: 80px;
  right: 235px;
  z-index: 600;
}

.g-nav li:nth-of-type(2) {
  position: absolute;
  top: 350px;
  right: 80px;
  z-index: 600;
}

.g-nav li:nth-of-type(3) {
  position: absolute;
  top: 280px;
  right: 400px;
  z-index: 600;
}

.g-nav li:nth-of-type(4) {
  position: absolute;
  top: 480px;
  right: 350px;
  z-index: 600;
}

.btn img:hover,
.menu-area li:hover{
  filter: drop-shadow(1px 1px 8px #fff);
}


/* -----main----- */

.main-wrap {
  width: 1200px;
}

.main-area-index {
  background-color: #052544;
  background-image: url(../img/bg/daark-bg-indexpage-top.png);
  background-repeat: no-repeat;
  position: relative;
}

.first-illust {
  position: relative;
  width: 100%;
  height: 50vh;
}

.first-illust img:first-of-type {
  width: 55%;
  position: absolute;
  top: -5vh;
  left: -30px;
  z-index: 100;
}

.first-illust img:nth-of-type(2) {
  width: 55%;
  position: absolute;
  top: 20px;
  right: 0;
  z-index: 100;
}

/* .first-illust img:nth-of-type(4){
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 1;
} */

.first-view {
  display: block;
  width: 100%;
  height: 400px;
  /* background-color: blue; */
  position: relative;
}

.first-view img {
  width: 25%;
  position: absolute;
  top: 0px;
  left: -5%;
  z-index: 150;
}

.first-view h2 img {
  width: 55%;
  position: absolute;
  top: -5vh;
  left: 10%;
  z-index: 200;
}

/* -----line-up----- */
.line-up-area {
  background-color: #98dce4;
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 1000px;
  z-index: 10;
}

.line-up-area::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 1070 / 421;
  background-image: url(../img/bg/blue-bg-top.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  position: absolute;
  bottom: 100%;
  z-index: 1;
}

.line-up-area::after {
  content: "";
  display: block;
  width: 100%;
  min-height: 1500px;
  background-image: url(../img/bg/blue-bg-bottom.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center top;
  position: absolute;
  top: 100%;
  z-index: -1;
}

.line-up {
  width: 90%;
  min-width: 1200px;
  margin: 0 auto;
}

.greeting,
.greeting ruby {
  padding-top: 200px;
  text-align: center;
  font-size: 40px;
}

.greeting span,
.greeting span ruby {
  font-weight: 900;
  color: #fff352;
  font-size: 60px;
  z-index: 10;
}

.greeting span ruby rt {
  color: #fff352;
}

.line-up02 {
  display: flex;
  max-height: 1200px;
  z-index: 100;
}

.tentaikansoku-area {
  background-image: url(../img/other/mokumoku-yellow.png),
    url(../svg/index/orange-circle.svg);
  background-size: 20%, 80%;
  background-repeat: no-repeat;
  background-position: 120px 150px, center 220px;
  width: 50%;
  position: relative;
  z-index: 50;
}

.tentaikansoku-area-img {
  background-image: url(../photo/star-photo1.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  width: 35%;
  border-radius: 50%;
  position: absolute;
  top: 700px;
  left: 2%;
  z-index: 50;
}

.tentaikansoku-area h3 img {
  margin: 40% 0 0 25%;
}

.tentaikansoku-area p {
  padding: 30px 0 0 180px;
}

.planetarium-area {
  background-image: url(../img/other/mokumoku-blue.png),
    url(../svg/index/purple-circle.svg), url(../img/star/earth.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 25%, 80%, 15%;
  background-position: 150px 700px, center 100px, 700px 80px;
  width: 50%;
  position: relative;
  z-index: 50;
}

.planetarium-area-img {
  background-image: url(../photo/planetarium1.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  width: 40%;
  border-radius: 50%;
  position: absolute;
  top: 40%;
  right: 0%;
}

.planetarium-area .make-circle p {
  display: block;
  padding: 10px 0 0 200px;
}

.stamprally-area {
  width: 100%;
  background-image: url(../img/other/mokumoku-pink.png),
    url(../svg/index/green-circle.svg), url(../img/star/blue-star.png);
  background-size: 10%, 40%, 10%;
  background-repeat: no-repeat;
  background-position: 60% 27%, center top, 98% 15%;
  margin: 0 auto;
  position: relative;
  top: -200px;
}

.make-circle {
  width: 100%;
  height: 100%;
  padding-bottom: 100%;
  position: relative;
  z-index: 10;
}

.make-circle h3 img {
  width: 50%;
}

.planetarium-area h3 img {
  margin: 30% 0 0 25%;
}

.stamprally-area h3 img {
  margin: 6% 38% 0%;
  width: 25%;
}
.stamprally-area ul {
  display: flex;
  flex-direction: row;
  width: 39%;
  margin: 0 auto 0;
}

.stamprally-area .make-circle ul li:first-child {
  width: 58%;
}

.stamprally-area .make-circle ul li p {
  display: block;
  position: relative;
  top: 0;
  left: 0;
}

/* -----index-game----- */
.index-game {
  margin-top: 1000px;
  display: flex;
  background-image: url(../img/star/mars.png), url(../img/star/jupiter.png);
  background-repeat: no-repeat;
  background-size: 5%, 30%;
  background-position: 3% 0%, -5% 100%;
}

.game-display {
  width: 30%;
}

.game-display img {
  width: 100%;
  border: #cd74ef solid 3px;
  border-radius: 10px;
  margin: 5% 10% 0 20%;
}

.game-overview-area {
  margin: 0 auto;
}

.game-overview-area .color-neon {
  display: block;
  width: 560px;
  color: #0dedfa;
  text-align: end;
  text-shadow: #ffffffcc 0.5px 0.5px 5px;
  rotate: 10deg;
  text-align: center;
  margin: 5% 0 5% 34%;
  display: flex;
  align-items: center;
}

.color-neon {
  position: relative;
  left: 0;
  top: 0;
}

.color-neon::before,
.color-neon::after {
  content: "";
  display: block;
  width: 150px;
  height: 4px;
  border-radius: 5px;
  box-shadow: #ffffffcc 0.5px 0.5px 5px;
  background-color: #0dedfa;
}

.color-neon::before {
  rotate: 60deg;
}

.color-neon::after {
  rotate: -60deg;
}

.game-overview-area p:nth-of-type(2) {
  margin-top: 50px;
  text-align: center;
}

.game-overview-fukidashi div {
  background: url(../svg/index/fukidashi01.svg) no-repeat;
  width: 100%;
  height: 35%;
  display: block;
  margin-top: 100px;
  padding: 25px 60px 0px 30px;
}

.game-overview-fukidashi div:first-child {
  margin: 250px 30px 0 0;
  padding: 25px 90px 0px 30px;
}

.game-overview-fukidashi div:nth-child(2) {
  margin: 0px 30px 0 0;
  padding: 25px 90px 0px 30px;
}

.game-overview-fukidashi div p,
.game-overview-fukidashi div ruby {
  font-size: 20px;
  line-height: 1.8rem;
}

.flex {
  display: flex;
}

.game-overview-child {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-overview-child p {
  text-align: center;
}

.game-overview-child a {
  width: 90%;
  position: relative;
  z-index: 5555;
}

.button01 p,
.button01 ruby {
  font-size: 20px;
}

.game-start-button {
  display: block;
  width: 100%;
  padding: 20px 0;
}

.watch-kaisetsu {
  display: block;
  width: 70%;
  text-align: center;
}

/* -----index-tentaikansoku----- */
.index-tentaikansoku-bg {
  background-image: url(../img/bg/bg-pink.png), url(../img/star/red-star.png),
    url(../img/star/other-star-03.png);
  background-repeat: no-repeat;
  background-size: cover, 5%, 5%;
  background-position: top, 95% 15%, 95% 100%;
  height: 2500px;
  z-index: 10;
  position: relative;
  z-index: 0;
  top: -300px;
}

.index-tentaikansoku-flex {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  padding: 600px 0 0;
  display: flex;
}

.index-tentaikansoku h3 {
  width: 100%;
}

.about-tentaikansoku {
  margin-top: 50px;
}

.index-tentaikansoku h4,
.index-tentaikansoku p,
.index-tentaikansoku ruby,
.index-tentaikansoku rt {
  color: #052544;
}

.index-tentaikansoku h4 {
  margin-top: 30px;
}

.index-tentaikansoku .attention {
  margin-top: 110px;
}

.button01-pink {
  border: #fff352 solid 5px;
  background-color: #DF87B7;
  border-radius: 50px;
  padding: 15px;
  color: #052544;
}

.button01-pink:hover {
  border: #0dedfa solid 5px;
  background-color: #9df464;
}

.index-tentaikansoku a {
  display: block;
  margin-top: 50px;
  text-align: center;
}

.tentaikansoku-img {
  width: 100%;
  position: relative;
  height: 100%;
}

.tentaikansoku-img img {
  position: absolute;
}

.tentaikansoku-img img:first-child {
  top: 15%;
  left: 30%;
  width: 80%;
}

.tentaikansoku-img img:nth-child(2) {
  top: 30%;
  left: 0;
  width: 40%;
}

.tentaikansoku-img img:nth-child(3) {
  top: 45%;
  right: 0%;
  width: 40%;
  rotate: 5deg;
}

.tentaikansoku-img img:nth-child(4) {
  top: 60%;
  right: -6%;
  width: 90%;
}

/* -----index-stamprally----- */

.index-stamprally-area {
  background-image: url(../img/star/uranus.png);
  background-repeat: no-repeat;
  background-size: 15%, 10%;
  background-position: 2% 18%, 95% 0%;
  width: 80%;
  min-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  top: -300px;
}

.stamprally-bg {
  background-image: url(../img/bg/cloud-blue-left.png),
    url(../img/bg/cloud-blue-right.png), url(../img/star/neptune.png);
  background-repeat: no-repeat;
  background-size: 57%, 57%, 8%;
  background-position: -30% 70%, 140% 0%, 101% 87%;
}

.index-stamprally {
  width: 100%;
}

.index-stamprally h3 {
  margin-top: 100px;
}

.index-stamprally .attention {
  margin-top: 50px;
}

.about-stamprally {
  margin-top: 100px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.for10,
.for3,
.for100 {
  width: 32%;
  position: relative;
}

.for10,
.for100 {
  margin-top: 100px;
}

.for10 div p {
  display: block;
  width: 70%;
  position: absolute;
  top: 50%;
  left: 15%;
  z-index: 10;
}

.for10 .no-of-people {
  display: block;
  line-height: 150px;
  text-align: center;
  width: 150px;
  height: 150px;
  background-image: url(../img/other/juumei.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -5%;
  left: -5%;
}

.for10 div {
  display: block;
  width: 100%;
  height: 640px;
  background-image: url(../svg/index/present-circle-green.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.for10 img {
  width: 60%;
  border-radius: 20px;
  position: absolute;
  top: 15%;
  left: 20%;
}

.for3 .no-of-people {
  display: block;
  line-height: 150px;
  text-align: center;
  width: 150px;
  height: 150px;
  background-image: url(../img/other/sanmei.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -5%;
  left: -5%;
}

.for3 div {
  display: block;
  width: 100%;
  height: 640px;
  background-image: url(../svg/index/present-circle-red.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.for3 img {
  width: 60%;
  position: absolute;
  top: 5%;
  left: 20%;
}

.for3 div p {
  display: block;
  width: 70%;
  position: absolute;
  top: 37%;
  left: 15%;
  z-index: 10;
}

.for100 p {
  display: block;
  width: 70%;
  position: absolute;
  top: 50%;
  left: 15%;
  z-index: 10;
}

.for100 .no-of-people {
  display: block;
  line-height: 150px;
  text-align: center;
  width: 150px;
  height: 150px;
  background-image: url(../img/other/hyakumei.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -5%;
  right: 0;
}

.for100 div {
  display: block;
  width: 100%;
  height: 640px;
  background-image: url(../svg/index/present-circle-green.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.for100 img {
  width: 50%;
  position: absolute;
  top: 10%;
  left: 25%;
}

/* -----waiting-----*/

.index-waiting {
  width: 90%;
  min-width: 1200px;
  margin: 0 auto;
  padding-bottom: 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.index-waiting img:first-child {
  width: 12%;
}

.index-waiting img:nth-child(2) {
  width: 60%;
}

.index-waiting img:nth-child(3) {
  width: 15%;
}

/* -----footer----- */
footer {
  padding: 50px 0 30px;
  background-color: #061349;
  position: relative;
  z-index: 9999;
}

footer ul {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

footer ul li {
  margin: 0 15px;
}

footer li:hover,
footer a:hover{
  opacity: 50%;
}

footer ul li img {
  width: 26px;
}

footer a,
footer small {
  display: block;
  text-align: center;
  font-weight: 400;
}

footer a img {
  margin-top: 100px;
  width: 15%;
}

small,
small a {
  font-size: 14px;
  display: inline;
  line-height: 1.8rem;
}

small a {
  border-bottom: #f2f2f2 0.5px dashed;
}

/* -----about----- */
.main-area-about {
  margin: 0 auto;
  background-image: url(../img/star/saturn.png), url(../img/star/earth.png),
    url(../img/star/other-star-02.png);
  background-repeat: no-repeat;
  background-size: 30%, 10%, 10%;
  background-position: -5% -1%, 2% 43%, 105% 55%;
}

.about-area {
  background-image: url(../img/star/venus.png), url(../img/bg/cloud-pink.png),
    url(../img/bg/cloud-purple.png);
  background-repeat: no-repeat;
  background-size: 10%, 60%, 60%;
  background-position: 70% 75%, -45% 80%, 145% 93%;
  padding: 250px 0 900px 0;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.about-area h2 {
  display: block;
  width: 70%;
  margin: 50px auto 0;
  position: relative;
  z-index: 10;
}

.about-text {
  display: block;
  width: 70%;
  margin: 80px auto 0;
  position: relative;
  z-index: 10;
}

.about-text p {
  margin-top: 50px;
  text-align: center;
}

.about-area .button01 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 80%;
  margin: 40px auto;
}

.about-area .button01 img {
  width: 24px;
  margin-left: 12px;
}

.about-area img:nth-child(3) {
  width: 20%;
  position: absolute;
  top: 25%;
  left: 0;
}

.about-area img:nth-child(4) {
  width: 25%;
  position: absolute;
  top: 58%;
  left: 5%;
}
.about-area img:nth-child(5) {
  width: 20%;
  position: absolute;
  top: 18%;
  left: 80%;
}
.about-area img:nth-child(6) {
  width: 25%;
  position: absolute;
  top: 63%;
  left: 70%;
}

/* -----apply----- */
.main-area-apply {
  padding: 100px 0 100px;
}

.main-area-apply h2 {
  width: 55%;
  margin: 100px auto;
}

.apply p {
  display: block;
  max-width: 1000px;
  margin: 80px auto 0;
}

.form-area {
  width: 90%;
  margin: 50px auto 0;
  border: #cd74ef solid 3px;
  background-color: #052544;
  border-radius: 30px;
}

.form-area p:first-child {
  font-size: 24px;
  text-align: start;
  margin-left: 50px;
}

.form {
  width: 80%;
  margin: 50px auto;
  display: flex;
  flex-wrap: wrap;
}

.form dt {
  margin: 50px 5px 0 0;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  font-size: 20px;
}

.form span,
.form dd,
.form dd select,
.form dd select option,
.form dd input {
  font-size: 20px;
}

.form dt:nth-of-type(6),
.form dd:nth-of-type(6),
.form dt:nth-of-type(10),
.form dd:nth-of-type(10),
.form dt:nth-of-type(14),
.form dd:nth-of-type(14),
.form dt:nth-of-type(18),
.form dd:nth-of-type(18),
.form dt:nth-of-type(22),
.form dd:nth-of-type(22) {
  margin-top: 100px;
}

.form-area dd {
  width: 65%;
  margin-top: 50px;
}

.form input,
select,
textarea {
  margin: 15px 0;
  background-color: #0f3771;
  border: #9df464 solid 3px;
  border-radius: 45px;
  width: 100%;
  padding: 5px 50px;
}

.form p {
  width: initial;
}

.input-text {
  appearance: none;
  box-shadow: 0 0 0px 1000px #0f3771 inset;
  -webkit-text-fill-color: #fff !important;
  border: #0dedfa solid 3px;
}

.form p .checkbox-icon {
  margin: 0 15px 0 0;
  padding: 0;
  appearance: none;
  position: relative;
  vertical-align: middle;
  width: 26px;
  height: 26px;
  border: 3px solid #9df464;
  border-radius: 6px;
  cursor: pointer;
}

.checkbox-icon:checked {
  background-color: #9df464;
}

.checkbox-icon:checked::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 14px;
  height: 9px;
  border-bottom: 4px solid #061349;
  border-left: 4px solid #061349;
  transform: rotate(-45deg);
}

.form .button02 {
  cursor: pointer;
  margin-top: 80px;
}

.button02:hover {
  border: #cd74ef solid 3px;
  /* background-color: #fff352; */
  background-color: #9df464;
  font-weight: 700;
}

/* -----coupon----- */

.main-area-coupon {
  width: 100%;
  padding: 1%;
}

#congrats {
  position: relative;
}

#congrats img {
  margin: 0 auto;
  display: block;
  width: 80%;
}

#congrats p {
  position: absolute;
  top: 75%;
  left: 20%;
  right: 20%;
  text-align: center;
}

.coupon-area {
  width: 80%;
  background-color: #f2f2f2;
  border: #0dedfa solid 5px;
  border-radius: 50px;
  margin: 200px auto 0;
  padding: 80px;
}

.coupon-area h2 {
  width: 80%;
  margin: 0 auto;
}

.coupon-area .flex {
  margin: 20px auto;
  justify-content: space-between;
}

.coupon-area p,
.coupon-area h4 {
  color: #061349;
}

.qr {
  width: 35%;
  min-width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 22px;
}

.qr img {
  width: 60%;
}

.about-coupon {
  margin-top: 80px;
  width: 55%;
}

.about-coupon p:nth-child(2) {
  margin-top: 30px;
}

.about-coupon h4 {
  margin-top: 40px;
}