html { scroll-behavior: smooth;}


/* --- タイトル画像 --- */
.taitle-ad {
  z-index                 : +0;
  display                 : flex ;
  display                 : -webkit-flex ;
  display                 : -moz-flex ;
  display                 : -ms-flex ;
  display                 : -o-flex ;
  -webkit-justify-content : center ;
  justify-content         : center ;
  -webkit-align-items     : center ;
  align-items             : center ;
  text-align              : center ;
  width                   : 100%;
  height                  : 40vmin;
  background              : url("../images/taitle-ad1.png") ;
  background-repeat       : no-repeat ;
  background-position     : 50% 30% ;
  background-size         : 100% ;
  border-bottom           : 1px solid rgb(200,200,200);
  margin-bottom           : 5vmin;
  font-size               : 6vmin;
  color                   : rgb(255,255,255);
  font-weight             : 600;
  letter-spacing          : 0.3vmin;
  font-family             : '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  text-shadow             : rgba(0, 0, 0, 1.0) 0px 0px 10px ;
  animation               : move-img 8.0s linear ;
  animation-fill-mode     : both ;
}
@keyframes  move-img {
  0%    { background-position : 50% 100% ;}
  100%  { background-position : 50% 30% ;}
}



.taitle-ad::after {
  position: absolute;
  content: "意見広告";
  display                 : flex ;
  display                 : -webkit-flex ;
  display                 : -moz-flex ;
  display                 : -ms-flex ;
  display                 : -o-flex ;
  -webkit-justify-content : center ;
  justify-content         : center ;
  -webkit-align-items     : center ;
  align-items             : center ;
  text-align              : center ;
  z-index                 : +2;
  top                     : 0;
  left                    : 0;
  width                   : 100%;
  height                  : 40vmin;
  background              : url("../images/taitle-ad2.png") ;
  background-repeat       : no-repeat ;
  background-position     : 50% 80% ;
  background-size         : 100% ;
  text-shadow             : rgba(0, 0, 0, 1.0) 0px 0px 10px ;
  animation               : gradually 8.0s linear ;
  animation-fill-mode     : both ;
  opacity: 0;
}
@keyframes  gradually {
  0%    { opacity: 1; background-position : 50% 20% ;}
  30%   { opacity: 1; }
  100%  { opacity: 0; background-position : 50% 80% ;}
}



/* --- SVGの設定 --- */
#map {
    display : block ;
    width   : 86vw ;
    height  : auto ;
    margin  : 0vmin auto 5vmin auto ;
    svg {
      display               : block ;
      z-index               : -100;
      position              : relative ;
      width                 : 100% ;
      height                : 100% ;
      text-align            : center ;
      a {
        path {
          transition: fill 0.1s linear;
        }
      }
    }
  }