html { scroll-behavior: smooth;}


/* --- タイトル画像 --- */
.taitle-sitemap {
  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-sitemap1.png") ;
  background-repeat       : no-repeat ;
  background-position     : 50% 55% ;
  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% 55% ;}
}



.taitle-sitemap::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-sitemap2.png") ;
  background-repeat       : no-repeat ;
  background-position     : 50% 100% ;
  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% 0% ;}
  30%   { opacity: 1; }
  100%  { opacity: 0; background-position : 50% 100% ;}
}




html { scroll-behavior: smooth;}

/* --- SVGの設定 --- */

/* --- SVGの設定 --- */
#map {
    display: block;
    width: 86vw ;
    height: auto;
    margin: 2.5% auto 2.5% auto;
    background-color:rgb(255,255,255);
    svg {
      display: block;
      position: relative ;
      z-index: 0 ;
      width: 100% ;
      height: 100% ;
    }
  }

.contents-link  { opacity: 0; }
.contents-link:hover { opacity: 1; }


  /* --- いろはへのリンクなど --- */
  .iroha-container {
    width           : 86vw ;
    border-top      : 0.2vmin solid rgb(200,200,200);
    margin-bottom   : 2.5vmin;
  }

  a.iroha-name {
    
    color: rgb(60,60,60);
    line-height: normal;
    font-weight: 550 ;
  }
a.iroha-name:hover {color: #69C;}


/* ------------------------------------------------- */
/* --- レスポンシブ対応 --- */
/* ------------------------------------------------- */
  @media only screen and (max-width: 600px) {

/* --- タイトル画像 --- */
.taitle-sitemap {
  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                  : 50vmin;
  background              : url("../images/taitle-sitemap1.png") ;
  background-repeat       : no-repeat ;
  background-position     : 50% 55% ;
  background-size         : 100% ;
  border-bottom           : 1px solid rgb(200,200,200);
  margin-bottom           : 5vmin;
  font-size               : 8vmin;
  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% 55% ;}
}



.taitle-sitemap::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                  : 50vmin;
  background              : url("../images/taitle-sitemap2.png") ;
  background-repeat       : no-repeat ;
  background-position     : 50% 100% ;
  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% 0% ;}
  30%   { opacity: 1; }
  100%  { opacity: 0; background-position : 50% 100% ;}
}

}