/*---------------------------------------------------------------------------*/
.box-iOS {
  background: #EFF7FF;
  font-size: 14px;
  font-weight: bold;
  color: #003451;
  text-align: center;
  padding: 1.0416666667vw;
  display: none;
}

.box-iOS .close-icon {
  display: block;
  height: 0.9375vw;
  position: absolute;
  right: 0.78125vw;
  top: 1.3020833333vw;
  cursor: pointer;
}

.box-iOS a {
  color: #003451;
  text-decoration: underline;
}

.ltiOS .box-iOS {
  display: block;
}

.page-main {
  padding-top: 0;
}

/* .page-main.night:after {
  animation: background-color 5s cubic-bezier(.81,-0.46,.19,1.33);
  background: #042344;
}

.moon {
  animation: moon 5s linear;
  position: absolute;
  left: 6%;
  top: 1%;
  background: url(//cssanimation.rocks/images/courses/animation_101/moon.svg) no-repeat;
  background-size: 100%;
  height: 25%;
  width: 8%;
  transform-origin: 30% 350%;
}
 */
@keyframes background-color {
  0% {
    background: #5d9de2;
  }
  100% {
    background: #042344;
  }
}

@keyframes moon {
  0% {
    transform: none;
    animation-timing-function: cubic-bezier(.25,0,.41,1);
  }
  100% {
    transform: rotateZ(-360deg);
    animation-timing-function: linear;
  }
}

.site-title {
  animation: initial;
  width: 34.375vw;
  margin-bottom: 0.5208333333vw;
}

.main-visual {
  padding-top: 9.5vw;
}

.main-visual .site-title,
.main-visual .modal-btn-w {
  transform: translateY(70px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}

.main-visual.active .site-title,
.main-visual.active .modal-btn-w {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.mountant {
  width: 100vw;
  height: 0;
  padding-top: 2.0041666667vw;
}

.mountant img {
  top: 1vw;
}

.bird {
  top: 7.2916666667vw;
}

.bird.active {
  top: 9.375vw;
  right: 0;
  transition-delay: 1s;
  z-index: 1;
}

.btn-modal.mod03 {
  width: 24.53125vw;
  height: 7.8125vw;
  right: 12.2395833333vw;
  top: 69.2708333333vw;
}

.btn-modal.mod05 {
  width: 25.5729166667vw;
  height: 7.8125vw;
  left: 14.3229166667vw;
  top: 64.5833333333vw;
}

/* .per-fm {
  position: absolute;
  width: 6.71875vw;
  height: 11.9791666667vw;
  bottom: 70.3125vw;
  left: 57.2916666667vw;
} */

@media screen and (max-width: 1099px) and (min-width: 768px) {
  .mountant img {
    top: 0;
  }
}

@media screen and (max-width: 767px) {
  .g-nav .menu li.mn04 {
    width: 55.4666666667vw;
  }

  .g-nav .menu li.mn07 {
    width: 34.1333333333vw;
  }

  .page-main {
    padding-top: 0;
  }

  .main-visual {
    position: absolute;
    padding-top: 23vw;
  }

  .site-title {
    animation: initial;
    width: 80.2666666667vw;
    margin: 0 auto 2.6666666667vw;
  }

  .mountant {
    position: relative;
    margin: 0 -5vw;
    width: calc(100% + 16vw);
    padding-top: 48vw;
  }

  .mountant img {
    top: 51.2vw;
  }

  .layout {
    line-height: 0;
    margin: 0 -12vw;
    width: calc(100% + 24vw);
  }

  .layout img {
    width: calc(100% + 24vw);
  }

  .bird.active {
    top: 75vw;
  }

  .btn-modal.mod02 {
    background: url(../img/button/mn-infomation_sp.svg) left top no-repeat;
    background-size: cover;
    width: 23.4666666667vw;
    height: 18.1333333333vw;
    right: 13.8666666667vw;
    bottom: 78.6666666667vw;
    top: auto;
  }

  .btn-modal.mod03 {
    background: url(../img/button/mn-friends-market_sp.svg) left top no-repeat;
    background-size: cover;
    width: 22.6666666667vw;
    height: 18.1333333333vw;
    right: 8vw;
    bottom: 122.6666666667vw;
    top: auto;
  }

  .btn-modal.mod05 {
    background: url(../img/button/mn-special-event_sp.svg) left top no-repeat;
    background-size: cover;
    width: 23.4666666667vw;
    height: 18.1333333333vw;
    left: 10.6666666667vw;
    bottom: 130.6666666667vw;
    top: auto;
  }
}