@charset "UTF-8";
/*----------------------------------------top----------------------------------------*/
#top {
  padding: 0 0 5em;
}

#top .back {
  background: url(../img/common/top.jpg);
  background-size: cover;
  background-position: center;
  padding: 0 0 5em;
}

#top .inner {
  width: 90%;
}

#top .inner h1 {
  width: 90%;
  margin: 0 auto;
}

#top .inner h1 img {
  width: 100%;
}

#top ul li {
  width: 45%;
}

#top ul li:nth-child(1) {
  border: 8px solid var(--theme-color);
}

#top ul li:nth-child(2) {
  border: 8px solid var(--orange);
}

#top ul li a {
  display: block;
}

#top ul li a img:not(.absolute) {
  width: 100%;
  object-fit: cover;
}

#top ul li a .absolute {
  width: 80%;
  bottom: 5%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  #top .inner h1 {
    padding: 25vh 0;
  }

  #top ul li {
    width: 80%;
    margin: 0 auto;
  }

  #top ul li:nth-child(1) {
    margin: 0 auto 2em;
  }
}

/*----------------------------------------main----------------------------------------*/
#link01 {
  padding: 5em 0 0;
}

#link01 .back_box {
}

#link01 .back_box .back {
  padding: 5% 0 30vh;
}

#link01 .inner {
  height: 100%;
}

#link01 h2 {
  width: 90vw;
  max-width: 1200px;
  top: 20%;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  opacity: 0;
  transition: var(--transition-bounce) 1s 0s;
}

#link01.active h2 {
  top: 0;
  opacity: 1;
}

#link01 h2 img.absolute {
  top: 120%;
  left: 0;
  opacity: 0;
  transition: var(--transition-bounce) 0.5s 0.6s;
}

#link01.active h2 img.absolute {
  top: 110%;
  opacity: 1;
}

#link01 .img {
  width: 10%;
  max-width: 240px;
  top: 30%;
  z-index: 0;
  opacity: 0;
  transition: var(--transition-bounce) 1s 1.9s;
}

#link01.active .img {
  top: 7%;
  opacity: 1;
}

#link01 .img01 {
  left: 40%;
}

#link01 .img02 {
  left: 60%;
}

#link01.active .img01 {
  left: 30%;
}

#link01.active .img02 {
  left: 70%;
}

#link01 .character {
  width: 150px;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 2em));
}

#link01.active .character {
  opacity: 1;
  transform: translate(-50%, -50%);
}

#link01 .character1 {
  top: 25%;
  left: 15%;
  z-index: 1;
  transition: ease-in 0.3s 1.7s;
}

#link01 .character2 {
  top: 43%;
  left: 76%;
  z-index: 2;
  transition: ease-in 0.3s 1.5s;
}

#link01 .character3 {
  top: 57%;
  left: 52%;
  z-index: 6;
  transition: ease-in 0.3s 0.9s;
}

#link01 .character4 {
  top: 58%;
  left: 38%;
  z-index: 4;
  transition: ease-in 0.3s 1.1s;
}

#link01 .character5 {
  top: 42%;
  left: 22%;
  z-index: 2;
  transition: ease-in 0.3s 1.5s;
}

#link01 .character6 {
  top: 57%;
  left: 62%;
  z-index: 4;
  transition: ease-in 0.3s 1.1s;
}

#link01 .character7 {
  top: 50%;
  left: 69%;
  z-index: 3;
  transition: ease-in 0.3s 1.3s;
}

#link01 .character8 {
  top: 56%;
  left: 30%;
  z-index: 3;
  transition: ease-in 0.3s 1.3s;
}

#link01 .character9 {
  top: 25%;
  left: 83%;
  z-index: 1;
  transition: ease-in 0.3s 1.7s;
}

#link01 .character10 {
  top: 57%;
  left: 45%;
  z-index: 5;
  transition: ease-in 0.3s 0.9s;
}

#link01 .text {
  width: 35%;
  max-width: 350px;
  bottom: 400px;
  opacity: 0;
  z-index: 6;
}

#link01 .text01 {
  left: 2%;
  transition: var(--transition-bounce) 1s 2.3s;
}

#link01 .text02 {
  right: 2%;
  transition: var(--transition-bounce) 1s 2.8s;
}

#link01.active .text {
  width: 40%;
  bottom: 300px;
  opacity: 1;
}

#link01.active .text01 {
  left: -2%;
}

#link01.active .text02 {
  right: -2%;
}

#link01 .link {
  top: 600px;
  right: 1em;
  width: 100px;
  height: 100px;
  z-index: 10;
  transition: ease-in 0.2s;
}

#link01 .link.fixed {
  position: fixed;
  top: 1em;
  right: 1em;
}

#link01 .link a {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: min(2.5vw, 1.4rem);
  font-weight: bold;
  background: var(--orange);
  border-radius: 100px;
  transition: ease-in 0.1s;
}

#link01 .link a:hover {
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px #333;
}

#link01 .link a span {
  width: auto;
  top: 40%;
}

#link01 .link .bar_icon {
  top: inherit;
  bottom: 2em;
  right: 0;
  left: 0;
  margin: auto;
}

@media screen and (max-width: 1000px) {
  #link01 {
    padding: 5em 0% 0;
  }
}

@media screen and (max-width: 768px) {
  #link01 {
    /* height: 100vh; */
    background-size: cover;
  }

  #link01 h2 {
    width: 130%;
    /* max-width: 500px; */
    left: 50%;
    right: inherit;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  #link01.active h2 {
    top: 10%;
  }

  #link01 .back_box .back {
    height: 80vh;
    padding: 0;
  }

  #link01 .link {
    width: 18vw;
    max-width: 100px;
    height: 18vw;
    max-height: 100px;
  }

  #link01 .img {
    width: 25%;
    top: 10%;
  }

  #link01.active .img {
    width: 20%;
    top: 7%;
  }

  #link01.active .img01 {
    left: 15%;
  }

  #link01.active .img02 {
    left: 85%;
  }

  #link01 .character {
    width: 32%;
    max-width: 130px;
    top: inherit;
  }

  #link01 .character1 {
    bottom: 10vh;
    left: 13%;
    z-index: 0;
    transition: ease-in 0.3s 0.9s;
  }

  #link01 .character2 {
    bottom: 10vh;
    left: 87%;
    z-index: 2;
    transition: ease-in 0.3s 1.7s;
  }

  #link01 .character3 {
    bottom: -5vh;
    left: 87%;
    z-index: 6;
    transition: ease-in 0.3s 0.9s;
  }

  #link01 .character4 {
    bottom: -5vh;
    left: 31%;
    z-index: 8;
    transition: ease-in 0.3s 1.5s;
  }

  #link01 .character5 {
    bottom: 10vh;
    left: 30%;
    z-index: 1;
    transition: ease-in 0.3s 1.1s;
  }

  #link01 .character6 {
    bottom: -5vh;
    left: 15%;
    z-index: 7;
    transition: ease-in 0.3s 1.7s;
  }

  #link01 .character7 {
    bottom: -5vh;
    left: 50%;
    z-index: 10;
    transition: ease-in 0.3s 1.3s;
  }

  #link01 .character8 {
    bottom: 10vh;
    left: 50%;
    z-index: 4;
    transition: ease-in 0.3s 1.3s;
  }

  #link01 .character9 {
    bottom: -5vh;
    left: 68%;
    z-index: 9;
    transition: ease-in 0.3s 1.1s;
  }

  #link01 .character10 {
    bottom: 10vh;
    left: 68%;
    z-index: 3;
    transition: ease-in 0.3s 1.5s;
  }

  #link01 .text {
    width: 60%;
  }

  #link01 .text01 {
    bottom: 47vh;
    left: 0%;
    z-index: 0;
  }

  #link01 .text02 {
    right: 0%;
    bottom: 4vh;
    z-index: 10;
  }

  #link01.active .text {
    width: 70%;
  }

  #link01.active .text01 {
    bottom: 45vh;
    left: 0%;
  }

  #link01.active .text02 {
    right: 0%;
    bottom: 2vh;
  }
}