@charset "utf-8";

/*----------------------------
* 全体スタイル
----------------------------*/
.footer {
  background-color: #fafafa;
}

/*----------------------------
* コンテナ
----------------------------*/
.footer_container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 3rem 5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  letter-spacing: 1.5px;
  transition: all 0.5s;
}
@media screen and (min-width:768px) {
  .footer_container {
    padding: 3rem 3rem 1rem;
  }
}

.footer_menu {
  margin-bottom: 2.2rem;
}

@media screen and (min-width:768px) {
  .footer_menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    column-gap: 1rem;
    align-content: center;
    transition: all 0.5s;
  }
}

/*----------------------------
* ナビリスト
----------------------------*/
.footer_menu-item {
  margin-bottom: 2rem;
  font-size: 1rem;
}
@media screen and (min-width:768px) {
  .footer_menu-item {
    margin-bottom: initial;
  }
}

.footer_menu-item-link {
  color: #333;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
}

/*----------------------------
* ロゴ
----------------------------*/
.footer_logo {
  width: 240px;
  height: 60px;
  margin: 0 0 2rem;
}
@media screen and (min-width:768px) {
  .footer_logo {
    margin: 0 auto 2.2rem;
  }
}

/*----------------------------
* コピーライト
----------------------------*/
.footer_copy {
  display: block;
  text-align: center;
}

@media screen and (min-width:768px) {
  /* 下線アニメーション start ---------------*/
  .footer_menu-item-link{
    /*線の基点とするためrelativeを指定*/
    position: relative;
  }
  .footer_menu-item-link::after{
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: -0.2rem;
    left: 5%;
    /*線の形状*/
    width: 90%;
    height: 2px;
    background:#8093a6;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
  }
  /* hoverの設定 */
  .footer_menu-item-link:hover::after{
    transform: scale(1, 1);/*X方向にスケール拡大*/
  }
  /* 下線アニメーション end ---------------*/
}