@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,700&display=swap');

:root {
  --accent-color-800: #001973;
  --accent-color-700: #141A57;
  --accent-color-600: #2A37BC;
  --accent-color-500: #3B61ED;
  --accent-color-100: #F5F7FF;
  --sub-accent-color-800: #F8C211;
  --sub-accent-color-500: #FFDE39;
  --base-color-500: #1D1D1D;
  --base-color-300: #5C5C5C;
  --base-color-0: #fff;
  --fs-xxxs: 0.8125rem; /* 12px */
  --fs-xxs: 0.8125rem; /* 13px */
  --fs-xs: 0.875rem; /* 14px */
  --fs-s: 0.9375rem; /* 15px */
  --fs-base: 1rem; /* 16px */
  --fs-m: 1.125rem; /* 18px */
  --fs-2m: 1.25rem; /* 20px */
  --fs-l: 1.375rem; /* 22px */
  --fs-xl: 1.5rem; /* 24px */
  --fs-xxl: 1.75rem; /* 28px */
  --fs-xxxl: 1.875rem; /* 30px */
  --fs-h: 2rem; /* 32px */
  --fs-xh: 2.25rem; /* 36px */
  --fs-xxh: 2.5rem; /* 40px */
  --ff-jp: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'Yu Gothic', YuGothic, Verdana, Helvetica, 'ＭＳ Ｐゴシック', sans-serif;
  --ff-en: 'Inter', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'Yu Gothic', YuGothic, Verdana, Helvetica, 'ＭＳ Ｐゴシック', sans-serif;
}

/* Base Setting */
body {
  font-family: var(--ff-jp);
  font-size: var(--fs-base);
}

/* Common-Styles Settings */
.-btn-c-accent {
  border: 1px solid var(--base-color-0);
  background-color: var(--accent-color-600);
  color: var(--base-color-0);
  line-height: 100%;
  transition: background-color .3s ease;
  &:hover {
    background-color: var(--accent-color-800);
  }
}
.-btn-c-sub {
  background-color: var(--sub-accent-color-500);
  color: var(--accent-color-800);
  line-height: 100%;
  transition: background-color .3s ease;
  &:hover {
    background-color: var(--sub-accent-color-800);
  }
}
.-br-only-pc {
  @media screen and (max-width: 768px) {
    display: none;
  }
}

/* Header */
.ocx-header {
  padding: 0.6rem 1rem;
  position: sticky;
  z-index: 9;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3.6875rem;
  background: var(--accent-color-700);
  .ocx-header-wrap {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    max-width: 60rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ocx-header_logo {
    width: 9.75rem;
    aspect-ratio: 156 / 38;
    & > .link {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .ocx-header_nav {
    display: flex;
    height: 2.375rem;
    align-items: center;
    gap: 0.5rem;
    .ocx-header_nav-item {
      border-radius: 0.1875rem;
      font-size: var(--fs-xs);
      font-weight: 500;
      & > .link {
        width: 100%;
        display: flex;
        padding: 0.72rem 1.25rem 0.78rem;
        justify-content: center;
        align-items: center;
      }
    }
  }
  @media screen and (max-width: 768px) {
    .ocx-header_logo {
      width: 7.5rem;
    }
    .ocx-header_nav {
      height: 3.25rem;
      gap: 0.375rem;
      .ocx-header_nav-item {
        font-size: var(--fs-xxxs);
        & > .link {
          padding: 0.58rem 0.4rem 0.66rem;
        }
      }
    }
  }
}

/* Main Contents */
.ocx-main {
  background-color: var(--accent-color-100);
  /* Section Contents */
  .ocx-main-section {
    /* Section-Mv */
    &.-mv {
      padding: 0 1rem;
      width: 100%;
      background-color: var(--accent-color-500);
      background-image: url("../images/mv_bg-img.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      .ocx-main-section-wrap {
        margin: 0 auto;
        padding: 3.75rem 0 9.62rem;
        width: 100%;
        max-width: 60rem;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        .visual-img {
          width: calc((25.9375 / 60) * 100%);
          aspect-ratio: 25.9 / 15.4;
        }
        .catch-contents {
          width: calc((31.9 / 60) * 100%);
          .catch-contents_ttl {
            font-size: var(--fs-xxl);
            font-weight: 600;
            line-height: 150%;
            color: var(--base-color-0);
            .-sup-txt {
              font-size: var(--fs-m);
              font-weight: 400;
              line-height: 300%;
            }
          }
          .catch-contents_links {
            margin-top: 2.25rem;
            display: flex;
            gap: 0.75rem;
            .catch-contents_links-item {
              width: 14.375rem;
              border-radius: 0.1875rem;
              font-size: var(--fs-m);
              font-weight: 600;
              & > .link {
                padding: 1.12rem 1rem 1.2rem;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
      @media screen and (max-width: 768px) {
        .ocx-main-section-wrap {
          padding: 2.5rem 0 3.72rem;
          max-width: 24.375rem;
          flex-direction: column;
          .visual-img {
            width: 100%;
          }
          .catch-contents {
            width: 100%;
            .catch-contents_ttl {
              margin-top: 0.5rem;
              font-size: var(--fs-xxl);
              text-align: center;
              .-sup-txt {
                font-size: var(--fs-base);
                text-align: center;
              }
            }
            .catch-contents_links {
              gap: 0.5rem;
              .catch-contents_links-item {
                width: 50%;
                font-size: var(--fs-base);
                & > .link {
                  padding: 1rem 0.4rem 1.07rem;
                }
              }
            }
          }
        }
      }
    }
    /* Section-Strengths */
    &.-strengths {
      padding: 0 1rem;
      width: 100%;
      .ocx-main-section-wrap {
        margin: -4.63rem auto 0;
        padding: 3.75rem 3.75rem 5rem;
        width: 100%;
        max-width: 75rem;
        background-color: var(--base-color-0);
        border-radius: 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3.75rem;
        .strengths_ttl {
          text-align: center;
          font-size: var(--fs-xxh);
          font-weight: 900;
          line-height: 140%;
          color: var(--accent-color-500);
        }
        .strengths_list {
          max-width: 60rem;
          display: flex;
          justify-content: space-between;
          align-items: start;
          .strengths_list-item {
            width: calc(( 28.75 / 60) * 100%);
            display: flex;
            flex-direction: column;
            gap: 1.75rem;
            .strengths_list-item_ttl {
              padding: 0.25rem 0rem 0.375rem 0rem;
              width: 100%;
              background-color: var(--accent-color-500);
              font-size: 1.875rem;
              font-weight: 500;
              color: var(--base-color-0);
              line-height: 140%;
              text-align: center;
            }
            .strengths_list-item_img {
              width: 100%;
              aspect-ratio: 28.8 / 13.3;
            }
            .strengths_list-item_body {
              color: var(--base-color-300);
              line-height: 170%;
            }
          }
        }
      }
      @media screen and (max-width: 768px) {
        padding: 3.75rem 1rem;
        border-radius: 0;
        background-color: var(--base-color-0);
        .ocx-main-section-wrap {
          margin: 0 auto;
          padding: 0;
          max-width: 24.375rem;
          gap: 2.5rem;
          .strengths_ttl {
            font-size: var(--fs-h);
          }
          .strengths_list {
            flex-direction: column;
            gap: 2.5rem;
            .strengths_list-item {
              width: 100%;
              gap: 1.12rem;
              .strengths_list-item_ttl {
                font-size: var(--fs-xl);
              }
            }
          }
        }
      }
    }
    /* Section-Usecase */
    &.-usecase {
      padding: 6.25rem 1rem;
      width: 100%;
      overflow: hidden;
      .ocx-main-section-wrap {
        margin: 0 auto;
        width: 100%;
        max-width: 60rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5rem;
        .usecase_ttl {
          text-align: center;
          font-size: var(--fs-xxh);
          font-weight: 900;
          line-height: 140%;
          color: var(--accent-color-500);
        }
        .usecase_list {
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 5rem;
          .usecase_list-item {
            counter-increment: listnum;
            display: flex;
            justify-content: space-between;
            align-items: start;
            &:nth-child(odd) {
              flex-direction: row-reverse;
              .usecase_list-item_img::after {
                bottom: -3.75rem;
                left: 50%;
              }
              .usecase_list-item_contents::after {
                top: 6.75rem;
                right: calc(100% + 5rem);
              }
            }
            &:nth-child(even) {
              .usecase_list-item_img::after {
                bottom: -3.75rem;
                right: 50%;
              }
              .usecase_list-item_contents::after {
                top: 6.75rem;
                left: calc(100% + 5rem);
                transform:scaleX(-1);
              }
            }
            .usecase_list-item_img {
              position: relative;
              z-index: 1;
              width: calc((30 / 60) * 100%);
              aspect-ratio: 30 / 17.5;
              &::after {
                content: "";
                position: absolute;
                z-index: -1;
                width: 30rem;
                aspect-ratio: 30 / 9.25;
                background-image: url("../images/usecase_bg02-img.png");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
              }
            }
            .usecase_list-item_contents {
              position: relative;
              z-index: 1;
              display: flex;
              flex-direction: column;
              gap: 1.5rem;;
              width: calc((26.3 / 60) * 100%);
              &::after {
                content: "";
                position: absolute;
                z-index: -1;
                width: 5.69rem;
                aspect-ratio: 5.69 / 10.75;
                background-image: url("../images/usecase_bg01-img.png");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
              }
              .usecase_list-item_contents-ttl {
                padding-bottom: 1.25rem;
                display: flex;
                flex-direction: column;
                font-size: 2rem;
                font-weight: 700;
                line-height: 160%;
                border-bottom: 4px solid var(--accent-color-500);
                .-sup-txt {
                  font-size: var(--fs-base);
                  color: var(--base-color-300);
                  font-weight: 400;
                  line-height: 160%;
                }
                &::before {
                  padding-bottom: 0.75rem;
                  content: "・CASE 0" counter(listnum);
                  font-family: var(--ff-en);
                  font-size: var(--fs-s);
                  font-weight: 700;
                  color: var(--accent-color-500);
                  line-height: 100%;
                }
              }
              .usecase_list-item_contents-body {
                width: calc(( 24 / 26.25 ) * 100%);
                color: var(--base-color-300);
                line-height: 170%;
              }
            }
          }
        }
      }
      @media screen and (max-width: 768px) {
        padding: 3.75rem 1rem;
        .ocx-main-section-wrap {
          max-width: 24.375rem;
          gap: 2.25rem;
          .usecase_ttl {
            font-size: var(--fs-h);
          }
          .usecase_list {
            gap: 2.5rem;
            .usecase_list-item {
              flex-direction: column-reverse;
              gap: 1.5rem;
              &:nth-child(odd) {
                flex-direction: column-reverse;
                .usecase_list-item_img::after {
                  bottom: -2.52rem;
                  left: -5rem;
                }
                .usecase_list-item_contents::after {
                  top: 0;
                  left: inherit;
                  right: 0;
                  transform:scaleX(-1);
                }
              }
              &:nth-child(even) {
                .usecase_list-item_img::after {
                  bottom: -2.52rem;
                  right: -5rem;
                }
                .usecase_list-item_contents::after {
                  top: 0;
                  left: inherit;
                  right: 0;
                  transform:scaleX(-1);
                }
              }
              .usecase_list-item_img {
                width: 100%;
                &::after {
                  width: 15rem;
                }
              }
              .usecase_list-item_contents {
                width: 100%;
                &::after {
                  width: 2rem;
                }
                .usecase_list-item_contents-ttl {
                  padding-bottom: 1.25rem;
                  font-size: var(--fs-xxl);
                  &::before {
                    padding-bottom: 0.5rem;
                  }
                  .-sup-txt {
                    font-size: var(--fs-s);
                  }
                }
                .usecase_list-item_contents-body {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
    /* Section-CvPoint */
    &.-cp {
      padding: 5rem 1rem;
      width: 100%;
      background-image: url("../images/cp_bg-img.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      .ocx-main-section-wrap {
        margin: 0 auto;
        width: 100%;
        max-width: 60rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
        .cp_ttl {
          font-size: var(--fs-xxxl);
          text-align: center;
          color: var(--base-color-0);
          font-weight: 600;
          line-height: 150%;
        }
        .cp_cta {
          width: 22.5rem;
          /* height: 4.25rem; */
          text-align: center;
          border-radius: 0.1875rem;
          font-size: var(--fs-2m);
          font-weight: 500;
          & > .link {
            width: 100%;
            display: flex;
            padding: 1.44rem 1rem 1.56rem;
            justify-content: center;
            align-items: center;
          }
        }
      }
      @media screen and (max-width: 768px) {
        padding: 3.75rem 1rem;
        .ocx-main-section-wrap {
          max-width: 24.375rem;
          .cp_ttl {
            font-size: var(--fs-xl);
            text-align: start;
          }
          .cp_cta {
            width: 100%;
            font-size: var(--fs-m);
            & > .link {
              padding: 1.38rem 0.4rem 1.44rem;
            }
          }
        }
      }
    }
    /* Section-Features */
    &.-features {
      padding: 6.25rem 1rem;
      width: 100%;
      .ocx-main-section-wrap {
        margin: 0 auto;
        width: 100%;
        max-width: 60rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5rem;
        .features_ttl {
          text-align: center;
          font-size: var(--fs-xxh);
          font-weight: 900;
          line-height: 140%;
          color: var(--accent-color-500);
        }
        .features_list {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .features_list-item {
            padding: 2.5rem 1.5rem 2rem 1.5rem;
            width: calc(( 14.3 / 60 ) * 100%);
            background-color: var(--base-color-0);
            border-radius: 0.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            border-top: 8px solid #3B61ED;
            .features_list-item_img {
              width: 5rem;
              aspect-ratio: 1;
            }
            .features_list-item_contents {
              display: flex;
              flex-direction: column;
              gap: 0.75rem;
              .features_list-item_contents-ttl {
                font-size: var(--fs-l);
                font-weight: 700;
                line-height: 140%;
                text-align: center;
              }
              .features_list-item_contents-body {
                font-size: var(--fs-base);
                color: var(--base-color-300);
                font-weight: 400;
                line-height: 160%;
              }
              .features_list-item_contents-notes {
                .features_list-item_contents-notes-item {
                  display: flex;
                  font-size: var(--fs-base);
                  color: var(--base-color-300);
                  line-height: 160%;
                  gap: 0.25rem;
                  &::before {
                    content: "※";
                    flex-shrink: 0;
                  }
                }
              }
            }
          }
        }
      }
      @media screen and (max-width: 768px) {
        padding: 3.75rem 1rem;
        .ocx-main-section-wrap {
          max-width: 22rem;
          gap: 2.5rem;
          .features_ttl {
            font-size: var(--fs-h);
          }
          .features_list {
            flex-direction: column;
            gap: 1.75rem;
            .features_list-item {
              padding: 2.5rem 2rem;
              width: 100%;
              font-size: var(--fs-h);
            }
          }
        }
      }
    }
    /* Section-Specs */
    &.-specs {
      padding: 6.25rem 1rem;
      width: 100%;
      background: var(--base-color-0);
      overflow: hidden;
      .ocx-main-section-wrap {
        position: relative;
        z-index: 1;
        margin: 0 auto;
        width: 100%;
        max-width: 60rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3.75rem;
        &::after {
          content: "";
          position: absolute;
          z-index: -1;
          top: 0;
          left: 43.25rem;
          width: 35.7rem;
          aspect-ratio: 35.7 / 36.3;
          background-image: url("../images/specs_bg-img.png");
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
        }
        .specs_ttl {
          width: 100%;
          font-size: var(--fs-xxh);
          font-weight: 900;
          line-height: 140%;
          color: var(--accent-color-500);
        }
        .specs_list {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .specs_list-item {
            padding: 2.5rem 1.75rem;
            width: calc(( 18.8 / 60 ) * 100%);
            background-color: var(--base-color-0);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.75rem;
            box-shadow: 0px 4px 12px 0px rgba(25, 43, 108, 0.08);
            .specs_list-item_ttl {
              color: var(--accent-color-500);
              font-size: var(--fs-xl);
              font-weight: 700;
              line-height: 100%;
            }
            .specs_list-item_contents {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 1.25rem;
              .specs_list-item_contents-img {
                width: 5rem;
                aspect-ratio: 1;
              }
              .specs_list-item_contents-body {
                color: var(--base-color-300);
                text-align: center;
                line-height: 160%;
              }
            }
          }
        }
      }
      @media screen and (max-width: 768px) {
        padding: 3.75rem 1rem;
        .ocx-main-section-wrap {
          max-width: 24.375rem;
          gap: 2.5rem;
          &::after {
            top: -1.75rem;
            left: initial;
            right: 0;
            width: 10.375rem;
          }
          .specs_ttl {
            font-size: var(--fs-xxl);
          }
          .specs_list {
            flex-direction: column;
            gap: 1.75rem;
            .specs_list-item {
              padding: 2.5rem 2rem;
              width: 100%;
            }
          }
        }
      }
    }
    /* Section-Document */
    &.-document {
      padding: 5rem 1rem;
      width: 100%;
      background-image: url("../images/cp_bg-img.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      .ocx-main-section-wrap {
        margin: 0 auto;
        width: 100%;
        max-width: 60rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .document_contents {
          width: calc(( 29.5 / 60) * 100%);
          display: flex;
          flex-direction: column;
          gap: 2.5rem;
          color: var(--base-color-0);
          .document_contents-ttl {
            font-size: var(--fs-xxh);
            font-weight: 600;
            line-height: 120%;
          }
          .document_contents-body {
            font-size: var(--fs-m);
            font-weight: 300;
            line-height: 170%;
          }
        }
        .document_cp {
          width: calc(( 22.5 / 60) * 100%);
          display: flex;
          flex-direction: column;
          gap: 2.5rem;
          .document_cp-img {
            width: 100%;
            aspect-ratio: 180 / 101;
          }
          .document_cp-cta {
            width: 100%;
            text-align: center;
            border-radius: 0.1875rem;
            font-size: var(--fs-2m);
            font-weight: 600;
            & > .link {
              width: 100%;
              display: flex;
              padding: 1.44rem 1rem 1.56rem;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
      @media screen and (max-width: 768px) {
        padding: 3.75rem 1rem;
        .ocx-main-section-wrap {
          max-width: 24.375rem;
          flex-direction: column;
          gap: 2.5rem;
          .document_contents {
            width: 100%;
            gap: 1.75rem;
            .document_contents-ttl {
              font-size: var(--fs-xxl);
              text-align: center;
            }
            .document_contents-body {
              font-size: var(--fs-base);
            }
          }
          .document_cp {
            width: 100%;
            .document_cp-cta {
              font-size: var(--fs-m);
              & > .link {
                padding: 1.38rem 0.4rem 1.44rem;
              }
            }
          }
        }
      }
    }
    /* Section-Flow */
    &.-flow {
      padding: 6.25rem 1rem;
      width: 100%;
      background: var(--base-color-0);
      .ocx-main-section-wrap {
        margin: 0 auto;
        width: 100%;
        max-width: 60rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3.75rem;
        .flow_ttl {
          width: 100%;
          font-size: var(--fs-xxh);
          font-weight: 900;
          line-height: 140%;
          text-align: center;
          color: var(--accent-color-500);
        }
        .flow_list {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .flow_list-item {
            position: relative;
            z-index: 1;
            counter-increment: FlowCount;
            padding: 2rem 0.75rem 2.5rem 0.75rem;
            width: calc(( 13.75 / 60 ) * 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            box-shadow: 0px 4px 12px 0px rgba(25, 43, 108, 0.08);
            &::before {
              padding: 0.375rem 0.5rem;
              content: "STEP 0" counter(FlowCount);
              font-family: var(--ff-en);
              font-size: var(--fs-s);
              font-weight: 700;
              line-height: 100%;
              background-color: var(--accent-color-500);
              color: var(--base-color-0);
              display: flex;
              align-items: center;
              border-radius: 0.125rem;
            }
            &:not(:last-child) {
              &::after {
                content: '';
                position: absolute;
                z-index: -1;
                top: calc(50% - 16px);
                left: 100%;
                display: inline-block;
                width: 0.96rem;
                height: 2rem;
                flex-shrink: 0;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23B2CCFF' viewBox='0 0 17 33'%3E%3Cpath d='M16.0117 16.0752L0.651715 32.0752L0.651716 0.0751946L16.0117 16.0752Z'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
              }
            }
            .flow_list-item_img {
              width: 5rem;
              aspect-ratio: 1;
            }
            .flow_list-item_ttl {
              font-size: var(--fs-base);
              font-weight: 500;
              line-height: 150%;
              text-align: center;
            }
          }
        }
      }
      @media screen and (max-width: 768px) {
        padding: 3.75rem 1rem;
        .ocx-main-section-wrap {
          max-width: 24.375rem;
          gap: 2.5rem;
          .flow_ttl {
            font-size: var(--fs-xxl);
          }
          .flow_list {
            flex-direction: column;
            gap: 2rem;
            .flow_list-item {
              width: 100%;
              gap: 1rem;
              &:not(:last-child)::after {
                top: calc(100% - 7px);
                left: calc(50% - 16px);
                rotate: 90deg;
              }
              .flow_list-item_ttl {
                font-size: var(--fs-2m);
              }
            }
          }
        }
      }
    }
  }
}

/* Footer */
.contents-bread {
  padding: 1rem;
  background: #808088;
  border-bottom: 1px solid #707077;
  -webkit-box-shadow: 0 -1px 0 0 #8c8c92 inset;
  box-shadow: 0 -1px 0 0 #8c8c92 inset;
  .contents-bread-wrap {
    margin: 0 auto;
    width: 100%;
    max-width: 60rem;
    overflow: auto hidden;
    .bread_list {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: 0.25rem;
      color: var(--base-color-0);
      .bread_list-item {
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 0.25rem;
        flex-shrink: 0;
        &:not(:last-child) {
          &::after {
            content: '';
            display: inline-block;
            width: 1rem;
            height: 1rem;
            flex-shrink: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF' viewBox='0 0 16 16'%3E%3Cpath d='M5.72656 11.1352L8.7799 8.0752L5.72656 5.0152L6.66656 4.0752L10.6666 8.0752L6.66656 12.0752L5.72656 11.1352Z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
          }
        }
        & > .link {
          color: var(--base-color-0);
          transition: opacity 0.3s ease;
          &:hover {
            opacity: 0.6;
          }
        }
      }
    }
  }
}