.footNav .footNav__box a:hover{
  background-color:#fff;
  opacity: 1;
}
.footNav .footNav__box a::after{
  content: "";
  display: block;
  width: min(1.3333333333vw, 18px);
  height: min(1.4814814815vw, 20px);
  background-size:100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../img/foot_arrow.svg);
  transition: 0.2s ease;
}
.footNav .footNav__box a:hover::after{
  background-color: unset;
  background-image: url(../img/arrow_link_green.svg);
}

.glonav__menu a:hover{
  opacity:1;
  color:#04A34F;
}
@media only screen and (max-width: 768px){

  .footNav .footNav__box a::after{
    width: 4.267vw;
    height:  4.8vw;
  }
}

/* 初期状態：透明で少し下にずらす */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* 表示された時：透明度1にして元の位置に戻す */
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.btn span::after{
  right:0;
}


/* --- 左→右のスライド塗り設定 --- */
.btn span{
  overflow: hidden;
  background-image: linear-gradient(90deg, #fff 0 0);
  background-repeat: no-repeat;
  background-size: 0% 100%;       /* 初期は0% */
  background-position: 0 0;        /* 左から */
  transition: background-size .35s ease, color .35s ease;
}

/* 既存の hover の背景色指定を無効化（全面一気に白くならないように） */
.btn:hover span{
  background-color: transparent !important;
  background-color: #fff;
  color:#04a34f;
  transition: 0.2s ease;
}

/* ホバー時に左→右へ塗り拡がる */
.btn--des01:hover span{
  background-size: 100% 100%;
  color: #04a34f;
  transition: background-size .35s ease, color .35s ease; /* 既存の transition 上書き */
}
.btn--des01:hover span::after{
  background-color: #04a34f;
  background-image: url(../img/arrow_link_white.svg);
  transition: 0.2s ease;
}



a.btn--des03:hover{
  opacity:1;
}
.btn--des02 span,
.btn--des03 span{
  background:unset;
  border:solid 1px #04A34F;
  color:#04a34f;
  transition: 0.2s ease;
}
.btn--des02:hover span,
.btn--des03:hover span{
  background: linear-gradient(270deg, rgb(4, 163, 79) 0%, rgb(2, 126, 61) 100%);
  color:#fff;
  transition: 0.2s ease;
}

.btn--des03:hover span::after{
  background-color: #fff;
}
.btn--des02.btn:hover,
.btn--des03.btn:hover{
  color:#04a34f;
}

/* des02 を“緑のスライド塗り”に固定（白スライドや background: のリセットに勝つ） */
.btn.btn--des02 span,
.btn.btn--des03 span{
  overflow: hidden;
  border: 1px solid #04A34F;
  color: #04a34f;
  /* 白スライドより優先して、緑のグラデを“背景画像”として定義 */
  background-image: linear-gradient(90deg, rgb(4,163,79) 0%, rgb(2,126,61) 100%) !important;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  transition: background-size .35s ease, color .35s ease;
}
.btn--des03 span::after {
    background-color: #fff;
}

/* ホバー時：左→右へ100%まで塗り拡げる（ショートハンドは使わない） */
.btn.btn--des02:hover span{
  background-image: linear-gradient(90deg, rgb(2,126,61) 0%, rgb(4,163,79) 100%) !important;
  background-size: 100% 100%;
  color: #fff;
}


.btn.btn--des03:hover span {
  background-image: linear-gradient(90deg, rgb(4,163,79) 0%, rgb(2,126,61) 100%) !important;
  background-size: 100% 100%;
  background-position: right; /* 右から左に広がる */
  color: #fff;
}


/* 親 .btn の hover が文字色を上書きする場合の保険 */
.btn.btn--des02.btn:hover{
  color: inherit !important;
}

.spNav {
    transition: transform .3s ease-in-out;
}