style.css

html {
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* font-family: "Monda", "Arial", "Noto Sans TC", "微軟正黑體", sans-serif; */
  font-family: "Monda", "Arial", "微軟正黑體", sans-serif;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

html,
body {
  height: 500vh;
}

/*---loading---*/

.loading_wrapper {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0%;
  left: 0%;
  background-color: #f0ebd8;
  z-index: 999;
}

.loading_content {
  position: absolute;
  width: 30vh;
  height: 30vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ico {
  position: absolute;
  width: 40%;
  height: 20%;
  top: 39%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("./img/bg/loading.png");
  background-size: cover;
  animation: ico 3s linear infinite;
  transform-origin: 30% 30%;
}

@keyframes ico {
  0% {
    transform: translate(-50%, -50%) rotateY(0deg);
  }

  20% {
    transform: translate(-50%, -50%) rotateY(90deg);
  }

  50% {
    transform: translate(-50%, -50%) rotateY(0deg);
  }

  70% {
    transform: translate(-50%, -50%) rotateY(90deg);
  }
}

.word_lo {
  position: absolute;
  font-size: 1.5rem;
  top: 50%;
  color: #7eabb1;
  transform: translate(-50%, -50%);
}

.word_lo.w1 {
  left: 20%;
}

.word_lo.w2 {
  left: 40%;
}

.word_lo.w3 {
  left: 60%;
}

.word_lo.w4 {
  left: 80%;
}

/*---section---*/

#bg {
  /* position: absolute; */
  position: relative;
  width: 100vw;
  height: 500vh;
  background-image: url("./img/bg/menu_bg.jpg");
  padding: 0;
  margin: 0;
  top: 0;
  right: 0;
  overflow: hidden;
}

#section1,
#section2,
#section3{
  position: absolute;
  width: 100%;
  left: 0;
}

#section1 {
  height: 20%;
  top: 0;
}

#section2 {
  height: 40%;
  top: 40%;
}

#section3 {
  height: 20%;
  bottom: 0%;
}

.info,
.content,
.info_stop,
.info_final {
  color: #f0ebd8;
  letter-spacing: 0.1em;
}

.info {
  top: 5%;
  left: 55%;
  font-size: 2.75rem;
  font-weight: 700;
}

.info::before {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  margin: -25px;
  background: #ffdb02;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
  border-radius: 5px;
}

.info_stop,
.info_final {
  /* font-size: 2.75rem; */
  font-size: 2rem;
  font-weight: 700;
  line-height: 150%;
}

.open_info{
  position: absolute;
  left:22.5%;
}

.highlight {
  color: #ffdb02;
  font-weight: 700;
}

.highlight_stop {
  color: #ffdb02;
  font-size: 1.1rem;
  letter-spacing: 0em;
}

.highlight_number {
  color: #ffdb02;
  font-size: 1.5rem;
  letter-spacing: 0em;
}

.content {
  font-size: 1.1rem;
  line-height: 180%;
  font-weight: 500;
}

/*---s1---*/

.logo {
  position: absolute;
  width:26rem;
  height: 12rem;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url("./img/bg/logo.svg");
  background-size: cover;
  animation: logo 2s infinite alternate;
  text-indent: 101%;
  /*使文字的縮排增多至超出區域*/
  white-space: nowrap;
  /*使文字不能進行換行，避免字數過多時自動換行*/
  overflow: hidden;
}

.fly {
  position: absolute;
  width: 47.6%;
  height: 52.6%;
  top: -70vh;
  left: 47.5%;
  transform: translate(-50%);
  background-image: url("./img/sky/fly.png");
  background-size: cover;
  animation: fly2 3s linear;
}

/*-----star-----*/
.star {
  position: absolute;
  width: 16vw;
  height: 16vw;
  top: 4%;
  background-image: url("./img/sky/star.png");
  background-size: cover;
}

.star.s_right {
  right: 0%;
  animation: up 2s infinite alternate;
}

.star.s_left {
  left: 0%;
  transform: scaleX(-1);
  animation: up_star 2s infinite alternate;
}

/*-----traveler-----*/
.traveler {
  position: absolute;
  width: 4.75rem;
  height: 9rem;
  background-image: url("./img/sky/people.png");
  background-size: cover;
}

.traveler.t_top {
  top: 20%;
  left: 50%;
  opacity: 1;
  transform: translate(-50%);
  animation: people2 3s linear;
}

@keyframes people2 {
  0% {
    top: 0%;
    transform: translate(-50%);
  }

  36% {
    top: 10%;
    transform: translate(-50%);
  }
}

.traveler.t_un {
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

.submarine {
  position: absolute;
  width: 10rem;
  height: 8rem;
  top: 10%;
  left: 10%;
  background-image: url("./img/sea/submarine.png");
  background-size: cover;
}

.traveler.t_sea {
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

/*-----island-----*/
#island {
  position: absolute;
  width:90rem;
  height: 230rem;
  top: 10%;
  left: 50%;
  transform: translate(-50%);
}

.ground {
  position: absolute;
  width: 94.4%;
  height: 20.6%;
  top: 11%;
  left: 50%;
  transform: translate(-50%);
  background-image: url("./img/island/island_land.png");
  background-size: cover;
}

.sea,
.under_sea {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translate(-50%);
}

.sea {
  height: 80%;
  top: 70%;
  background: rgba(0, 0, 0, 0.15);
}

.under_sea {
  height: 350%;
  top: 150%;
  background-color: rgba(0, 0, 0, 0.2);
}



.wave1,
.wave2 {
  position: absolute;
  bottom: 0;
  width: 120%;
  transform: translate(-50%);
  background-size: cover;
}

.wave1 {
  height: 20%;
  left: 60%;
  background-image: url("./img/sea/wave.png");
  opacity: 0.5;
  animation: wave1 3s infinite alternate;
}

@keyframes wave1 {
  0% {
    left: 40%;
  }
}

@keyframes wave2 {
  0% {
    left: 60%;
  }
}

.wave2 {
  height: 30%;
  left: 40%;
  background-image: url("./img/sea/wave.png");
  opacity: 0.25;
  animation: wave2 3s infinite alternate;
}

.land {
  position: absolute;
  width: 94.4%;
  height: 20.6%;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  transition: 1s;
}

.kuruma {
  position: absolute;
  width: 8.2%;
  height: 7.3%;
  top: 70%;
  left: 33.5%;
  background-image: url("./img/island/island_mono/kuruma.png");
  background-size: cover;
  animation: kuruma 25s infinite;
}

@keyframes kuruma {
  0% {
    top: 70%;
    left: 23.5%;
  }

  50% {
    top: 68%;
    left: 44%;
  }

  100% {
    top: 70%;
    left: 23.5%;
  }
}

.shima,
.nabe_bottom,
.enoki,
.tofu,
.shiitake,
.kani,
.toumorokoshi,
.hamaguri,
.maru,
.nabe_top,
.ebi,
.hana,
.tako,
.takoyaki,
.toudai,
.shouyu_top {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("./img/island/island_cut.png");
  background-size: cover;
}

.shima {
  top: 0;
  left: 0;
  clip-path: polygon(0% 42%, 0% 100%, 100% 100%, 100% 42%);
  -webkit-clip-path: polygon(0% 42%, 0% 100%, 100% 100%, 100% 42%);
}

.nabe_bottom {
  top: 31.5%;
  left: -34.7%;
  clip-path: polygon(66% 0%, 66% 40%, 100% 40%, 100% 0%);
  -webkit-clip-path: polygon(66% 0%, 66% 40%, 100% 40%, 100% 0%);
}

.enoki {
  top: 47.3%;
  left: 23.5%;
  clip-path: polygon(25% 0%, 25% 13%, 34% 13%, 34% 0%);
  -webkit-clip-path: polygon(25% 0%, 25% 13%, 34% 13%, 34% 0%);
  animation: enoki 2.2s infinite alternate;
}

.tofu {
  top: 23.6%;
  left: 36.7%;
  clip-path: polygon(18% 11%, 18% 20%, 25% 20%, 25% 11%);
  -webkit-clip-path: polygon(18% 11%, 18% 20%, 25% 20%, 25% 11%);
  animation: tofu 3.6s infinite alternate;
}

.shiitake {
  top: 26.3%;
  left: 36.7%;
  clip-path: polygon(12% 11%, 12% 20%, 18% 20%, 18% 11%);
  -webkit-clip-path: polygon(12% 11%, 12% 20%, 18% 20%, 18% 11%);
  animation: shiitake 2.8s infinite alternate;
}

.kani {
  top: 23.6%;
  left: 8.8%;
  clip-path: polygon(25% 13%, 25% 20%, 35% 20%, 35% 13%);
  -webkit-clip-path: polygon(25% 13%, 25% 20%, 35% 20%, 35% 13%);
  animation: kani 3.2s infinite alternate;
}

.toumorokoshi {
  top: 31.5%;
  left: 18.8%;
  clip-path: polygon(22% 21%, 22% 30%, 28% 30%, 28% 21%);
  -webkit-clip-path: polygon(22% 21%, 22% 30%, 28% 30%, 28% 21%);
  animation: toumorokoshi 1.4s infinite alternate;
}

.hamaguri {
  top: 17.8%;
  left: 25.8%;
  clip-path: polygon(18% 21%, 18% 30%, 22% 30%, 22% 21%);
  -webkit-clip-path: polygon(18% 21%, 18% 30%, 22% 30%, 22% 21%);
  animation: hamaguri 4s infinite alternate;
}

.maru {
  top: 14.7%;
  left: 10.5%;
  clip-path: polygon(23% 30%, 23% 40%, 28% 40%, 28% 30%);
  -webkit-clip-path: polygon(23% 30%, 23% 40%, 28% 40%, 28% 30%);
  animation: maru 1.8s infinite alternate;
}

.nabe_top {
  top: 31.5%;
  left: -2.3%;
  clip-path: polygon(35% 0%, 35% 40%, 66% 40%, 66% 0%);
  -webkit-clip-path: polygon(35% 0%, 35% 40%, 66% 40%, 66% 0%);
}

.ebi {
  top: 12.3%;
  left: 52.2%;
  clip-path: polygon(7.5% 26%, 7.5% 44%, 14% 44%, 14% 26%);
  -webkit-clip-path: polygon(7.5% 26%, 7.5% 44%, 14% 44%, 14% 26%);
  transform-origin: 10% 30%;
  animation: ebi 2s alternate infinite;
}

.hana {
  top: 28.9%;
  left: 35.8%;
  clip-path: polygon(13% 28%, 13% 41%, 22% 41%, 22% 28%);
  -webkit-clip-path: polygon(13% 28%, 13% 41%, 22% 41%, 22% 28%);
  animation: hana 10s infinite;
}

.takoyaki {
  top: 58.6%;
  left: 25.8%;
  clip-path: polygon(0% 0%, 0% 13%, 9% 13%, 9% 0%);
  -webkit-clip-path: polygon(0% 0%, 0% 13%, 9% 13%, 9% 0%);
}

/*-----tako-----*/
.tako {
  top: 50.5%;
  clip-path: polygon(7% 12%, 7% 21%, 12% 21%, 12% 12%);
  -webkit-clip-path: polygon(7% 12%, 7% 21%, 12% 21%, 12% 12%);
}

.tako.t1 {
  left: 38.5%;
}

.tako.t2 {
  left: 48.5%;
}

/*-----toudai-----*/
.toudai {
  top: 53.6%;
  left: 12.9%;
  clip-path: polygon(0% 13%, 0% 34%, 7.5% 34%, 7.5% 13%);
  -webkit-clip-path: polygon(0% 13%, 0% 34%, 7.5% 34%, 7.5% 13%);
}

.hikari {
  position: absolute;
  width: 17.5%;
  height: 52.5%;
  top: 68.4%;
  left: 4.7%;
  clip-path: polygon(60% 0, 70% 0%, 100% 100%, 0% 100%);
  -webkit-clip-path: polygon(60% 0, 70% 0%, 100% 100%, 0% 100%);
  transform: rotate(40deg);
  transform-origin: 60% 0%;
  background: linear-gradient(rgba(240, 235, 216, 0.25), rgba(240, 235, 216, 0.01));
  animation: hikari 5s alternate infinite;
}

/*-----shouyu-----*/
.shouyu {
  position: absolute;
  width: 6.4%;
  height: 19%;
  top: 72.1%;
  left: 42.3%;
  background-image: url("./img/island/island_mono/shouyu.png");
  background-size: cover;
}

.shouyu:hover~.shouyu_top {
  transition: 0.5s;
  transform: translateY(-1vh) rotate(-1deg);
}

.shouyu_top {
  top: 48.4%;
  left: 34.5%;
  clip-path: polygon(7% 21%, 7% 26%, 12% 26%, 12% 21%);
  -webkit-clip-path: polygon(7% 21%, 7% 26%, 12% 26%, 12% 21%);
  transform: rotate(18deg);
  transform-origin: 10% 30%;
}

.rouru {
  position: absolute;
  width: 3.5%;
  height: 5.7%;
  top: 75.7%;
  left: 86%;
  background-image: url("./img/island/island_mono/rouru.png");
  background-size: cover;
  transition: 0.5s;
}

.rouru:hover {
  transform: translateY(-1vh);
}

/*-----sushi-----*/
.sushi {
  position: absolute;
  width: 3.6%;
  height: 8.9%;
  background-size: cover;
  transition: 0.5s;
}

.sushi:hover {
  transform: translateY(-1vh);
}

.sushi.s1 {
  top: 77.3%;
  left: 25.5%;
  background-image: url("./img/island/island_mono/sushi1.png");
}

.sushi.s2 {
  top: 78.1%;
  left: 29.4%;
  background-image: url("./img/island/island_mono/sushi2.png");
}

.sushi.s3 {
  top: 78.4%;
  left: 33.5%;
  background-image: url("./img/island/island_mono/sushi3.png");
}

.sushi.s4 {
  top: 79%;
  left: 37.5%;
  background-image: url("./img/island/island_mono/sushi4.png");
}

.dinner {
  position: absolute;
  width:20rem;
  height:20rem;
  top:10%;
  left: 60%;
}

.broccoli,
.carrot,
.salmon {
  position: absolute;
  background-size: cover;
}

.broccoli {
  width: 43%;
  height: 40%;
  top: 0;
  left: 35%;
  background-image: url("./img/sea/broccoli.png");
}

.carrot {
  width: 33%;
  height: 30%;
  top: 35%;
  left: 10%;
  background-image: url("./img/sea/carrot.png");
}

.salmon {
  width: 50%;
  height: 39%;
  top: 40%;
  left: 52%;
  background-image: url("./img/sea/salmon.png");
}



/*---s2---*/

.container {
  position: absolute;
  width: 50%;
  height: 20%;
  left:30%;
  display: flex;
}

.container.c1 {
  top: 0;
}

.container.c2 {
  top: 25%;
}

.container.c3 {
  top: 50%;
}

.container.c4 {
  top: 75%;
}

.c_content{
  width: 60%;
  display: flex;
  flex-direction: column;
}

.icon {
  width:40%;
}

.icon img{
  width: 100%;
  height: auto;
}

.btn {
  width: 50%;
  padding: 1rem 3rem;
  margin-top: 10%;
  background-image: url("./img/bg/menu_bg.jpg");
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: #f0ebd8;
  text-align: center;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
  border-radius: 50vh;
  transition: 0.25s ease;
  /* animation: btn 2s infinite; */
}

@keyframes btn {
  0% {
    transform: scale(1.1);
  }
}

.btn:hover {
  color: #ffdb02;
}


/*---s3---*/

.rock {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 1%;
  opacity: 0.75;
}

.sand {
  position: absolute;
  width:100%;
  left: 0;
  bottom: 0;
}

.sand img{
  width:100%;
  height: auto;
  transform: translatey(10px);
}

.copyright {
  position: absolute;
  width: 50%;
  height: 4%;
  bottom: 3%;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  color: #f0ebd8;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.grass {
  position: absolute;
  width: 15vh;
  height: 20vh;
  left: 50%;
  bottom: 5%;
  background-image: url("./img/sea/grass.png");
  background-size: cover;
}

.game {
  position: absolute;
  width:50%;
  height: 100%;
  bottom: 5%;
  left: 50%;
}

.egg {
  position: absolute;
  top:15%;
  left: 5%;
}

.egg img{
  width:100%;
  height: auto;
}

.egg_btn {
  position: absolute;
  width:10rem;
  height: 10rem;
  left: 50%;
  bottom: 15%;
  transform: translate(-50%, -50%);
  background-image: url("./img/bg/loading_bg.jpg");
  border-radius: 50%;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  animation: shoo 2s infinite ease-in-out;
}

.egg_btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 20%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f0ebd8;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
}

@keyframes shoo {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  30% {
    transform: translate(-50%, -50%) scale(1.25);
  }

  50% {
    transform: translate(-50%, -50%) scale(1);
  }
}

/*---modal---*/

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 0.25s ease;
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

.modal-state {
  display: none;
}

.modal-state:checked+.modal {
  opacity: 1;
  visibility: visible;
  transform: scaleY(0.01) scaleX(0);
  animation: unfoldIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.modal-state:checked+.modal .modal__inner,
.modal-state:checked+.modal .modal__inner_food {
  top: 0;
  transform: scale(0);
  animation: zoomIn 0.5s 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes unfoldIn {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

.modal__inner,
.modal__inner_food {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  margin: auto;
  overflow: hidden;
  background-image: url("./img/bg/menu_bg.jpg");
  border-radius: 1%;
  padding: 5% 5%;
}

.modal__inner {
  height: 70%;
  top: -20%;
}

.modal__inner_food {
  height: 50%;
  top: -10%;
}

.modal_inner_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: -1;
}

.modal__close {
  position: absolute;
  right: 5%;
  top: 5%;
  width: 5%;
  height: 5%;
  cursor: pointer;
}

.modal__close:after,
.modal__close:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 15%;
  left: 50%;
  top: 0;
  background: #f0ebd8;
  display: block;
  transform: rotate(45deg);
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: rgba(0, 0, 0, 0.7);
}

.modal__close:before {
  transform: rotate(-45deg);
}

.game_content{
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.game_logo {
  width: auto;
  height: 60%;
  border-radius: 10px;
}

.game_nav {
  width: 60%;
  height: 20%;
  list-style: none;
  color: #f0ebd8;
  letter-spacing: 0.15em;
  line-height: 180%;
}

.g_link_area{
  width: 80%;
  height:20%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.game_link {
  width: 45%;
  height: 3.25rem;
  background-image: url("./img/bg/menu_bg.jpg");
  text-decoration: none;
  color: #f0ebd8;
  border-radius: 10px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center;
  align-items: center;
}

.game_icon {
  width: auto;
  height:1.1rem;
  filter: invert(1);
}

.game_word {
  font-size: 1.1rem;
  color: #f0ebd8;
  font-weight: 500;
  letter-spacing: 0.1em;
}

/*---gotop&sns---*/

#buttons_all {
  position: fixed;
  width:3rem;
  height: 3rem;
  bottom: 3%;
  right: 1%;
}

#gotop {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(240, 235, 216, 0.25);
  top: 10%;
  /*這個要開不然還沒滾卷軸就會出現*/
  display: none;
  left: 50%;
  transform: translate(-50%);
  border-radius: 50%;
  box-shadow: 0 0 3vh rgba(0, 0, 0, 0.15);
}

#gotop:hover {
  background: #f0ebd8;
  transition: 0.5s;
}

#gotop:active {
  background: #f0ebd8;
  transition: 0.5s;
  transform: translate(-50%) scale(1.2);
}

#gotop,
.sns_btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn_img {
  width: 50%;
  height: auto;
  opacity: 0.25;
}

.sns_content {
  position: absolute;
  top: 85%;
  left: 52.5%;
  display: flex;
  justify-content: space-around;
}

.sns_btn {
  width: 3rem;
  height:3rem;
  top: 0;
  background: rgba(240, 235, 216, 0.25);
  border-radius: 50%;
  transition: 0.5s;
  margin: 10px;
}

.sns_btn:hover {
  background: #ffdb02;
}

.sns_btn:active {
  transform: scale(1.1);
}


/*-----menu-----*/
#menu {
  position: fixed;
  width: 15vh;
  height: 100vh;
  background: none;
  left: 0;
  top: 0;
  border-right: 0.25vh solid #f0ebd8;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.menu_bg {
  position: fixed;
  background-image: url("./img/bg/menu_bg.jpg");
  width: 120vw;
  height: 100vh;
  left: -150vw;
  top: 0;
  box-shadow: 0 0 5vh rgba(0, 0, 0, 0.3);
  transition: 1s;
}

.menu_bg::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}

.menu_link_content {
  position: absolute;
  width: 40%;
  height: 78%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
}

.menu_web {
  position: absolute;
  width: 100%;
  height: 13%;
  left: 0;
  text-decoration: none;
  border-top: 0.25vh solid rgba(240, 235, 216, 0.25);
  letter-spacing: 0.2em;
  transition: 0.5s;
}

.m_hover:hover {
  background: rgba(240, 235, 216, 0.25);
}

.menu_web.w1 {
  top: 0;
}

.menu_web.w2 {
  top: 13%;
}

.menu_web.w3 {
  top: 26%;
}

.menu_web.w4 {
  top: 39%;
}

.menu_web.w5 {
  top: 52%;
}

.menu_web.w6 {
  top: 65%;
}

.menu_web.w7 {
  top: 78%;
}

.menu_web.w_line {
  top: 91%;
}

.menu_link,
.m_span {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.menu_link {
  color: #f0ebd8;
  font-size: 3vh;
  padding-left: 30%;
}

.menu_link.m_big {
  font-size: 4vh;
}

.m_span {
  color: #ffdb02;
  font-size: 2vh;
  padding-left: 5%;
}

.menu_img {
  position: absolute;
  width: auto;
  height: 40%;
  top: 65%;
  left: 75%;
  transform: scaleX(-1);
}

.hamburger {
  position: absolute;
  width: 50%;
  height: 10vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#toggle {
  position: fixed;
  width: 10vh;
  height: 10vh;
  top: 50%;
  left: 7.5vh;
  border: none;
  margin: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
}

#toggle:checked~.menu_bg {
  transform: translateX(140vw);
  transition: 1s;
}

.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  position: absolute;
}

.hamRotate.active {
  transform: rotate(45deg);
}

.hamRotate180.active {
  transform: rotate(180deg);
}

.line {
  fill: none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: #f0ebd8;
  stroke-width: 3.5;
  stroke-linecap: round;
  animation: line 1s infinite linear alternate;
}

@keyframes line {
  0% {
    stroke: #f0ebd8;
  }

  100% {
    stroke: #7eabb1;
  }
}

.ham .top {
  stroke-dasharray: 40 139;
}

.ham .bottom {
  stroke-dasharray: 40 180;
}

.ham.active .top {
  stroke-dashoffset: -98px;
}

.ham.active .bottom {
  stroke-dashoffset: -138px;
}


/*-----animation-----*/
@keyframes line {
  0% {
    stroke: #f0ebd8;
  }

  100% {
    stroke: #7eabb1;
  }
}

@keyframes logo {
  0% {
    transform: translate(-50%, -50%) rotate(2deg);
  }

  20% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes fly {
  0% {
    transform: translatex(0);
  }

  100% {
    transform: translatex(300vh);
  }
}

@keyframes up {
  0% {
    transform: translatey(1.5vh);
  }
}

@keyframes up_star {
  0% {
    transform: translatey(1.5vh) scalex(-1);
  }
}

@keyframes enoki {
  0% {
    transform: translatey(2.2vh);
  }
}

@keyframes tofu {
  0% {
    transform: translatey(1.2vh);
  }
}

@keyframes shiitake {
  0% {
    transform: translatey(1.6vh);
  }
}

@keyframes kani {
  0% {
    transform: translatey(1.4vh);
  }
}

@keyframes toumorokoshi {
  0% {
    transform: translatey(3.4vh);
  }
}

@keyframes hamaguri {
  0% {
    transform: translatey(0.8vh);
  }
}

@keyframes maru {
  0% {
    transform: translatey(2vh);
  }
}

@keyframes people {
  0% {
    left: -40vh;
    top: -26vh;
  }

  14.5% {
    left: -40vh;
    top: -26vh;
  }

  45.25% {
    left: 77vh;
    top: -26vh;
  }

  55% {
    left: 77vh;
    top: 26vh;
    transform: translatey(1vh);
  }

  60% {
    transform: translatey(0);
  }

  65% {
    transform: translatey(1vh);
  }

  70% {
    transform: translatey(0);
  }

  75% {
    transform: translatey(1vh);
  }

  80% {
    transform: translatey(0);
  }

  85% {
    transform: translatey(1vh);
  }

  90% {
    transform: translatey(0);
  }

  95% {
    transform: translatey(1vh);
  }
}

@keyframes hana {
  0% {
    transform: translatey(0px);
  }

  60% {
    transform: translatey(0px);
  }

  70% {
    transform: translatey(-8vh);
  }
}

@keyframes hikari {
  0% {
    transform: rotate(20deg);
  }

  100% {
    transform: rotate(40deg);
  }
}

@keyframes ebi {
  0% {
    transform: rotate(-5deg);
  }
}

@keyframes fly2 {
  0% {
    top: -70vh;
  }

  35% {
    top: -30vh;
  }

  70% {
    top: -30vh;
  }
}