@charset "utf-8";

/*==================================================
共通　横並びのための設定
===================================*/


.gnavi li a{
    display: block;
    padding: 0 0 2rem 0;
    text-decoration: none;
    color: #333;
}

.gnavi li{
    margin-bottom:20px;
}

/*==================================================
　5-3-1 中心から外に線が伸びる（下部）
===================================*/

.gnavi li a{
    /*線の基点とするためrelativeを指定*/
  position: relative;
}

.gnavi li.current a,
.gnavi li a:hover{
  color:#000;
}

.gnavi li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 12rem;
  height: 1px;
  background: #000;
  transition: all .3s;
  transform: scale(0, 1);
  transform-origin: center top;
}

@media screen and ( max-width:560px ) {

  .gnavi li a{
    /*線の基点とするためrelativeを指定*/
  position: relative;
  }

  .gnavi li.current a,
  .gnavi li a:hover{
    color:#000;
  }

  .gnavi li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    margin: auto;
    width: calc(156*(100vw/750));
    height: 1px;
    background: #000;
    transition: all .3s;
    transform: scale(0, 1);
    transform-origin: center top;
    right: 0;
    left: 0;
  }

}



/*現在地とhoverの設定*/
.gnavi li.current a::after, 
.gnavi.fadein li a::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
    transition-delay: 0.5s;
}


/*========= レイアウトのためのCSS ===============*/

.lead{
  padding: 50px 20px;
}