@charset "utf-8";

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

.gnavi {
  display: flex;
  flex-wrap: wrap; /*スマホ表示折り返し用なのでPCのみなら不要*/
  margin: 0 0 50px 0;
  list-style: none;
}

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

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

/*==================================================
 テキストが入れ替わる
===================================*/

.gnavi li a {
  /*テキストの基点とするためrelativeを指定*/
  position: relative;
  /*はみ出る要素を隠す*/
  overflow: hidden;
  padding: 10px 60px;
}

.gnavi li span {
  /*絶対配置でテキストの位置を決める*/
  position: absolute;
  left: 50%;
  top: 0;
  /*アニメーションの指定*/
  transition: all 0.5s;
  transform: translate(-50%, 0); /*X方向に-50% ※中央寄せにするため*/
  /*ブロック要素にして透過なし、テキスト折り返しなし*/
  display: block;
  opacity: 1;
  white-space: nowrap;
}

/*差し替わるテキストの設定*/
.gnavi li span:nth-child(2) {
  opacity: 0; /*透過0に*/
  transform: translate(-50%, 100%); /*X方向に-50% Y方向に100%*/
}

/*hoverするとテキストが入れ替わる設定*/
.gnavi li:hover span:nth-child(1) {
  opacity: 0; /*透過0に*/
  transform: translate(-50%, -100%); /*X方向に-50% Y方向に-100%*/
}

.gnavi li:hover span:nth-child(2) {
  opacity: 1; /*不透明に*/
  color: rgba(249, 143, 253, 1);
  transform: translate(-50%, 0); /*X方向に-50% Y方向に0*/
}

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

.lead {
  padding: 30px 20px;
}