/* CSS Document */
.footer-nav ul {
  display: flex;
  list-style: none;
  margin: 0 auto 0 auto;
  padding: 2.2% 0 0 0;
  width: calc(100% * (763 / 1920));
}
.footer-nav ul a:hover{
    opacity: 0.5;
}
.footer-nav ul img {
  width: 100%;
}
.footer-nav ul li {
  padding: 0 7%;
  border-right: 1px solid #fff;
}
.footer-nav ul li:last-child {
  border: none;
}
@keyframes show-button {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}
.shibushi-ariake-booking-button img {
  width: 100%;
}
.shibushi-ariake-booking-button {
  position: fixed;
  /*width: calc(100% * (260 / 1920));*/
    width: 11%;
  top: 110px;
  right: 60px;
  z-index: 10;
  /* 初期状態は非表示 */
  opacity: 0;
  visibility: hidden;
  /* アニメーションの設定 */
  animation: show-button linear both;
  animation-timeline: scroll();
  /* 表示を開始・完了するスクロール位置を指定（例：100px〜200pxの間でふわっと出す） */
  animation-range: 140vh 160vh;
}
.shibushi-footer {
  background-image: url('../img/top/top_r20_c1.png');
  aspect-ratio: 1920 / 396;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 子要素をabsolute配置するための基準点設定 */
  position: relative;
}
.sariake-booking {
  position: sticky;
  top: 110px;
  /*right: 30px;*/
    padding-right: 30px;
  /*width: 11%;*/
    z-index: 9;
    display: flex;
    justify-content: flex-end;
    margin-bottom: -110px;
}
.sariake-booking a{
    display: block;
    width: 11%;
    
}
.sariake-booking img {
  width: 100%;
}

/* スクロールに応じて変化させるアニメーションの定義 */
@keyframes header-scroll-change {
  to {
    filter: invert(1); /* 1で完全反転。100%白黒なら grayscale(1) など */
    background-color: rgba(255, 255, 255, 0.9); /* 背景色も変えると効果的 */
  }
}

.nanuka-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: 0.3s;

  /* スクロール量に合わせてアニメーションを動かす */
  animation: header-scroll-change linear;
  animation-timeline: scroll();
  /* アニメーションが動く範囲を指定（例: 0〜200pxの間で変化） */
  animation-range: 0px 200px; 
}