/* ここから 追従バナー（.floating-cta） */

.observer-marker {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
  pointer-events: none;
  user-select: none;
}

.floating-cta {
  --duration: 0.3s ease-out;
  position: fixed;
  z-index: 40;
  bottom: 0;
  left: 0;
  margin-bottom: 28px;
  margin-left: 12px;
  margin-right: 12px;
  transition: visibility var(--duration), opacity var(--duration);

  @media (min-width: 769px) {
    bottom: 16px;
    left: initial;
    right: 16px;
    margin-bottom: initial;
    margin-left: initial;
    margin-right: initial;
  }

  /** 1画面分スクロールした場合 **/
  &.is-scroll {
    visibility: hidden;
    opacity: 0;
  }
}

.floating-cta__link {
  display: block;
  transition: filter 0.2s ease-out;

  @media (min-width: 769px) {
    max-width: 390px;
  }

  /** ホバーしたとき **/
  @media (any-hover: hover) {
    &:any-link:hover {
      opacity: initial !important;
      filter: brightness(1.32);
    }
  }

  /* フォーカスしたとき */
  &:any-link:focus-visible {
    opacity: initial !important;
    filter: brightness(1.32);
  }
}

.floating-cta__img :where(img) {
  width: 100%;
}

/* ここまで 追従バナー（.floating-cta） */

/* ここから メインヴィジュアル - ボタン内の矢印調整 */
.mod-topindex__wideItem .button .text {
  min-width: 240px;
}
/* ここまで メインヴィジュアル - ボタン内の矢印調整 */