html {
  height: 100%;
}

header {
  padding-bottom: 320px;
}


body {
  font-family: 'TsukuARdGothic-Regular',sans-serif;
  margin: 0;
text-decoration:none; 
}

.google-maps {
  text-align: center;
}

.osaki {
  margin-top: 60px;
  color: #321a17;
  font-size: 25px;
  text-align: center;
}

.osaki2 {
  margin-top: 60px;
  font-size: 15px;
  text-align: center;
  color: #655351;
}

.nature {
  color: #f2f2f2;
  background-image: url(img/nature.jpg);
  background-position: bottom center;
  background-size:cover;
}

.meal {
  background-image: url(img/meal.jpg);
  color: #321a17;
  background-size:cover;
    background-position: center center;
}

.history {
    color: #f2f2f2;
  background-image: url(img/history.jpg);
  background-size:cover;
    background-position: center center;
}

.area {
  background-image: url(img/area.jpg);
  color: #321a17;
  background-size:cover;
    background-position: left center;
}

.higa {
    color: #f2f2f2;
  background-image: url(img/higa.png);
  background-size:cover;
    background-position: center center;
}

.search {
  color: #321a17;
  background-image: url(img/search.png);
  background-size:cover;
  background-position: center center;
}

.cite{
  background-image: url(img/cite.png);
  color: #321a17;
  background-size:cover;
    background-position: center center;
}

#each{
  font-size: 20px;
  text-align: center;
  margin: 120px;
  border: solid;  
  padding: 60px;
  padding-bottom: 60px;
  text-decoration: none;
  border-color: #303030;
}


.end {
  color: #321a17;
  font-size: 40px;
  text-align: center;
  margin: 80px;
}

footer {
  text-align: center;
  background-color: #696969;
  color: #ffffff;
  padding-top: 30px;
  padding-bottom: 30px;
}

.meji{
  color: #696969;
}




#splash {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background:#333;
  text-align:center;
  color:#fff;
}

#splash_text {
  position: absolute;
  top: 50%;
  left: 50%;
    z-index: 999;
  width: 100%;
  transform: translate(-50%, -50%);
  color: #fff;
}

#splash_text svg{
    height: 2px;
}

.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 178027;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

nav a:hover {
  color: #696969;
}

.slideBox {
  height: 500px;
  overflow: hidden;
  position: relative;
}

.item2 {
  opacity: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 30s 0s infinite;
  animation: anime 30s 0s infinite;
}

.item2:nth-of-type(2) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

.item2:nth-of-type(3) {
  -webkit-animation-delay: 20s;
  animation-delay: 20s;
}

/* ふわっとアニメーション */
@keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

.title {
  z-index: 11;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #321a17;
  font-size: 50px;
  text-align: center;
}

.sub {
  color: #321a17;
  font-size: 30px;
  text-align: center;
}

.first{
  margin-top: 40%;
}