@charset "UTF-8";
/* AUTHOR:t-styles */

/* ------------------------------------ */
/* ▼スマホ用＆共通デザイン */
/* ------------------------------------ */

/*メニューボタン*/
.mmm{
    position: fixed;
    right: 2%;
    top: 1%;
    z-index: 2;
}
.menu_bar{
    display: flex;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
	justify-content: flex-end;
    margin:10px 10px 50px 0;
    list-style: none;
}

.menu_bar li a{
    display: block;
    padding:10px 30px;
    text-decoration: none;
    color: #333;
}
.menu_bar li{
    /*線の基点とするためrelativeを指定*/
  position: relative;
    margin:0 10px;
}

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

.menu_bar li::before{
  right: 0;
  top: 0;
}
.menu_bar li::after{
  left: 0;
  bottom: 0;
}

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

.menu_bar li span{
  display: block;
}

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

.menu_bar li span::before{
  left: 0;
  top: 0;
}
.menu_bar li span::after{
  right: 0;
  bottom: 0;
}
/*現在地とhoverした際の線の変化*/
.menu_bar li.current::before,
.menu_bar li.current::after,
.menu_bar li:hover::before,
.menu_bar li:hover::after{
  width: 100%;/*横幅を100%に*/
}

.menu_bar li.current span::before,
.menu_bar li.current span::after,
.menu_bar li:hover span::before,
.menu_bar li:hover span::after{
  height: 100%;/*縦幅を100%に*/
}
.lead{
  padding: 50px 20px;
}
/*メニューボタン終了*/