@layer components {

  /* ---------------------------------------------
  .badge-group
------------------------------------------------ */
  .badge-group {
    display: flex;
    gap: 0.625rem;
  }

  /* ---------------------------------------------
  .badge
------------------------------------------------ */
  .badge {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.6875rem;
    border: 1px solid var(--color-pink-30);
    border-radius: 6.25rem;
    color: var(--color-pink-30);
    font-family: var(--font-family);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 2;
    text-align: center;

    >span {
      @media (min-width: 897px) {
        background-image: linear-gradient(90deg, var(--color-pink-30), var(--color-pink-30));
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    }

    &[data-badge-variant="white-pink"] {
      border: 1px solid var(--color-white);
      background-color: var(--color-white);

      @media (min-width: 897px) {
        border-width: 2px;
      }

      &:is(a) {
        @media (min-width: 897px) {
          transition: border-color 0.3s ease-out;
        }
      }
    }

    &[data-badge-variant="white-black"] {
      border: 0;
      background-color: var(--color-white);
      color: var(--color-text);
    }

    &[data-badge-variant="transparent"] {
      border: 0;
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      background-color: rgb(from var(--color-white) r g b / 10%);
      color: var(--color-white);

      &:is(a) {
        @media (min-width: 897px) {
          transition: background-color 0.3s ease-out;
        }
      }
    }

    &[data-badge-variant="gray"] {
      border-color: var(--color-gray-50);
      color: var(--color-gray-40);
    }

    &[data-size-variant="large"] {
      padding: 0.3125rem 0.875rem;
      border-radius: 1.25rem;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.5;
    }

    &:is(a):hover {
      &[data-badge-variant="white-pink"] {
        @media (min-width: 897px) {
          border-color: var(--color-pink-30);
        }
      }

      >span {
        @media (min-width: 897px) {
          background-position: 0 100%;
          background-size: 100% 1px;
        }
      }

      &[data-badge-variant="transparent"] {
        @media (min-width: 897px) {
          background-color: rgb(from var(--color-white) r g b / 20%);
        }
      }

      &[data-badge-variant="transparent"]>span {
        @media (min-width: 897px) {
          background-image: linear-gradient(90deg, var(--color-white), var(--color-white));
        }
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .box-grid-2
------------------------------------------------ */
  .box-grid-2 {
    --mt-pc: 50px;
    --mt-sp: 50px;
    --mb-pc: 0;
    --mb-sp: 0;

    display: grid;
    gap: 1.875rem;
    grid-template-columns: repeat(2, 1fr);
    margin-block: var(--mt-pc) var(--mb-pc);

    @media (max-width: 896px) {
      grid-template-columns: repeat(1, 1fr);
      margin-block: var(--mt-sp) var(--mb-sp);
    }

    &:first-child {
      margin-block-start: 0;
    }

    +.box-grid-3 {
      margin-block-start: 1.875rem;
    }
  }

  /* ---------------------------------------------
  .box-grid-3
------------------------------------------------ */
  .box-grid-3 {
    display: grid;
    gap: 1.875rem;
    grid-template-columns: repeat(3, 1fr);
    margin-block-start: 3.125rem;

    @media (max-width: 896px) {
      grid-template-columns: repeat(1, 1fr);
    }

    &:first-child {
      margin-block-start: 0;
    }
  }

  /* ---------------------------------------------
  .box-grid-4
------------------------------------------------ */
  .box-grid-4 {
    --mt-pc: 30px;
    --mt-sp: 30px;

    display: grid;
    gap: 1.875rem;
    grid-template-columns: repeat(4, 1fr);
    margin-block-start: var(--mt-pc);

    @media (max-width: 896px) {
      grid-template-columns: repeat(1, 1fr);
      margin-block-start: var(--mt-sp);
    }

    &:first-child {
      margin-block-start: 0;
    }
  }

  /* ---------------------------------------------
  .box-article-section
------------------------------------------------ */
  .box-article-section {
    padding: 2.5rem;
    border-radius: var(--border-radius-md);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: var(--color-white);
    margin-block: 1.875rem;

    @media (max-width: 896px) {
      padding: 1.875rem 1.25rem;
    }

    &:first-child {
      margin-block-start: 0;
    }

    >.title {
      color: var(--color-text);
      font-size: 1.25rem;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1.2;
    }

    >ul.list {
      display: grid;
      border-top: 1px solid var(--color-gray-75);
      margin-block-start: 0.875rem;
      padding-block-start: 1.25rem;
      row-gap: 0.625rem;

      &:first-child {
        margin-block-start: 0 !important;
      }
    }

    >ul.list>li {
      position: relative;
      color: var(--color-text);
      font-size: 1rem;
      letter-spacing: 0.03em;
      line-height: 1.625;
      padding-inline-start: 1.5rem;

      &::before {
        position: absolute;
        top: 0.9375rem;
        left: 0.625rem;
        display: block;
        width: 0.25rem;
        height: 0.25rem;
        border-radius: 50%;
        background-color: var(--color-text);
        content: "";
        transform: translateY(-50%);
      }
    }
  }

  /* ---------------------------------------------
  .box-button-article
------------------------------------------------ */
  .box-button-article {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 23.25rem;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    -moz-column-gap: 0.625rem;
    column-gap: 0.625rem;
    margin-block: 3.125rem;

    @media (max-width: 896px) {
      max-width: 23.4375rem;
      padding-inline: 1.25rem;
    }

    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 1px;
      height: 2.25rem;
      background: var(--color-gray-70);
      content: "";
      transform: translate(-50%, -50%);
    }
  }

  /* ---------------------------------------------
  .box-dropdown-filter
------------------------------------------------ */
  .box-dropdown-filter {
    position: relative;
    z-index: 2;
    border-radius: var(--border-radius-md);
    background: var(--color-white);

    >.inner {
      display: grid;
      padding: 2.5rem min(6.9375vw, 6.9375rem) 3.75rem;
      grid-template-columns: 1fr;

      @media (max-width: 896px) {
        padding: 1.875rem 1.25rem;
      }
    }

    >.inner>.heading {
      color: var(--color-text);
      font-size: 1.5rem;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 1.2px;
      line-height: normal;
      text-align: center;

      @media (max-width: 896px) {
        font-size: 1.25rem;
      }
    }

    >.inner>.box-form {
      position: relative;
      display: grid;
      -moz-column-gap: min(5.125vw, 5.125rem);
      column-gap: min(5.125vw, 5.125rem);
      grid-template-columns: 1fr 1fr;
      margin-block-start: 1.875rem;

      @media (max-width: 896px) {
        grid-template-columns: 1fr;
        row-gap: 4rem;
      }

      &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: min(1.375vw, 1.375rem);
        height: min(1.375vw, 1.375rem);
        background: url("/assets/images/common/icon-cross-gray-01.svg") no-repeat center / contain;
        content: "";
        transform: translate(-50%, -50%);

        @media (max-width: 896px) {
          width: 1.375rem;
          height: 1.375rem;
        }
      }
    }

    >.inner>.box-form>.box-select {
      position: relative;
      border: 1px solid var(--color-gray-75);
      border-radius: var(--border-radius-md);
      background: var(--color-white);

      &::after {
        position: absolute;
        top: 50%;
        right: 1.25rem;
        display: block;
        width: 0.6875rem;
        height: 0.5625rem;
        background: url("/assets/images/common/icon-arrow-down-02.svg") no-repeat center / contain;
        content: "";
        transform: translateY(-50%);
      }
    }

    >.inner>.box-form>.box-select>.text {
      width: 100%;
      padding: 0.9375rem 1.25rem;
      color: var(--color-gray-40);
      cursor: pointer;
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1.71;
    }

    >.inner>.box-form>.box-select>.text[data-status-variant="true"] {
      color: var(--color-text);
    }

    >.inner>.box-form>.box-select>select {
      position: absolute;
      padding: 0.9375rem 1.25rem;
      font-size: 0.875rem;
      inset: 0;
      opacity: 0;

      @media (min-width: 897px) {
        visibility: hidden;
      }
    }

    >.inner>.box-form>.box-select>.list {
      @media (min-width: 897px) {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        padding: min(2.1875vw, 2.1875rem) min(3.125vw, 3.125rem);
        border-radius: var(--border-radius-md);
        background: var(--color-white);
        box-shadow: 0 0 15px -2px rgb(from var(--color-purple-30) r g b / 15%);
        grid-template-columns: 1fr 1fr;
        margin-block-start: 0.5rem;
      }

      @media (max-width: 896px) {
        display: none;
      }
    }

    >.inner>.box-form>.box-select>.list>li>button {
      color: var(--color-text);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      line-height: 2.85;
      transition: opacity 0.3s ease-out;

      &:hover {
        opacity: 0.7;
      }
    }

    >.inner>.reset {
      display: flex;
      justify-content: center;
      text-align: center;

      &[data-status-reset="hidden"] {
        height: 0;
        margin-block-start: 0;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease-out;
        visibility: hidden;
      }

      &[data-status-reset="show"] {
        height: auto;
        margin-block-start: 1.25rem;
        opacity: 1;
        pointer-events: auto;
        transition: all 0.3s ease-out;
        visibility: visible;
      }

      >p {
        display: inline-block;
        background-image: linear-gradient(90deg, var(--color-pink-30), var(--color-pink-30));
        background-position: left 0 bottom 0;
        background-repeat: no-repeat;
        background-size: 100% 1px;
        color: var(--color-pink-30);
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.71;
        text-align: center;

        &:hover {
          @media (min-width: 897px) {
            animation: line-link 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
          }
        }
      }
    }
  }

  /* ---------------------------------------------
  .box-relate-article
------------------------------------------------ */
  .box-relate-article {
    border-top: 1px solid var(--color-gray-75);
    margin-block-start: 6.25rem;
    margin-inline: -1.25rem;
    padding-block-start: 3.125rem;
    padding-inline: 1.25rem;

    @media (max-width: 896px) {
      margin-block-start: 3.75rem;
      margin-inline: 1.25rem;
      padding-inline: 0;
    }

    >.heading {
      position: relative;
      color: var(--color-text);
      font-size: 1.375rem;
      font-weight: 700;
      line-height: 1.5;
      margin-block: 1.875rem 0.9375rem;
      padding-inline-start: 1.1875rem;

      @media (max-width: 896px) {
        font-size: 1.25rem;
        padding-block-end: 0;
      }

      &::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 0.25rem;
        height: 100%;
        border-radius: 6.25rem;
        background: var(--color-pink-30);
        content: "";
      }
    }

    +.button-box {
      margin-block-start: 3.125rem;

      @media (max-width: 896px) {
        margin-block-start: 1.875rem;
      }
    }
  }

  /* ---------------------------------------------
  .box-case-logo
------------------------------------------------ */
  .box-case-logo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9375rem 1.25rem;
    margin-block-start: 1.5625rem;

    @media (max-width: 896px) {
      flex-direction: column;
      align-items: flex-start;
      margin-block-start: 1.25rem;
    }

    >.image {
      overflow: hidden;
      padding: 1.125rem;
      background-color: var(--color-white);
    }

    >.image>img {
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: 3.5rem;
      border-radius: var(--border-radius-md);

      @media (max-width: 896px) {
        max-height: 3.375rem;
      }
    }

    >.title {
      color: var(--color-text);
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.5;

      @media (min-width: 897px) {
        flex: 1;
      }
    }
  }

  /* ---------------------------------------------
  .box-case-feature
------------------------------------------------ */
  .box-case-feature {
    align-items: flex-start;
    margin-block-start: 1.875rem;

    @media (max-width: 896px) {
      margin-block-start: 1.25rem;
    }

    &.box-grid-2 {
      @media (max-width: 896px) {
        row-gap: 1.25rem;
      }
    }

    >.image {
      position: relative;
      overflow: hidden;
      border-radius: var(--border-radius-md);
      aspect-ratio: 420 / 203;

      @media (max-width: 896px) {
        aspect-ratio: 335 / 162;
        text-align: center;
      }

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
      }
    }

    >.list {
      display: grid;
      row-gap: 0.625rem;
    }

    >.list>.item {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      -moz-column-gap: 0.9375rem;
      column-gap: 0.9375rem;
    }

    >.list>.item>.badge {
      width: auto;
      min-width: 6.25rem;
      font-size: 0.8125rem;
      font-weight: 400;
      line-height: 1.69231;
      padding-block: 0.3125rem;
    }

    >.list>.item>.text {
      flex: 1;
      font-size: 0.8125rem;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.03em;
      line-height: 1.847;
      padding-block-start: 0.1875rem;
    }
  }

  /* ---------------------------------------------
  .box-qa
------------------------------------------------ */
  .box-qa {
    display: flex;
    gap: 1.625rem;
    margin-block-start: 4.375rem;

    @media (max-width: 896px) {
      flex-direction: column;
      align-items: center;
    }

    &+& {
      margin-block-start: 1.25rem;
    }

    .image {
      width: 5.5rem;
      height: 5.5rem;
      aspect-ratio: 1 / 1;
      -o-object-fit: contain;
      object-fit: contain;

      @media (min-width: 897px) {
        flex: 0 0 auto;
      }
    }

    .content {
      position: relative;
      padding: 1.875rem;
      border-radius: 0.3125rem;
      background-color: var(--color-white);

      @media (min-width: 897px) {
        flex: 1 1 auto;
      }

      @media (max-width: 896px) {
        width: 100%;
        padding: 1.25rem;
      }

      &::before {
        position: absolute;
        top: 2.1875rem;
        left: -1.1875rem;
        width: 0;
        height: 0;
        border-style: solid;
        border-top: 11px solid transparent;
        border-right: 19px solid var(--color-white);
        border-bottom: 11px solid transparent;
        border-left: 0;
        content: "";

        @media (max-width: 896px) {
          top: -1.1875rem;
          left: 50%;
          transform: translateX(-50%) rotate(90deg);
        }
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .breadcrumb
------------------------------------------------ */
  .breadcrumb {
    width: 100%;
    padding-block: 0.9375rem;

    @media (max-width: 896px) {
      padding-block: 0.625rem 1.0625rem;
    }

    >ul {
      display: flex;
      width: 100%;
      max-width: var(--max-width-xl);
      justify-content: flex-end;
      margin: 0 auto;
      gap: 1.5rem;
      list-style: none;
      padding-inline: 1.5625rem 1.25rem;

      @media (max-width: 896px) {
        max-width: 100%;
        gap: 0.125rem 1.5rem;
      }
    }

    >ul>li {
      position: relative;
      color: var(--color-text);
      font-size: 0.8125rem;
      line-height: 1.46154;

      &:not(:last-child) {
        flex-shrink: 0;
      }
    }

    >ul>li:has(a)::after {
      position: absolute;
      top: 50%;
      right: -0.9375rem;
      display: block;
      width: 0.3125rem;
      height: 0.5rem;
      background: url("/assets/images/common/icon-arrow-gray-01.svg") no-repeat center;
      content: "";
      transform: translateY(-50%);
    }

    >ul>li:last-child {
      overflow: hidden;
      max-width: 17.8125rem;
      height: 1.7em;
      text-overflow: ellipsis;
      white-space: nowrap;

      @media (max-width: 896px) {
        max-width: 13.125rem;
      }
    }

    >ul>li>a {
      color: var(--color-gray-40);
      text-decoration: none;

      @media (min-width: 897px) {
        background-image: linear-gradient(90deg, var(--color-gray-40), var(--color-gray-40));
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      }

      &:hover {
        @media (min-width: 897px) {
          background-position: 0 100%;
          background-size: 100% 1px;
        }
      }
    }

    &[data-breadcrumb-variant="bottom"] {
      padding-block: 8.4375rem 0.9375rem;

      @media (max-width: 896px) {
        padding-block: 8.125rem 0.625rem;
      }

      >ul {
        @media (max-width: 896px) {
          justify-content: flex-end;
        }
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .button-box
------------------------------------------------ */
  .button-box {
    --mt-pc: 70px;
    --mt-sp: 40px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.875rem;
    margin-block-start: var(--mt-pc);

    @media (max-width: 896px) {
      flex-direction: column;
      align-items: center;
      margin-block-start: var(--mt-sp);
    }
  }

  /* ---------------------------------------------
  .button-more
------------------------------------------------ */
  .button-more {
    --button-more-color: var(--color-pink-30);
    --button-more-icon-color: var(--color-pink-30);

    margin-block-start: 2.9375rem;
    text-align: center;
    text-decoration: none;

    @media (max-width: 896px) {
      margin-block-start: 1.6875rem;
    }

    >span {
      position: relative;
      display: inline-block;
      color: var(--button-more-color);
      cursor: pointer;
      font-size: 0.875rem;
      line-height: 1.5;
      padding-inline-end: 1rem;
      text-align: center;

      @media (min-width: 897px) {
        background-image: linear-gradient(90deg, var(--button-more-color), var(--button-more-color));
        background-position: calc(100% - 16px) 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    }

    >span::after {
      position: absolute;
      top: 50%;
      right: 0;
      width: 0.6875rem;
      height: 0.5625rem;
      background-color: var(--button-more-icon-color);
      content: "";
      -webkit-mask-image: url("/assets/images/common/icon-arrow-down-01.svg");
      mask-image: url("/assets/images/common/icon-arrow-down-01.svg");
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
      transform: translateY(-50%);
    }

    >span:hover {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: calc(100% - 1rem) 1px;
      }
    }

    &[data-variant-color="white"] {
      --button-more-color: var(--color-white);
      --button-more-icon-color: var(--color-white);
    }
  }

  /* ---------------------------------------------
  .button-primary
------------------------------------------------ */
  .button-primary {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 16.25rem;
    min-height: 3.75rem;
    align-items: center;
    padding: 0.625rem 3.75rem 0.625rem 1.875rem;
    border-radius: 6.25rem;
    background-color: var(--color-pink-30);
    box-shadow: 0 10px 20px 0 rgb(from var(--color-purple-30) r g b / 15%);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;

    @media (min-width: 897px) {
      transition: all 0.3s ease-out;
    }

    &::before,
    &::after {
      position: absolute;
      top: 50%;
      content: "";
      transform: translateY(-50%);
    }

    &::before {
      right: 0.5rem;
      width: 2.75rem;
      height: 2.75rem;
      border: 1px solid var(--color-pink-70);
      border-radius: 50%;
    }

    &::after {
      right: 1.5625rem;
      width: 0.4375rem;
      height: 0.5rem;
      background: url("/assets/images/common/icon-arrow-right-02.svg") no-repeat left top / contain;
    }

    &[target="_blank"]::after {
      width: 0.625rem;
      height: 0.625rem;
      background-color: var(--color-white);
      -webkit-mask-image: url("/assets/images/common/icon-blank-pink-01.svg");
      mask-image: url("/assets/images/common/icon-blank-pink-01.svg");
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }

    &:hover {
      @media (min-width: 897px) {
        background-color: var(--color-pink-20);
        box-shadow: none;
      }
    }

    &[data-justify-variant="center"] {
      margin-inline: auto;
    }

    &[data-button-variant="white"] {
      background-color: var(--color-white);
      color: var(--color-pink-30);

      &::before {
        border: none;
        background-color: var(--color-base-background);
      }

      &::after {
        background-color: var(--color-pink-30);
        background-image: none;
        -webkit-mask-image: url("/assets/images/common/icon-arrow-right-02.svg");
        mask-image: url("/assets/images/common/icon-arrow-right-02.svg");
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
      }

      &[target="_blank"]::after {
        background: url("/assets/images/common/icon-blank-pink-01.svg") no-repeat left top / contain;
        -webkit-mask-image: none;
        mask-image: none;
      }

      &:hover {
        @media (min-width: 897px) {
          background-color: var(--color-gray-80);
        }
      }
    }

    &[data-font-variant="english"] {
      font-family: var(--second-family);
    }

    &[data-button-variant="arrow-down"] {
      max-width: 18.75rem;
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.429;

      @media (min-width: 897px) {
        max-width: 22.3125rem;
        font-size: 1.125rem;
        line-height: 1.445;
      }

      &::before {
        border: none;
        background-color: var(--color-white);
      }

      &::after {
        right: 1.5rem;
        width: 0.6875rem;
        height: 0.5625rem;
        background-image: url("/assets/images/common/icon-arrow-down-02.svg");
      }
    }
  }

  /* ---------------------------------------------
  .button-article
------------------------------------------------ */
  .button-article {
    display: flex;
    align-items: center;
    -moz-column-gap: 0.625rem;
    column-gap: 0.625rem;

    >.icon {
      position: relative;
      display: flex;
      width: min(16vw, 3.75rem);
      height: min(16vw, 3.75rem);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--color-pink-30);
      content: "";

      @media (min-width: 897px) {
        transition: background-color 0.3s ease-out;
      }
    }

    >.text {
      color: var(--color-pink-30);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1.5;

      @media (max-width: 896px) {
        font-size: 0.8125rem;
        line-height: 1.847;
      }
    }

    &[data-disabled="true"] {
      opacity: 0.2;
      pointer-events: none;
    }

    &[data-button-direction="prev"]>.icon::after,
    &[data-button-direction="next"]>.icon::after {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.4375rem;
      height: 0.5rem;
      background: url("/assets/images/common/icon-arrow-right-02.svg") no-repeat left top / contain;
      content: "";
      transform: translate(-50%, -50%);
    }

    &[data-button-direction="prev"]>.icon::after {
      transform: translate(-50%, -50%) rotate(-180deg);
    }

    &[data-button-direction="next"]>.text {
      order: 1;
    }

    &[data-button-direction="next"]>.icon {
      order: 2;
    }

    &:hover {
      >.icon {
        @media (min-width: 897px) {
          background-color: var(--color-pink-20);
        }
      }
    }
  }

  /* ---------------------------------------------
  [data-load-more-XXX]
------------------------------------------------ */
  /* Load more items - hidden by default, JS will handle fade-in */
  [data-load-more-item] {
    display: none;
  }

  /* Load more button - hidden by default */
  [data-load-more-button] {
    display: none;
  }

  /* Load more button - Show */
  [data-load-more-button="show"] {
    display: block;
  }
}

@layer components {

  /* ---------------------------------------------
  .card-profile
------------------------------------------------ */
  .card-profile {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 7.5rem 1fr;

    @media (max-width: 896px) {
      grid-template-columns: 1fr;
    }

    >.image {
      position: relative;
      width: 7.5rem;
      margin: 0 auto;
    }

    >.image>img {
      overflow: hidden;
      width: 100% !important;
      border-radius: var(--border-radius-md);
      aspect-ratio: 120 / 135;
      -o-object-fit: cover;
      object-fit: cover;
    }

    >.detail {
      display: block;
    }

    >.detail>.name {
      color: var(--color-text);
      font-size: 1.125rem;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1.334;
    }

    >.detail>.position {
      color: var(--color-text);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.03em;
      line-height: 1.858;
      margin-block-start: 0.3125rem;
    }

    >.detail>.text {
      color: var(--color-text);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.03em;
      line-height: 1.858;
    }
  }

  /* ---------------------------------------------
  .card-article
------------------------------------------------ */
  .card-article {
    display: grid;
    padding: 1.25rem 1.875rem 1.3125rem 1.25rem;
    border-radius: var(--border-radius-md);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: var(--color-white);
    gap: 1.875rem 1.25rem;
    grid-template-columns: 13.75rem 1fr;
    text-decoration: none !important;

    @media (max-width: 896px) {
      padding: 1.25rem 1.25rem 1.75rem;
      grid-template-columns: 1fr;
    }

    >.image {
      position: relative;
      display: block;
      overflow: hidden;
      width: 13.75rem;
      border-radius: var(--border-radius-md);
      margin: 0 auto;
      aspect-ratio: 220 / 130;
      background: none !important;

      @media (max-width: 896px) {
        width: 100%;
        aspect-ratio: 295 / 174;
      }
    }

    >.image>img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;

      @media (min-width: 897px) {
        transition: transform 0.3s ease;
      }
    }

    >.detail {
      display: block;
      background-image: none !important;
      padding-block-start: 0.625rem;

      @media (max-width: 896px) {
        padding-block-start: 0;
      }
    }

    >.detail>.title {
      display: inline;
      color: var(--color-text);
      font-size: 1.125rem;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1.334;

      @media (min-width: 897px) {
        background-image: linear-gradient(90deg, var(--color-text), var(--color-text));
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    }

    >.detail>.link {
      display: block;
      color: var(--color-pink-30);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.03em;
      line-height: 1.858;
      margin-block-start: 0.3125rem;

      &::after {
        display: inline-block;
        width: 0.375rem;
        height: 0.5rem;
        background: url("/assets/images/common/icon-arrow-right-01.svg") no-repeat left top / contain;
        content: "";
        margin-inline-start: 0.4375rem;
      }
    }

    >.detail>.text {
      display: block;
      color: var(--color-text);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.03em;
      line-height: 1.858;
      margin-block-start: 0.375rem;
    }

    &:hover {
      >.image>img {
        @media (min-width: 897px) {
          transform: scale(1.1);
        }
      }

      >.detail>.title {
        @media (min-width: 897px) {
          background-position: 0 100%;
          background-size: 100% 1px;
        }
      }
    }
  }

  /* ---------------------------------------------
  .card-case
------------------------------------------------ */
  .card-case {
    display: grid;
    border-radius: var(--border-radius-md);

    @media (min-width: 897px) {
      height: 100%;
      grid-template-rows: auto 1fr auto;
    }

    >.detail {
      padding: 1.25rem 1.875rem 1.875rem;
      background: var(--color-white);

      @media (max-width: 896px) {
        padding: 1.25rem 1.25rem 1.875rem;
      }
    }

    >.detail>.title {
      color: var(--color-text);
      font-size: 1.25rem;
      font-weight: 500;
      line-height: 1.45;
    }

    >.detail>.title>span {
      @media (min-width: 897px) {
        background-image: linear-gradient(90deg, var(--color-text), var(--color-text));
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    }

    >.detail>.text {
      border-bottom: 1px solid var(--color-gray-75);
      color: var(--color-text);
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.71429;
      margin-block: 0.75rem 1rem;
      padding-block-end: 0.875rem;

      @media (max-width: 896px) {
        margin-block-start: 0.6875rem;
      }
    }

    >.detail>.category {
      display: grid;
      align-items: flex-start;
      gap: 0.625rem;
      grid-template-columns: 3.75rem 1fr;

      @media (max-width: 896px) {
        align-items: flex-start;
      }
    }

    >.detail>.category+.category {
      margin-block-start: 0.8125rem;
    }

    >.detail>.category>.heading {
      min-width: 3.75rem;
      color: var(--color-pink-30);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.42px;
      line-height: 1.5;
    }

    >.detail>.category>.list-badge {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3125rem;
    }

    >.detail>.category>.list-badge>li>.badge {
      line-height: 1.41667;
      padding-inline: 0.5625rem;
    }

    >.image {
      position: relative;
      overflow: hidden;
      aspect-ratio: 370 / 185;
      border-top-left-radius: var(--border-radius-md);
      border-top-right-radius: var(--border-radius-md);

      @media (max-width: 896px) {
        aspect-ratio: 335 / 185;
      }
    }

    >.image>img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;

      @media (min-width: 897px) {
        transition: transform 0.3s ease;
      }
    }

    >.link {
      display: flex;
      min-height: 2.6875rem;
      align-items: center;
      justify-content: center;
      padding: 0.3125rem;
      background: var(--color-pink-30);
      border-bottom-left-radius: var(--border-radius-md);
      border-bottom-right-radius: var(--border-radius-md);
      color: var(--color-white);
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.5;

      @media (min-width: 897px) {
        transition: background-color 0.3s ease-out;
      }
    }

    >.link>span {
      position: relative;
      padding-inline-end: 0.875rem;

      &::after {
        position: absolute;
        top: 50%;
        right: 0;
        width: 0.4375rem;
        height: 0.5rem;
        background: url("/assets/images/common/icon-arrow-right-02.svg") no-repeat left top / contain;
        content: "";
        transform: translateY(-50%);
      }
    }

    &:hover {
      >.image>img {
        @media (min-width: 897px) {
          transform: scale(1.1);
        }
      }

      >.detail>.title>span {
        @media (min-width: 897px) {
          background-position: 0 100%;
          background-size: 100% 1px;
        }
      }

      >.link {
        @media (min-width: 897px) {
          background-color: var(--color-pink-20);
        }
      }
    }
  }

  /* ---------------------------------------------
  .card-column
------------------------------------------------ */
  .card-column {
    display: grid;
    height: 100%;
    padding: 1.25rem;
    border-radius: var(--border-radius-lg);
    background: var(--color-white);
    grid-template-columns: 1fr;

    @media (min-width: 897px) {
      grid-auto-rows: 1fr;
      grid-template-rows: auto 1fr auto;
    }

    &:hover {
      >.image>img {
        @media (min-width: 897px) {
          transform: scale(1.1);
        }
      }

      >.detail>.title>span {
        @media (min-width: 897px) {
          background-position: 0 100%;
          background-size: 100% 1px;
        }
      }
    }

    >.image {
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: var(--border-radius-md);
      aspect-ratio: 295 / 178;

      @media (min-width: 897px) {
        aspect-ratio: 330 / 200;
      }
    }

    >.image>img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;

      @media (min-width: 897px) {
        transition: transform 0.3s ease;
      }
    }

    >.detail>.badge {
      max-width: 100%;
      margin-block-start: 1.25rem;
    }

    >.detail>.badge>span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    >.detail>.title {
      color: var(--color-text);
      font-size: 1.125rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 1.55556;
      margin-block-start: 0.625rem;
    }

    >.detail>.title>span {
      @media (min-width: 897px) {
        background-image: linear-gradient(90deg, var(--color-text), var(--color-text));
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    }

    >.date {
      border-top: 1px solid var(--color-gray-75);
      margin-block-start: 0.75rem;
      padding-block-start: 0.5rem;
    }

    >.date>time {
      color: var(--color-gray-40);
      font-family: var(--second-family);
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.03em;
      line-height: 2;
    }

    &[data-column-variant="transparent"] {
      background-color: rgb(from var(--color-white) r g b / 10%);

      @media (min-width: 897px) {
        transition: background-color 0.3s ease-out;
      }

      &:hover {
        @media (min-width: 897px) {
          background-color: rgb(from var(--color-white) r g b / 20%);
        }
      }

      >.detail>.badge {
        border-color: rgb(from var(--color-white) r g b / 30%);
        color: var(--color-white);
      }

      >.detail>.title {
        color: var(--color-white);
      }

      >.detail>.title>span {
        @media (min-width: 897px) {
          background-image: linear-gradient(90deg, var(--color-white), var(--color-white));
        }
      }

      >.date {
        border-color: rgb(from var(--color-white) r g b / 30%);
      }

      >.date>time {
        color: var(--color-white);
      }
    }
  }

  /* ---------------------------------------------
  .list-card-movie
------------------------------------------------ */
  .list-card-movie {
    display: grid;
    padding: 0;
    margin: 0;
    margin-top: 3.125rem;
    gap: 1.875rem 1.25rem;
    grid-template-columns: repeat(2, 1fr);
    list-style: none;

    @media (min-width: 897px) {
      gap: 1.875rem;
    }

    @media (max-width: 896px) {
      gap: 1.875rem;
      grid-template-columns: 1fr;
    }

    >li {
      display: grid;
      gap: 0.75rem;
      grid-template-rows: auto 1fr;
    }

    >li>.title {
      color: var(--color-text);
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      line-height: 1.5;
      text-align: center;

      @media (max-width: 896px) {
        font-size: 0.875rem;
      }
    }

    >li>.text {
      font-size: 0.875rem;
      line-height: 1.86;
    }

    >li>.movie {
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: var(--border-radius-md);
    }

    >li>.movie>div {
      width: 100%;
    }
  }

  /* ---------------------------------------------
  .card-movie
------------------------------------------------ */
  .card-movie {}
}

@layer components {

  /* ---------------------------------------------
  .download-blog
------------------------------------------------ */
  .download-blog {
    display: flex;
    height: 100%;
    flex-direction: column;
    border-radius: var(--border-radius-md);
    background: var(--color-white);

    &:hover {
      >.link {
        @media (min-width: 897px) {
          background-color: var(--color-pink-20);
        }
      }

      >.detail>.title>span {
        @media (min-width: 897px) {
          background-position: 0 100%;
          background-size: 100% 1px;
        }
      }

      >.image img {
        @media (min-width: 897px) {
          transform: scale(1.1);
        }
      }
    }

    >.detail {
      flex-grow: 1;
      padding: 1.25rem 1.875rem 1.875rem;
    }

    >.detail>.title {
      color: var(--color-text);
      font-size: 1.25rem;
      font-style: normal;
      font-weight: 500;
      line-height: 1.5;

      @media (max-width: 896px) {
        font-size: 1.125rem;
      }
    }

    >.detail>.title>span {
      background-image: linear-gradient(90deg, var(--color-text), var(--color-text));
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
    }

    >.image {
      padding: 0.625rem;
      border-top-left-radius: var(--border-radius-md);
      border-top-right-radius: var(--border-radius-md);
    }

    >.image>.wrap {
      overflow: hidden;
      border-radius: 0.3125rem;

      img {
        display: block;
        width: 100%;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
        transition: transform 0.3s ease;
      }
    }

    >.link {
      position: relative;
      display: flex;
      height: 2.6875rem;
      flex-shrink: 0;
      align-items: center;
      align-self: stretch;
      justify-content: center;
      padding: 0.3125rem 0.3125rem 0.3125rem 0.625rem;
      background: var(--color-pink-30);
      border-bottom-left-radius: var(--border-radius-md);
      border-bottom-right-radius: var(--border-radius-md);
      gap: 0.3125rem;
      transition: background-color 0.3s ease-out;

      &::after {
        display: inline-block;
        width: 0.6875rem;
        height: 0.6875rem;
        background-color: var(--color-white);
        content: "";
        -webkit-mask-image: url("/assets/images/common/icon-download-01.svg");
        mask-image: url("/assets/images/common/icon-download-01.svg");
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
      }
    }

    >.link>span {
      color: var(--color-white);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
  }

  /* ---------------------------------------------
  .download-detail
------------------------------------------------ */
  .download-detail {
    display: grid;
    gap: 3.125rem clamp(1.25rem, calc(-10.625rem + 20.51282vw), 4.375rem);
    grid-template-columns: 1fr clamp(20.9375rem, calc(-1.875rem + 47.86325vw), 33.125rem);

    @media (max-width: 896px) {
      grid-template-columns: 100%;
    }

    >.content>.image {
      overflow: hidden;
      padding: 0.9375rem;
      background-color: var(--color-white);
      margin-block-end: 3.125rem;

      @media (max-width: 896px) {
        padding: 0.625rem;
      }
    }

    >.content>.image img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 0.5rem;
      -o-object-fit: cover;
      object-fit: cover;

      @media (max-width: 896px) {
        border-radius: 0.3125rem;
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .hsfc-Step__Content
------------------------------------------------ */
  .hsfc-Step__Content {
    padding: 0 !important;
  }

  .hsfc-Row {
    margin-bottom: 1.625rem !important;

    &:has(.hsfc-CheckboxField) {
      margin-bottom: 0.3125rem !important;
    }
  }

  /* ---------------------------------------------
  form components initial style
------------------------------------------------ */
  .hsfc-TextInput,
  .hsfc-TextareaInput,
  .hsfc-CheckboxInput,
  .hsfc-PhoneInput__FlagAndCaret {
    margin: 0 !important;
    background-color: var(--color-white) !important;
    box-shadow: none !important;
    color: var(--color-text) !important;
    font-family: var(--font-family) !important;
  }

  /* ---------------------------------------------
  .hsfc-CheckboxInput
------------------------------------------------ */
  .hsfc-CheckboxInput {
    border: 2px solid var(--color-gray-75) !important;
    border-radius: 0.3125rem !important;
    top: 1px;

    &:checked::after {
      /* stylelint-disable-next-line custom-property-pattern */
      --hsf-field-checkbox__color: var(--color-pink-30);
    }
  }

  /* ---------------------------------------------
  .hsfc-TextInput
------------------------------------------------ */
  .hsfc-TextInput {
    height: 3.625rem !important;
    padding: 0.9375rem 0.875rem !important;
    border: 2px solid var(--color-gray-75) !important;
    border-radius: 0.3125rem !important;
    font-size: 0.9375rem !important;

    &::-moz-placeholder {
      color: var(--color-gray-60) !important;
    }

    &::placeholder {
      color: var(--color-gray-60) !important;
    }
  }

  /* ---------------------------------------------
  .hsfc-PhoneInput
------------------------------------------------ */
  .hsfc-PhoneInput {
    gap: 0.1875rem !important;
  }

  .hsfc-PhoneInput__FlagAndCaret {
    height: 3.625rem !important;
    border: 2px solid var(--color-gray-75) !important;
    border-radius: 0.3125rem !important;
    font-size: 0.9375rem !important;

    &::-moz-placeholder {
      color: var(--color-gray-60) !important;
    }

    &::placeholder {
      color: var(--color-gray-60) !important;
    }
  }

  /* ---------------------------------------------
  .hsfc-DropdownOptions__List__ListItem
------------------------------------------------ */
  .hsfc-DropdownOptions__List__ListItem {
    box-shadow: none !important;
    color: var(--color-text) !important;
    font-family: var(--font-family) !important;
  }

  /* ---------------------------------------------
  .hsfc-TextareaInput
------------------------------------------------ */
  .hsfc-TextareaInput {
    padding: 0.9375rem 0.875rem !important;
    border: 2px solid var(--color-gray-75) !important;
    border-radius: 0.3125rem !important;
    font-size: 0.9375rem !important;

    &::-moz-placeholder {
      color: var(--color-gray-60) !important;
    }

    &::placeholder {
      color: var(--color-gray-60) !important;
    }
  }

  /* ---------------------------------------------
  .hsfc-DropdownInput
------------------------------------------------ */
  .hsfc-DropdownInput {
    .hsfc-DropdownInput__Caret>span {
      border: none !important;
    }

    .hsfc-DropdownInput__Caret>span::after {
      position: absolute;
      top: 50%;
      right: 1rem;
      width: 0.6875rem;
      height: 0.5625rem;
      background-color: var(--color-pink-30);
      content: "";
      -webkit-mask-image: url("/assets/images/common/icon-arrow-down-01.svg");
      mask-image: url("/assets/images/common/icon-arrow-down-01.svg");
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
      transform: translateY(-50%);
    }
  }

  /* ---------------------------------------------
  form layout
------------------------------------------------ */
  .hsfc-TextField,
  .hsfc-TextareaField,
  .hsfc-PhoneField {
    display: flex;
    flex-direction: column;
  }

  .hsfc-FieldLabel {
    order: 1;
  }

  .hsfc-TextInput,
  .hsfc-TextareaInput,
  .hsfc-PhoneInput {
    order: 2;
  }

  .hsfc-FieldDescription {
    order: 3;
  }

  .hsfc-ErrorAlert {
    order: 4;
  }

  .hsfc-NavigationRow__Buttons {
    justify-content: center !important;
  }

  /* ---------------------------------------------
  form label style
------------------------------------------------ */
  .hsfc-RichText,
  .hsfc-FieldLabel {
    color: var(--color-text) !important;
    font-family: var(--font-family) !important;
    font-size: 1rem !important;
  }

  .hsfc-RichText {
    a {
      color: var(--color-pink-30) !important;
      text-decoration: underline !important;
      text-underline-offset: 3px;

      &:hover {
        @media (min-width: 897px) {
          text-decoration: none !important;
        }
      }
    }
  }

  .hsfc-FieldLabel>.hsfc-CheckboxInput+span,
  .hsfc-FieldLabel>.hsfc-CheckboxInput+span>span {
    color: var(--color-text) !important;
    font-family: var(--font-family) !important;
    font-size: 1rem !important;
    font-weight: normal !important;
  }

  .hsfc-FieldLabel {
    margin-bottom: 0.625rem !important;
    font-weight: 700 !important;
  }

  .hsfc-FieldLabel>span,
  .hsfc-FieldLabel__RequiredIndicator {
    display: inline-flex;
    align-items: center;
  }

  .hsfc-FieldLabel__RequiredIndicator {
    flex: 0 0 auto;
  }

  .hsfc-FieldLabel__RequiredIndicator::before {
    margin-left: 0.625rem;
    color: var(--color-text-danger) !important;
    content: "必須";
    font-family: var(--font-family) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1;
  }

  /* .hsfc-CheckboxInput + span > .hsfc-FieldLabel__RequiredIndicator::before {
  display: none;
} */

  /* ---------------------------------------------
  .hsfc-FieldDescription
------------------------------------------------ */
  .hsfc-FieldDescription {
    margin-top: 0.4375rem !important;
    margin-bottom: 0 !important;
    color: var(--color-gray-40) !important;
    font-family: var(--font-family) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
  }

  /* ---------------------------------------------
  .hsfc-ErrorAlert
------------------------------------------------ */
  .hsfc-ErrorAlert {
    margin-top: 0.4375rem !important;
    color: var(--color-text-danger) !important;
    font-family: var(--font-family) !important;
    font-size: 0.875rem !important;
    font-weight: normal !important;
  }

  /* ---------------------------------------------
  .hsfc-Button
------------------------------------------------ */
  .hsfc-Button {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    max-width: 16.25rem !important;
    min-height: 3.75rem !important;
    align-items: center !important;
    padding: 0.625rem 3.75rem 0.625rem 1.875rem !important;
    border-style: none !important;
    border-radius: 6.25rem !important;
    background-color: var(--color-pink-30) !important;
    background-image: none !important;
    box-shadow: 0 10px 20px 0 rgb(from var(--color-purple-30) r g b / 15%) !important;
    color: var(--color-white) !important;
    font-family: var(--font-family) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    line-height: 1.5 !important;
    text-align: left !important;
    transform: none !important;

    @media (min-width: 897px) {
      transition: all 0.3s ease-out !important;
    }

    &::before {
      position: absolute !important;
      top: 50% !important;
      right: 0.5rem !important;
      width: 2.75rem !important;
      height: 2.75rem !important;
      border: 1px solid var(--color-pink-70) !important;
      border-radius: 50% !important;
      background-color: transparent !important;
      content: "" !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
      transform: translateY(-50%) !important;
    }

    &::after {
      position: absolute !important;
      top: 50% !important;
      right: 1.5625rem !important;
      width: 0.4375rem !important;
      height: 0.5rem !important;
      background: url("/assets/images/common/icon-arrow-right-02.svg") no-repeat left top / contain !important;
      content: "" !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
      transform: translateY(-50%) !important;
    }

    &:not([disabled]):hover {
      background-color: var(--color-pink-20) !important;
      transform: none !important;
    }

    &:not([disabled]):active {
      transform: none !important;
    }
  }

  /* ---------------------------------------------
  .form-learning
------------------------------------------------ */
  .form-learning {
    padding: 3.125rem 2.5rem;
    background-color: var(--color-white);
    border-radius: 0.1875rem !important;

    @media (max-width: 896px) {
      padding: 1.875rem 1.25rem;
    }

    >.inner {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }
  }

  /* ---------------------------------------------
  .form-learning
------------------------------------------------ */
  /* .form-learning {
  padding: 50px 40px;
  background-color: var(--color-white);

  @media (--sm) {
    padding: 30px 20px;
  }

  > .inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  > .inner > .group > .box {
    display: flex;
    gap: 10px;
  }

  > .inner > .group > .label {
    display: flex;
    align-items: center;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 700;
    gap: 10px;
    margin-block-end: 7px;

    &:has(.required) {
      min-height: 30px;
    }
  }

  > .inner > .group > .label > .required {
    flex: 1 0 auto;
    color: var(--color-text-danger);
    font-size: 12px;
    font-weight: 700;
  }

  > .inner > .group > .note {
    color: var(--color-gray-40);
    font-size: 12px;
    line-height: calc(25 / 12);
    margin-block-start: 5px;
  }

  > .inner > .group > .privacy {
    display: flex;
    flex-direction: column;
    gap: 50px;

    @media (--sm) {
      gap: 30px;
    }
  }

  > .inner > .group > .privacy > .wrap {
    display: flex;
    flex-direction: column;
    gap: 17px;
  }

  > .inner > .group > .privacy > .wrap > .text {
    font-size: 14px;
    letter-spacing: 0.05em;
    line-height: calc(24 / 14);

    a {
      text-decoration: underline;
      text-underline-offset: 2px;
    }
  }
} */

  .form-contact {
    p+& {
      margin-top: 3.125rem !important;
    }

    .hsfc-RichText {
      p {
        color: var(--color-text) !important;
        font-family: var(--font-family) !important;
        font-size: 1rem !important;
      }
    }

    .hsfc-Row {
      margin-bottom: 1.25rem !important;

      &:first-child:has(> .hsfc-RichText) {
        margin-bottom: 3.125rem !important;
      }

      &:not(:first-child):has(> .hsfc-RichText) {
        margin-top: 3.125rem !important;
      }

      &:has(> .hsfc-CheckboxField) {
        /* width: calc(50% - 50px) !important; */
        /* display: inline-flex !important; */
        /* justify-content: flex-end !important; */
        /* margin: 10px 25px 0 !important; */

        +.hsfc-Row:has(> .hsfc-CheckboxField) {
          /* justify-content: flex-start !important; */
        }

        label {
          margin-bottom: 0 !important;
        }
      }
    }

    .hsfc-NavigationRow {
      margin-top: 3.125rem !important;
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .heading-02
------------------------------------------------ */
  .heading-02 {
    --mb-pc: 20px;
    --mb-sp: 20px;

    font-size: 2.125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.47059;
    margin-block-end: var(--mb-pc);

    @media (max-width: 896px) {
      font-size: 1.5rem;
      line-height: 1.5;
      margin-block-end: var(--mb-sp);
    }

    &[data-heading-variant="sm"] {
      font-size: 1.875rem;
      line-height: 1.46667;

      @media (max-width: 896px) {
        font-size: 1.375rem;
        line-height: 1.5;
      }
    }

    +* {
      margin-block-start: 0 !important;
    }
  }

  /* ---------------------------------------------
  .heading-03
------------------------------------------------ */
  .heading-03 {
    --mt-pc: 30px;
    --mt-sp: 20px;
    --mb-pc: 31px;
    --mb-sp: 20px;

    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.5;
    margin-block: var(--mt-pc) var(--mb-pc);

    @media (max-width: 896px) {
      margin-block: var(--mt-sp) var(--mb-sp);
    }

    &:first-child {
      margin-block-start: 0;
    }

    +* {
      margin-block-start: 0 !important;
    }
  }

  /* ---------------------------------------------
  .heading-detail
------------------------------------------------ */
  .heading-detail {
    border-bottom: 1px solid var(--color-gray-75);
    margin-block-end: 3.75rem;

    @media (max-width: 896px) {
      margin-block-end: 3.75rem;
    }

    >.page-heading {
      color: var(--color-pink-30);
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.9;
      margin-block-end: 0.75rem;
    }

    >.box {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.9375rem;
      margin-block-end: 3rem;

      @media (max-width: 896px) {
        margin-block-end: 3.0625rem;
      }
    }

    >.box>.date {
      color: var(--color-pink-30);
      font-family: var(--second-family);
      font-size: 1rem;
      font-weight: 400;
      line-height: 2;

      @media (max-width: 896px) {
        line-height: 1.5;
      }
    }

    >.box>.detail {
      flex: 1;
    }
  }

  /* ---------------------------------------------
  .heading-icon
------------------------------------------------ */
  .heading-icon {
    --heading-color: var(--color-text);
    --heading-icon-color: var(--color-pink-30);

    display: inline-flex;
    align-items: center;
    color: var(--heading-color);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.65;

    &::before {
      display: inline-block;
      width: 1.5rem;
      height: 1.5rem;
      background-color: var(--heading-icon-color);
      content: "";
      margin-inline-end: 0.3125rem;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }

    &[data-icon-variant="corner"] {
      &::before {
        -webkit-mask-image: url("/assets/images/common/icon-corner-01.svg");
        mask-image: url("/assets/images/common/icon-corner-01.svg");
      }
    }

    &[data-icon-variant="tag"] {
      &::before {
        -webkit-mask-image: url("/assets/images/common/icon-tag-01.svg");
        mask-image: url("/assets/images/common/icon-tag-01.svg");
      }
    }

    &[data-variant-color="white"] {
      --heading-color: var(--color-white);
      --heading-icon-color: var(--color-white);
    }
  }

  /* ---------------------------------------------
  .heading-text
------------------------------------------------ */
  .heading-text {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.33333;

    @media (min-width: 897px) {
      font-size: 2.5rem;
      line-height: 1.15;
    }

    &[data-heading-variant="small"] {
      font-size: 1.125rem;
      line-height: 1.5;
      margin-block-end: 1.25rem;
    }
  }

  /* ---------------------------------------------
  .heading-border-left
------------------------------------------------ */
  .heading-border-left {
    position: relative;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    margin-block-end: 1.875rem;
    padding-inline-start: 1.1875rem;

    @media (min-width: 897px) {
      font-size: 1.375rem;
    }

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 0.25rem;
      height: 100%;
      border-radius: 6.25rem;
      background-color: var(--color-pink-30);
      content: "";
    }
  }

  /* ---------------------------------------------
  .heading-double-border
------------------------------------------------ */
  .heading-double-border {
    position: relative;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.36364;
    margin-block-end: 1.875rem;
    padding-block-end: 1.625rem;

    @media (min-width: 897px) {
      font-size: 1.75rem;
      line-height: 1.286;
      padding-block-end: 1.5625rem;
    }

    &::before,
    &::after {
      position: absolute;
      bottom: 0;
      height: 0.3125rem;
      border-radius: 1.25rem;
      content: "";
    }

    &::before {
      left: 0;
      width: 2.5rem;
      background-color: var(--color-pink-30);
    }

    &::after {
      left: 2.8125rem;
      width: 1.25rem;
      background-color: var(--color-purple-30);
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .hero
------------------------------------------------ */
  .hero {
    @media (min-width: 897px) {
      margin: 0 1.25rem;
    }

    >.inner {
      position: relative;
      width: 100%;
      padding-block: 2.8125rem 3rem;

      @media (min-width: 897px) {
        padding-block: 4.1875rem 5.25rem;
      }
    }

    >.inner>h1 {
      display: flex;
      width: 100%;
      max-width: var(--max-width-xl);
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      margin: 0 auto;
      padding-inline: 1.25rem;
      row-gap: 0.6875rem;

      @media (max-width: 896px) {
        max-width: 100%;
        row-gap: 0.3125rem;
      }
    }

    >.inner>h1>.subtitle {
      color: var(--color-pink-30);
      font-family: var(--second-family);
      font-size: 1.625rem;
      font-weight: 700;
      line-height: 1.38462;

      @media (max-width: 896px) {
        font-size: 1.375rem;
      }
    }

    >.inner>h1>.title {
      --font-size-pc: 58px;
      --font-size-sp: 34px;

      color: var(--color-text);
      font-size: var(--font-size-pc);
      font-weight: 700;
      line-height: 1.06897;

      @media (max-width: 896px) {
        font-size: var(--font-size-sp);
        line-height: 1.29412;
      }
    }

    &[data-hero-variant="no-image"] {

      >.inner>h1>.subtitle,
      >.inner>h1>.title {
        letter-spacing: 0.05em;
      }
    }

    &[data-size-variant="small"] {
      >.inner {
        padding-block: 3.3125rem 1.1875rem;

        @media (min-width: 897px) {
          padding-block: 4.0625rem 2.5625rem;
        }
      }

      >.inner>h1 {
        row-gap: 1rem;
      }

      >.inner>h1>.subtitle {
        font-family: var(--font-family);
        font-size: 1.25rem;
        line-height: 1.5;
      }

      >.inner>h1>.title {
        font-size: 2.5rem;
        line-height: 1.475;

        @media (max-width: 896px) {
          font-size: 1.5rem;
          line-height: 1.5;
        }
      }
    }

    &[data-hero-variant="bg-gradient"] {
      min-height: 16.0625rem;
      background: linear-gradient(104deg, var(--color-pink-30) 0.41%, var(--color-purple-40) 100%);

      @media (min-width: 897px) {
        min-height: 17.625rem;
        border-radius: var(--border-radius-lg);
      }

      >.breadcrumb {
        @media (max-width: 896px) {
          padding-block-start: 0.625rem;
        }
      }

      >.breadcrumb>ul>li {
        color: var(--color-white);
      }

      >.breadcrumb>ul>li>a {
        color: var(--color-gray-70);
      }

      >.inner {
        padding-block: 1rem;

        @media (min-width: 897px) {
          padding-block: 1.3125rem;
        }
      }

      >.inner>h1 {
        margin-block-end: 1rem;

        @media (min-width: 897px) {
          margin-block-end: 0.875rem;
        }
      }

      >.inner>h1>img {
        height: auto;
        margin-inline: auto;
      }

      >.inner>p {
        width: 100%;
        max-width: var(--max-width-xl);
        color: var(--color-white);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        line-height: 2;
        margin-inline: auto;
        padding-inline: 1.25rem;
        text-align: center;

        @media (max-width: 896px) {
          font-size: 0.875rem;
          line-height: 1.85714;
        }
      }

      &[data-page-variant="detail"] {
        >.inner {
          padding-block-end: 2.1875rem;

          @media (min-width: 897px) {
            padding-block: 0.9375rem 2.8125rem;
          }
        }
      }

      >.inner>.box {
        display: grid;
        max-width: var(--desktop-content-width-narrow);
        margin: 0 auto;
        padding-inline: 1.25rem;
      }

      >.inner>.box>h1>img {
        height: auto;
      }

      >.inner>.box+.box {
        margin-block-start: 1.1875rem;

        @media (max-width: 896px) {
          margin-block-start: 0.875rem;
        }
      }

      >.inner>.box>.date {
        @media (max-width: 896px) {
          position: relative;
          top: 0.25rem;
        }
      }

      >.inner>.box:nth-child(1) {
        align-items: flex-end;
        justify-content: space-between;
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        padding-inline: 1.25rem;
      }

      >.inner>.box:nth-child(1)>.date {
        color: var(--color-white);
        font-family: var(--second-family);
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.03em;

        @media (min-width: 897px) {
          position: relative;
          top: 0.25rem;
        }
      }

      >.inner>.box:nth-child(2)>.title {
        border-top: 1px solid var(--color-pink-70);
        color: var(--color-white);
        font-size: 2.5rem;
        font-style: normal;
        font-weight: 700;
        line-height: 1.35;
        padding-block-start: 1.375rem;

        @media (max-width: 896px) {
          font-size: 1.625rem;
          line-height: 1.46154;
          padding-block-start: 1.25rem;
        }
      }

      >.inner>.box:nth-child(2)>.badge {
        padding: 0.5rem 1.125rem;
        font-weight: 400;
        margin-block-start: 0.625rem;

        @media (min-width: 897px) {
          font-size: 0.8125rem;
          line-height: 1.69231;
          margin-block-start: 0.8125rem;
          padding-block: 0.5625rem;
        }
      }

      >.inner>.box:nth-child(2)>.tags {
        margin-block-start: 0.625rem;
      }
    }

    &[data-hero-variant="bg-column"] {
      position: relative;
      overflow: hidden;
      background: linear-gradient(104deg, var(--color-pink-30) 0.41%, var(--color-purple-40) 100%);

      @media (min-width: 897px) {
        border-radius: var(--border-radius-lg);
      }

      >.breadcrumb {
        @media (max-width: 896px) {
          padding-block-start: 0.625rem;
        }
      }

      >.breadcrumb>ul>li {
        color: var(--color-white);
      }

      >.breadcrumb>ul>li>a {
        color: var(--color-gray-70);
      }

      >.inner {
        padding: 4.1875rem 1.25rem 2.375rem;

        @media (min-width: 897px) {
          max-width: var(--max-width-xl);
          margin-inline: auto;
          padding-block: 5.3125rem 4.5625rem;
        }
      }

      >.inner>h1 {
        padding: 0;
        margin-block-end: 1.0625rem;

        @media (min-width: 897px) {
          margin-block-end: 1.5625rem;
        }
      }

      >.inner>h1>img {
        width: 100%;
        max-width: 19.5625rem;
        height: auto;
        margin-inline: auto;

        @media (min-width: 897px) {
          max-width: 31.1875rem;
        }
      }

      >.inner>p {
        width: 100%;
        color: var(--color-white);
        font-size: 1.125rem;
        font-weight: 700;
        letter-spacing: 0.48px;
        line-height: 2;
        margin-inline: auto;
        text-align: center;

        @media (max-width: 896px) {
          font-size: 0.875rem;
          line-height: 1.75;
        }
      }

      >.inner>.box-corner-tag {
        margin-block-start: 2.125rem;

        @media (min-width: 897px) {
          margin-block-start: 4.375rem;
        }
      }

      >.inner>.box-corner-tag>.list-card-corner {
        margin-block-start: 0.5625rem;
      }

      >.inner>.box-corner-tag>.heading-icon:not(:first-child) {
        margin-block-start: 3.125rem;
      }

      >.inner>.box-corner-tag>.list-tag {
        margin-block-start: 1rem;
      }

      >.inner>.box-corner-tag>.list-tag>li>a {
        color: var(--color-white);
      }

      >.inner>.box-corner-tag>.button-more {
        margin-block-start: 1.0625rem;
      }
    }

    &[data-width-variant="narrow"] {
      >.inner>h1 {
        @media (min-width: 897px) {
          max-width: var(--desktop-content-width-narrow);
        }
      }
    }
  }

  /* ---------------------------------------------
  .hero-lp
------------------------------------------------ */
  .hero-lp {
    display: flex;
    min-height: 18.75rem;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background: linear-gradient(104.25deg, var(--color-pink-30) 0.41%, var(--color-purple-40) 100%),
      var(--color-base-background);
    color: var(--color-white);

    >.inner {
      width: 100%;
      padding-inline: 1.25rem;

      @media (min-width: 897px) {
        max-width: var(--max-width-xl);
        margin: 0 auto;
      }
    }

    >.inner>h1 {
      display: grid;
      padding-block-start: 1.625rem;
      row-gap: 0.3125rem;
      text-align: center;

      @media (min-width: 897px) {
        row-gap: 0.6875rem;
      }
    }

    >.inner>h1>.subtitle {
      font-family: var(--second-family);
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.5;
    }

    >.inner>h1>.title {
      font-size: 2.25rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.4723;

      @media (min-width: 897px) {
        font-size: 3rem;
        line-height: 1.47917;
      }
    }
  }
}

@layer components {
  :root {
    --color-base-black: #0c0b0c;
    --color-black: #000;
    --color-base-background: #f6f7f9;
    --color-white: #fff;
    --color-text: #111;
    --color-gray-90: #f9f9f9;
    --color-gray-80: #efefef;
    --color-gray-75: #e0e0e0;
    --color-gray-70: #ccc;
    --color-gray-60: #aaa;
    --color-gray-50: #999;
    --color-gray-40: #797979;
    --color-gray-30: #626262;
    --color-gray-20: #4c4c4c;
    --color-gray-10: #222;
    --color-pink-90: #f8eff3;
    --color-pink-80: #edcfd9;
    --color-pink-70: #e9b9c9;
    --color-pink-60: #e3a4b9;
    --color-pink-50: #d985a1;
    --color-pink-40: #cc6889;
    --color-pink-30: #c85179;
    --color-pink-20: #ae375f;
    --color-pink-10: #7f2745;
    --color-pink-5: #601931;
    --color-purple-90: #f0ebf4;
    --color-purple-80: #e2d1ef;
    --color-purple-70: #ceaee7;
    --color-purple-60: #b58cd5;
    --color-purple-50: #9667bd;
    --color-purple-40: #844ead;
    --color-purple-30: #65318e;
    --color-purple-20: #55237d;
    --color-purple-10: #3b1a55;
    --color-purple-5: #2f1246;
    --color-text-danger: #ff4c35;
    --color-yellow-20: #fff28e;
    --color-yellow-10: #f7e138;
  }
}

@layer components {
  :root {
    --font-family: "Noto Sans JP", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
    --second-family: "Prompt", sans-serif;
    --inter-family: "Inter", sans-serif;
    --font-size-base: 1rem;
  }
}

@layer components {

  /* ---------------------------------------------
  @keyframes top-logo-scale
------------------------------------------------ */
  @keyframes top-logo-scale {
    0% {
      transform: scale(0);
    }

    100% {
      transform: scale(1);
    }
  }

  /* ---------------------------------------------
  @keyframes logo-rotate
------------------------------------------------ */
  @keyframes logo-rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  /* ---------------------------------------------
  @keyframes top-heading-scale
------------------------------------------------ */
  @keyframes top-heading-scale {
    0% {
      opacity: 0;
      transform: scale(0);
    }

    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* ---------------------------------------------
  @keyframes text-scroll-effect
------------------------------------------------ */
  @keyframes text-scroll-effect {
    0% {
      width: 0;
    }

    50% {
      width: 4.375rem;
    }

    75% {
      transform: translateX(0);
    }

    100% {
      width: 4.375rem;
      transform: translateX(-100%);
    }
  }
}

@layer components {
  :root {
    --desktop-design: 1600px;
    --mobile-design: 375px;
    --desktop-content-width: 1210px;
    --mobile-content-width: 375px;
    --desktop-content-width-narrow: 910px;
    --max-width-xxl: 1512px;
    --max-width-xl: 1210px;
    --max-width-tb: 1024px;
    --max-width-lg: 870px;
    --border-radius-lg: 10px;
    --border-radius-md: 5px;
    --border-radius-sm: 3px;
  }
}

@layer components {
  :root {
    --transition-duration: 0.3s;
    --transition-timing-function: ease-out;
  }
}

@layer components {

  /* ---------------------------------------------
  a[href^="tel:"]
------------------------------------------------ */
  a[href^="tel:"] {
    @media (min-width: 897px) {
      pointer-events: none;
    }

    @media screen and (max-width: 896px) {
      text-decoration: underline;
    }
  }

  /* ---------------------------------------------
  .link-default
------------------------------------------------ */
  .link-default {
    color: var(--color-pink-30);

    @media (min-width: 897px) {
      background-image: linear-gradient(90deg, var(--color-pink-30), var(--color-pink-30));
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    &[target="_blank"],
    &[href$=".pdf"] {
      &::after {
        display: inline-block;
        content: "";
        margin-inline-start: 0.3125rem;
      }
    }

    &[target="_blank"] {
      @media (min-width: 897px) {
        background-position: calc(100% - 15px) 100%;
      }

      &::after {
        width: 0.625rem;
        height: 0.625rem;
        background: url("/assets/images/common/icon-blank-pink-01.svg") no-repeat left top / contain;
      }
    }

    &[href$=".pdf"] {
      @media (min-width: 897px) {
        background-position: calc(100% - 33px) 100%;
      }

      &::after {
        width: 1.75rem;
        height: 0.875rem;
        background: url("/assets/images/common/icon-pdf-01.svg") no-repeat left top / contain;
      }
    }

    &:hover {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }

      &[target="_blank"] {
        @media (min-width: 897px) {
          background-position: -15px 100%;
        }
      }

      &[href$=".pdf"] {
        @media (min-width: 897px) {
          background-position: -33px 100%;
        }
      }
    }
  }

  /* ---------------------------------------------
  .link-underline
------------------------------------------------ */
  .link-underline {
    --bg-size-full: 100%;
    --bg-offset-right: 0;

    background-image: linear-gradient(90deg, var(--color-pink-30), var(--color-pink-30));
    background-position: left 0 bottom 0;
    background-repeat: no-repeat;
    background-size: var(--bg-size-full) 1px;
    color: var(--color-pink-30);

    &:hover {
      @media (min-width: 897px) {
        animation: line-link 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
      }
    }

    &[target="_blank"],
    &[href$=".pdf"] {
      &::after {
        display: inline-block;
        content: "";
        margin-inline-start: 0.3125rem;
        vertical-align: middle;
      }
    }

    &[target="_blank"] {
      --bg-size-full: calc(100% - 15px);
      --bg-offset-right: 15px;

      &::after {
        width: 0.625rem;
        height: 0.625rem;
        background: url("/assets/images/common/icon-blank-pink-01.svg") no-repeat left top / contain;
      }
    }

    &[href$=".pdf"] {
      --bg-size-full: calc(100% - 33px);
      --bg-offset-right: 33px;

      &::after {
        width: 1.75rem;
        height: 0.875rem;
        background: url("/assets/images/common/icon-pdf-01.svg") no-repeat left top / contain;
      }
    }
  }

  /* ---------------------------------------------
  .link-arrow
------------------------------------------------ */
  .link-arrow {
    --bg-size-full: calc(100% - 14px);
    --bg-offset-right: 14px;

    background-image: linear-gradient(90deg, var(--color-pink-30), var(--color-pink-30));
    background-position: left 0 bottom 0;
    background-repeat: no-repeat;
    background-size: var(--bg-size-full) 1px;
    color: var(--color-pink-30);

    &::after {
      position: relative;
      top: -1px;
      display: inline-block;
      width: 0.4375rem;
      height: 0.5rem;
      background-color: var(--color-pink-30);
      content: "";
      margin-inline-start: 0.4375rem;
      -webkit-mask-image: url("/assets/images/common/icon-arrow-right-02.svg");
      mask-image: url("/assets/images/common/icon-arrow-right-02.svg");
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
      vertical-align: middle;
    }

    &:hover {
      @media (min-width: 897px) {
        animation: line-link 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
      }
    }

    &[target="_blank"],
    &[href$=".pdf"] {
      &::after {
        top: 0;
        margin-inline-start: 0.3125rem;
        -webkit-mask-image: none;
        mask-image: none;
      }
    }

    &[target="_blank"] {
      --bg-size-full: calc(100% - 15px);
      --bg-offset-right: 15px;

      &::after {
        width: 0.625rem;
        height: 0.625rem;
        background: url("/assets/images/common/icon-blank-pink-01.svg") no-repeat left top / contain;
      }
    }

    &[href$=".pdf"] {
      --bg-size-full: calc(100% - 33px);
      --bg-offset-right: 33px;

      &::after {
        width: 1.75rem;
        height: 0.875rem;
        background: url("/assets/images/common/icon-pdf-01.svg") no-repeat left top / contain;
      }
    }

    &[data-arrow-variant="no-underline"] {
      background: none;

      @media (min-width: 897px) {
        background-image: linear-gradient(90deg, var(--color-pink-30), var(--color-pink-30));
        background-position: calc(100% - 14px) 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      }

      &:hover {
        @media (min-width: 897px) {
          animation: none;
          background-position: -14px 100%;
          background-size: 100% 1px;
        }
      }
    }
  }

  /* ---------------------------------------------
  .link-circle
------------------------------------------------ */
  .link-circle {
    position: relative;
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    color: var(--color-pink-30);
    letter-spacing: 0.03em;
    line-height: 1.75;
    padding-inline-end: 2.875rem;

    &::before,
    &::after {
      position: absolute;
      top: 50%;
      content: "";
      transform: translateY(-50%);
    }

    &::before {
      right: 0;
      width: 2.25rem;
      height: 2.25rem;
      border: 1px solid var(--color-pink-70);
      border-radius: 50%;
    }

    &::after {
      right: 0.8125rem;
      width: 0.4375rem;
      height: 0.5rem;
      background-color: var(--color-pink-30);
      -webkit-mask-image: url("/assets/images/common/icon-arrow-right-02.svg");
      mask-image: url("/assets/images/common/icon-arrow-right-02.svg");
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
    }

    >span>span {
      @media (min-width: 897px) {
        background-image: linear-gradient(90deg, var(--color-pink-30), var(--color-pink-30));
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    }

    &:hover>span>span {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }
    }

    &[data-font-variant="english"] {
      font-family: var(--second-family);
    }

    &[data-link-variant="white"] {
      color: var(--color-white);

      &::before {
        border-color: rgb(from var(--color-white) r g b / 30%);
      }

      &::after {
        background: url("/assets/images/common/icon-arrow-right-02.svg") no-repeat left top / contain;
        -webkit-mask-image: none;
        mask-image: none;
      }

      >span>span {
        @media (min-width: 897px) {
          background-image: linear-gradient(90deg, var(--color-white), var(--color-white));
        }
      }
    }
  }

  /* ---------------------------------------------
  .link-down
------------------------------------------------ */
  .link-down {
    --bg-size-full: calc(100% - 17px);
    --bg-offset-right: 17px;

    background-image: linear-gradient(90deg, var(--color-pink-30), var(--color-pink-30));
    background-position: left 0 bottom 0;
    background-repeat: no-repeat;
    background-size: var(--bg-size-full) 1px;
    color: var(--color-pink-30);

    &::after {
      position: relative;
      top: -1px;
      display: inline-block;
      width: 0.6875rem;
      height: 0.5625rem;
      background: url("/assets/images/common/icon-arrow-down-02.svg") no-repeat left top / contain;
      content: "";
      margin-inline-start: 0.375rem;
    }

    &:hover {
      @media (min-width: 897px) {
        animation: line-link 0.5s cubic-bezier(0.39, 0.575, 0.565, 1);
      }
    }
  }

  /* ---------------------------------------------
  @keyframes line-link
------------------------------------------------ */
  @keyframes line-link {
    0% {
      background-position: right var(--bg-offset-right, 0) bottom 0;
      background-size: var(--bg-size-full, 100%) 1px;
    }

    50% {
      background-position: right var(--bg-offset-right, 0) bottom 0;
      background-size: 0 1px;
    }

    51% {
      background-position: left 0 bottom 0;
      background-size: 0 1px;
    }

    100% {
      background-position: left 0 bottom 0;
      background-size: var(--bg-size-full, 100%) 1px;
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .list-mega-menu
------------------------------------------------ */
  .list-mega-menu {
    display: grid;
    gap: 0.375rem;
    grid-template-columns: 1fr;
    margin-block: 0.5625rem 0.1875rem;

    @media (max-width: 896px) {
      gap: 0.8125rem 1.25rem;
      grid-template-columns: repeat(2, 1fr);
      margin-block: 0;
    }

    >li {
      flex: 1 0 auto;
      padding-block-end: 0;

      @media (max-width: 896px) {
        border-bottom-color: var(--color-gray-75);
      }
    }

    >li:hover {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }
    }

    >li>a {
      position: relative;
      display: block;
      background-image: linear-gradient(90deg, var(--color-text), var(--color-text));
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      color: var(--color-gray-40);
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 2;
      transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);

      @media (max-width: 896px) {
        font-size: 0.8125rem;
      }
    }

    >li>a:hover {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }
    }
  }

  /* ---------------------------------------------
  .list-news
------------------------------------------------ */
  .list-news {
    border-top: 1px solid var(--color-gray-75);

    >li>a {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      border-bottom: 1px solid var(--color-gray-75);
      gap: 0.625rem 1.875rem;
      padding-block: 1.8125rem;
      transition: opacity 300ms ease-out;

      @media (max-width: 896px) {
        flex-direction: column;
        align-items: flex-start;
        padding-block: 1.1875rem;
      }

      &:hover {
        >.detail>.text>span {
          @media (min-width: 897px) {
            background-position: 0 100%;
            background-size: 100% 1px;
          }
        }
      }
    }

    >li>a>.box {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      -moz-column-gap: 0.9375rem;
      column-gap: 0.9375rem;

      @media (max-width: 896px) {
        width: 100%;
      }
    }

    >li>a>.box>.date {
      color: var(--color-pink-30);
      font-family: var(--second-family);
      font-size: 1rem;
      line-height: 1.5;

      @media (min-width: 897px) {
        width: 5.625rem;
      }
    }

    >li>a>.detail {
      @media (min-width: 897px) {
        flex: 1;
      }
    }

    >li>a>.detail>.text {
      position: relative;
      display: inline;
      background-repeat: no-repeat;
      background-size: 0 1px;
      color: var(--color-text);
      font-size: 1.125rem;
      font-weight: 400;
      line-height: 1.55556;

      @media (max-width: 896px) {
        font-size: 1rem;
        line-height: 1.75;
      }
    }

    >li>a>.detail>.text>span {
      @media (min-width: 897px) {
        background-image: linear-gradient(90deg, var(--color-text), var(--color-text));
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    }
  }

  /* ---------------------------------------------
  .list-card-column
------------------------------------------------ */
  .list-card-column {
    --mt-pc: 30px;
    --mt-sp: 42px;

    display: grid;
    gap: 1.875rem;
    grid-template-columns: repeat(3, 1fr);
    margin-block-start: var(--mt-pc);

    @media (min-width: 897px) {
      grid-auto-rows: 1fr;
    }

    @media (max-width: 896px) {
      gap: 1.25rem;
      grid-template-columns: 1fr;
      margin-block-start: var(--mt-sp);
    }
  }

  /* ---------------------------------------------
  .list-card-corner
------------------------------------------------ */
  .list-card-corner {
    display: grid;
    gap: 0.9375rem;
    grid-template-columns: repeat(3, 1fr);
    margin-block-start: 1.1875rem;

    @media (max-width: 896px) {
      gap: 0.3125rem;
      grid-template-columns: repeat(1, 1fr);
      margin-block-start: 0.625rem;
    }

    >li>a {
      display: grid;
      padding: 1.25rem;
      border-radius: var(--border-radius-md);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
      background-color: var(--color-white);
      -moz-column-gap: 0.9375rem;
      column-gap: 0.9375rem;
      grid-template-columns: 5rem 1fr;

      @media (min-width: 897px) {
        height: 100%;
        padding: 1.125rem;
        border: 2px solid var(--color-white);
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
        grid-template-columns: 5.5rem 1fr;
        transition: border-color 0.3s ease-out;
      }

      &:hover {
        @media (min-width: 897px) {
          border-color: var(--color-pink-30);
        }

        >.detail>.title>span {
          @media (min-width: 897px) {
            background-position: 0 100%;
            background-size: 100% 1px;
          }
        }
      }
    }

    >li>a>figure>img {
      overflow: hidden;
      width: 100%;
      height: auto;
      border-radius: var(--border-radius-md);
    }

    >li>a>.detail>.badge {
      margin-block-end: 0.4375rem;
    }

    >li>a>.detail>.title {
      color: var(--color-text);
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 1.5;

      @media (max-width: 896px) {
        font-size: 0.875rem;
        line-height: 1.57143;
      }
    }

    >li>a>.detail>.title>span {
      @media (min-width: 897px) {
        background-image: linear-gradient(90deg, var(--color-text), var(--color-text));
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    }

    &[data-background-variant="transparent"] {
      >li>a {
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        background-color: rgb(from var(--color-white) r g b / 10%);

        @media (min-width: 897px) {
          padding: 1.25rem;
          border: none;
          transition: background-color 0.3s ease-out;
        }

        &:hover {
          @media (min-width: 897px) {
            background-color: rgb(from var(--color-white) r g b / 20%);
          }
        }
      }

      >li>a>.detail>.badge {
        border-color: rgb(from var(--color-white) r g b / 30%);
        color: var(--color-white);
      }

      >li>a>.detail>.title {
        color: var(--color-white);
      }

      >li>a>.detail>.title>span {
        @media (min-width: 897px) {
          background-image: linear-gradient(90deg, var(--color-white), var(--color-white));
        }
      }
    }
  }

  /* ---------------------------------------------
  .list-tag
------------------------------------------------ */
  .list-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-block-start: 1rem;

    @media (min-width: 897px) {
      margin-block-start: 1.25rem;
    }

    >li:nth-child(n + 13) {
      @media (max-width: 896px) {
        display: none;
      }
    }

    >li>.badge {
      padding: 0.625rem 0.875rem;
      line-height: 1.41667;

      @media (min-width: 897px) {
        padding: 0.8125rem 1.1875rem;
        font-size: 0.9375rem;
        font-weight: 400;
        line-height: 1.4;
      }

      &[data-badge-variant="white-pink"] {
        @media (min-width: 897px) {
          padding: 0.75rem 1.125rem;
        }
      }

      &[data-badge-variant="transparent"] {
        padding: 0.6875rem 0.9375rem;

        @media (min-width: 897px) {
          padding: 0.875rem 1.25rem;
        }
      }
    }
  }

  /* ---------------------------------------------
  .list-profile
------------------------------------------------ */
  .list-profile {
    display: flex;
    flex-direction: column;
    padding: 1.8125rem 2.4375rem;
    border: 1px solid var(--color-gray-75);
    border-radius: var(--border-radius-md);
    margin-block-start: 3.75rem;
    row-gap: 1.875rem;

    @media (max-width: 896px) {
      padding: 1.1875rem;
      row-gap: 2.5rem;
    }

    &:first-child {
      margin-block-start: 0;
    }
  }

  /* ---------------------------------------------
  .list-article
------------------------------------------------ */
  .list-article {
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-md);
    margin-block-start: 1.875rem;
    row-gap: 0.3125rem;

    &:first-child {
      margin-block-start: 0;
    }
  }

  /* ---------------------------------------------
  .list-card-case
------------------------------------------------ */
  .list-card-case {
    --mt-pc: 50px;
    --mt-sp: 30px;

    display: grid;
    gap: 1.875rem;
    grid-template-columns: repeat(3, 1fr);
    margin-block-start: var(--mt-pc);

    @media (min-width: 897px) {
      grid-auto-rows: auto;
    }

    @media (max-width: 896px) {
      gap: 1.25rem;
      grid-template-columns: 1fr;
      margin-block-start: var(--mt-sp);
    }

    >.controller {
      position: relative;
      display: flex;
      min-height: 3.125rem;
      align-items: center;
      justify-content: center;
      margin-block-start: 0.625rem;
      padding-inline: 3.125rem;

      @media (min-width: 897px) {
        display: none;
      }
    }

    &[data-auto-rows-variant="auto"] {
      grid-auto-rows: auto;
    }

    &[data-slider-sp] {
      display: block;
      visibility: visible;

      >.splide__track>.splide__list {
        @media (min-width: 897px) {
          display: grid;
          height: auto;
          gap: 1.875rem;
          grid-template-columns: repeat(3, 1fr);
        }
      }

      >.splide__track>.splide__list>.splide__slide {
        @media (min-width: 897px) {
          -webkit-tap-highlight-color: transparent;
        }
      }

      .card-case {
        height: 100%;
        grid-template-rows: auto 1fr auto;
      }

      .splide__arrows {
        @media (max-width: 896px) {
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          height: 3.125rem;
          transform: translateY(-50%);
        }
      }

      .splide__arrow {
        @media (max-width: 896px) {
          position: absolute;
          top: 0;
          width: 3.125rem;
          height: 3.125rem;
          border: none;
          border-radius: 50%;
          background-color: var(--color-white);
          opacity: 1;
          pointer-events: auto;
          transform: none;
        }

        &::after {
          @media (max-width: 896px) {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0.4375rem;
            height: 0.5rem;
            background-color: var(--color-pink-30);
            content: "";
            -webkit-mask-image: url("/assets/images/common/icon-arrow-right-02.svg");
            mask-image: url("/assets/images/common/icon-arrow-right-02.svg");
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: contain;
            mask-size: contain;
            transform: translate(-50%, -50%);
          }
        }

        &[disabled] {
          @media (max-width: 896px) {
            opacity: 0.3;
            pointer-events: none;
          }
        }
      }

      .splide__arrow--prev {
        @media (max-width: 896px) {
          left: 0;
        }

        &::after {
          @media (max-width: 896px) {
            transform: translate(-50%, -50%) rotate(-180deg);
          }
        }
      }

      .splide__arrow--next {
        @media (max-width: 896px) {
          right: 0;
        }
      }

      .splide__pagination {
        @media (max-width: 896px) {
          position: static;
          justify-content: center;
          padding: 0;
          font-size: 0;
          gap: 0.375rem;
        }
      }

      .splide__pagination__page {
        @media (max-width: 896px) {
          display: block;
          width: 0.5rem;
          height: 0.5rem;
          border: 1px solid var(--color-pink-30);
          border-radius: 50%;
          margin: 0;
          background: transparent;
          cursor: pointer;
          opacity: 1;
          transform: none;
          transition-property: all;
        }
      }

      .splide__pagination__page.is-active {
        @media (max-width: 896px) {
          background-color: var(--color-pink-30);
        }
      }
    }
  }

  /* ---------------------------------------------
  .list-card-download
------------------------------------------------ */
  .list-card-download {
    --mt-pc: 50px;
    --mt-sp: 30px;

    display: grid;
    gap: 1.875rem;
    grid-template-columns: repeat(3, 1fr);
    margin-block-start: var(--mt-pc);

    @media (min-width: 897px) {
      grid-auto-rows: auto;
    }

    @media (max-width: 896px) {
      gap: 1.25rem;
      grid-template-columns: 1fr;
      margin-block-start: var(--mt-sp);
    }
  }

  /* ---------------------------------------------
  .list-features
------------------------------------------------ */
  .list-features {
    display: grid;
    counter-reset: number-counter;
    row-gap: 2.5rem;

    @media (min-width: 897px) {
      row-gap: 3.125rem;
    }

    >li {
      display: flex;
      flex-flow: row wrap;
      align-items: flex-start;
      counter-increment: number-counter;
      gap: 1.25rem 1.875rem;

      @media (max-width: 896px) {
        flex-direction: column;
      }
    }

    >li>.detail {
      display: grid;
      row-gap: 0.625rem;

      @media (min-width: 897px) {
        flex: 1;
      }
    }

    >li>.detail>.title {
      position: relative;
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.5;
      padding-inline-start: 2.0625rem;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: counter(number-counter) ".";
        font-family: var(--second-family);
        font-size: 1.875rem;
        font-weight: 500;
        line-height: 1.2;

        @media (min-width: 897px) {
          top: 1px;
          font-size: 2rem;
          line-height: 1.125;
        }
      }
    }

    >li>.detail>.text {
      line-height: 1.75;
    }

    >li>figure {
      @media (min-width: 897px) {
        width: 40.172%;
      }
    }

    >li>figure>img {
      overflow: hidden;
      width: 100%;
      height: auto;
      border-radius: var(--border-radius-md);
    }
  }

  /* ---------------------------------------------
  .list-step
------------------------------------------------ */
  .list-step {
    display: grid;
    row-gap: 1.875rem;

    @media (min-width: 897px) {
      row-gap: 3.125rem;
    }

    >li {
      position: relative;
      display: flex;
      overflow: hidden;
      flex-wrap: wrap;
      align-items: center;
      border-radius: var(--border-radius-md);
      background-color: var(--color-white);

      @media (max-width: 896px) {
        flex-direction: column;
        align-items: flex-start;
      }

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0.3125rem;
        background-color: var(--color-purple-30);
        content: "";

        @media (min-width: 897px) {
          left: 0;
          width: 0.5rem;
          height: 100%;
        }
      }
    }

    >li>.detail {
      padding: 1.875rem 1.25rem;

      @media (min-width: 897px) {
        flex: 1;
        padding: 1.25rem 1.875rem 1.1875rem;
      }
    }

    >li>.detail>.box {
      @media (min-width: 897px) {
        width: 100%;
        max-width: 28.4375rem;
        margin: 0 auto;
      }
    }

    >li>.detail>.box>.label {
      display: inline-flex;
      min-width: 5.8125rem;
      min-height: 2.4375rem;
      align-items: center;
      justify-content: center;
      padding: 0.25rem 0.625rem 0.125rem;
      border: 2px solid var(--color-pink-30);
      border-radius: 6.25rem;
      color: var(--color-pink-30);
      font-family: var(--second-family);
      font-size: 1.125rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      line-height: 1.27778;
      margin-block-end: 0.3125rem;
      text-align: center;

      @media (min-width: 897px) {
        margin-block-end: 0.9375rem;
      }
    }

    >li>.detail>.box>.title {
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.5;
      margin-block-end: 0.625rem;

      @media (min-width: 897px) {
        font-size: 2.125rem;
        line-height: 1.23529;
        margin-block-end: 1.3125rem;
      }
    }

    >li>.detail>.box>.text {
      line-height: 1.75;
    }

    >li>figure {
      width: 100%;

      @media (min-width: 897px) {
        width: 44.018%;
        height: 100%;
      }
    }

    >li>figure>img {
      width: 100%;
      height: auto;

      @media (min-width: 897px) {
        height: 100%;
      }
    }

    &[data-step-variant="small"] {
      @media (min-width: 897px) {
        row-gap: 1.875rem;
      }

      >li>figure {
        @media (min-width: 897px) {
          width: 29.06%;
        }

        @media (max-width: 896px) {
          position: relative;
          aspect-ratio: 335 / 190;
        }
      }

      >li>figure>img {
        @media (max-width: 896px) {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          -o-object-fit: cover;
          object-fit: cover;
        }
      }

      >li>.detail {
        @media (min-width: 897px) {
          padding-block-end: 1.25rem;
        }
      }

      >li>.detail>.box {
        @media (min-width: 897px) {
          max-width: 43.125rem;
        }
      }

      >li>.detail>.box>.label {
        @media (min-width: 897px) {
          margin-block-end: 0.6875rem;
        }
      }

      >li>.detail>.box>.title {
        @media (min-width: 897px) {
          font-size: 1.75rem;
          line-height: 1.5;
          margin-block-end: 1rem;
        }
      }
    }
  }

  /* ---------------------------------------------
  .list-badges
------------------------------------------------ */
  .list-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3125rem;

    &[data-gap-variant="wide"] {
      gap: 0.625rem;
    }
  }

  /* ---------------------------------------------
  .list-dot
------------------------------------------------ */
  .list-dot {
    display: grid;

    >li {
      position: relative;
      font-size: 1rem;
      line-height: 1.75;
      padding-inline-start: 0.875rem;

      &::before {
        position: absolute;
        top: 0.875rem;
        left: 0;
        width: 0.25rem;
        height: 0.25rem;
        border-radius: 50%;
        background-color: var(--color-text);
        content: "";
      }
    }

    &[data-dot-variant="small"] {
      >li {
        font-size: 0.875rem;
        line-height: 1.786;
        padding-inline-start: 0.75rem;

        &::before {
          top: 0.75rem;
        }
      }
    }
  }

  /* ---------------------------------------------
  .list-benefits
------------------------------------------------ */
  .list-benefits {
    display: grid;
    gap: 1.875rem;

    @media (min-width: 897px) {
      grid-template-columns: repeat(3, 1fr);
    }

    >li {
      overflow: hidden;
      border-radius: var(--border-radius-md);
      background-color: var(--color-white);

      @media (min-width: 897px) {
        display: grid;
        gap: 0;
        grid-row: span 2;
        grid-template-rows: subgrid;
      }
    }

    >li>.head {
      position: relative;
      display: flex;
      min-height: 6.875rem;
      align-items: center;
      justify-content: center;
      padding: 0.625rem;
      background: linear-gradient(135deg, var(--color-pink-30) 0%, var(--color-purple-40) 100%);
      color: var(--color-white);
      text-align: center;

      @media (min-width: 897px) {
        min-height: 8.875rem;
      }

      &::before {
        position: absolute;
        right: 0;
        bottom: 0.125rem;
        width: 6.3125rem;
        height: 5.4375rem;
        background: url("/assets/images/common/bg-logo-01-sp.svg") no-repeat left top / contain;
        content: "";

        @media (min-width: 897px) {
          width: 8.5rem;
          height: 7.4375rem;
          background-image: url("/assets/images/common/bg-logo-01-pc.svg");
        }
      }
    }

    >li>.head>.title {
      position: relative;
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.45;

      @media (min-width: 897px) {
        font-size: 1.5rem;
        line-height: 1.4584;
      }
    }

    >li>.detail {
      padding: 1.25rem;

      @media (min-width: 897px) {
        padding: 1.875rem;
      }
    }

    >li>.detail>.text {
      font-size: 1rem;
      line-height: 1.75;
    }

    &[data-benefits-variant="pc-large"] {
      >li>.detail>.text {
        @media (min-width: 897px) {
          font-size: 1.125rem;
          line-height: 1.66667;
        }
      }
    }
  }

  /* ---------------------------------------------
  .list-sns
------------------------------------------------ */
  .list-sns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4.375rem 0;
    gap: 1.875rem;

    >a {
      display: block;
      width: 2.5rem;
      height: 2.5rem;
      transition: opacity 0.3s ease-out;

      &:hover {
        @media (min-width: 897px) {
          opacity: 0.7;
        }
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .mega-menu
------------------------------------------------ */
  .mega-menu {
    position: absolute;
    z-index: 10;
    top: 2.125rem;
    left: min(-3.8125vw, -3.8125rem);
    border-radius: var(--border-radius-md);
    background: var(--color-white);
    gap: 0.625rem;
    opacity: 0;
    visibility: hidden;

    @media (min-width: 897px) {
      background: var(--color-white);
    }

    @media (max-width: 896px) {
      position: static;
      width: 100%;
      height: 0;
      background-color: transparent;
      padding-inline: 0.625rem;
      transition: height 300ms ease-out;
    }

    &[aria-hidden="false"] {
      opacity: 1;
      visibility: visible;

      @media (max-width: 896px) {
        height: auto;
        padding-block: 0.4375rem 0.9375rem;
      }
    }

    >.inner {
      width: 100%;
      padding: 1.25rem 1.5625rem;
      border-radius: var(--border-radius-md);
      margin-inline: auto;

      @media (min-width: 897px) {
        box-shadow: 0 10px 20px 0 rgb(from var(--color-purple-30) r g b / 15%);
      }

      @media (max-width: 896px) {
        flex-direction: column;
        padding: 0;
        border-top: 0;
        gap: 0;
      }
    }

    >.inner>.heading {
      width: max(4.6875vw, 4.6875rem);
      flex: 1 0 auto;
      font-size: 0.875rem;

      @media (min-width: 897px) {
        margin-block-start: 0.25rem;
      }

      @media (max-width: 896px) {
        width: 100%;
        padding-block: 0 1rem;
      }
    }

    >.inner>.heading>.title {
      color: var(--color-gray-40);
      font-size: 1.875rem;
      font-weight: 700;
      margin-block-end: 1.125rem;

      @media (max-width: 896px) {
        display: none;
      }
    }

    >.inner>.heading>.link {
      position: relative;
      display: inline-block;
      color: var(--color-gray-40);
      font-size: 1rem;

      @media (max-width: 896px) {
        color: var(--color-gray-40);
      }
    }

    >.inner>.heading>.link.current {
      @media (max-width: 896px) {
        color: var(--color-pink-30);
      }
    }

    >.inner>.heading>.link.current::after {
      @media (max-width: 896px) {
        border-color: transparent transparent transparent var(--color-pink-30);
      }
    }

    >.inner>.heading>.link>span {
      background-image: linear-gradient(90deg, var(--color-text), var(--color-text));
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      font-size: 0.875rem;
      transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);

      @media (max-width: 896px) {
        font-size: 0.8125rem;
      }
    }

    >.inner>.heading>.link:hover>span {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }
    }

    >.inner>.box {
      width: 100%;
    }

    >.btn-close {
      position: absolute;
      right: 1.25rem;
      bottom: 1.25rem;
      width: 2.5rem;
      height: 2.5rem;
      cursor: pointer;
      transition: all 300ms ease-out;

      @media (max-width: 896px) {
        display: none;
      }
    }

    >.btn-close:hover {
      @media (min-width: 897px) {
        opacity: 0.7;
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .modal-default
------------------------------------------------ */
  .modal-default {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    visibility: hidden;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgb(from var(--color-base-black) r g b / 80%);
      content: "";

      @media (max-width: 896px) {
        background-color: rgb(from var(--color-black) r g b / 90%);
        opacity: 0.9;
      }
    }

    &[aria-hidden="false"] {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
    }

    >.wrapper {
      display: flex;
      height: 100%;
      align-items: center;
      justify-content: center;
      padding: 1.6875rem 1.25rem;

      @media (min-width: 897px) {
        padding: 3.75rem 1.25rem;
      }
    }

    >.wrapper>.inner {
      display: flex;
      max-height: 100%;
    }

    >.wrapper>.inner>.white-box {
      position: relative;
      width: 100%;
      background-color: var(--color-white);

      @media (min-width: 897px) {
        width: min(115.84158vw, 73.125rem);
        border-radius: var(--border-radius-md);
        margin: 0 auto;
      }
    }

    >.wrapper>.inner>.white-box>.close {
      position: absolute;
      z-index: 1;
      top: -0.9375rem;
      right: -0.9375rem;
      width: 2.5rem;
      height: 2.5rem;
      background: url("/assets/images/common/icon-close-01.svg") no-repeat left top / contain;
      cursor: pointer;

      @media (min-width: 897px) {
        top: -1.25rem;
        right: -1.25rem;
        transition: opacity 0.3s ease-out;
      }

      &:hover {
        @media (min-width: 897px) {
          opacity: 0.7;
        }
      }
    }

    >.wrapper>.inner>.white-box>.content {
      height: 100%;
      padding: 1.4375rem 1.25rem;
      overflow-y: auto;

      @media (min-width: 897px) {
        padding-block: 4.375rem;
      }
    }

    >.wrapper>.inner>.white-box>.content>.body {
      @media (min-width: 897px) {
        width: 100%;
        max-width: 54.375rem;
        margin: 0 auto;
      }
    }

    >.wrapper>.inner>.white-box>.content>.body>.button-close {
      display: flex;
      width: 100%;
      max-width: 7.375rem;
      min-height: 2.8125rem;
      align-items: center;
      justify-content: center;
      padding: 0.3125rem;
      border-radius: var(--border-radius-md);
      margin: 1.25rem auto 0;
      background-color: var(--color-gray-10);
      color: var(--color-white);
      cursor: pointer;
      font-size: 0.875rem;
      line-height: 1.5;

      @media (min-width: 897px) {
        margin-block-start: 3.125rem;
        transition: opacity 0.3s ease-out;
      }

      &:hover {
        @media (min-width: 897px) {
          opacity: 0.7;
        }
      }
    }

    >.wrapper>.inner>.white-box>.content>.body>.button-close>span {
      position: relative;
      padding-inline-end: 1rem;

      &::after {
        position: absolute;
        top: 50%;
        right: 0;
        width: 0.6875rem;
        height: 0.6875rem;
        background: url("/assets/images/common/icon-close-02.svg") no-repeat left top / contain;
        content: "";
        transform: translateY(-50%);
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .nav-global
------------------------------------------------ */
  .nav-global {
    display: flex;
    align-items: center;
    gap: min(1.875vw, 1.875rem);

    @media (max-width: 896px) {
      position: fixed;
      z-index: 1;
      top: 5.0625rem;
      left: 0;
      width: 100%;
      height: calc(100svh - 5.0625rem);
      flex-direction: column;
      align-items: flex-start;
      background-color: var(--color-base-background);
      gap: 1.875rem;
      opacity: 0;
      overflow-y: auto;
      transition: all 300ms ease-out;
      visibility: hidden;
    }

    &[aria-hidden="false"] {
      @media (max-width: 896px) {
        opacity: 1;
        visibility: visible;
      }
    }

    >ul {
      display: flex;
      gap: min(1.875vw, 1.875rem);

      @media (max-width: 896px) {
        width: calc(100% - 2.5rem);
        flex-direction: column;
        gap: 0;
        margin-inline: 1.25rem;
      }
    }

    >ul>li {
      @media (max-width: 896px) {
        border-bottom: 1px solid var(--color-gray-75);
      }
    }

    >ul>li>a,
    >ul>li>button {
      position: relative;
      display: block;
      font-size: min(1.18644vw, 0.875rem);
      font-weight: 500;
      transition: all 300ms ease-out;

      @media (max-width: 896px) {
        display: block;
        padding: 1rem 0 0.9375rem;
        font-size: 1rem;
      }
    }

    >ul>li>button {
      display: block;
      width: 100%;
      border: none;
      background: none;
      color: inherit;
      cursor: pointer;
      text-align: left;
    }

    >ul>li:has(.mega-menu[aria-hidden="false"]) {
      position: relative;

      @media (max-width: 896px) {
        border-bottom: 1px solid var(--color-gray-75);
      }
    }

    >ul>li:has(.mega-menu)>a,
    >ul>li:has(.mega-menu)>button {
      padding-inline-end: min(1vw, 1rem);

      @media (max-width: 896px) {
        padding-inline-end: 2.1875rem;
      }
    }

    >ul>li:has(.mega-menu)>a::before,
    >ul>li:has(.mega-menu)>button::before {
      @media (max-width: 896px) {
        position: absolute;
        top: 50%;
        right: 1rem;
        display: block;
        width: 0.125rem;
        height: 0.9375rem;
        border-radius: 0.125rem;
        background-color: var(--color-pink-30);
        content: "";
        transform: translateY(-50%);
        transition: all 300ms ease-out;
      }
    }

    >ul>li:has(.mega-menu)>a::after,
    >ul>li:has(.mega-menu)>button::after {
      position: absolute;
      top: 50%;
      right: -0;
      display: block;
      width: 0.6875rem;
      height: 0.5625rem;
      background-image: url("/assets/images/common/icon-arrow-down-02.svg");
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      transform: translateY(-50%);
      transition: all 300ms ease-out;

      @media (max-width: 896px) {
        right: 0.625rem;
        width: 0.9375rem;
        height: 0.125rem;
        border: none;
        border-radius: 0.125rem;
        background-color: var(--color-pink-30);
      }
    }

    >ul>li>a:hover,
    >ul>li>button:hover,
    >ul>li>a.current,
    >ul>li>button.current {
      @media (min-width: 897px) {
        color: var(--color-pink-30);
      }
    }

    >ul>li>a::before,
    >ul>li>button::before {
      @media (min-width: 897px) {
        position: absolute;
        bottom: -0.625rem;
        left: 50%;
        display: block;
        width: 0.375rem;
        height: 0.375rem;
        border-radius: 0.1875rem;
        background-color: var(--color-purple-30);
        content: "";
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%);
        transition: all 300ms ease-out;
        visibility: hidden;
      }

      @media screen and (width < 1025px) {
        bottom: -0.625rem;
      }
    }

    >ul>li>a.current::before,
    >ul>li>a:hover::before,
    >ul>li>a[aria-expanded="true"]::before {
      @media (min-width: 897px) {
        background-color: var(--color-purple-30);
        opacity: 1;
        visibility: visible;
      }
    }

    >ul>li:not(:has(.mega-menu))>a.current {
      @media (max-width: 896px) {
        color: var(--color-pink-30);
      }
    }

    >ul>li>button[aria-expanded="true"] {
      @media (min-width: 897px) {
        color: var(--color-pink-30);
      }
    }

    >ul>li>a[aria-expanded="true"]::before,
    >ul>li>button[aria-expanded="true"]::before {
      display: none;

      @media (max-width: 896px) {
        opacity: 0;
        transform: translateY(-50%) rotate(90deg);
      }
    }

    >.button {
      display: flex;
      gap: 0.1875rem;

      @media (max-width: 896px) {
        width: 100%;
        padding: 0.625rem;
        background: linear-gradient(104deg, var(--color-pink-30) 0.41%, var(--color-purple-40) 100%);
        gap: 0.3125rem;
      }
    }

    >.button>a {
      display: flex;
      min-height: min(4.23729vw, 3.125rem);
      align-items: center;
      justify-content: center;
      color: var(--color-white);
      font-size: min(0.8125vw, 0.8125rem);
      font-weight: 500;
      padding-inline: min(0.9375vw, 0.9375rem) min(0.625vw, 0.625rem);

      @media (max-width: 896px) {
        width: 50%;
        min-height: 3.5rem;
        padding: 0.625rem;
        border-radius: var(--border-radius-md);
        background-color: rgb(from var(--color-white) r g b / 5%);
        font-size: 0.875rem;
      }
    }

    >.button>a>span {
      position: relative;
      display: flex;
      width: 100%;
      justify-content: space-between;
      font-size: min(0.8125vw, 0.8125rem);
      padding-inline-end: min(2.125vw, 2.125rem);

      @media (width < 1280px) {
        padding-inline-end: min(1.75vw, 1.75rem);
      }

      @media (max-width: 896px) {
        font-size: 0.8125rem;
        padding-inline-end: 2.125rem;
      }
    }

    >.button>a>span::after {
      position: absolute;
      top: 50%;
      right: 0;
      width: min(2.11864vw, 1.5625rem);
      height: min(2.11864vw, 1.5625rem);
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      transform: translateY(-50%);

      @media (max-width: 896px) {
        width: 2.25rem;
        height: 2.25rem;
      }
    }

    >.button>.download {
      border-radius: 0.3125rem;

      @media (min-width: 897px) {
        width: min(12.73438vw, 10.1875rem);
        background-color: var(--color-purple-30);
        transition: background-color 300ms ease-out;
        will-change: background-color;
      }
    }

    >.button>.download>span::after {
      background-image: url("/assets/images/common/icon-play-01.svg");
    }

    >.button>.download:hover {
      @media (min-width: 897px) {
        background-color: var(--color-purple-20);
      }
    }

    >.button>.inquiry {
      border-radius: 0.3125rem;

      @media (min-width: 897px) {
        width: min(12.73438vw, 10.1875rem);
        background-color: var(--color-pink-30);
        transition: background-color 300ms ease-out;
        will-change: background-color;
      }
    }

    >.button>.inquiry>span::after {
      background-image: url("/assets/images/common/icon-play-01.svg");
    }

    >.button>.inquiry:hover {
      @media (min-width: 897px) {
        background-color: var(--color-pink-20);
      }
    }
  }

  /* ---------------------------------------------
  .nav-global-lp
------------------------------------------------ */
  .nav-global-lp {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100svh;
    background-color: rgb(from var(--color-black) r g b / 80%);
    opacity: 0;
    overflow-y: auto;

    @media (min-width: 897px) {
      padding: 0 0 1.25rem 1.25rem;
      text-align: right;
    }

    >.inner {
      width: 100%;
      padding: 4.1875rem 1.25rem 0.5rem;
      background-color: var(--color-white);
      border-bottom-left-radius: var(--border-radius-lg);

      @media (min-width: 897px) {
        display: inline-flex;
        width: -moz-fit-content;
        width: fit-content;
        padding: 6.6875rem 3.125rem 1.75rem;
      }
    }

    >.inner>ul>li {
      &:not(:last-child) {
        border-bottom: 1px solid var(--color-gray-75);
      }
    }

    >.inner>ul>li>a {
      display: block;
      color: var(--color-pink-30);
      font-size: min(4.26667vw, 1rem);
      font-weight: 500;
      letter-spacing: 0.05em;
      line-height: 1.8125;
      padding-block: 0.8125rem 0.75rem;
      text-align: center;

      @media (min-width: 897px) {
        font-size: 1.25rem;
        line-height: 1.45;
        text-align: right;
      }

      &:hover {
        >span {
          @media (min-width: 897px) {
            background-position: 0 100%;
            background-size: 100% 1px;
          }
        }
      }
    }

    >.inner>ul>li>a>span {
      @media (min-width: 897px) {
        background-image: linear-gradient(90deg, var(--color-pink-30), var(--color-pink-30));
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-size: 0 1px;
        transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    }
  }

  /* ---------------------------------------------
  .nav-category
------------------------------------------------ */
  .nav-category {
    padding: 6.25rem 0;
    background-color: var(--color-gray-80);

    @media (max-width: 896px) {
      padding: 3.125rem 0;
    }

    >.container>.heading {
      margin-block: 0 1.1875rem;

      @media (max-width: 896px) {
        margin-block-end: 1.125rem;
      }
    }

    >.container>.heading>a {
      position: relative;
      color: var(--color-pink-30);
      font-size: 1.625rem;
      font-weight: bold;
      padding-inline-end: 0.875rem;
      text-decoration: none;

      @media (max-width: 896px) {
        font-size: 1.375rem;
      }
    }

    >.container>.heading>a::after {
      position: absolute;
      top: 50%;
      right: 0;
      display: block;
      width: 0;
      height: 0;
      border-width: 4px 0 4px 7px;
      border-style: solid;
      border-color: transparent transparent transparent var(--color-pink-30);
      content: "";
      transform: translateY(-50%);
    }

    >.container>.heading>a>span {
      background-image: linear-gradient(90deg, var(--color-pink-30), var(--color-pink-30));
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      padding-block-end: 0.1875rem;
      transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
    }

    >.container>.heading>a:hover>span {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }
    }
  }

  /* ---------------------------------------------
  .list-nav-category
------------------------------------------------ */
  .list-nav-category {
    display: grid;
    gap: 0 min(1.875vw, 1.875rem);
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    list-style: none;
    padding-inline-start: 0;

    @media (max-width: 896px) {
      gap: 0 1.25rem;
      grid-template-columns: repeat(2, 1fr);
    }

    >li {
      flex: 1 0 auto;
      border-bottom: 1px solid var(--color-gray-70);
      background-image: linear-gradient(90deg, var(--color-gray-60), var(--color-gray-60));
      background-position: 100% 100%;
      background-repeat: no-repeat;
      background-size: 0 1px;
      padding-block-end: 0;
      transition: background-size cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;

      @media (max-width: 896px) {
        border-bottom-color: var(--color-gray-75);
      }
    }

    >li:hover {
      @media (min-width: 897px) {
        background-position: 0 100%;
        background-size: 100% 1px;
      }
    }

    >li>a {
      position: relative;
      display: flex;
      height: 100%;
      align-items: center;
      padding: 1.125rem 1.875rem 1.0625rem 0.625rem;
      color: var(--color-text);
      font-size: 0.9375rem;
      font-weight: 400;
      line-height: 1.67;
      text-decoration: none;

      @media (max-width: 896px) {
        padding: 0.875rem 1.25rem 0.75rem 0.625rem;
        color: var(--color-text);
        font-size: 0.75rem;
      }
    }

    >li>a::after {
      position: absolute;
      top: 50%;
      right: 0.6875rem;
      display: block;
      width: 0;
      height: 0;
      border-width: 4px 0 4px 7px;
      border-style: solid;
      border-color: transparent transparent transparent var(--color-pink-30);
      content: "";
      transform: translateY(-50%);

      @media (max-width: 896px) {
        right: 0.5rem;
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .pagination
------------------------------------------------ */
  .pagination {
    margin-block-start: 3.125rem;

    @media (max-width: 896px) {
      margin-block-start: 1.875rem;
    }

    >.desktop {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.625rem;

      @media (max-width: 896px) {
        display: none;
      }
    }

    >.desktop>li>a,
    >.desktop>li>span {
      display: flex;
      overflow: hidden;
      width: 3.75rem;
      height: 3.75rem;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--color-white);
      border-radius: 50%;
      background-color: var(--color-white);
      color: var(--color-pink-30);
      font-family: var(--second-family);
      font-size: 1.125rem;
      font-weight: 400;
      line-height: 1.44444;
      text-decoration: none;
      transition: all 0.3s ease-out;
    }

    >.desktop>li:has([data-disabled="true"]) {
      display: none;
    }

    >.desktop>li>a:hover {
      @media (min-width: 897px) {
        border-color: var(--color-pink-30);
        background-color: var(--color-pink-30);
        color: var(--color-white);
      }
    }

    >.desktop>li>.dots {
      position: relative;
      width: 2.5rem;
      border: none;
      background-color: transparent;
      cursor: default;
      text-indent: -99999999px;

      &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 2.4375rem;
        height: 0.3125rem;
        background: url("/assets/images/common/bg-pagination-dot.svg") no-repeat center / contain;
        content: "";
        transform: translate(-50%, -50%);
      }
    }

    >.desktop>li>[aria-current="page"] {
      border-color: var(--color-pink-30);
      background-color: var(--color-pink-30);
      color: var(--color-white);
      cursor: default;
    }

    >.mobile {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4375rem;
      padding-inline: 3.75rem;

      @media (min-width: 897px) {
        display: none;
      }
    }

    >.mobile>li {
      display: flex;
      height: 3.75rem;
      align-items: center;
      justify-content: center;
      color: var(--color-gray-40);
      font-family: var(--second-family);
      font-size: 1.125rem;
      font-weight: 400;
      line-height: 1.44444;
    }

    >.mobile>li:has(a.arrow-next) {
      position: absolute;
      right: 1.25rem;
    }

    >.mobile>li:has(a.arrow-previous) {
      position: absolute;
      left: 1.25rem;
    }

    >.mobile>li:has([data-disabled="true"]) {
      display: none;
    }
  }

  .arrow-previous,
  .arrow-next {
    position: relative;
    display: flex;
    overflow: hidden;
    width: 3.75rem;
    height: 3.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-white);

    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.4375rem;
      height: 0.5rem;
      background-color: var(--color-pink-30);
      content: "";
      -webkit-mask-image: url("/assets/images/common/icon-arrow-right-02.svg");
      mask-image: url("/assets/images/common/icon-arrow-right-02.svg");
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: contain;
      mask-size: contain;
      transform: translate(-50%, -50%);
      transition: background-color 0.3s ease-out;
    }

    &:hover::after {
      @media (min-width: 897px) {
        background-color: var(--color-white);
      }
    }
  }

  .arrow-previous::after {
    transform: translate(-50%, -50%) rotate(-180deg);
  }
}

@layer components {

  /* ---------------------------------------------
  .table-detail
------------------------------------------------ */
  .table-detail {
    width: 100%;

    >thead>tr>th {
      padding: 0.9375rem;
      border: 1px solid var(--color-gray-75);
      background-color: var(--color-gray-80);
      font-size: 0.8125rem;
      font-weight: 700;
      line-height: 1.69231;

      @media (min-width: 897px) {
        font-size: 1rem;
        line-height: 1.75;
      }
    }

    >tbody>tr>th,
    >tbody>tr>td {
      padding: 1rem 0.9375rem 0.9375rem;
      border: 1px solid var(--color-gray-75);
      font-size: 0.8125rem;
      line-height: 1.69231;

      @media (min-width: 897px) {
        font-size: 1rem;
        line-height: 1.75;
      }
    }

    >tbody>tr>th {
      background-color: var(--color-gray-80);
      font-weight: 700;
    }

    >tbody>tr>td {
      background-color: var(--color-white);
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .tabs
------------------------------------------------ */
  .tabs {
    --mb-pc: 36px;
    --mb-sp: 30px;

    margin-block-end: var(--mb-pc);

    @media (max-width: 896px) {
      margin-block-end: var(--mb-sp);
    }

    >.inner {
      width: 100%;
      max-width: var(--max-width-xl);
      margin: 0 auto;
      padding-inline: 1.25rem;
    }
  }

  /* ---------------------------------------------
  .tabs-list
------------------------------------------------ */
  .tabs-list {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    gap: 0.5rem;

    >li>a {
      display: flex;
      width: 100%;
      height: 100%;
      min-height: 3.25rem;
      align-items: center;
      justify-content: center;
      padding: 0.625rem 1.25rem;
      border-radius: 6.25rem;
      background: var(--color-white);
      color: var(--color-pink-30);
      font-size: 0.875rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-decoration: none;
      transition: background-color 0.3s ease-out, color 0.3s ease-out;
    }

    >li>a[data-tabs-current="true"] {
      background-color: var(--color-pink-30);
      color: var(--color-white);
    }

    >li>a:hover {
      @media (min-width: 897px) {
        background-color: var(--color-pink-30);
        color: var(--color-white);
      }
    }

    &[data-tabs-variant="small"] {
      gap: 0.3125rem;

      >li>a {
        min-height: 2.625rem;
        padding: 0.3125rem 0.9375rem;
        font-size: 0.8125rem;
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .tags
------------------------------------------------ */
  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 1.25rem;
    margin-block-start: 0.4375rem;

    >li {
      color: var(--color-pink-30);
      font-size: 0.75rem;
      letter-spacing: 0.03em;
      line-height: 2;
    }

    >li>a {
      color: var(--color-pink-30);
    }

    &[data-tag-variant="white"]>li {
      color: var(--color-white);

      >a {
        color: var(--color-white);

        @media (min-width: 897px) {
          background-image: linear-gradient(90deg, var(--color-white), var(--color-white));
          background-position: 100% 100%;
          background-repeat: no-repeat;
          background-size: 0 1px;
          transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
        }

        &:hover {
          @media (min-width: 897px) {
            background-position: 0 100%;
            background-size: 100% 1px;
          }
        }
      }
    }
  }
}

@layer components {

  /* ---------------------------------------------
  .text-default
------------------------------------------------ */
  .text-default {
    --mt: 0;

    line-height: 1.75;

    &[data-text-variant="large"] {
      font-size: 1.125rem;
      letter-spacing: 0.05em;
      line-height: 1.66667;
      margin-block-start: var(--mt-pc, var(--mt));

      @media (max-width: 896px) {
        margin-block-start: var(--mt-sp, var(--mt));
      }
    }

    &[data-text-variant="pc-large"] {
      letter-spacing: 0.05em;
      margin-block-start: var(--mt-pc, var(--mt));

      @media (min-width: 897px) {
        font-size: 1.125rem;
        line-height: 1.66667;
      }
    }

    &[data-text-variant="small"] {
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      line-height: 2;
      margin-block-start: var(--mt-pc, var(--mt));

      @media (max-width: 896px) {
        margin-block-start: var(--mt-sp, var(--mt));
      }
    }
  }

  /* ---------------------------------------------
  .notice-end
------------------------------------------------ */
  .notice-end {
    display: flex;
    width: 100%;
    max-width: 16.25rem;
    min-height: 3.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.3125rem;
    border-radius: 6.25rem;
    background-color: var(--color-white);
    color: var(--color-gray-40) !important;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.5;
    margin-inline: auto;
    text-align: center;

    &:not(:first-child) {
      margin-block-start: 3.125rem !important;
    }
  }
}