@charset "utf-8";
/* モバイル（SP）向け設定：画面幅767px以下を想定 */
@media screen and (max-width: 767px) {
  .fixed-btn {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999; /* 他の要素より前面に表示 */
    background-color: #fff; /* 背景色（必要に応じて調整） */
    margin: 0 !important;
    padding: 0 !important;
    /* 初期状態は非表示（透明） */
    opacity: 0;
    visibility: hidden;
    /* アニメーションの設定 */
    animation: show-scroll-btn linear forwards;
    animation-timeline: scroll(root);
    animation-range: 100vh 120vh; /* FVが完全に隠れた瞬間から開始、そこから20%スクロールしたところで完全に表示 */
  }

  @keyframes show-scroll-btn {
    to {
      opacity: 1;
      visibility: visible;
    }
  }

  /* 子要素のコンテナをフレックスボックスにして横並びにする */
  .fixed-btn .asw-layout-grid__inner {
    display: flex !important;
    flex-wrap: nowrap !important; /* 折り返さない */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 各アイテムを5等分（100% / 5）にする */
  .fixed-btn .asw-layout-grid__item {
    flex: 0 0 20% !important;
    max-width: 20% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }

  /* 画像が枠内にぴったり収まるように調整 */
  .fixed-btn .asw-image__link,
  .fixed-btn .asw-image img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }

}