.navbar-color {background-color: rgba(255, 255, 255, 0.8) !important;top:0;padding-top:1% !important;padding-bottom:1% !important;}
.navbar {
  position: fixed !important;
  top: 0;
}
.contents-information-container ul {
    max-width: 100%;
    border-top: none;
    padding: auto;
    margin: auto;
}

a:link, a:visited {color:#fff;padding:.5rem !important;font-size: 1rem;}
a:link:hover, a:visited:hover { text-decoration: none; }
.snap_area {position:relative;}

.snap_area span.mask{
  position:relative;/*背景色の基点となる位置を定義*/
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}

.snap_area span.mask::before{
  content:"";
  position: absolute;
  z-index: 2;
  left:0;
  top:0;
  opacity:0;/*透過0*/
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
    transform: translateY(100%);
  background:rgba(63, 57, 57, 0.7); 
  width:100%;
  height: 100%; 
}

.snap_area:hover span.mask::before{/*hoverした時の変化*/
  opacity:1;/*透過なしに変化*/
  transform: translateY(0);
}

.snap_area span.cap{/*画像の上のテキスト*/
  position: absolute;
  opacity:0;/*透過0*/
  transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
  z-index:3;/*テキストを前面に出す*/
  top: 50%;
    left: 50%;font-size:1.5rem;
  transform: translate(-50%,-50%);/*テキストの位置中央指定*/
  color: #fff;/*テキストの色を変えたい場合はここを修正*/
    line-height: 1.5;/*行の高さを1.5にする*/
}

.snap_area:hover span.cap{/*hoverした時の変化*/
  opacity:1;/*透過なしに変化*/
}