body {
  font-family: 'Sacramento', cursive;
}
.hai {
  width: 100%;
  height: 800px;
}
.naga {
  position: absolute;
  top: 350px;
  color: #ff1f1f;
  margin : 0 auto 40px;  
  font-size : 150px; 
  text-align : center;
  overflow : hidden; 
  margin:0;
  display : inline-block;
  padding-left: 100%;
  white-space : nowrap;  
  line-height : 1em;
  animation : scrollSample01 20s linear infinite;
  font-family: "Kokoro",'Sacramento', cursive;
}
@keyframes scrollSample01{
  0% { transform: translateX(0)}
  100% { transform: translateX(-100%)}
}

@font-face {
  font-family: 'Sacramento';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sacramento/v13/buEzpo6gcdjy0EiZMBUG4CMf_f5Iai0Ycw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
.aa {
  font-family: "Kokoro",'Sacramento', cursive;  
}
#logo {
  width: 60px;
  height: 60px;
  color: #ffffff;
  background-color: #2779bd;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  position: absolute;
  top: 10px;
  left: 10px;
}
#Gourmand {
  color: #ffa000;
  font-family: 'Sacramento', cursive;
  font-size: 50px;
  text-align: center;
  margin-top: 50px;
}
.fa {
  width:300px;
  height:300px;
  border-radius:50%;
  padding-bottom: 20px;
  margin-top: 50px;
  margin-left: 100px;
}
.aa {
  font-size: 20px;
  width: 700px;
  font-family: 'Sacramento';
  margin-left: 60px;
  line-height: 40px;
  margin-top: 20px;
}
#Spot {
  color: #ffa000;
  font-family: 'Sacramento', cursive;
  font-size: 50px;
  text-align: center;
  margin-top: 50px;
}
.image {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 30s 0s infinite;
  animation: anime 30s 0s infinite;
}

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

.image:nth-of-type(3) {
  -webkit-animation-delay: 20s;
  animation-delay: 20s;
}
.image {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 30s 0s infinite;
  animation: anime 30s 0s infinite;
}

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

.image: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;
  }
}
.container {
	position: relative;
	width: 100%;
	max-width: 100%;
	height: 400px;
  margin-top: 50px;
}
.mida {
  font-family: 'Sacramento', cursive;
  margin-left: 140px;
  font-size: 40px;
  margin-top: 20px;
}

.haike1 {
  background-color: #E8F5E9;
  border-radius:30%;
  background-size: 100px;
  margin-top: 20px;
}
.bou {
  font-family: "Kokoro",'Sacramento', cursive; 
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  padding: 20px;
}
strong {
  color: #ff1f1f;
}
#City {
  color: #ffa000;
  font-family: 'Sacramento', cursive;
  font-size: 50px;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}
.onta {
  width: 100%;
  height: 400px;
}

.ota {
  width: 100%;
  height: 400px;
}
.cal {
  width: 100%;
  height: 400px;
}
.tia {
  font-family: "Kokoro",'Sacramento', cursive; 
  line-height: 40px;
  margin-left: 20px;
  margin-top: 20px;
  text-align: center;
}
.calgary {
  margin-top: 20px;
}
.otawa {
  margin-top: 20px;
}
.bac {
  background-color: blanchedalmond;
  width: 100%;
  height: 200px;
  margin-top: 50px;
}
.toppage {
  font-size: 60px;
  padding: 60px 0 0 150px;
  text-decoration: none;
}
.logo {
  width: 60px;
  height: 60px;
  color: #ffffff;
  background-color: #2779bd;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
}
.bac2 {
  display: flex;
  background-color: #E8F5E9;
  padding: 50px 0 50px 20px;
  margin-top: 50px;
}
#list {
  display: flex;
  padding: 20px 0 25px 0;
  justify-content: center;
  font-size: 140%;
}
.Gourmand1 a{
  margin-left: 70px;
}
.list ul li a {
  text-decoration: none;
  color: black;
}