@charset "utf-8";

body{
  margin: 0;
}

header{
  display: flex;
  width: 100%;
  height: 50px;
  background-color: rgb(56, 200, 220);
}

.top {
  margin: 3.5%;
  color: rgb(255, 255, 255);
}

.main{
  position: relative;
}

.main h1{
position: absolute;
margin-top: 5%;
color: #eee;
top: 0;
right: 5%;
font-weight: bold;
}

.main h2{
position: absolute;
color: #eee;
top: 3%;
right: 0;
font-weight: bold;
}

.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:4s;
  animation-fill-mode:forwards;
  opacity:0;
}

.bikkuri{
  z-index: 1;
  margin: 17%;
  bottom: 25%;
  position: absolute
}

.scroll{
  top: 16%;
  left:84%;
  position: relative;
  z-index: 1;
  color: #eee;
}

@keyframes fadeInAnime{
from {
  opacity: 0;
}
  
to {
  opacity: 1;
}
}

.scroll{
position: absolute;
bottom:20%;
right:10%;
animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
    0%{bottom:1%;}
    50%{bottom:3%;}
   100%{bottom:1%;}
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
  }
  .scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
  }
  .scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0
  }
  .scroll-infinity__list--left {
    animation: infinity-scroll-left 80s infinite linear 0.5s both;
  }
  .scroll-infinity__item {
    width: calc(100vw / 6);
  }
  .scroll-infinity__item>img {
    width: 100%;
}

.text{
  margin: 10%;
  text-align: center;
  background-color: rgb(56, 200, 220);
}

.text14{
  color: #818181;
  margin: 10%;
  text-align: center;
}

.text15{
  color: #818181;
  margin: 10%;
  text-align: center;
}

.text2{
  margin: 10%;
  text-align: center;
}

.tap{
  padding: 5%;
}

.tap h3{
  margin: 10%;
  text-align: center;
  color: rgb(56, 200, 220);
}

ul{
  display: flex;
}

.img1{
  position: relative;
}

.img1:hover img:first-of-type {
  opacity: 0;
}

.img1 img:last-of-type {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
}
.img1:hover img:last-of-type {
  opacity: 1;
}

.img2{
  position: relative;
  right: -2%;
}

.img2:hover img:first-of-type {
  opacity: 0;
}

.img2 img:last-of-type {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
}
.img2:hover img:last-of-type {
  opacity: 1;
}

.img3{
  position: relative;
}

.img3:hover img:first-of-type {
  opacity: 0;
}

.img3 img:last-of-type {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
}
.img3:hover img:last-of-type {
  opacity: 1;
}

.img4{
  position: relative;
  right: -2%;
}

.img4:hover img:first-of-type {
  opacity: 0;
}

.img4 img:last-of-type {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
}
.img4:hover img:last-of-type {
  opacity: 1;
}

.sarani{
  text-align: center;
  margin: 10%;
  background-color: rgb(56, 200, 220);
}


.map{
  text-align: center;
  margin: 10%;
}

.map1 img{
  height: 100%;
  width: 100%;
}

.daigaku{
  margin: 10%;
  text-align: center
}

.daigaku1 img{
  height: 100%;
  width: 100%;
}

.btn{
  margin: 10%;
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
}

.scroll-infinity{
  margin-top: 15%;
}

  .scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
  }
  .scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0
  }
  .scroll-infinity__list--left {
    animation: infinity-scroll-left 80s infinite linear 0.5s both;
  }
  .scroll-infinity__item {
    width: calc(100vw / 6);
  }
  .scroll-infinity__item>img {
    width: 100%;
}

footer {
  margin-top: 20%;
  width: 100%;
  height: 120px; 
  text-align: center;
  padding: 50px 0;
  background-color: rgb(56, 200, 220);
}