  <style>
    /*In‑page Menu*/
    /* =========================================================
   WelPet ページ内ナビ
========================================================= */

    :root {
      /*
     * サイト全体に固定ヘッダがある場合は、
     * その高さを指定してください。
     *
     * 例：
     * --w-page-nav-top: 70px;
     */
      --w-page-nav-top: 0px;
    }

    /* ナビ全体 */
    .w-page-nav {
      position: -webkit-sticky;
      position: sticky;
      top: var(--w-page-nav-top);
      z-index: 900;

      background-color: rgba(255, 255, 255, 0.97);
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      border-bottom: 1px solid rgba(0, 0, 0, 0.10);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
    }

    /* 横スクロール領域 */
    .w-page-nav-scroll {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;

      scrollbar-width: none;
    }

    .w-page-nav-scroll::-webkit-scrollbar {
      display: none;
    }

    /* リスト */
    .w-page-nav-list {
      display: flex;
      align-items: stretch;
      justify-content: center;

      width: 100%;
      min-width: max-content;

      padding: 0;
      margin: 0;

      list-style: none;
    }

    /* 各項目 */
    .w-page-nav-item {
      flex: 1 1 auto;
      margin: 0;
    }

    /* リンク */
    .w-page-nav-link {
      position: relative;

      display: flex;
      align-items: center;
      justify-content: center;

      min-height: 58px;
      padding: 0.8rem 1rem;

      color: #555;
      font-size: 0.9rem;
      font-weight: 700;
      line-height: 1.3;
      text-align: center;
      white-space: nowrap;

      text-decoration: none;

      transition:
        color 0.2s ease,
        background-color 0.2s ease;
    }

    /* 項目間の細い区切り */
    .w-page-nav-item+.w-page-nav-item .w-page-nav-link::before {
      content: "";
      position: absolute;

      left: 0;
      top: 50%;

      width: 1px;
      height: 18px;

      background-color: rgba(0, 0, 0, 0.12);

      transform: translateY(-50%);
    }

    /* hover */
    .w-page-nav-link:hover,
    .w-page-nav-link:focus {
      color: var(--main-bg-colorD);
      background-color: rgba(190, 10, 35, 0.025);

      text-decoration: none;
    }

    /* 現在位置 */
    .w-page-nav-link.is-active {
      color: var(--main-bg-colorD);
      font-weight: 700;
    }

    /* 現在位置の下線 */
    .w-page-nav-link::after {
      content: "";

      position: absolute;

      left: 50%;
      bottom: 0;

      width: 0;
      height: 4px;

      background-color: var(--main-bg-colorD);

      transform: translateX(-50%);

      transition: width 0.2s ease;
    }

    .w-page-nav-link.is-active::after {
      width: calc(100% - 2rem);
    }




    /* =========================================================
   タブレット・スマホ
========================================================= */

    @media (max-width: 991.98px) {

      .w-page-nav>.container {
        max-width: none;
        padding-right: 0;
        padding-left: 0;
      }

      .w-page-nav-list {
        justify-content: flex-start;

        width: auto;
        min-width: max-content;

        padding-right: 0.5rem;
        padding-left: 0.5rem;
      }

      .w-page-nav-item {
        flex: 0 0 auto;
      }

      .w-page-nav-link {
        min-height: 52px;

        padding-right: 1.1rem;
        padding-left: 1.1rem;

        font-size: 0.82rem;
      }

      .w-page-nav-link.is-active::after {
        width: calc(100% - 1.6rem);
      }
    }


    /* =========================================================
   スマホ
========================================================= */

    @media (max-width: 575.98px) {

      .w-page-nav-link {
        min-height: 48px;

        padding: 0.65rem 0.9rem;

        font-size: 0.78rem;
      }

      .w-page-nav-item+.w-page-nav-item .w-page-nav-link::before {
        height: 14px;
      }

      .w-page-nav-link::after {
        height: 3px;
      }
    }


    /* =========================================================
   アニメーションを減らす設定
========================================================= */

    @media (prefers-reduced-motion: reduce) {

      .w-page-nav-link,
      .w-page-nav-link::after {
        transition: none;
      }
    }

    /* =========================================================
   スマホ用 横スクロール案内
========================================================= */

    .w-page-nav-wrap {
      position: relative;
    }

    /* 矢印 */
    .w-page-nav-arrow {
      display: none;
    }


    /* タブレット・スマホ */
    @media (max-width: 991.98px) {

      .w-page-nav-wrap {
        position: relative;
      }

      .w-page-nav-arrow {
        position: absolute;
        top: 0;
        bottom: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 34px;
        padding: 0;

        border: 0;

        color: var(--main-bg-colorD);
        font-size: 1.8rem;
        line-height: 1;

        cursor: pointer;

        z-index: 5;

        transition:
          opacity 0.2s ease,
          visibility 0.2s ease;
      }

      /* 左側 */
      .w-page-nav-arrow-prev {
        left: 0;

        background:
          linear-gradient(to right,
            rgba(255, 255, 255, 1) 55%,
            rgba(255, 255, 255, 0));
      }

      /* 右側 */
      .w-page-nav-arrow-next {
        right: 0;

        background:
          linear-gradient(to left,
            rgba(255, 255, 255, 1) 55%,
            rgba(255, 255, 255, 0));
      }

      /* 端まで来たら非表示 */
      .w-page-nav-arrow.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      /*
     * 矢印の下に文字が入り込みすぎないように
     * 横スクロール領域に少し余白
     */
      .w-page-nav-scroll {
        padding-right: 28px;
        padding-left: 28px;
      }
    }
  </style>