@charset "utf-8";

/*----------------------------
* 全体スタイル
----------------------------*/
.page-header{
  /* background-color: #242527; */
  /*background-color: #000;*/
  position: relative;
  z-index: 10;
}

/*.doneクラスがついたヘッダー*/
.page-header.done {
	/* opacity: 0; */
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
.page-header.done.panelactive {
	/* opacity: 1; */
}

/*----------------------------
* コンテナ
----------------------------*/
.header_container{
  position: absolute;
  right: 100px;
}
/*
* メディアクエリ
*/
@media screen and (min-width:768px) {
  .header_container{
    /* justify-content: flex-end; */
  }
}

/*----------------------------
* ナビゲーション
----------------------------*/
/*
* メディアクエリ
*/
@media screen and (min-width:768px) {
  /* リスト */
  .header_nav{
  }
  .header_nav .list{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 1.5rem;
    height: 60px;
  }
  .header_nav li{
    /* margin: 0 0.75rem; */
  }
  .header_nav li a:not(.list_privacy-link) {
    /*font-weight: 700;*/
    font-weight: 500;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: #fffffb;
    /*color: #F2F2F2;*/
    text-decoration: none;
  }

  .list_privacy-link {
    font-weight: 500;
    text-transform: uppercase;
    /*color: #aaa;*/
    color: #F2F2F2;
    text-decoration: none;
  }

  .top_header li a:not(.list_privacy-link) {
    color: #e1e1e1;
  }

  .top_header li a {
    color: #e1e1e1;
  }

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