<style type="text/css">


nav{
  width: auto;
  background-color: white;
  display: block;
  margin-left: auto;
  margin-right: auto
}
ul{
 display: flex;
 margin:2% 10%;
 border-top: solid 1px;
 border-bottom: solid 1px;
}
li{
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  font-size:min(4.0vw,45px);
  border: none;
}
li.msg{
  text-align: center;
}
a {
    text-decoration:none;
}
p.msg{
  text-align: center;
}


.slide2{
margin-top: 600px;
}


.map{
  text-align: center;
}

footer{
    /*footerの装飾*/
    background-color: #000;
    width: auto;
    height: auto;
    color: #FFF;
    text-align: center;
}

.top_right{
  text-align:right;
  margin-right: 10%;
}
.top_left{
  position: absolute;
  margin: auto;
  text-align: left;
  margin-left: 10%;
}
.top_left img {
   max-width: 35vw;
   min-width: 20vw;
   height: auto;
}
.top_right img {
   max-width: 40vw;
   min-width: 20vw;
   height: auto;
}

 /*=== 画像の表示エリア ================================= */
.slide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  max-height: 30vw;
  min-height: 250px;
  width      : auto;
  height     : 566vw;
  margin : 0 auto;
  background : #fff;
}

 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
                      /* 画像のサイズを表示エリアに合せる */
  width      : auto;
  height     : 100%;
  left       : 100%;
  animation  : slideAnime 15s ease infinite;
}

 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 3s }
.slide img:nth-of-type(3) { animation-delay: 6s }
.slide img:nth-of-type(4) { animation-delay: 9s }
.slide img:nth-of-type(5) { animation-delay: 12s }

 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { left: 100%  }
   2% { left: 0     }
  18% { left: 0     }
  20% { left: -1000% }
 100% { left: -1000% }
}



</style>
