@charset "utf-8";

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 1600px;
  color: #333;
  text-align: center;
  background-color: #036;
  font-family: fot-udkakugo-large-pr6n, sans-serif;
  font-weight: 500;
  font-style: normal;
}
@media (min-width: 451px) {
  body {
    height: 2000px;
    min-width: 1300px;
  }
}

.banner {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.caption {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 1;
}
.caption img {
  height: 110px;
  width: auto;
}
.banner-wrapper {
  margin: -419px -9px -9px -234px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
}
@media (min-width: 451px) {
  .caption {
    left: 120px;
    top: 160px;
  }
  .caption img {
    height: auto;
  }
  .banner-wrapper {
    margin: -1009px -9px -9px -1009px;
  }
}

.scroll {
  position: fixed;
  right: 20px;
  top: 40px;
  z-index: 1;
  padding-top: 35px;
}
.fwari {
  position: absolute;
  top: 0;
  left: 0;
  animation: fwari ease-in-out 1s infinite alternate;
}
@keyframes fwari {
  0% {
    transform: translate(0%, 0%);
  }
  100% {
    transform: translate(0%, -10px);
  }
}
.bar {
  position: relative;
}
.cursor {
  font-size: 10px;
  line-height: 10px;
  color: #fff;
  position: absolute;
  left: 3px;
  top: -2px;
}

ul.menu {
  width: 375px;
  height: 667px;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}
ul.menu li {
  font-size: 1em;
  margin: 0;
  padding: 0;
  position: absolute;
}
ul.menu li img {
  display: none;
}
@media (min-width: 451px) {
  ul.menu {
    width: 1340px;
    height: 800px;
  }
  ul.menu li img {
    display: inline;
    position: absolute;
    opacity: 0.7;
    z-index: -1;
  }
}

.pulseAnim {
  display: block;
  padding: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(60, 195, 165, 1);
  cursor: pointer;
  box-shadow: 0 0 0 rgba(60, 195, 165, 0.4);
  z-index: 4;
}
@keyframes pulseAnimA {
  0% {
    background-color: rgba(60, 195, 165, 1);
  }
  25% {
    background-color: rgba(155, 90, 210, 1);
  }
  100% {
    background-color: rgba(60, 195, 165, 1);
  }
}
@keyframes pulseAnimB {
  0% {
    background-color: rgba(60, 195, 165, 1);
  }
  50% {
    background-color: rgba(155, 90, 210, 1);
  }
  100% {
    background-color: rgba(60, 195, 165, 1);
  }
}
@keyframes pulseAnimC {
  0% {
    background-color: rgba(60, 195, 165, 1);
  }
  75% {
    background-color: rgba(155, 90, 210, 1);
  }
  100% {
    background-color: rgba(60, 195, 165, 1);
  }
}
@keyframes fuwafuwaA {
  0% {
    transform: translate(0%, 0%);
  }
  25% {
    transform: translate(0%, 4px);
  }
  50% {
    transform: translate(4px, 0%);
  }
  75% {
    transform: translate(0%, 0%);
  }
  100% {
    transform: translate(0%, 4px);
  }
}
@keyframes fuwafuwaB {
  0% {
    transform: translate(0%, 4px);
  }
  25% {
    transform: translate(0%, 0%);
  }
  50% {
    transform: translate(4px, 0%);
  }
  75% {
    transform: translate(0%, 4px);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
@keyframes fuwafuwaC {
  0% {
    transform: translate(0%, 4px);
  }
  33% {
    transform: translate(0%, 0%);
  }
  66% {
    transform: translate(4px, 0%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
.pulseAnim::after {
  display: inline-block;
  font-size: 1em;
  width: 8em;
  text-align: left;
  position: absolute;
  top: 1.8em;
  left: 2.5em;
  color: #fff;
}
@media (min-width: 451px) {
  .pulseAnim {
    padding: 20px;
    width: 20px;
    height: 20px;
  }
  .pulseAnim::after {
    font-size: 1.2em;
    filter: blur(12px);
    opacity: 0;
    transition: filter 0.4s ease-out, opacity 0.4s ease-out;
  }
  .pulseAnim:hover::after {
    filter: blur();
    opacity: 1;
  }
}

.menu01 {
  left: 42px;
  top: 256px;
  animation: fuwafuwaA ease-in-out 7s infinite alternate;
}
.menu01 .pulseAnim {
  animation: pulseAnimA 4s infinite;
}
.menu01 .pulseAnim::after {
  content: "ご挨拶";
}

.menu02 {
  left: 161px;
  top: 202px;
  animation: fuwafuwaB ease-in-out 6s infinite alternate;
}
.menu02 .pulseAnim {
  animation: pulseAnimB 5s infinite;
}
.menu02 .pulseAnim::after {
  content: "研究概要";
}

.menu03 {
  left: 245px;
  top: 266px;
  animation: fuwafuwaC ease-in-out 6s infinite alternate;
}
.menu03 .pulseAnim {
  animation: pulseAnimC 5s infinite;
}
.menu03 .pulseAnim::after {
  content: "メンバー";
}

.menu04 {
  left: 48px;
  top: 423px;
  animation: fuwafuwaA ease-in-out 7s infinite alternate;
}
.menu04 .pulseAnim {
  animation: pulseAnimA 5s infinite;
}
.menu04 .pulseAnim::after {
  content: "研究成果";
}

.menu05 {
  left: 137px;
  top: 328px;
  animation: fuwafuwaB ease-in-out 6s infinite alternate;
}
.menu05 .pulseAnim {
  animation: pulseAnimB 4s infinite;
}
.menu05 .pulseAnim::after {
  content: "ニュース";
}

.menu06 {
  left: 289px;
  top: 450px;
  animation: fuwafuwaC ease-in-out 7s infinite alternate;
}
.menu06 .pulseAnim {
  animation: pulseAnimC 4s infinite;
}
.menu06 .pulseAnim::after {
  content: "お問い合わせ";
  left: -2em;
}

.menu07 {
  left: 148px;
  top: 564px;
  animation: fuwafuwaA ease-in-out 6s infinite alternate;
}
.menu07 .pulseAnim {
  animation: pulseAnimA 5s infinite;
}
.menu07 .pulseAnim::after {
  content: "Twitter";
}

@media (min-width: 451px) {
  .menu01 {
    left: 153px;
    top: 587px;
  }
  .menu01 img {
    left: -109px;
    top: -79px;
  }

  .menu02 {
    left: 358px;
    top: 597px;
  }
  .menu02 img {
    left: -150px;
    top: -80px;
  }

  .menu03 {
    left: 520px;
    top: 469px;
  }
  .menu03 img {
    left: -168px;
    top: -250px;
  }

  .menu04 {
    left: 588px;
    top: 125px;
  }
  .menu04 img {
    left: -96px;
    top: -67px;
  }

  .menu05 {
    left: 827px;
    top: 302px;
  }
  .menu05 img {
    left: -184px;
    top: -292px;
  }

  .menu06 {
    left: 1031px;
    top: 100px;
  }
  .menu06 img {
    left: -159px;
    top: -273px;
  }

  .menu07 {
    left: 1104px;
    top: 352px;
  }
  .menu07 img {
    left: -459px;
    top: -23px;
  }
}