@charset "utf-8";

/*==================================================
共通　横並びのための設定
===================================*/
.g-navi{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin-top: 20px;
    margin-left: 10px;
    margin-bottom: 50px;
    list-style: none;
}

.g-navi li a{
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    font-weight: bolder;
}

/*==================================================
　5-3-11 左右から線が伸びて枠線になる
===================================*/

.g-navi li{
    /*線の基点とするためrelativeを指定*/
  position: relative;
    margin:0 10px;
}


/*線の基点位置*/
.g-navi li::before,
.g-navi li::after{
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    /*線の形状*/
    width: 0;
    height: 2px;
    background-color: #5B5B5B;
    /*アニメーションの指定*/
    transition: all 0.2s linear;
    transition-delay: 0.2s;
}

.g-navi li::before{
  right: 0;
  top: 0;
}
.g-navi li::after{
  left: 0;
  bottom: 0;
}

/*線の基点位置2 spanタグ*/

.g-navi li span{
  display: block;
}

.g-navi li span::before,
.g-navi li span::after{
  content:"";
    /*絶対配置で線の位置を決める*/
  position: absolute;
    /*線の形状*/
  width:2px;
  height:0;
  background: #0481A2;
/*アニメーションの指定*/
  transition: all 0.2s linear;
}

.g-navi li span::before{
  left: 0;
  top: 0;
}
.g-navi li span::after{
  right: 0;
  bottom: 0;
}

/*現在地とhoverした際の線の変化*/

.g-navi li.current::before,
.g-navi li.current::after,
.g-navi li:hover::before,
.g-navi li:hover::after{
  width: 100%;/*横幅を100%に*/
}

.g-navi li.current span::before,
.g-navi li.current span::after,
.g-navi li:hover span::before,
.g-navi li:hover span::after{
  height: 100%;/*縦幅を100%に*/
}

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

.lead{
	padding: 50px 20px;
}

@media (max-width:450px){
}
.lead{
    padding: 0px 0px;
    width: 0px;
    display: none;
}