@layer pages {
  :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 pages {
  :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 pages {

  /* ---------------------------------------------
  @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 pages {
  :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 pages {
  :root {
    --transition-duration: 0.3s;
    --transition-timing-function: ease-out;
  }
}

@layer pages {

  /* ---------------------------------------------
  #about
------------------------------------------------ */
  #about {
    >main>.breadcrumb[data-breadcrumb-variant="bottom"] {
      @media (min-width: 897px) {
        padding-block-start: 14.6875rem;
      }
    }
  }

  /* ---------------------------------------------
  .about-introduction
------------------------------------------------ */
  .about-introduction {
    overflow: hidden;
    background: linear-gradient(91deg in oklch, var(--color-pink-30), 41%, var(--color-purple-40));

    @media (min-width: 897px) {
      border-radius: var(--border-radius-lg);
      background: linear-gradient(96deg in oklch, var(--color-pink-30), 41%, var(--color-purple-40));
      margin-inline: 1.25rem;
    }
  }

  /* ---------------------------------------------
  .about-mv
------------------------------------------------ */
  .about-mv {
    position: relative;
    display: flex;
    min-height: calc(100svh - 5.625rem);
    align-items: center;
    padding-block: 6.25rem;

    @media (min-width: 897px) {
      min-height: calc(100dvh - 5.5625rem);
    }

    @media (width >=1101px) {
      padding-block: 9.375rem;
    }

    @media (max-width: 896px) and (orientation: landscape) {
      align-items: flex-start;
      padding-block: 10.875rem 17.375rem;
    }

    >.breadcrumb {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
    }

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

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

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

    >.mv-logo-wrap {
      @media (min-width: 897px) {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: calc(100dvh - 5.5625rem);
      }
    }

    >.mv-logo-wrap>.mv-logo {
      position: absolute;
      top: 50%;
      left: calc(50% + 0.4375rem);
      width: calc(100% + 2.625rem);
      max-width: 26.0625rem;
      aspect-ratio: 1 / 1;
      transform: translate(-50%, -50%);

      @media (min-width: 897px) {
        left: 50%;
        width: 100%;
        max-width: min(50.6875vw, 50.6875rem);
      }

      @media (max-width: 896px) and (orientation: landscape) {
        top: 1px;
        transform: translateX(-50%);
      }
    }

    >.mv-logo-wrap>.mv-logo>[class^="logo-"] {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      animation-delay: 0.4s;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
      animation-name: logo-rotate;
      animation-timing-function: linear;
    }

    >.mv-logo-wrap>.mv-logo>.logo-main {
      animation-duration: 60s;
      background-image: url("/assets/images/common/logo-main.svg");
    }

    >.mv-logo-wrap>.mv-logo>.logo-dot-pink {
      animation-duration: 70s;
      background-image: url("/assets/images/common/logo-dot-pink.svg");
    }

    >.mv-logo-wrap>.mv-logo>.logo-dot-purple {
      animation-duration: 80s;
      background-image: url("/assets/images/common/logo-dot-purple.svg");
    }

    >.mv-logo-wrap>.mv-logo>.logo-dot-white {
      animation-duration: 90s;
      background-image: url("/assets/images/common/logo-dot-white.svg");
    }

    >.inner {
      position: relative;
      z-index: 1;
      display: grid;
      width: 100%;
      color: var(--color-white);
      padding-inline: 0.625rem;
      row-gap: 0.25rem;
      text-align: center;

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

    >.inner>p {
      font-family: var(--second-family);
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      line-height: 1.858;

      @media (min-width: 897px) {
        font-size: min(1.71429vw, 1.5rem);
        line-height: 1.29167;
      }
    }

    >.inner>h1 {
      font-size: min(7.46667vw, 1.75rem);
      font-weight: 500;
      letter-spacing: 0.04em;
      line-height: 1.286;

      @media (min-width: 897px) {
        font-size: min(4vw, 3.5rem);
        line-height: 1.6072;
      }
    }

    >.scroll {
      position: absolute;
      bottom: 0;
      left: 50%;
      display: block;
      overflow: hidden;
      width: 1px;
      height: 6.25rem;
      transform: translateX(-50%);

      @media (width >=1101px) {
        height: 9.375rem;
      }

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        animation: scroll-effect 2s 2s cubic-bezier(0.3, 0.4, 0.1, 1) infinite;
        background-color: var(--color-white);
        content: "";
      }
    }
  }

  @keyframes scroll-effect {
    0% {
      transform: scaleY(0) translateY(0);
      transform-origin: top;
    }

    50% {
      transform: scaleY(1) translateY(0);
      transform-origin: top;
    }

    75% {
      transform: scaleY(1) translateY(0);
      transform-origin: top;
    }

    100% {
      transform: scaleY(1) translateY(100%);
      transform-origin: top;
    }
  }

  /* ---------------------------------------------
  .about-solution
------------------------------------------------ */
  .about-solution {
    position: relative;
    z-index: 1;
    padding-block: 3.125rem 0.6875rem;

    @media (min-width: 897px) {
      width: 100%;
      max-width: 97.5rem;
      padding: 5rem 1.25rem 18.8125rem;
      margin: 0 auto;
    }

    >.content {
      display: grid;
      color: var(--color-white);
      padding-inline: 1.25rem;
      row-gap: 2.125rem;

      @media (min-width: 897px) {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 45.25rem;
        margin: 0 auto;
        row-gap: 3.25rem;
        text-align: center;
      }
    }

    >.content>p {
      font-size: 1.125rem;
      letter-spacing: 0.03em;
      line-height: 1.88889;

      @media (min-width: 897px) {
        font-size: clamp(0.9375rem, 1.65289dvw, 1.25rem);
        line-height: 2.6;
      }
    }

    >.image-box {
      @media (min-width: 897px) {
        position: absolute;
        bottom: 3.4375rem;
        left: -0.4375rem;
      }

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

    >.image-box>picture {
      display: block;
      width: 100%;
      max-width: 93.4375rem;

      @media (max-width: 896px) {
        max-width: 23.125rem;
        margin: 0 auto;
      }
    }

    >.image-box>picture>img {
      width: 100%;
      height: auto;
    }
  }

  /* ---------------------------------------------
  .about-technology
------------------------------------------------ */
  .about-technology {
    position: relative;
    padding-block-end: 6.25rem;

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

    &::before {
      position: absolute;
      top: -6.25rem;
      left: 0;
      width: 100%;
      height: calc(100% + 6.25rem);
      background: linear-gradient(180deg, rgb(55 36 71 / 0%) 0%, rgb(55 36 71 / 15%) 100%);
      content: "";

      @media (min-width: 897px) {
        background: linear-gradient(180deg, rgb(55 36 71 / 0%) 0%, rgb(55 36 71 / 20%) 100%);
      }
    }

    >.inner {
      position: relative;
      color: var(--color-white);
      padding-inline: 1.25rem;

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

    >.inner>.title {
      font-size: 1.625rem;
      font-weight: 500;
      line-height: 1.69231;
      text-align: center;

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

    >.inner>.title>span {
      font-family: var(--second-family);
      font-size: 2.5625rem;
      font-weight: 400;
      letter-spacing: -0.04em;
      line-height: 1.07317;

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

    >.inner>.title>.small {
      @media (min-width: 897px) {
        font-size: 2.625rem;
        line-height: 1.4286;
      }
    }

    >.inner>.text {
      line-height: 1.75;
      margin-block-start: 1.875rem;

      @media (min-width: 897px) {
        font-size: 1.125rem;
        line-height: 2;
        margin-block-start: 2.0625rem;
        text-align: center;
      }
    }

    >.inner>figure {
      width: 100%;
      margin-block-start: 3.125rem;

      @media (min-width: 897px) {
        max-width: 56.875rem;
        margin: 2.6875rem auto 0;
      }
    }

    >.inner>figure>img {
      width: 100%;
      height: auto;
    }

    >.inner>.note {
      color: var(--color-pink-80);
      font-size: 0.625rem;
      line-height: 1.4;
      margin-block-start: 3.1875rem;

      @media (min-width: 897px) {
        font-size: 0.75rem;
        line-height: 1.5;
        margin-block-start: 3.0625rem;
        text-align: center;
      }
    }

    >.inner>.note>a {
      background-image: linear-gradient(90deg, var(--color-pink-80), var(--color-pink-80));
      color: var(--color-pink-80);

      &[target="_blank"] {
        --bg-size-full: 100%;
        --bg-offset-right: 0;

        &::after {
          display: none;
        }
      }
    }
  }

  /* ---------------------------------------------
  .about-vision
------------------------------------------------ */
  .about-vision {
    padding: 6.25rem 1.25rem;

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

    >.inner {
      display: grid;
      row-gap: 6.25rem;

      @media (min-width: 897px) {
        width: 100%;
        max-width: 95rem;
        margin: 0 auto;
        row-gap: 12.5rem;
      }
    }

    >.inner>.row {
      display: flex;
      flex-wrap: wrap;

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

      &:nth-child(even) {
        @media (min-width: 897px) {
          flex-direction: row-reverse;
        }
      }

      &:last-child {
        >picture {
          @media (min-width: 897px) {
            height: 38.75rem;
          }
        }
      }
    }

    >.inner>.row>.detail {
      @media (min-width: 897px) {
        display: flex;
        width: 50.986%;
        align-items: center;
        justify-content: center;
        padding-inline: 1.875rem;
      }
    }

    >.inner>.row>.detail>.box {
      display: grid;
      row-gap: 2.125rem;

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

    >.inner>.row>.detail>.box>p {
      color: var(--color-white);
      font-size: 1.125rem;
      letter-spacing: 0.03em;
      line-height: 1.88889;

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

    >.inner>.row>picture {
      position: relative;
      display: block;
      overflow: hidden;
      width: 100%;
      border-radius: var(--border-radius-lg);

      @media (min-width: 897px) {
        width: 49.014%;
        height: 42rem;
      }

      &::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(from var(--color-pink-30) r g b / 20%);
        content: "";
        mix-blend-mode: color;
      }
    }

    >.inner>.row>picture>img {
      width: 100%;
      height: auto;
      opacity: 0.9;

      @media (min-width: 897px) {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
      }
    }
  }

  /* ---------------------------------------------
  .about-logo
------------------------------------------------ */
  .about-logo {
    padding-block-start: 6.25rem;

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

    >.inner {
      padding-inline: 1.25rem;

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

    >.inner>.logo {
      width: 100%;
      max-width: 16rem;
      margin: 0 auto 2.9375rem;

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

    >.inner>.logo>img {
      width: 100%;
      height: auto;
    }

    >.inner>.title {
      font-size: 1.375rem;
      font-weight: 700;
      line-height: 1.27273;
      margin-block-end: 1.4375rem;
      text-align: center;

      @media (min-width: 897px) {
        font-size: 1.5rem;
        line-height: 1.16667;
        margin-block-end: 1.375rem;
      }
    }

    >.inner>.text {
      line-height: 1.625;

      @media (min-width: 897px) {
        display: flex;
        justify-content: center;
        line-height: 1.75;
      }
    }

    >.inner>.button {
      margin-block-start: 5rem;

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

    >.inner>.button>a {
      max-width: 18.125rem;
      margin: 0 auto;
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  #case
------------------------------------------------ */
  #case {

    .content-cms-detail,
    .editor-block,
    #editor-input-content {
      @media (max-width: 896px) {
        padding-inline: 1.25rem;
      }

      >h2.wp-block-heading+h3.wp-block-custom-heading02 {
        margin-block-start: 2.5rem !important;

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

      >h2.wp-block-heading {
        margin-block-start: 6.25rem !important;

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

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

      h3.wp-block-heading {
        @media (max-width: 896px) {
          margin-block-end: 1.875rem !important;
        }
      }

      >.box-grid-2 {
        margin-block: 1.875rem;

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

      >.wp-block-custom-company-profile {
        padding-block: 0.625rem;

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

      >.wp-block-table {
        margin-block: 1.25rem 0.9375rem !important;

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

      >.box-iframe {
        margin-block-end: 1.875rem;
      }

      >.wp-block-image figcaption {
        @media (max-width: 896px) {
          margin-block-start: 1.875rem !important;
        }
      }
    }

    .box-relate-article {
      padding-block-start: 1.25rem;

      .list-case {
        margin-block-start: 0;

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

    .list-badges {
      overflow: auto;
      padding-bottom: 0.625rem;
    }

    .list-badges .badge {
      white-space: nowrap;
    }
  }

  /* ---------------------------------------------
  .case-list-container
------------------------------------------------ */
  .case-list-container {
    >.container>.button-more {
      margin-block-start: 1.75rem;
    }

    >.container>.breadcrumb {
      @media (min-width: 897px) {
        padding-block: 8.25rem 0.9375rem;
      }
    }
  }

  /* ---------------------------------------------
  .case-detail-container
------------------------------------------------ */
  .case-detail-container {
    >.container {
      @media (max-width: 896px) {
        padding-inline: 0;
      }
    }

    >.container>.heading-detail {
      max-width: var(--max-width-lg);
      margin: 3.8125rem auto 0;
      padding-block-end: 3.0625rem;
      padding-inline: 0;

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

    >.container>.content-cms-detail,
    >.container>.editor-block {
      max-width: var(--max-width-lg);
      margin: 4.375rem auto 0;

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

  /* ---------------------------------------------
  .list-card-case load more
------------------------------------------------ */
  .list-card-case>.is-hidden-more {
    display: none;
  }

  .list-card-case>.is-showing {
    display: list-item;
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .list-card-case>.is-showing.is-visible {
    opacity: 1;
  }

  /* ---------------------------------------------
  .button-more visibility
------------------------------------------------ */
  .button-more[data-load-more-button="hidden"] {
    display: none;
  }

  .button-more[data-load-more-button="show"] {
    display: block;
  }

  /* ---------------------------------------------
  .box-select disabled button
------------------------------------------------ */
  .box-select button.is-disabled {
    color: #ddd;
    cursor: default;
    pointer-events: none;
  }

  /* ---------------------------------------------
  .reset visibility
------------------------------------------------ */
  .reset[data-status-reset="hidden"] {
    display: none;
  }

  .reset[data-status-reset="show"] {
    display: block;
  }
}

@layer pages {

  /* ---------------------------------------------
  .hero
------------------------------------------------ */
  .hero[data-hero-variant="bg-column"] {
    position: relative;

    >.column-logo {
      position: absolute;
      top: 0.5rem;
      left: 50%;
      width: 100%;
      max-width: 22.0625rem;
      aspect-ratio: 1 / 1;
      transform: translateX(-50%);

      @media (min-width: 897px) {
        top: -2.1875rem;
        max-width: 35.125rem;
      }
    }

    >.column-logo>[class^="logo-"] {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;

      @media (min-width: 897px) {
        animation-delay: 0.4s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: logo-rotate;
        animation-timing-function: linear;
      }
    }

    >.column-logo>.logo-main {
      background-image: url("/assets/images/common/logo-main.svg");

      @media (min-width: 897px) {
        animation-duration: 60s;
      }
    }

    >.column-logo>.logo-dot-pink {
      background-image: url("/assets/images/common/logo-dot-pink.svg");

      @media (min-width: 897px) {
        animation-duration: 70s;
      }
    }

    >.column-logo>.logo-dot-purple {
      background-image: url("/assets/images/common/logo-dot-purple.svg");

      @media (min-width: 897px) {
        animation-duration: 80s;
      }
    }

    >.column-logo>.logo-dot-white {
      background-image: url("/assets/images/common/logo-dot-white.svg");

      @media (min-width: 897px) {
        animation-duration: 90s;
      }
    }

    >.inner {
      position: relative;
      z-index: 1;
    }
  }

  /* ---------------------------------------------
  .column-list-container
------------------------------------------------ */
  .column-list-container {
    margin-block-start: 5rem;

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

    >.container>.page-heading {
      position: relative;
      color: var(--color-text);
      font-size: 1.375rem;
      font-style: normal;
      font-weight: 700;
      line-height: 1.5;
      padding-inline-start: 1.1875rem;

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

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

    >.container>.page-heading-box {
      display: grid;
      align-items: flex-start;
      gap: 1.875rem;
      grid-template-columns: 8.125rem 1fr;
      margin-block-end: 3.125rem;

      @media (max-width: 896px) {
        justify-content: center;
        grid-template-columns: 1fr;
        margin-block-end: 0;
      }
    }

    >.container>.page-heading-box>.icon {
      padding: 0.9375rem;
      border-radius: var(--border-radius-md);
      background: linear-gradient(104deg, var(--color-pink-30) 0.41%, var(--color-purple-40) 100%);

      @media (max-width: 896px) {
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;
      }
    }

    >.container>.page-heading-box>.icon>img {
      display: block;
      overflow: hidden;
      width: 6.25rem;
      height: auto;
      border-radius: var(--border-radius-sm);

      @media (max-width: 896px) {
        border-radius: var(--border-radius-md);
      }
    }

    >.container>.page-heading-box>.detail>.badge {
      width: -moz-fit-content;
      width: fit-content;
    }

    >.container>.page-heading-box>.detail>.title {
      color: var(--color-text);
      font-size: 1.625rem;
      font-style: normal;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1.46154;
      margin-block-start: 0.25rem;

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

    >.container>.page-heading-box>.detail>.text {
      letter-spacing: 0.03em;
      line-height: 1.75;
      margin-block-start: 0.25rem;

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

    >.container>.box-corner-tag {
      position: relative;
      margin-block-start: 4.375rem;
      padding-block-start: 3.125rem;

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

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--color-gray-75);
        content: "";

        @media (min-width: 897px) {
          left: -1.25rem;
          width: calc(100% + 2.5rem);
        }
      }
    }

    >.container>.box-corner-tag>.button-more+.heading-icon {
      margin-block-start: 2.5rem;

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

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

    >.container>.pagination {
      margin-block-start: 4.375rem;

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

    >.breadcrumb[data-breadcrumb-variant="bottom"] {
      padding-block-start: 8.125rem;
    }
  }

  /* ---------------------------------------------
  .column-detail-container
------------------------------------------------ */
  .column-detail-container {
    >.container {
      @media (max-width: 896px) {
        padding-inline: 0;
      }
    }

    >.container>.content-cms-detail,
    >.container>.editor-block {
      max-width: var(--desktop-content-width-narrow);
      margin: 6.25rem auto 0;
      padding-inline: 1.25rem;

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

    >.container>.content-cms-detail>h2.wp-block-heading,
    >.container>.editor-block>h2.wp-block-heading,
    >.container>#editor-input-content>h2.wp-block-heading {
      @media (max-width: 896px) {
        margin-block-start: 5.625rem !important;
      }
    }

    >.container>.box-button-article {
      margin-block: 5rem 9.375rem;

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

    >.container>.box-corner-tag {
      border-top: 1px solid var(--color-gray-75);
      padding-block-start: 3.0625rem;

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

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

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

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

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

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

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

@layer pages {

  /* ---------------------------------------------
  .company-content
------------------------------------------------ */
  .company-content {
    display: grid;
    row-gap: 5.625rem;

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

    &[data-company-variant="small"] {
      row-gap: 3.75rem;
    }

    &+& {
      margin-top: 2.5rem;

      @media (min-width: 897px) {
        margin-top: 6.25rem;
      }
    }

    >.box>.text-lead {
      letter-spacing: 0.05em;
      line-height: 1.75;

      &[data-text-variant="large"] {
        font-size: 1.125rem;
        line-height: 1.66667;
      }
    }

    >.box>.heading-double-border {
      margin-bottom: 1.25rem;
    }

    >.box>.heading-border-left {
      margin-bottom: 1.25rem;
    }
  }

  /* ---------------------------------------------
  .company-business
------------------------------------------------ */
  .company-business {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-block-start: 1.875rem;

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

    >.card {
      display: flex;
      width: 100%;
      align-items: center;
      padding: 0.9375rem 0.9375rem 0.9375rem 0.3125rem;
      border-radius: var(--border-radius-md);
      background-color: var(--color-white);

      @media (min-width: 897px) {
        flex: 1 1 calc(33.33333% - 0.25rem);
        align-items: flex-start;
        padding: 1.25rem 0.9375rem;
        gap: 0.625rem;
      }
    }

    >.card[data-direction-variant="column"] {
      @media (min-width: 897px) {
        flex-direction: column;
        align-items: center;
        padding: 1.5625rem 0.9375rem 2.125rem;
        text-align: center;
      }
    }

    >.card[data-direction-variant="row"] {
      @media (min-width: 897px) {
        flex-direction: row;
        align-items: center;
        padding: 1.625rem 0.9375rem 2.0625rem;
        gap: 0.3125rem;
      }
    }

    >.card[data-direction-variant="row"]>figure {
      @media (min-width: 897px) {
        position: relative;
        top: 0.25rem;
      }
    }

    >.card>figure {
      width: 5.75rem;
      flex-shrink: 0;

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

    >.card>figure>img {
      width: 100%;
      height: auto;
    }

    >.card>.detail {
      display: grid;
      row-gap: 0.3125rem;
    }

    >.card>.detail>.title {
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.71429;

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

    .card>.detail>.text {
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      line-height: 1.5;

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

  /* ---------------------------------------------
  .company-achievements
------------------------------------------------ */
  .company-achievements {
    display: grid;
    gap: 2.5rem;
    margin-block-start: 1.875rem;

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

    >.card {
      display: flex;
      flex-direction: column;
    }

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

    >.card>.detail>.title {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.2;
    }

    >.card>.detail>.text {
      font-size: 0.875rem;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.07em;
      line-height: 1.71429;
    }

    >.card>figure img {
      width: 100%;
      height: auto;
    }

    >.card:nth-child(2)>figure {
      @media (min-width: 897px) {
        margin-right: -0.3125rem;
      }
    }

    >.card:nth-child(2)>figure img {
      @media (min-width: 897px) {
        position: relative;
        right: 0.125rem;
      }
    }

    >.card>figure>figcaption {
      text-align: center;
    }

    >.card>figure>figcaption>.title {
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.33333;
    }

    >.card>figure>figcaption>.date {
      margin-top: 0.1875rem;
      font-size: 0.75rem;
      letter-spacing: 0.06em;
      line-height: 2;
    }
  }

  /* ---------------------------------------------
  .company-why
------------------------------------------------ */
  .company-why {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1.25rem;
    border-radius: var(--border-radius-md);
    background-color: var(--color-white);
    text-align: center;

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

    *+& {
      margin-top: 2.5rem;

      @media (min-width: 897px) {
        margin-top: 6.25rem;
      }
    }

    >.heading {
      font-family: var(--second-family);
      font-size: 1.75rem;
      font-weight: 500;
      line-height: 1;
      margin-block-end: 0.9375rem;
    }

    >.text {
      line-height: 1.75;
      text-align: left;

      @media (min-width: 897px) {
        text-align: center;
      }
    }

    >figure {
      margin-block-start: 3.125rem;
      text-align: center;
    }

    >figure>img {
      width: 14.6875rem;
      height: auto;

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

  /* ---------------------------------------------
  .company-profile
------------------------------------------------ */
  .company-profile {
    *+& {
      margin-top: 2.5rem;
    }

    >table {
      width: 100%;

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

    >table>tbody {
      @media (max-width: 896px) {
        display: block;
      }
    }

    >table>tbody>tr {
      @media (max-width: 896px) {
        display: block;
      }
    }

    >table>tbody>tr:first-child>th,
    >table>tbody>tr:first-child>td {
      padding-top: 0;
    }

    >table>tbody>tr:first-child>th {
      @media (max-width: 896px) {
        padding-top: 0;
      }
    }

    >table>tbody>tr>th,
    >table>tbody>tr>td {
      border-bottom: 1px solid var(--color-gray-75);
      line-height: 1.75;
      padding-block: 0.9375rem 1.0625rem;

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

    >table>tbody>tr>th {
      width: 7.1875rem;
      border-right: 10px solid var(--color-base-background);
      font-weight: 700;
      text-align: left;

      @media (max-width: 896px) {
        width: 100%;
        border: none;
        padding-block: 0.9375rem 0.3125rem;
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  #download
------------------------------------------------ */
  #download {
    >main>.hero[data-hero-variant="no-image"]>.inner {
      padding-block: 4.0625rem 2.5625rem;

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

  /* ---------------------------------------------
  #download-thanks
------------------------------------------------ */
  #download-thanks {
    >main>.hero[data-hero-variant="no-image"]>.inner {
      padding-block-end: 1.25rem;

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

@layer pages {

  /* ---------------------------------------------
  #event
------------------------------------------------ */
  #event {
    >main>.hero[data-hero-variant="no-image"]>.inner {
      padding-block: 2.9375rem 3rem;

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

    >main>.hero[data-hero-variant="no-image"]>.inner>h1 {
      @media (max-width: 896px) {
        row-gap: 1px;
      }
    }

    >main>.hero[data-hero-variant="no-image"]>.inner>h1>.subtitle {
      @media (max-width: 896px) {
        font-size: 1.625rem;
        line-height: 1.23077;
      }
    }

    >main>.breadcrumb[data-breadcrumb-variant="bottom"] {
      @media (min-width: 897px) {
        padding-block-start: 8.375rem;
      }
    }
  }

  /* ---------------------------------------------
  .event-content
------------------------------------------------ */
  .event-content {
    margin-block-start: 1.875rem;

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

    >.row {
      &+& {
        margin-block-start: 4.375rem;
      }
    }

    >.row>.text {
      font-size: 1rem;
      letter-spacing: 0.05em;
      line-height: 1.75;
      margin-block-end: 1.875rem;
    }

    >.row>.text-note {
      display: none;
      color: var(--color-gray-40);
      font-size: 0.875rem;
      letter-spacing: 0.05em;
      line-height: 1.857;
    }

    >.row>.heading-border-left:has(+ .text) {
      @media (min-width: 897px) {
        margin-block-end: 1.25rem;
      }
    }
  }

  /* ---------------------------------------------
  .event-list
------------------------------------------------ */
  .event-list {
    display: grid;
    gap: 1.25rem;

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

    >li>a {
      display: flex;
      overflow: hidden;
      flex-flow: column wrap;
      border-radius: var(--border-radius-md);
      background-color: var(--color-white);

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

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

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

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

    >li>a>.box {
      padding: 0.625rem 0.625rem 1.875rem;

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

    >li>a>.box>figure {
      position: relative;
      overflow: hidden;
      border-radius: var(--border-radius-md);
      aspect-ratio: 315 / 180;

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

    >li>a>.box>figure>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;
      }
    }

    >li>a>.box>.detail {
      padding: 1.8125rem 1.25rem 0;

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

    >li>a>.box>.detail>.badge,
    >li>a>.box>.detail>.badge-group>.badge {
      font-weight: 400;
      line-height: 1.41667;
      margin-block-end: 0.625rem;
    }

    >li>a>.box>.detail>.title {
      border-bottom: 1px solid var(--color-gray-75);
      font-size: 1.0625rem;
      font-weight: 500;
      line-height: 1.47059;
      margin-block-end: 0.875rem;
      padding-block-end: 0.9375rem;
    }

    >li>a>.box>.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);
      }
    }

    >li>a>.box>.detail>.list {
      display: grid;
      margin-block-end: 0.5rem;
      row-gap: 0.5rem;
    }

    >li>a>.box>.detail>.list>li {
      position: relative;
      font-size: 0.8125rem;
      line-height: 1.616;
      padding-inline-start: 1.875rem;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 1.25rem;
        height: 1.25rem;
        background-position: left top;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
      }
    }

    >li>a>.box>.detail>.list>li.datetime::before {
      background-image: url("/assets/images/common/icon-time-01.svg");
    }

    >li>a>.box>.detail>.list>li.location::before {
      background-image: url("/assets/images/common/icon-location-01.svg");
    }

    >li>a>.box>.detail>.text {
      font-size: 0.8125rem;
      line-height: 1.616;
    }

    >li>a>.button {
      display: flex;
      min-height: 2.6875rem;
      align-items: center;
      justify-content: center;
      padding: 0.3125rem;
      background-color: var(--color-pink-30);
      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;
      }
    }

    >li>a>.button>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%);
      }
    }

    +.button-more {
      margin-block-start: 1.0625rem;

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

  /* ---------------------------------------------
  .seminar-detail-container
------------------------------------------------ */
  .seminar-detail-container {
    >.container>.inner>.heading-detail {
      margin-block: 3.25rem 3.75rem;
      padding-block-end: 3.0625rem;

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

    >.container>.inner>.heading-detail>.list-badges {
      margin-block-end: 1.25rem;

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

  /* ---------------------------------------------
  .box-seminar-detail
------------------------------------------------ */
  .box-seminar-detail {
    display: flex;
    flex-flow: column wrap;
    gap: 1.1875rem 1.875rem;

    @media (min-width: 897px) {
      flex-direction: row-reverse;
      align-items: flex-start;
    }

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

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

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

    >.detail>.list>li {
      position: relative;
      font-size: 0.8125rem;
      line-height: 1.616;
      padding-inline-start: 1.875rem;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 1.25rem;
        height: 1.25rem;
        background-position: left top;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
      }
    }

    >.detail>.list>li.datetime::before {
      background-image: url("/assets/images/common/icon-time-01.svg");
    }

    >.detail>.list>li.location::before {
      background-image: url("/assets/images/common/icon-location-01.svg");
    }

    >.detail>.text {
      font-size: 0.8125rem;
      line-height: 1.616;
    }

    >figure {
      overflow: hidden;
      padding: 0.5625rem;
      border-radius: var(--border-radius-md);
      background-color: var(--color-white);

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

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

@layer pages {

  /* ---------------------------------------------
  .hero-lp-image
------------------------------------------------ */
  .hero-lp-image {
    position: relative;

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

    >.inner {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      width: 100%;
      color: var(--color-white);
      padding-inline: 1.25rem;
      text-align: center;
      transform: translate(-50%, -50%);

      @media (max-width: 896px) {
        padding-block-start: min(2.93333dvw, 0.6875rem);
      }
    }

    >.inner>.label {
      display: inline-block;
      padding: 0.4375rem min(4.8dvw, 1.125rem);
      border: 2px solid var(--color-white);
      border-radius: 6.25rem;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      background-color: rgb(from var(--color-black) r g b / 20%);
      font-size: min(3.73333dvw, 0.875rem);
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.429;
      margin-block-end: min(4dvw, 0.9375rem);

      @media (min-width: 897px) {
        padding: 0.5625rem 1.75rem;
        font-size: min(1.5625dvw, 1.5625rem);
        line-height: 1.44;
        margin-block-end: min(0.9375dvw, 0.9375rem);
      }
    }

    >.inner>.title {
      font-size: min(6.93333dvw, 1.625rem);
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.38462;

      @media (min-width: 897px) {
        font-size: min(4.25dvw, 4.25rem);
        line-height: 1.26471;
      }
    }

    >.inner>.text {
      font-size: min(3.73333dvw, 0.875rem);
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.57143;
      margin-block-start: min(1.33333dvw, 0.3125rem);

      @media (min-width: 897px) {
        font-size: min(1.375dvw, 1.375rem);
        line-height: 1.45455;
        margin-block-start: min(1.25dvw, 1.25rem);
      }
    }

    >.inner>.button-primary[data-button-variant="arrow-down"] {
      margin: min(8dvw, 1.875rem) auto 0;

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

    >picture {
      display: block;
    }

    >picture>img {
      width: 100%;
      height: auto;
    }

    >.video {
      position: relative;
      width: 100%;
      aspect-ratio: 375 / 521;

      @media (min-width: 897px) {
        aspect-ratio: 16 / 9;
        padding-block-start: 56.25%;
      }
    }

    >.video>iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      @media (max-width: 896px) {
        top: 50% !important;
        left: 50%;
        width: 246.99259% !important;
        min-width: 100%;
        transform: translate(-50%, -50%);
      }
    }

    >.statistic-box {
      position: absolute;
      z-index: 2;
      bottom: -4.1875rem;
      display: flex;
      overflow: hidden;
      min-width: 8.4375rem;
      min-height: 8.4375rem;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      aspect-ratio: 1 / 1;
      background: linear-gradient(104.25deg, var(--color-pink-30) 0.41%, var(--color-purple-40) 100%);
      color: var(--color-white);
      padding-block-start: 0.25rem;
      text-align: center;

      @media (min-width: 897px) {
        right: min(1.875dvw, 1.875rem);
        bottom: min(1.875dvw, 1.875rem);
        min-width: clamp(10rem, 13.625dvw, 13.625rem);
        min-height: clamp(10rem, 13.625dvw, 13.625rem);
        padding-block-start: 0.125rem;
      }

      @media (max-width: 896px) {
        left: 50%;
        transform: translateX(-50%);
      }

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: 4px solid rgb(from var(--color-black) r g b / 10%);
        border-radius: 50%;
        content: "";

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

    >.statistic-box>.title {
      font-size: 0.9375rem;
      font-weight: 700;
      line-height: 1.134;

      @media (min-width: 897px) {
        font-size: clamp(0.875rem, 1.25dvw, 1.25rem);
        line-height: 1.2;
      }
    }

    >.statistic-box>.number {
      font-family: var(--second-family);
      font-size: 3.3125rem;
      font-weight: 600;
      line-height: 1;
      margin-block-start: -1px;

      @media (min-width: 897px) {
        font-size: clamp(3rem, 5.25dvw, 5.25rem);
        margin-block-start: min(0.3125dvw, 0.3125rem);
      }
    }

    >.statistic-box>.unit {
      font-size: 0.9375rem;
      font-weight: 700;
      line-height: 1.134;
      margin-block-start: -0.375rem;

      @media (min-width: 897px) {
        font-size: clamp(1rem, 1.375dvw, 1.375rem);
        line-height: 1.09091;
        margin-block-start: max(-0.5625dvw, -0.5625rem);
      }
    }

    >.statistic-box>.date {
      font-size: 0.5rem;
      line-height: 1.5;
      margin-block-start: 0.3125rem;

      @media (min-width: 897px) {
        font-size: clamp(0.625rem, 0.75dvw, 0.75rem);
        line-height: 1.334;
        margin-block-start: min(0.6875dvw, 0.6875rem);
      }
    }

    &[data-hero-variant="nurse"] {
      &::before {
        background-color: rgb(from var(--color-black) r g b / 45%);

        @media (min-width: 897px) {
          background-color: rgb(from var(--color-black) r g b / 35%);
        }
      }

      >.inner {
        @media (min-width: 897px) {
          max-width: 75.75rem;
          text-align: left;
        }
      }

      >.inner>.button-primary {
        @media (min-width: 897px) {
          margin-inline: 0;
        }
      }
    }

    &[data-hero-variant="logi"] {
      &::before {
        background-color: rgb(from var(--color-black) r g b / 41%);

        @media (min-width: 897px) {
          background-color: rgb(from var(--color-black) r g b / 40%);
        }
      }

      >.inner {
        @media (min-width: 897px) {
          max-width: 74.375rem;
          text-align: left;
        }
      }

      >.inner>.button-primary {
        @media (min-width: 897px) {
          margin-inline: 0;
        }
      }
    }
  }

  /* ---------------------------------------------
  .vr-concern
------------------------------------------------ */
  .vr-concern {
    background: linear-gradient(104.25deg, var(--color-pink-30) 0.41%, var(--color-purple-40) 100%);

    >.container {
      padding-block: 6.25rem 1.25rem;

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

    >.container>.separator {
      position: relative;
      display: flex;
      min-height: 5.3125rem;
      align-items: center;
      justify-content: center;
      color: var(--color-white);
      font-size: 1.625rem;
      font-weight: 700;
      line-height: 1.34615;
      margin-block: 0.9375rem;
      padding-block-end: 0.625rem;
      text-align: center;

      @media (min-width: 897px) {
        font-size: 1.875rem;
        line-height: 1.3;
        padding-block-end: 0.375rem;
      }

      &::before {
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 50%;
        width: 17.25rem;
        height: 5.3125rem;
        background: url("/assets/images/lp/bg-arrow-down-01.png") no-repeat left top / contain;
        content: "";
        transform: translateX(-50%);
      }
    }
  }

  /* ---------------------------------------------
  .heading-dot
------------------------------------------------ */
  .heading-dot {
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.6;
    margin-block-end: 0.9375rem;
    text-align: center;

    @media (min-width: 897px) {
      font-size: 3.125rem;
      line-height: 1.4;
      margin-block-end: 5.6875rem;
    }

    >.inner {
      position: relative;
      display: inline-block;
      padding-inline: 1.5rem;

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

      &::before,
      &::after {
        position: absolute;
        top: 50%;
        width: 2.375rem;
        height: 5.0625rem;
        content: "";
        margin-block-start: -2.5625rem;

        @media (min-width: 897px) {
          top: calc(50% + 1px);
          width: 2.6875rem;
          height: 8.3125rem;
          margin-block-start: -4.1875rem;
        }
      }

      &::before {
        left: -1.125rem;
        background: url("/assets/images/lp/bg-line-01-sp.png") no-repeat left top / contain;

        @media (min-width: 897px) {
          left: 0;
          background-image: url("/assets/images/lp/bg-line-01-pc.png");
        }
      }

      &::after {
        right: -1.125rem;
        background: url("/assets/images/lp/bg-line-02-sp.png") no-repeat left top / contain;

        @media (min-width: 897px) {
          right: 0;
          background-image: url("/assets/images/lp/bg-line-02-pc.png");
        }
      }
    }

    >.inner>.dot {
      position: relative;

      &::before {
        position: absolute;
        top: 0;
        left: 50%;
        width: 0.1875rem;
        height: 0.1875rem;
        border-radius: 50%;
        background-color: var(--color-white);
        content: "";
        transform: translateX(-50%);

        @media (min-width: 897px) {
          top: 0.125rem;
          width: 0.4375rem;
          height: 0.4375rem;
        }
      }
    }
  }

  /* ---------------------------------------------
  .list-people-concern
------------------------------------------------ */
  .list-people-concern {
    display: grid;
    row-gap: 0.125rem;

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

    >li {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 0.9375rem 1.25rem 0.9375rem 0.9375rem;
      background-color: var(--color-white);
      gap: 0.875rem 0.9375rem;

      @media (min-width: 897px) {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 0.625rem 2.1875rem;
        border-radius: var(--border-radius-lg);
      }

      &:first-child {
        @media (max-width: 896px) {
          border-top-left-radius: var(--border-radius-lg);
          border-top-right-radius: var(--border-radius-lg);
        }
      }

      &:last-child {
        @media (max-width: 896px) {
          border-bottom-left-radius: var(--border-radius-lg);
          border-bottom-right-radius: var(--border-radius-lg);
        }
      }
    }

    >li>figure {
      width: 100%;
      max-width: 5rem;

      @media (min-width: 897px) {
        max-width: 8.75rem;
        margin: -4.3125rem auto 0;
      }
    }

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

    >li>.detail {
      flex: 1;

      @media (min-width: 897px) {
        display: flex;
        width: 100%;
        min-height: 7.5rem;
        flex-direction: column;
        justify-content: center;
        text-align: center;
      }
    }

    >li>.detail>p {
      font-size: 0.875rem;
      font-weight: 500;
      line-height: 1.71429;

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

    >li>.detail>p>span {
      color: var(--color-pink-30);
      font-weight: 700;
    }

    &[data-concern-variant="logi"] {
      >li>.detail {
        @media (min-width: 897px) {
          padding-block-end: 0.625rem;
        }
      }
    }
  }

  /* ---------------------------------------------
  .vr-concern-box
------------------------------------------------ */
  .vr-concern-box {
    padding: 1.75rem 1.25rem 1.875rem;
    border-radius: var(--border-radius-lg);
    background-color: var(--color-white);

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

    >.inner {
      @media (min-width: 897px) {
        width: 100%;
        max-width: 62.5rem;
        margin: 0 auto;
      }
    }

    >.inner>.title {
      -webkit-background-clip: text;
      background-clip: text;
      background-image: linear-gradient(95.78deg,
          var(--color-pink-30) 45.83%,
          var(--color-purple-30) 91.91%);
      font-size: 1.875rem;
      font-weight: 700;
      line-height: 1.6;
      margin-block-end: 1.1875rem;
      text-align: center;
      -webkit-text-fill-color: transparent;

      @media (min-width: 897px) {
        font-size: 3.625rem;
        line-height: 1.1725;
        margin-block-end: 2.6875rem;
      }
    }

    >.inner>.title>span {
      font-family: var(--second-family);
      font-weight: 600;
    }

    >.inner>.text {
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.66667;
      margin-block-start: 1.25rem;

      @media (min-width: 897px) {
        font-size: 1.5rem;
        line-height: 1.66667;
        margin-block-start: 3.125rem;
        text-align: center;
      }
    }

    >.inner>.text>span {
      color: var(--color-pink-30);
    }

    >.inner>.note {
      color: var(--color-gray-40);
      font-size: 0.75rem;
      line-height: 1.66667;
      margin-block-start: 0.625rem;

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

  /* ---------------------------------------------
  .vr-video
------------------------------------------------ */
  .vr-video {
    overflow: hidden;
    padding: 0.25rem;
    border-radius: var(--border-radius-lg);
    background: linear-gradient(135deg, var(--color-pink-30) 0%, var(--color-purple-40) 100%);

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

    >.video {
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: 0.375rem;
      aspect-ratio: 16 / 9;
      padding-block-start: 56.25%;

      @media (min-width: 897px) {
        border-radius: 0.1875rem;
      }
    }

    >.video>iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  /* ---------------------------------------------
  .button-video-download
------------------------------------------------ */
  .button-video-download {
    display: block;
    padding: 0.9375rem;
    background: linear-gradient(104.25deg, var(--color-pink-30) 0.41%, var(--color-purple-40) 100%);
    color: var(--color-white);

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

    >.inner {
      padding: 2.3125rem 1.25rem 2.5rem;
      border-radius: var(--border-radius-lg);
      background-color: rgb(from var(--color-white) r g b / 5%);
      transition: background-color 300ms ease-out;

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

    >.inner>.title {
      font-size: 1.875rem;
      font-weight: 700;
      line-height: 1.46667;
      text-align: center;

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

    >.inner>.text {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.625;
      margin-block-start: 0.8125rem;
      text-align: center;

      @media (min-width: 897px) {
        font-size: 1.125rem;
        line-height: 1.55556;
        margin-block-start: 0.9375rem;
      }
    }

    >.inner>.button {
      position: relative;
      display: flex;
      width: 100%;
      max-width: 13.75rem;
      min-height: 3.75rem;
      align-items: center;
      padding: 0.3125rem 3.75rem 0.3125rem 1.875rem;
      border-radius: 6.25rem;
      margin: 1.5rem auto 0;
      background-color: var(--color-yellow-10);
      box-shadow: 0 10px 20px 0 rgb(from var(--color-purple-30) r g b / 15%);
      color: var(--color-pink-30);
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 1.55556;
      transition: all 0.3s ease-out;

      @media (min-width: 897px) {
        font-size: 1.375rem;
        line-height: 1.45455;
        margin-block-start: 2.125rem;
      }

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

      &::before {
        top: 50%;
        right: 0.5rem;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: 50%;
        background-color: var(--color-white);
      }

      &::after {
        top: calc(50% + 1px);
        right: 1.5625rem;
        width: 0.5rem;
        height: 0.4375rem;
        background: url("/assets/images/common/icon-arrow-down-03.svg") no-repeat left top / contain;
      }
    }

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

      >.inner>.button {
        @media (min-width: 897px) {
          background-color: var(--color-yellow-20);
          box-shadow: none;
        }
      }
    }

    &[data-background-variant="layer"] {
      background: linear-gradient(0deg,
          rgb(from var(--color-black) r g b / 5%),
          rgb(from var(--color-black) r g b / 5%)), linear-gradient(104.25deg, var(--color-pink-30) 0.41%, var(--color-purple-40) 100%);
    }
  }

  /* ---------------------------------------------
  .vr-section
------------------------------------------------ */
  .vr-section {
    position: relative;
    background-color: var(--color-pink-90);

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

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

    >.inner {
      position: relative;
      padding-block: 6.25rem;

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

    >.inner>.container>.lead {
      color: var(--color-black);
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.6;
      margin-block-start: 1.875rem;

      @media (min-width: 897px) {
        font-size: 1.625rem;
        line-height: 1.539;
        margin-block-start: 2.9375rem;
        text-align: center;
      }
    }

    >.inner>.container>.text {
      font-size: 1rem;
      line-height: 1.75;
      margin-block: 1.25rem 3.125rem;

      @media (min-width: 897px) {
        font-size: 1.125rem;
        line-height: 1.77778;
        margin-block: 1.875rem 5rem;
        text-align: center;
      }
    }

    >.inner>.container>.text-gradient {
      -webkit-background-clip: text;
      background-clip: text;
      background-image: linear-gradient(95.78deg,
          var(--color-pink-30) 45.83%,
          var(--color-purple-30) 91.91%);
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.6;
      margin-block-start: 2.5625rem;
      -webkit-text-fill-color: transparent;

      @media (min-width: 897px) {
        font-size: 1.875rem;
        line-height: 1.5334;
        margin-block-start: 5.375rem;
        text-align: center;
      }
    }

    &[data-background-variant="purple"] {
      background-color: var(--color-purple-90);
    }

    &[data-background-variant="gradient"] {
      background: linear-gradient(104.25deg, var(--color-pink-30) 0.41%, var(--color-purple-40) 100%);

      &::before {
        background-image: url("/assets/images/lp/bg-logo-02-sp.svg");

        @media (min-width: 897px) {
          background-image: url("/assets/images/lp/bg-logo-02-pc.svg");
        }
      }
    }

    &[data-section-variant="features"] {
      >.inner>.container {
        @media (min-width: 897px) {
          max-width: 78.125rem;
          padding-inline: 2.5rem;
        }
      }
    }

    &[data-section-variant="use-case"] {
      >.inner>.container>.lead {
        @media (max-width: 896px) {
          text-align: center;
        }
      }
    }

    &[data-section-variant="scene"] {
      >.inner>.container>.lead {
        font-size: 1.625rem;
        line-height: 1.38462;

        @media (min-width: 897px) {
          font-size: 2.5rem;
          line-height: 1.325;
          margin-block-start: 3.125rem;
        }
      }
    }

    &[data-section-variant="download"] {
      >.inner>.container>.heading-gradient {
        @media (max-width: 896px) {
          padding-block-end: 1.75rem;
        }
      }

      >.inner>.container>.heading-gradient>.subtitle {
        @media (max-width: 896px) {
          margin-block-end: 0.1875rem;
        }
      }

      >.inner>.container>.heading-gradient>.title {
        letter-spacing: normal;

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

    &[data-section-variant="company"] {
      >.inner {
        padding-block-end: 2.625rem;

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

      >.inner>.container>.lead {
        margin-block-start: 3.125rem;
      }
    }
  }

  /* ---------------------------------------------
  .heading-gradient
------------------------------------------------ */
  .heading-gradient {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 700;
    padding-block-end: 1.625rem;
    text-align: center;

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

    &::before,
    &::after {
      position: absolute;
      bottom: 0;
      height: 0.3125rem;
      border-radius: 1.25rem;
      content: "";
      transform: translateX(-50%);
    }

    &::before {
      left: calc(50% - 0.9375rem);
      width: 3.125rem;
      background-color: var(--color-pink-30);
    }

    &::after {
      left: calc(50% + 1.6875rem);
      width: 1.5625rem;
      background-color: var(--color-purple-30);
    }

    >.subtitle {
      display: inline-block;
      width: -moz-fit-content;
      width: fit-content;
      padding: 0.75rem 0.8125rem 0.5rem;
      border: dashed var(--color-pink-30);
      border-width: 2px 2px 0;
      border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
      color: var(--color-pink-30);
      font-size: 1rem;
      line-height: 1.5;
      margin-block-end: 0.125rem;

      @media (min-width: 897px) {
        font-size: 1.875rem;
        line-height: 1.2;
        margin-block-end: -0.3125rem;
        padding-inline: 1.4375rem;
      }
    }

    >.title {
      display: block;
      -webkit-background-clip: text;
      background-clip: text;
      background-image: linear-gradient(95.78deg,
          var(--color-pink-30) 45.83%,
          var(--color-purple-30) 91.91%);
      font-family: var(--second-family);
      font-size: clamp(2.25rem, 13.86667dvw, 3.25rem);
      letter-spacing: 0.02em;
      line-height: 1;
      overflow-wrap: break-word;
      -webkit-text-fill-color: transparent;
      white-space: pre-wrap;
      word-break: break-all;

      @media (min-width: 897px) {
        font-size: clamp(5rem, 9.09091dvw, 6.875rem);
      }
    }

    >.title>span {
      display: inline-block;
    }

    >.title>.title-small {
      font-size: clamp(1.625rem, 11.2dvw, 2.625rem);

      @media (min-width: 897px) {
        font-size: clamp(3.125rem, 6.61157dvw, 5rem);
      }
    }

    &[data-heading-variant="white"] {
      &::before {
        background-color: var(--color-pink-70);
      }

      &::after {
        background-color: var(--color-purple-70);
      }

      >.subtitle {
        border-color: var(--color-white);
        color: var(--color-white);
      }

      >.title {
        background-clip: unset;
        background-image: none;
        color: var(--color-white);
        -webkit-text-fill-color: unset;
      }
    }
  }

  /* ---------------------------------------------
  .vr-features-content
------------------------------------------------ */
  .vr-features-content {
    display: grid;
    margin-block-start: 2.25rem;
    row-gap: 1.5625rem;

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

    >.content>.white-box {
      padding: 3.125rem 1.25rem 1.25rem;
      border-radius: var(--border-radius-lg);
      background-color: var(--color-white);
      margin-block-start: -1.1875rem;

      @media (min-width: 897px) {
        margin-block-start: -2.5rem;
        padding-block: 6.25rem 5rem;
      }

      &[data-space-variant="small"] {
        padding-block-start: 3.6875rem;

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

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

  /* ---------------------------------------------
  .heading-number-gradient
------------------------------------------------ */
  .heading-number-gradient {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.1875rem 2.5rem;

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

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

    >.number {
      display: block;

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

    >.number>img {
      width: -moz-fit-content;
      width: fit-content;
      max-width: 100%;
      height: auto;
      max-height: 2.8125rem;

      @media (min-width: 897px) {
        max-height: clamp(6.25rem, 11.2vw, 8.75rem);
      }
    }

    >.detail {
      display: flex;
      flex-direction: column;
      align-items: center;

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

    >.detail>.text {
      color: var(--color-white);
      font-size: clamp(1.25rem, 6.93333vw, 1.625rem);
      font-weight: 700;
      line-height: 1.462;
      text-align: center;

      @media (min-width: 897px) {
        font-size: clamp(2.25rem, 4.16vw, 3.25rem);
        line-height: 1.3656;
        text-align: left;
      }
    }

    >.detail>.text>span {
      position: relative;
      display: inline;
      padding: 0 0.5rem;
      background-image: linear-gradient(104.25deg,
          var(--color-pink-30) 0.41%,
          var(--color-purple-40) 100%);
      background-position: 0 2px;
      background-repeat: no-repeat;
      background-size: 100% calc(100% - 0.125rem);
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;

      @media (min-width: 897px) {
        padding: 0 0.9375rem;
        background-position: 0 7px;
        background-size: 100% calc(100% - 0.4375rem);
      }
    }
  }

  /* ---------------------------------------------
  .vr-features-box
------------------------------------------------ */
  .vr-features-box {
    >.images {
      display: grid;
      row-gap: 1.75rem;

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

    >.lead {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.625;
      margin-block-end: 1.75rem;
      text-align: center;

      @media (min-width: 897px) {
        font-size: 1.5rem;
        line-height: 1.66667;
        margin-block-end: 4.375rem;
      }
    }

    >.note {
      font-size: 0.75rem;
      line-height: 1.66667;
      margin-block-start: 1.25rem;

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

      &:not(:last-child) {
        margin-block-end: 1.25rem;

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

    picture {
      display: block;
    }

    picture>img {
      width: 100%;
      height: auto;
    }

    >picture+.vr-text {
      margin-block-start: 1.25rem;

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

    >picture+.note {
      @media (min-width: 897px) {
        margin-block-start: 4.875rem;
      }
    }
  }

  /* ---------------------------------------------
  .vr-text
------------------------------------------------ */
  .vr-text {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.71429;

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

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

  /* ---------------------------------------------
  .vr-features-card
------------------------------------------------ */
  .vr-features-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem 1.875rem;

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

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

    >figure {
      width: 100%;

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

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

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

  /* ---------------------------------------------
  .vr-list-scene
------------------------------------------------ */
  .vr-list-scene {
    display: grid;
    row-gap: 1.25rem;

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

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

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

    >li>figure {
      position: relative;
      aspect-ratio: 335 / 181;

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

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

    >li>.title {
      padding: 0.5rem 0.625rem;
      background: linear-gradient(104.25deg, var(--color-pink-30) 0.41%, var(--color-purple-40) 100%);
      color: var(--color-white);
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.45;
      text-align: center;

      @media (min-width: 897px) {
        font-size: 1.375rem;
        line-height: 1.4091;
        padding-block: 0.5625rem;
      }
    }

    >li>.list-dot {
      display: flex;
      flex-direction: column;
      padding: 1.3125rem clamp(0.9375rem, 7.73333dvw, 1.8125rem) 1.875rem;
      row-gap: 0.3125rem;

      @media (min-width: 897px) {
        padding: 1.25rem clamp(1.25rem, 2.47934dvw, 1.875rem) 1.875rem clamp(1.875rem, 3.30579dvw, 2.5rem);
      }
    }

    >li>.list-dot>li {
      font-size: 0.9375rem;
      font-weight: 500;
      line-height: 1.6;

      @media (min-width: 897px) {
        font-size: 1.0625rem;
        line-height: 1.58824;
        padding-inline-start: 0.9375rem;
      }

      &::before {
        top: 0.6875rem;

        @media (min-width: 897px) {
          top: 0.8125rem;
          width: 0.3125rem;
          height: 0.3125rem;
        }
      }
    }

    &[data-font-variant="small"] {
      >li>.title {
        font-size: 1.125rem;
        line-height: 1.445;
        padding-block: 0.5rem 0.5625rem;

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

      >li>.list-dot {
        padding: 1.25rem 1.25rem 1.875rem clamp(0.9375rem, 7.46667dvw, 1.75rem);
        row-gap: 0.3125rem;

        @media (min-width: 897px) {
          padding: 1.25rem clamp(1.25rem, 2.47934dvw, 1.875rem) 1.875rem clamp(1.875rem, 3.22314dvw, 2.4375rem);
        }
      }

      >li>.list-dot>li {
        font-size: 0.8125rem;
        line-height: 1.69231;
        padding-inline-start: 0.6875rem;

        @media (min-width: 897px) {
          font-size: 0.9375rem;
          line-height: 1.6;
          padding-inline-start: 0.8125rem;
        }

        &::before {
          top: 0.625rem;
          width: 0.25rem;
          height: 0.25rem;

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

  /* ---------------------------------------------
  .vr-use-case
------------------------------------------------ */
  .vr-use-case {
    overflow: hidden;
    border-radius: var(--border-radius-lg);

    >.heading {
      padding: 0.875rem 1.25rem;
      background: linear-gradient(104.25deg, var(--color-pink-30) 0.41%, var(--color-purple-40) 100%);
      color: var(--color-white);
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.6;
      text-align: center;

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

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

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

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

    >.body>.inner>.vr-use-case-card+.vr-video {
      margin-block-start: 1.25rem;

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

    *+& {
      margin-block-start: 3.125rem;

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

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

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

  /* ---------------------------------------------
  .vr-use-case-card
------------------------------------------------ */
  .vr-use-case-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.875rem 3.125rem;

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

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

    >.detail>.title {
      border-bottom: 1px solid var(--color-gray-75);
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.6;
      margin-block-end: 1.875rem;
      padding-block-end: 1.8125rem;

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

    >.detail>.title>span {
      color: var(--color-pink-30);
    }

    >.detail>.text {
      font-size: 1rem;
      letter-spacing: 0.03em;
      line-height: 1.75;
    }

    >.images {
      display: grid;
      width: 100%;
      row-gap: 1.25rem;

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

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

  /* ---------------------------------------------
  .vr-download-card
------------------------------------------------ */
  .vr-download-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.875rem 3.125rem;
    margin-block-start: 5rem;

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

    >.images {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
      padding: 1.875rem 1.25rem;
      border-radius: var(--border-radius-lg);
      background-color: rgb(from var(--color-white) r g b / 10%);
      gap: 1.25rem;

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

    >.images>figure {
      max-width: 5.9375rem;
      box-shadow: 4px 4px 14px 0 rgb(from var(--color-black) r g b / 10%);

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

      &:nth-child(even) {
        max-width: 9rem;

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

    >.images>figure>img {
      width: 100%;
      height: auto;
    }

    >.detail {
      color: var(--color-white);
      font-size: 1rem;
      font-weight: 500;
      line-height: 1.75;

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

    >.detail>p+p {
      margin-block-start: 1.75rem;

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

  /* ---------------------------------------------
  .vr-form-download
------------------------------------------------ */
  .vr-form-download {
    padding: 1.875rem 1.25rem;
    border-radius: var(--border-radius-lg);
    background-color: var(--color-white);
    margin-block-start: 3.125rem;

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

    >.inner {
      @media (min-width: 897px) {
        width: 100%;
        max-width: 62.5rem;
        margin: 0 auto;
      }
    }
  }

  /* ---------------------------------------------
  .vr-list-company
------------------------------------------------ */
  .vr-list-company {
    display: grid;
    margin-block-start: 3.125rem;
    row-gap: 0.625rem;

    @media (min-width: 897px) {
      gap: 1.875rem;
      grid-template-columns: repeat(2, 1fr);
      margin-block-start: 6.25rem;
    }

    >li>a {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2.5rem 1.25rem;
      border-radius: var(--border-radius-lg);
      background-color: var(--color-white);
      text-align: center;
      transition: opacity 0.3s ease-out;

      @media (min-width: 897px) {
        height: 100%;
        padding-block: 3.75rem 3.8125rem;
      }

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

    >li>a>figure>img {
      max-width: 100%;
      max-height: 3.5rem;

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

    >li>a>p {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.625;
      margin-block-start: 0.9375rem;

      @media (min-width: 897px) {
        font-size: 1.375rem;
        line-height: 1.546;
        margin-block-start: 1.1875rem;
      }
    }
  }

  /* ---------------------------------------------
  .image-carousel
------------------------------------------------ */
  .image-carousel {
    position: relative;
    z-index: 1;
    background: linear-gradient(104.25deg, var(--color-pink-30) 0.41%, #7d45a8 100%);
    padding-block: 0.3125rem;

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

    >.carousel-lower {
      margin-block-start: 0.3125rem;

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

    >[class^="carousel-"] {
      overflow: hidden;
      padding-inline-start: 0.3125rem;

      @media (min-width: 897px) {
        padding-inline-start: 0.625rem;
      }
    }

    >[class^="carousel-"]>.list {
      display: flex;
      gap: 0.3125rem;
      white-space: nowrap;

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

    >[class^="carousel-"]>.list>li {
      width: 40vw;

      @media (min-width: 897px) {
        width: 21.875vw;
      }
    }

    >[class^="carousel-"]>.list>li>img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: var(--border-radius-sm);

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

@layer pages {

  /* ---------------------------------------------
  .news-detail-container
------------------------------------------------ */
  .news-detail-container {
    margin-block-start: 3.8125rem;

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

    .button-box {
      @media (min-width: 897px) {
        margin-block-end: 1.25rem;
      }

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

@layer pages {

  /* ---------------------------------------------
  .product-top-list
------------------------------------------------ */
  .product-top-list {
    display: grid;
    gap: 1.25rem 1.875rem;

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

    >li>a {
      display: flex;
      overflow: hidden;
      flex-flow: column;
      border-radius: var(--border-radius-md);
      background-color: var(--color-white);

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

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

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

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

    >li>a>.box {
      padding: 1.25rem;

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

    >li>a>.box>figure {
      position: relative;
      overflow: hidden;
      border-radius: var(--border-radius-md);
      aspect-ratio: 295 / 210;

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

    >li>a>.box>figure>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;
      }
    }

    >li>a>.box>.detail {
      padding-block-start: 1.25rem;
    }

    >li>a>.box>.detail>.badge {
      font-weight: 400;
      margin-block-end: 0.625rem;
    }

    >li>a>.box>.detail>.subtitle {
      font-family: var(--second-family);
      font-size: 1.125rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 1.55556;
      margin-block-end: 0.3125rem;
    }

    >li>a>.box>.detail>.title {
      font-family: var(--second-family);
      font-size: 1.75rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 1.14286;
      margin-block-end: 0.5rem;
    }

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

    >li>a>.box>.detail>.text {
      font-size: 0.875rem;
      line-height: 1.71429;
    }

    >li>a>.button {
      display: flex;
      min-height: 2.6875rem;
      align-items: center;
      justify-content: center;
      padding: 0.3125rem;
      background-color: var(--color-pink-30);
      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;
      }
    }

    >li>a>.button>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%);
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  .sitemap-list
------------------------------------------------ */
  .sitemap-list {
    display: grid;
    row-gap: 3.75rem;

    >.list {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5625rem 0.9375rem;

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

    >.list>li {
      width: calc(50% - 0.46875rem);
      font-size: 1.375rem;
      font-weight: 700;
      line-height: 1.5;

      @media (min-width: 897px) {
        width: calc(33.33333% - 1.25rem);
        font-size: 1.625rem;
        line-height: 1.46154;
      }

      &[data-list-variant="full"] {
        width: 100%;
      }

      &[data-list-variant="sp-full"] {
        @media (max-width: 896px) {
          width: 100%;
        }
      }
    }

    >.list>li>.link-arrow {
      &::after {
        top: -0.1875rem;
      }
    }
  }

  /* ---------------------------------------------
  .sitemap-sub-list
------------------------------------------------ */
  .sitemap-sub-list {
    display: grid;
    -moz-column-gap: 0.9375rem;
    column-gap: 0.9375rem;
    grid-template-columns: repeat(2, 1fr);
    margin-block-start: 1.25rem;

    @media (min-width: 897px) {
      -moz-column-gap: 1.875rem;
      column-gap: 1.875rem;
      grid-template-columns: repeat(3, 1fr);
      margin-block-start: 0.625rem;
    }

    >li {
      border-bottom: 1px solid var(--color-gray-70);
      font-size: 0.75rem;
      font-weight: 400;
      line-height: 1.66667;

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

    >li>a {
      position: relative;
      display: flex;
      height: 100%;
      align-items: center;
      padding: 0.9375rem 1.875rem 0.875rem 0.625rem;

      &::after {
        position: absolute;
        top: 50%;
        right: 0.6875rem;
        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: translateY(-50%);
      }

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

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

    >li>a>p>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);
      }
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  .skill-hero
------------------------------------------------ */
  .skill-hero {
    position: relative;
    display: flex;
    min-height: 14.75rem;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.25rem 1.5625rem;
    background: linear-gradient(135deg, var(--color-pink-30) 0%, var(--color-purple-40) 100%);

    @media (min-width: 897px) {
      overflow: hidden;
      min-height: 20.625rem;
      border-radius: var(--border-radius-lg);
      margin-inline: 1.25rem;
      padding-block-end: 1.375rem;
    }

    &::before {
      @media (min-width: 897px) {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 36.9375rem;
        height: 20.625rem;
        background: url("/assets/images/product/skill_studio/bg-logo-01.svg") no-repeat left top / contain;
        content: "";
      }
    }

    >.inner {
      position: relative;
      display: grid;
      width: 100%;
      color: var(--color-white);
      row-gap: 1.1875rem;

      @media (min-width: 897px) {
        max-width: 72.5rem;
        margin: 0 auto;
        row-gap: 1.0625rem;
      }
    }

    >.inner>.date {
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.55556;
    }

    >.inner>hgroup {
      display: grid;
      row-gap: 0.8125rem;

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

    >.inner>hgroup>h1 {
      font-family: var(--second-family);
      font-size: 2.75rem;
      font-weight: 600;
      line-height: 1.18182;

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

    >.inner>hgroup>p {
      font-size: 0.875rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.5;

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

  /* ---------------------------------------------
  .skill-content
------------------------------------------------ */
  .skill-content {
    display: grid;
    margin-block-start: 2.6875rem;
    row-gap: 5.5625rem;

    @media (min-width: 897px) {
      margin-block-start: 6.5625rem;
      row-gap: 6.25rem;
    }

    >.box>.lead {
      line-height: 1.75;
      margin-block-end: 1.875rem;
    }

    >.box>.heading-double-border:has(+ .lead) {
      @media (min-width: 897px) {
        margin-block-end: 1.25rem;
      }
    }
  }

  /* ---------------------------------------------
  .skill-intro-box
------------------------------------------------ */
  .skill-intro-box {
    display: flex;
    flex-wrap: wrap;
    gap: 1.875rem min(6.1157vw, 4.625rem);

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

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

    >.detail>p {
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.66667;

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

    >figure {
      width: 100%;

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

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

  /* ---------------------------------------------
  .skill-scene-list
------------------------------------------------ */
  .skill-scene-list {
    display: grid;
    gap: 0.3125rem;
    grid-template-columns: repeat(2, 1fr);

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

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

    >li>figure {
      position: relative;
      width: 100%;
      aspect-ratio: 165 / 87;

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

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

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

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

    >li>.detail>.title {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.5;

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

    >li>.detail>.list-badges>li>.badge {
      padding: 0.1875rem 0.5625rem;
      line-height: 1.25;
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  #top
------------------------------------------------ */
  #top {
    >header::after {
      @media (max-width: 896px) {
        display: none;
      }
    }
  }

  /* ---------------------------------------------
  .top-mv
------------------------------------------------ */
  .top-mv {
    position: relative;
    display: flex;
    overflow: hidden;
    min-height: calc(100svh - 5.625rem);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-base-background);

    @media (min-width: 897px) {
      overflow: visible;
      min-height: calc(100svh - 5.5625rem);
      flex-direction: row;
    }

    >.inner {
      position: relative;
      z-index: 1;
      width: 100%;
      padding: 0.9375rem 1.25rem;

      @media (min-width: 897px) {
        max-width: 84.125rem;
        padding: 0 1.875rem 5.35714vw;
        margin-inline: auto;
      }

      @media (width >=1401px) {
        padding-block-end: 4.6875rem;
      }

      @media (width >=1920px) {
        max-width: 102.5rem;
      }
    }

    >.inner>.heading {
      position: relative;
      display: inline-block;
      font-size: 2.375rem;
      font-weight: 700;
      line-height: 1.31;

      &:not([data-animated-text]) {
        opacity: 0;
      }

      @media (min-width: 897px) {
        font-size: 5.85714vw;
        line-height: 1.29;
      }

      @media (width >=1401px) {
        font-size: 5.125rem;
      }

      >span {
        display: inline-block;
      }

      >span>span {
        display: inline-block;
        -webkit-background-clip: text;
        background-clip: text;
        background-image: linear-gradient(95.78deg, #c85179 45.83%, #65318e 91.91%);
        color: transparent;
        -webkit-text-fill-color: transparent;
        transform: scale(0);
        transform-origin: bottom;
      }

      &[data-animated-text]>span>span {
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-name: top-heading-scale;
        animation-timing-function: cubic-bezier(0.23, 1.15, 0.67, 0.96);
      }
    }

    >.inner>.text {
      font-family: var(--second-family);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 1.4;
      margin-block-start: 0.75rem;
      margin-inline-start: 0.4375rem;

      &:not([data-animated-text]) {
        opacity: 0;
      }

      @media (min-width: 897px) {
        font-size: 1.14286vw;
        margin-block-start: 1.78571vw;
        margin-inline-start: 0.625rem;
      }

      @media (width >=1401px) {
        font-size: 1rem;
        margin-block-start: 1.5625rem;
      }

      >span {
        display: inline-block;
        transform: scale(0);
        transform-origin: bottom;
      }

      &[data-animated-text]>span {
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-name: top-heading-scale;
        animation-timing-function: cubic-bezier(0.23, 1.15, 0.67, 0.96);
      }
    }

    >.box-logo-wrapper {
      position: relative;
      width: 100%;
      max-width: 22.25rem;
      margin: 0 auto 4.375rem;
      aspect-ratio: 1 / 1;
      transform: scale(1.18);
      transition: opacity 0.3s ease;
      will-change: transform, opacity;

      @media (min-width: 897px) {
        position: fixed;
        z-index: 0;
        top: 50%;
        left: 50%;
        width: 53.57143vw;
        max-width: none;
        margin-block-end: 0;
        margin-inline-start: -3.21429vw;
        transform: translateY(-50%) scale(1);
      }

      @media (width >=1401px) {
        width: 46.875rem;
        margin-inline-start: -2.8125rem;
      }

      @media (width >=1920px) {
        width: 65.625rem;
        margin-inline-start: -12.5rem;
      }
    }

    >.box-logo-wrapper>.box-logo {
      position: relative;
      width: 100%;
      height: 100%;
      will-change: transform;

      &[data-animated-scale] {
        animation: top-logo-scale 0.5s cubic-bezier(0.8, 0.15, 0.41, 0.63) forwards;
      }
    }

    >.box-logo-wrapper>.box-logo>[class^="logo-"] {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: contain;

      &[data-animated-rotate] {
        animation-delay: 0.5s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: logo-rotate;
        animation-timing-function: linear;
      }
    }

    >.box-logo-wrapper>.box-logo>.logo-main {
      background-image: url("/assets/images/top/pict-logo-main.svg");

      &[data-animated-rotate] {
        animation-duration: 60s;
      }
    }

    >.box-logo-wrapper>.box-logo>.logo-dot-pink {
      background-image: url("/assets/images/top/pict-logo-dot-pink.svg");

      &[data-animated-rotate] {
        animation-duration: 70s;
      }
    }

    >.box-logo-wrapper>.box-logo>.logo-dot-purple {
      background-image: url("/assets/images/top/pict-logo-dot-purple.svg");

      &[data-animated-rotate] {
        animation-duration: 80s;
      }
    }

    >.box-logo-wrapper>.box-logo>.logo-dot-white {
      background-image: url("/assets/images/top/pict-logo-dot-white.svg");

      &[data-animated-rotate] {
        animation-duration: 90s;
      }
    }

    >.text-scroll {
      position: absolute;
      z-index: 1;
      top: 50%;
      right: 0;
      overflow: hidden;
      padding-left: 5rem;
      color: var(--color-pink-30);
      font-family: var(--second-family);
      font-size: 0.75rem;
      letter-spacing: 0.04em;
      transform: rotate(270deg) translate(10%, 150%);

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

      &::before {
        position: absolute;
        top: 50%;
        right: calc(100% - 4.375rem);
        height: 1px;
        animation: text-scroll-effect 2s 2s cubic-bezier(0.3, 0.4, 0.1, 1) infinite;
        background-color: var(--color-pink-30);
        content: "";
      }
    }
  }

  /* ---------------------------------------------
  .top-mv-event (aタグ専用)
------------------------------------------------ */
  a.top-mv-event {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.625rem 0.75rem 0.625rem 1.25rem;
    background-color: var(--color-white);
    transition: background 0.3s ease-out;

    @media (min-width: 897px) {
      bottom: 2.5rem;
      left: 1.875rem;
      display: inline-flex;
      width: auto;
      max-width: 43.625rem;
      padding: 0.8125rem 3.4375rem 0.8125rem 1.25rem;
      border-radius: 6.25rem;
      gap: 0.9375rem;
    }

    &::before,
    &::after {
      display: none;

      @media (min-width: 897px) {
        position: absolute;
        top: 50%;
        display: block;
        content: "";
        transform: translateY(-50%);
      }
    }

    &::before {
      right: 0.3125rem;
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 50%;
      background-color: var(--color-base-background);
    }

    &::after {
      right: 1.125rem;
      width: 0.4375rem;
      height: 0.5rem;
      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;
    }

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

    >.title {
      flex-shrink: 0;
      color: var(--color-pink-30);
      font-family: var(--second-family);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 1.5;

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

    >.info {
      display: flex;
      flex: 1;
      font-size: 0.625rem;
      gap: 0.625rem;
      letter-spacing: 0.03em;
      line-height: 1.5;

      @media (min-width: 897px) {
        font-size: 0.8125rem;
        gap: 0.875rem;
        line-height: 1.538;
      }
    }

    >.info>.date {
      flex-shrink: 0;
    }

    >.info>.text-wrapper {
      overflow: hidden;
      flex: 1;
      white-space: nowrap;
    }

    >.info>.text-wrapper>p.text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* ---------------------------------------------
  .top-mv-event (全要素共通)
------------------------------------------------ */
  .top-mv-event {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.625rem 0.75rem 0.625rem 1.25rem;
    background-color: var(--color-white);
    transition: background 0.3s ease-out;

    @media (min-width: 897px) {
      bottom: 2.5rem;
      left: 1.875rem;
      display: inline-flex;
      width: auto;
      max-width: 43.625rem;
      padding: 0.8125rem 3.4375rem 0.8125rem 1.25rem;
      border-radius: 6.25rem;
      gap: 0.9375rem;
    }

    >.title {
      flex-shrink: 0;
      color: var(--color-pink-30);
      font-family: var(--second-family);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 1.5;

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

    >.info {
      display: flex;
      flex: 1;
      font-size: 0.625rem;
      gap: 0.625rem;
      letter-spacing: 0.03em;
      line-height: 1.5;

      @media (min-width: 897px) {
        font-size: 0.8125rem;
        gap: 0.875rem;
        line-height: 1.538;
      }
    }

    >.info>.date {
      flex-shrink: 0;
    }

    >.info>.text-wrapper {
      overflow: hidden;
      flex: 1;
      white-space: nowrap;
    }

    >.info>.text-wrapper>p.text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* ---------------------------------------------
  .top-carousel
------------------------------------------------ */
  .top-carousel {
    position: relative;
    z-index: 1;
    padding: 0.3125rem 0;
    background: linear-gradient(104.25deg, #c85179 0.41%, #7d45a8 100%);

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

    >.carousel-lower {
      margin-block-start: 0.3125rem;

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

    >[class^="carousel-"] {
      overflow: hidden;
      padding-inline-start: 0.3125rem;

      @media (min-width: 897px) {
        padding-inline-start: 0.625rem;
      }
    }

    >[class^="carousel-"]>.list {
      display: flex;
      gap: 0.3125rem;
      white-space: nowrap;

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

    >[class^="carousel-"]>.list>li {
      width: 40vw;

      @media (min-width: 897px) {
        width: 21.875vw;
      }
    }

    >[class^="carousel-"]>.list>li>img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: var(--border-radius-md);
    }
  }

  /* ---------------------------------------------
  .top-about
------------------------------------------------ */
  .top-about {
    position: relative;
    z-index: 1;
    padding: 5rem 1.25rem;

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

    >.inner {
      max-width: 81.25rem;
      margin-inline: auto;
    }

    >.inner>.content {
      display: block;
      background: linear-gradient(180deg, #c85179 0%, #65318e 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      line-height: 2.22;
      -webkit-text-fill-color: transparent;

      @media (min-width: 897px) {
        display: inline-block;
        width: 100%;
        max-width: 37.5rem;
        font-size: clamp(0.9375rem, 1.42857vw, 1.25rem);
        line-height: 2.6;
      }

      @media (width >=1920px) {
        padding-right: 5rem;
      }
    }

    >.inner>.content>p>.u-d-lg {
      display: none;

      @media (width >=1920px) {
        display: block;
      }
    }

    >.inner>.button-primary {
      max-width: 13.75rem;
      margin: 3.125rem auto 0;
      font-family: var(--second-family);
      text-align: center;

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

  /* ---------------------------------------------
  .top-gradient
------------------------------------------------ */
  .top-gradient {
    position: relative;
    z-index: 1;
    background: linear-gradient(92deg, #c85179 0.41%, #844ead 100%);
    padding-block: 7.0625rem 5rem;

    @media (min-width: 897px) {
      border-radius: var(--border-radius-lg);
      background: linear-gradient(104.25deg, #c85179 0.41%, #844ead 100%);
      margin-inline: 1.25rem;
      padding-block: 11.25rem;
    }

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

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

  /* ---------------------------------------------
  .top-heading
------------------------------------------------ */
  .top-heading {
    display: grid;
    color: var(--color-white);
    margin-block-end: 2.5rem;
    row-gap: 0.625rem;

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

    >.badge {
      padding: 0.25rem 1.1875rem;
      border-color: var(--color-white);
      color: var(--color-white);
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: normal;
      line-height: 1.875;

      @media (min-width: 897px) {
        padding: 0.375rem 1.3125rem;
        font-size: min(1.98347vw, 1.5rem);
        line-height: 1.25;
      }
    }

    >.title {
      font-size: 1.625rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 1.53846;

      @media (min-width: 897px) {
        font-size: min(3.12152vw, 2.625rem);
        line-height: 1.42857;
      }
    }
  }

  .top-heading-slider {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    color: rgb(0 0 0 / 8%);
    font-family: var(--second-family);
    font-size: 6.3125rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
    pointer-events: none;
    white-space: nowrap;

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

    >.text {
      padding-inline-end: 6.25rem;

      @media (min-width: 897px) {
        padding-inline-end: 10rem;
      }
    }
  }

  /* ---------------------------------------------
  .top-product
------------------------------------------------ */
  .top-product {
    position: relative;
    margin-block-end: 11.4375rem;

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

    >.top-heading-slider {
      top: -0.625rem;

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

    >.inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      -moz-column-gap: 3.125rem;
      column-gap: 3.125rem;

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

    >.inner>.heading {
      width: calc(36.324% - 1.5625rem);

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

    >.inner>.heading>.box-sticky {
      /* position: sticky;
    top: 100px;
    left: 0; */

      @media (max-width: 896px) {
        position: static;
        display: contents;
      }
    }

    >.inner>.heading>.box-sticky>.top-heading {
      @media (max-width: 896px) {
        order: 1;
      }

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

    >.inner>.heading>.box-sticky>.button {
      margin-block-start: 3.125rem;

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

    >.inner>.heading>.box-sticky>.button>.button-primary {
      max-width: 13.75rem;

      @media (max-width: 896px) {
        margin: 0 auto;
      }
    }

    >.inner>.content {
      width: calc(63.676% - 1.5625rem);
      padding-block-start: 4.6875rem;

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

  /* ---------------------------------------------
  .top-product-list
------------------------------------------------ */
  .top-product-list {
    >li {
      position: relative;

      &::after {
        position: absolute;
        right: 1.25rem;
        bottom: 0;
        left: 1.25rem;
        height: 1px;
        background-color: rgb(from var(--color-white) r g b / 30%);
        content: "";

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

      &:last-child::after {
        display: none;
      }
    }

    >li>a {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      padding: 1.25rem;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      background-color: rgb(from var(--color-white) r g b / 10%);
      color: var(--color-white);
      gap: 0.9375rem 1.875rem;
      transition: background-color 0.3s ease;

      @media (max-width: 896px) {
        flex-direction: column;
        padding: 1.8125rem 0.9375rem 1.5625rem;
      }

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

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

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

    >li:first-child>a {
      border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;

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

    >li:last-child>a {
      border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);

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

    >li>a>picture {
      display: block;
      overflow: hidden;
      width: 100%;
      border-radius: var(--border-radius-md);

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

    >li>a>picture>img {
      width: 100%;
      height: auto;

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

    >li>a>.detail {
      @media (min-width: 897px) {
        flex: 1;
        align-self: center;
        padding-inline-end: 0.625rem;
      }

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

    >li>a>.detail>.badge {
      border-color: var(--color-white);
      color: var(--color-white);
      margin-block-end: 0.1875rem;

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

    >li>a>.detail>.subtitle {
      font-family: var(--second-family);
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 1.75;
      margin-block-end: 0.25rem;

      @media (min-width: 897px) {
        font-size: 1.125rem;
        line-height: 1.55556;
        margin-block-end: 0.3125rem;
      }
    }

    >li>a>.detail>.title {
      font-family: var(--second-family);
      font-size: 1.625rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 1.23077;
      margin-block-end: 0.875rem;

      @media (min-width: 897px) {
        font-size: 1.75rem;
        line-height: 1.14286;
        margin-block-end: 0.8125rem;
      }
    }

    >li>a>.detail>.text {
      font-size: 0.875rem;
      letter-spacing: 0.03em;
      line-height: 1.71429;
      margin-block-end: 0.9375rem;
    }
  }

  /* ---------------------------------------------
  .top-case
------------------------------------------------ */
  .top-case {
    position: relative;
    margin-block-end: 6.4375rem;

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

    >.top-heading-slider {
      top: -0.75rem;

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

    >.inner {
      position: relative;
      z-index: 1;
    }

    >.inner>.button {
      margin-block-start: 2.5rem;

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

    >.inner>.button>.button-primary {
      max-width: 13.75rem;

      @media (max-width: 896px) {
        margin: 0 auto;
      }
    }
  }

  /* ---------------------------------------------
  .top-case-card
------------------------------------------------ */
  .top-case-card {
    display: flex;
    overflow: hidden;
    height: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 1.25rem 0 1.25rem 1.25rem;
    border-radius: var(--border-radius-lg);
    color: var(--color-white);
    gap: 0.9375rem 0;
    transition: background-color 0.3s ease;

    @media (max-width: 896px) {
      flex-direction: column;
      align-items: flex-start;
      padding: 0.9375rem 0.9375rem 1.5625rem;
      border-radius: var(--border-radius-lg);
      background-color: rgb(from var(--color-white) r g b / 10%);
    }

    >picture {
      position: relative;
      display: block;
      overflow: hidden;
      width: 100%;
      border-radius: var(--border-radius-md);
      aspect-ratio: 305 / 160;

      @media (min-width: 897px) {
        width: 46.957%;
        aspect-ratio: 540 / 290;
      }
    }

    >picture>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 {
      @media (min-width: 897px) {
        flex: 1;
        align-self: center;
        padding-inline: 1.875rem 2.5rem;
      }
    }

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

    >.detail>.group>.list-badges {
      margin-block-end: 0.625rem;
    }

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

    >.detail>.group>.title {
      font-size: 2.125rem;
      font-weight: 500;
      line-height: 1.353;
      margin-block-end: 0.625rem;

      @media (max-width: 896px) {
        font-size: 1.5rem;
        letter-spacing: 0.03em;
        line-height: 1.3334;
        margin-block-end: 0.6875rem;
      }
    }

    >.detail>.group>.text {
      font-size: 0.875rem;
      letter-spacing: 0.03em;
      line-height: 1.71429;
      margin-block-end: 1.25rem;

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

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

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

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

  /* ---------------------------------------------
  .top-case-slider
------------------------------------------------ */
  .top-case-slider {
    >.splide__track {
      @media (min-width: 897px) {
        border-radius: var(--border-radius-lg);
        background-color: rgb(from var(--color-white) r g b / 10%);
      }
    }

    >.controller {
      position: relative;

      @media (max-width: 896px) {
        display: flex;
        min-height: 3.125rem;
        align-items: center;
        margin-block-start: 0.625rem;
      }
    }

    >.controller>.splide__arrows>.splide__arrow {
      position: absolute;
      top: 0;
      width: 3.125rem;
      height: 3.125rem;
      border: none;
      border-radius: 50%;
      background-color: rgb(from var(--color-white) r g b / 10%);
      opacity: 1;
      pointer-events: auto;
      transform: none;
      transition: background-color 0.3s ease-out;

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

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

      &::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%);
      }

      &.splide__arrow--next {
        right: 0;
      }

      &.splide__arrow--prev {
        left: 0;

        @media (min-width: 897px) {
          right: 3.4375rem;
          left: auto;
        }

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

      &[disabled] {
        opacity: 0.3;
        pointer-events: none;
      }
    }

    >.controller>.splide__pagination {
      position: static;
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      font-size: 0;
      gap: 0.375rem;
      padding-inline: 3.75rem;

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

    >.controller>.splide__pagination>li>.splide__pagination__page {
      display: block;
      width: 0.5rem;
      height: 0.5rem;
      border: 1px solid rgb(from var(--color-white) r g b / 30%);
      border-radius: 50%;
      margin: 0;
      background: transparent;
      cursor: pointer;
      opacity: 1;
      transform: none;
      transition-property: all;
    }

    >.controller>.splide__pagination>li>.splide__pagination__page.is-active {
      border-color: var(--color-white);
      background-color: var(--color-white);
    }

    >.heading-pagination {
      display: flex;

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

    >.heading-pagination>li>.tab {
      position: relative;
      display: flex;
      min-width: 7.8125rem;
      min-height: 3.125rem;
      align-items: center;
      justify-content: center;
      padding: 0.625rem;
      border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
      color: rgb(from var(--color-white) r g b / 70%);
      font-family: var(--second-family);
      font-size: 1rem;
      font-weight: 300;
      letter-spacing: 0.03em;
      line-height: 1.25;
      transition: color 0.3s ease-out;

      &[data-is-active] {
        background-color: rgb(from var(--color-white) r g b / 10%);
        color: var(--color-white);

        &::before {
          display: none;
        }
      }

      &:hover {
        color: var(--color-white);
      }
    }

    >.heading-pagination>li:not(:first-child) .tab::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: 1px;
      height: 1.25rem;
      background-color: rgb(from var(--color-white) r g b / 30%);
      content: "";
      transform: translateY(-50%);
    }

    >.heading-pagination>li:has([data-is-active])+li>.tab::before {
      display: none;
    }
  }

  /* ---------------------------------------------
  .top-column
------------------------------------------------ */
  .top-column {
    position: relative;

    >.top-heading-slider {
      top: -0.8125rem;

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

    >.inner {
      position: relative;
      z-index: 0;
    }

    >.inner>.content {
      display: flex;
      flex-wrap: wrap;
      gap: 2.5rem 3.125rem;

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

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

      &:nth-child(odd) {
        @media (min-width: 897px) {
          width: calc(67.095% - 1.5625rem);
        }
      }

      &:nth-child(even) {
        @media (min-width: 897px) {
          width: calc(32.905% - 1.5625rem);
        }
      }
    }

    >.inner>.content>.box>.title {
      color: var(--color-white);
      font-size: 1.125rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 1.55556;
      margin-block-end: 1.25rem;
    }

    >.inner>.content>.box>.button-more {
      margin-block-start: 1rem;

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

    >.inner>.button {
      margin-block-start: 2.3125rem;

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

    >.inner>.button>.button-primary {
      max-width: 13.75rem;

      @media (max-width: 896px) {
        margin: 0 auto;
      }
    }
  }

  /* ---------------------------------------------
  .top-column-slider
------------------------------------------------ */
  .top-column-slider {
    visibility: visible;

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

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

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

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

    .card-column>.image {
      @media (max-width: 896px) {
        aspect-ratio: 305 / 200;
      }
    }

    .card-column>.detail>.badge {
      @media (max-width: 896px) {
        margin-block-start: 0.9375rem;
      }
    }

    >.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;
      }
    }

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

    >.controller>.splide__arrows>.splide__arrow {
      @media (max-width: 896px) {
        position: absolute;
        top: 0;
        width: 3.125rem;
        height: 3.125rem;
        border: none;
        border-radius: 50%;
        background-color: rgb(from var(--color-white) r g b / 10%);
        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: url("/assets/images/common/icon-arrow-right-02.svg") no-repeat left top / contain;
          content: "";
          transform: translate(-50%, -50%);
        }
      }

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

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

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

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

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

    >.controller>.splide__pagination>li>.splide__pagination__page {
      @media (max-width: 896px) {
        display: block;
        width: 0.5rem;
        height: 0.5rem;
        border: 1px solid rgb(from var(--color-white) r g b / 30%);
        border-radius: 50%;
        margin: 0;
        background: transparent;
        cursor: pointer;
        opacity: 1;
        transform: none;
        transition-property: all;
      }
    }

    >.controller>.splide__pagination>li>.splide__pagination__page.is-active {
      @media (max-width: 896px) {
        border-color: var(--color-white);
        background-color: var(--color-white);
      }
    }
  }

  /* ---------------------------------------------
  .top-column-list
------------------------------------------------ */
  .top-column-list {
    >li {
      &:first-child {
        border-top: 1px solid rgb(from var(--color-white) r g b / 30%);
      }

      &:nth-child(n + 4) {
        @media (max-width: 896px) {
          display: none;
        }
      }
    }

    >li>a {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 0.9375rem 0.625rem 1rem;
      border-bottom: 1px solid rgb(from var(--color-white) r g b / 30%);
      color: var(--color-white);
      -moz-column-gap: 0.9375rem;
      column-gap: 0.9375rem;

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

    >li>a>.badge {
      min-width: 4.25rem;
      padding: 0.1875rem 0.9375rem;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      font-weight: 400;
    }

    >li>a>.detail {
      flex: 1;
      font-size: 0.875rem;
      letter-spacing: 0.02em;
      line-height: 1.71429;
    }

    >li>a>.detail>p>span {
      @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);
      }
    }
  }

  /* ---------------------------------------------
  .top-information
------------------------------------------------ */
  .top-information {
    padding-block: 1.875rem 2.375rem;

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

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

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

  /* ---------------------------------------------
  .top-news
------------------------------------------------ */
  .top-news {
    padding: 3.6875rem 3.125rem 2.5625rem;
    border-radius: var(--border-radius-lg);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    background-color: rgb(from var(--color-white) r g b / 70%);

    @media (max-width: 896px) {
      display: flex;
      flex-direction: column;
      padding: 1.3125rem 1.25rem 1.875rem;
    }

    >.heading {
      display: contents;

      @media (min-width: 897px) {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
      }
    }

    >.heading>.title {
      position: relative;
      font-size: 1.375rem;
      font-weight: 500;
      line-height: 1.36364;
      padding-inline-start: 1.375rem;

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

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

      &::before {
        position: absolute;
        top: 1.0625rem;
        left: 0;
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        background-color: var(--color-pink-30);
        content: "";
        transform: translateY(-50%);

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

    >.heading>.more {
      margin-block-start: 1px;

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

    >.list-news {
      margin-block-start: 1.875rem;

      @media (max-width: 896px) {
        width: 100%;
        order: 2;
        margin-block-start: 0.9375rem;
      }
    }

    >.list-news>li:last-child>a {
      @media (min-width: 897px) {
        border-bottom: none;
      }
    }
  }

  /* ---------------------------------------------
  .top-information-list
------------------------------------------------ */
  .top-information-list {
    display: grid;
    margin-block-start: 1.25rem;
    row-gap: 1.25rem;

    @media (min-width: 897px) {
      gap: 1.875rem;
      grid-template-columns: repeat(2, 1fr);
      margin-block-start: 1.875rem;
    }

    >li>a {
      display: flex;
      height: 100%;
      flex-direction: column;
      padding: 0.75rem 0.75rem 1.5rem;
      border-radius: var(--border-radius-lg);
      -webkit-backdrop-filter: blur(70px);
      backdrop-filter: blur(70px);
      background-color: rgb(from var(--color-white) r g b / 70%);

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

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

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

    >li>a>figure {
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: var(--border-radius-md);
      aspect-ratio: 311 / 173;

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

    >li>a>figure>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;
      }
    }

    >li>a>.detail {
      width: 100%;
      padding: 1rem 0.5rem 0;

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

    >li>a>.detail>.title {
      position: relative;
      font-size: 1.375rem;
      font-weight: 500;
      line-height: 1.36364;
      margin-block-end: 0.9375rem;
      padding-inline-start: 1.375rem;

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

      &::before {
        position: absolute;
        top: 1.0625rem;
        left: 0;
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        background-color: var(--color-pink-30);
        content: "";
        transform: translateY(-50%);

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

    >li>a>.detail>.text {
      letter-spacing: 0.03em;
      line-height: 1.75;
      margin-block-end: 1.25rem;

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

@layer pages {

  /* ---------------------------------------------
  .webmeeting-thanks
------------------------------------------------ */
  .webmeeting-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3.75rem 4.375rem;
    padding-block: 5rem 9.375rem;

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

    >.content {
      display: grid;
      width: 100%;
      row-gap: 1.875rem;

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

    >.content>.row>.text-default:is(p) {
      letter-spacing: 0.05em;
    }

    >.content>.row>.image {
      margin-block-start: 1.875rem;

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

    >.content>.row>.image>img {
      overflow: hidden;
      width: 100%;
      height: auto;
      border-radius: var(--border-radius-md);
    }

    >.content>.row>.heading-border-left,
    >.form>.heading-border-left {
      margin-block-end: 1.25rem;
    }

    >.content>.row>.list-dot {
      padding-inline-start: 0.625rem;
      row-gap: 0.625rem;

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

      &[data-dot-variant="small"] {
        margin-block-start: 0.625rem;
        padding-inline-start: 0.5625rem;
      }
    }

    >.form {
      width: 100%;
      padding: 1.875rem 1.25rem;
      border-radius: var(--border-radius-sm);
      background-color: var(--color-white);

      @media (min-width: 897px) {
        width: calc(48.29% - 2.1875rem);
        padding: 3.125rem 2.5rem;
      }
    }
  }

  /* ---------------------------------------------
  .webmeeting-process
------------------------------------------------ */
  .webmeeting-process {
    padding-block-end: 0.5625rem;

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

    >li {
      position: relative;

      &:not(:last-child) {
        padding-block-end: 1.6875rem;

        @media (max-width: 896px) {
          min-height: 5.75rem;
          padding-block-end: 0.5625rem;
        }

        &::before,
        &::after {
          position: absolute;
          content: "";
        }

        &::before {
          bottom: 0.8125rem;
          left: 4rem;
          width: 0.125rem;
          height: calc(100% - 1.25rem);
          background-color: var(--color-pink-30);
        }

        &::after {
          bottom: 0.25rem;
          left: 3.75rem;
          width: 0;
          height: 0;
          border-width: 10px 5px 0;
          border-style: solid;
          border-color: var(--color-pink-30) transparent transparent transparent;
        }
      }
    }

    >li>.box {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      -moz-column-gap: 1.25rem;
      column-gap: 1.25rem;
    }

    >li>.box>.title {
      position: relative;
      display: flex;
      width: 8.125rem;
      min-height: 3.25rem;
      align-items: center;
      justify-content: center;
      padding: 0.3125rem;
      border-radius: var(--border-radius-md);
      background-color: var(--color-pink-30);
      color: var(--color-white);
      font-size: 0.875rem;
      font-weight: 700;
      line-height: 1.429;
    }

    >li>.box>.detail {
      display: flex;
      min-height: 3.25rem;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      font-size: 0.875rem;
      line-height: 1.858;

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

  /* ---------------------------------------------
  .webmeeting-faq
------------------------------------------------ */
  .webmeeting-faq {
    display: grid;
    row-gap: 1.25rem;

    >li {
      display: grid;
      row-gap: 0.3125rem;
    }

    >li>.question {
      position: relative;
      font-weight: 700;
      line-height: 1.75;
      padding-inline-start: 1.75rem;

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "Q.";
      }
    }

    >li>.answer {
      position: relative;
      padding-inline-start: 1.5625rem;

      &::before {
        position: absolute;
        top: 0.125rem;
        left: 0;
        content: "A.";
      }
    }

    >li>.answer>p {
      line-height: 1.75;

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

    >li>.answer>p>.link-arrow {
      font-size: 0.8125rem;
      letter-spacing: 0.03em;
      line-height: 1.847;
    }
  }

  /* ---------------------------------------------
  .webmeeting-thanks
------------------------------------------------ */
  .webmeeting-thanks {
    padding-block: 3.125rem 6.25rem;

    @media (min-width: 897px) {
      padding-block: 5rem 10.5625rem;
      text-align: center;
    }
  }
}

@layer pages {

  /* ---------------------------------------------
  #vr-learning
------------------------------------------------ */
  #vr-learning {
    >main>.container {
      overflow: hidden;
      margin-block-start: 2.625rem;

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

    >main>.breadcrumb[data-breadcrumb-variant="bottom"] {
      padding-block-start: 3.125rem;

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

  /* ---------------------------------------------
  .vr-hero
------------------------------------------------ */
  .vr-hero {
    @media (min-width: 897px) {
      position: relative;
      overflow: hidden;
      border-radius: var(--border-radius-lg);
      margin-inline: 1.25rem;
    }

    >.content {
      display: grid;
      padding: 3.5rem 1.25rem 3.3125rem;
      background: linear-gradient(135deg, var(--color-pink-30) 0%, var(--color-purple-40) 100%);
      color: var(--color-white);
      row-gap: 0.875rem;

      @media (min-width: 897px) {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        width: 100%;
        max-width: var(--max-width-xl);
        padding: 1.375rem 1.5625rem 1.25rem;
        background: transparent;
        row-gap: 1.625rem;
        transform: translate(-50%, -50%);
      }
    }

    >.content>hgroup {
      display: grid;
      row-gap: 0.5625rem;

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

    >.content>hgroup>p {
      font-family: var(--second-family);
      font-size: 1.625rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.23077;
    }

    >.content>hgroup>h1 {
      font-family: var(--inter-family);
      font-size: 2.75rem;
      font-weight: 700;
      line-height: 1.09091;

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

    >.content>.text {
      font-size: 0.875rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.71429;

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

    >.video {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      padding-block-start: 56.25%;
    }

    >.video>iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  /* ---------------------------------------------
  .vr-tab
------------------------------------------------ */
  .vr-tab {
    @media (max-width: 896px) {
      position: relative;
      padding-block-end: 3.75rem;
    }

    >.head {
      margin-block-end: 6.25rem;

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

    >.body {
      @media (max-width: 896px) {
        padding-block-end: 1.25rem;
      }
    }

    >.body>.content>.tabs-list {
      margin-block-end: 3.125rem;

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

    >.bottom {
      margin-block-start: 6.25rem;

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

  /* ---------------------------------------------
  .vr-tab-button
------------------------------------------------ */
  .vr-tab-button {
    border-radius: var(--border-radius-md);
    background-color: var(--color-white);

    @media (max-width: 896px) {
      margin-inline: -1.25rem;
      overflow-x: auto;
      white-space: nowrap;
    }

    >.inner {
      display: inline-flex;
      padding: 0.3125rem 0.625rem;
      -moz-column-gap: 0.3125rem;
      column-gap: 0.3125rem;

      @media (min-width: 897px) {
        display: grid;
        padding: 0.3125rem;
        grid-template-columns: repeat(7, 1fr);
      }
    }

    >.inner>button {
      display: flex;
      min-height: 3.125rem;
      align-items: center;
      justify-content: center;
      padding: 0.625rem;
      border-radius: var(--border-radius-md);
      background-color: var(--color-pink-90);
      color: var(--color-pink-30);
      cursor: pointer;
      font-size: 0.75rem;
      font-weight: 700;
      line-height: 1.5;
      text-align: center;

      @media (min-width: 897px) {
        min-height: 4.25rem;
        font-size: 0.9375rem;
        line-height: 1.6;
        transition: all 0.3s ease-out;
      }

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

      &[aria-selected="true"] {
        background-color: var(--color-pink-30);
        color: var(--color-white);
      }
    }

    &[data-position="fixed"] {
      @media (max-width: 896px) {
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        margin-inline: 0;
      }
    }

    &[data-position="absolute"] {
      @media (max-width: 896px) {
        position: absolute;
        z-index: 99;
        top: inherit;
        bottom: 0;
        left: 0;
        width: calc(100% + 2.5rem);
      }
    }
  }

  /* ---------------------------------------------
  .vr-heading-box
------------------------------------------------ */
  .vr-heading-box {
    margin-block-end: 3.125rem;

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

    >.text {
      line-height: 1.75;
      margin-block-start: 1.25rem;

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

  /* ---------------------------------------------
  .vr-top
------------------------------------------------ */
  .vr-top {
    display: grid;
    row-gap: 5.625rem;

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

    >.box>.list-card-case {
      margin-block-start: 0;
    }

    >.box>.button-box {
      margin-block-start: 1.875rem;

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

  /* ---------------------------------------------
  .vr-intro-box
------------------------------------------------ */
  .vr-intro-box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem 1.8125rem;
    margin-block-start: -1.25rem;

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

    >.detail {
      @media (min-width: 897px) {
        flex: 1;
        padding-block-start: 1.1875rem;
      }
    }

    >.detail>.title {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.8;
      margin-block-end: 1.875rem;

      @media (min-width: 897px) {
        font-size: 2rem;
        line-height: 1.5;
        margin-block-end: 3.1875rem;
      }
    }

    >picture {
      display: block;
      width: 100%;

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

    >picture>img {
      width: 100%;
      height: auto;
    }
  }

  /* ---------------------------------------------
  .vr-intro-list
------------------------------------------------ */
  .vr-intro-list {
    display: grid;
    gap: 1.25rem 1.875rem;

    @media (min-width: 897px) {
      width: 100%;
      max-width: 35.625rem;
      grid-template-columns: repeat(2, 1fr);
    }

    >li {
      overflow: hidden;
      padding: 1.5625rem min(9.86667vw, 2.3125rem) 1.875rem;
      border-radius: var(--border-radius-md);
      border-top: 5px solid var(--color-purple-30);
      background-color: var(--color-white);

      @media (min-width: 897px) {
        padding: 1.4375rem min(1.90083vw, 1.4375rem) 1.625rem;
      }

      &:first-child {
        padding-block-end: 2.0625rem;

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

    >li>.title {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.25;
      text-align: center;

      @media (min-width: 897px) {
        font-size: clamp(1.25rem, 1.98347dvw, 1.5rem);
      }
    }

    >li>.date {
      color: var(--color-gray-40);
      font-size: 0.75rem;
      line-height: 1.5;
      text-align: center;
    }

    >li>.number {
      color: var(--color-pink-30);
      font-family: var(--second-family);
      font-size: 5rem;
      font-weight: 600;
      line-height: 1;
      margin-block-start: 0.1875rem;
      text-align: center;

      @media (min-width: 897px) {
        font-size: clamp(2.5rem, 6.61157dvw, 5rem);
        margin-block-start: 0.25rem;
      }
    }

    >li>.number>span {
      font-size: 1.25rem;
      font-weight: 700;

      @media (min-width: 897px) {
        font-size: clamp(1rem, 1.81818dvw, 1.375rem);
      }
    }

    >li>.text {
      font-size: 0.9375rem;
      line-height: 1.6;
      margin-block-start: 0.4375rem;

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

    >li>.link {
      margin-block-start: 0.625rem;
      text-align: center;
    }

    >li>.link>.link-arrow {
      --bg-size-full: calc(100% - 15px);
      --bg-offset-right: 15px;

      letter-spacing: 0.03em;

      &::after {
        margin-inline-start: 0.1875rem;
      }
    }
  }

  /* ---------------------------------------------
  .vr-theme-list
------------------------------------------------ */
  .vr-theme-list {
    display: grid;
    row-gap: 0.125rem;

    >li {
      display: flex;
      overflow: hidden;
      flex-wrap: wrap;
      align-items: flex-start;
      padding: 1.25rem;
      background-color: var(--color-white);
      gap: 1.25rem 3.125rem;

      @media (max-width: 896px) {
        flex-direction: column;
        padding-block-end: 1.875rem;
      }

      &:first-child {
        border-top-left-radius: var(--border-radius-md);
        border-top-right-radius: var(--border-radius-md);
      }

      &:last-child {
        border-bottom-left-radius: var(--border-radius-md);
        border-bottom-right-radius: var(--border-radius-md);
      }
    }

    >li>figure {
      width: 100%;

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

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

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

      @media (min-width: 897px) {
        flex: 1;
        padding-block-start: 0.625rem;
      }
    }

    >li>.detail>.title {
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.5;
    }

    >li>.detail>.list-dot {
      padding-inline-start: 0.625rem;
    }

    >li>.detail>.list-dot>li {
      @media (min-width: 897px) {
        line-height: 1.875;
      }

      &::before {
        @media (min-width: 897px) {
          top: 0.9375rem;
        }
      }
    }
  }

  /* ---------------------------------------------
  .vr-scene-list
------------------------------------------------ */
  .vr-scene-list {
    display: grid;
    gap: 0.3125rem;
    grid-template-columns: repeat(2, 1fr);

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

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

    >li>figure {
      position: relative;
      aspect-ratio: 165 / 87;

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

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

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

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

    >li>.detail>.title {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.5;

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

    >li>.detail>.list-dot {
      padding-inline-start: 0.4375rem;

      @media (min-width: 897px) {
        padding-inline-start: 0.5625rem;
      }
    }

    >li>.detail>.list-dot>li {
      font-size: 0.75rem;
      line-height: 1.66667;
      padding-inline-start: 0.6875rem;

      @media (min-width: 897px) {
        font-size: 0.875rem;
        line-height: 2;
        padding-inline-start: 0.75rem;
      }

      &::before {
        @media (max-width: 896px) {
          top: 0.5625rem;
          width: 0.1875rem;
          height: 0.1875rem;
        }
      }
    }
  }

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

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

    >li>a {
      display: flex;
      overflow: hidden;
      flex-flow: column wrap;
      border-radius: var(--border-radius-md);
      background-color: var(--color-white);

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

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

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

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

    >li>a>.detail {
      width: 100%;
      padding: 1.25rem 1.25rem 1.5625rem;

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

    >li>a>.detail>figure {
      position: relative;
      overflow: hidden;
      border-radius: var(--border-radius-md);
      aspect-ratio: 295 / 178;
      margin-block-end: 1.3125rem;

      @media (min-width: 897px) {
        aspect-ratio: 330 / 200;
        margin-block-end: 1.25rem;
      }
    }

    >li>a>.detail>figure>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;
      }
    }

    >li>a>.detail>.title {
      font-size: 1.125rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 1.55556;
    }

    >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);
      }
    }

    >li>a>.detail>.tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.625rem 1.25rem;
      margin-block-start: 0.4375rem;
    }

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

    >li>a>.button {
      display: flex;
      min-height: 2.6875rem;
      align-items: center;
      justify-content: center;
      padding: 0.3125rem;
      background-color: var(--color-pink-30);
      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;
      }
    }

    >li>a>.button>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-search-01.svg") no-repeat left top / contain;
        content: "";
        transform: translateY(-50%);
      }
    }
  }

  /* ---------------------------------------------
  .vr-modal-article
------------------------------------------------ */
  .vr-modal-article {
    display: flex;
    flex-flow: column wrap;
    gap: 1rem 2rem;

    @media (min-width: 897px) {
      flex-direction: row-reverse;
    }

    >figure {
      width: 100%;

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

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

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

    >.detail>.head {
      border-bottom: 1px solid var(--color-gray-75);
      margin-block-end: 1.25rem;
      padding-block-end: 1.5rem;
    }

    >.detail>.head>.title {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.5;
    }

    >.detail>.head>.tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.625rem 1.25rem;
      margin-block-start: 0.625rem;
    }

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

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

  /* ---------------------------------------------
  .vr-modal-comparison
------------------------------------------------ */
  .vr-modal-comparison {
    display: grid;
    gap: 2.75rem 2.3125rem;
    margin-block-start: 1.25rem;

    @media (min-width: 897px) {
      grid-template-columns: repeat(2, 1fr);
      margin-block-start: 1.875rem;
    }

    >.box {
      position: relative;
      padding: 1.25rem;
      border-radius: var(--border-radius-md);
      background-color: var(--color-gray-80);

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

      &:nth-child(even) {
        background-color: var(--color-pink-90);
      }

      &:not(:last-child) {
        &::after {
          position: absolute;
          width: 1.125rem;
          height: 1rem;
          background: url("/assets/images/product/vr-learning/icon-arrow-down-01.png") no-repeat left top / contain;
          content: "";

          @media (min-width: 897px) {
            top: 50%;
            right: -1.75rem;
            width: 1.0625rem;
            height: 1.25rem;
            background-image: url("/assets/images/product/vr-learning/icon-arrow-right-01.png");
            transform: translateY(-50%);
          }

          @media (max-width: 896px) {
            bottom: -2rem;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
    }

    >.box>.title {
      margin-bottom: 0.3125rem;
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.5;
    }

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

    >.box>ul>li {
      position: relative;
      line-height: 1.75;
      padding-inline-start: 1.5rem;

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

  /* ---------------------------------------------
  .vr-process-list
------------------------------------------------ */
  .vr-process-list {
    display: grid;
    row-gap: 3.125rem;

    >li {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      -moz-column-gap: 0.625rem;
      column-gap: 0.625rem;

      @media (min-width: 897px) {
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
      }

      &:not(:last-child)::before {
        position: absolute;
        top: 2.5rem;
        left: 1.5rem;
        width: 0.125rem;
        height: calc(100% + 1.25rem);
        background-color: var(--color-pink-80);
        content: "";
      }
    }

    >li>.number {
      position: relative;
      display: flex;
      width: 3.125rem;
      height: 3.125rem;
      align-items: center;
      justify-content: center;
      border: 4px solid var(--color-pink-50);
      border-radius: 50%;
      background-color: var(--color-pink-30);
      color: var(--color-white);
      font-family: var(--second-family);
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 1.5;
    }

    >li>.detail {
      display: grid;
      flex: 1;
      padding-block-start: 0.5625rem;
      row-gap: 0.6875rem;

      @media (min-width: 897px) {
        padding-block-start: 0.375rem;
        row-gap: 0.625rem;
      }
    }

    >li>.detail>.title {
      font-size: 1.375rem;
      font-weight: 700;
      line-height: 1.36364;

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

    >li>.detail>.list-dot {
      padding-inline-start: 0.625rem;
    }
  }

  /* ---------------------------------------------
  .vr-support-list
------------------------------------------------ */
  .vr-support-list {
    display: grid;
    counter-reset: number-counter;
    row-gap: 1.875rem;

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

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

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

    >li>figure {
      overflow: hidden;
      width: 100%;
      max-width: 7.5rem;
      max-height: 7.5rem;
      border-radius: 50%;
      margin: 0 auto;
      aspect-ratio: 1 / 1;
      background-color: var(--color-white);
    }

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

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

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

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

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

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

    >li>.detail>.list-dot {
      padding-inline-start: 0.625rem;
    }
  }

  /* ---------------------------------------------
  .vr-introduction-box
------------------------------------------------ */
  .vr-introduction-box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem 1.875rem;

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

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

    >.detail>.title {
      font-size: 1.875rem;
      font-weight: 700;
      line-height: 1.33333;
      margin-block-end: 1.25rem;

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

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

    >picture {
      display: block;
      width: 100%;

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

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

  /* ---------------------------------------------
  .vr-about-article
------------------------------------------------ */
  .vr-about-article {
    display: grid;
    row-gap: 4.375rem;

    >.box>.lead {
      font-size: 1rem;
      line-height: 1.75;
      margin-block-end: 1.875rem;
    }

    >.box>.table-detail>tbody>tr>td:first-child {
      width: 8.125rem;

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

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

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

  /* ---------------------------------------------
  .vr-about-list
------------------------------------------------ */
  .vr-about-list {
    display: grid;
    gap: 0.3125rem 0.375rem;

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

    >li {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 1.25rem;
      border-radius: var(--border-radius-md);
      background-color: var(--color-white);
      -moz-column-gap: 0.625rem;
      column-gap: 0.625rem;

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

    >li>figure {
      width: 100%;
      max-width: 6.875rem;
    }

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

    >li>.detail {
      display: grid;
      flex: 1;
      row-gap: 0.3125rem;

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

    >li>.detail>.title {
      color: var(--color-pink-30);
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.5;

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

    >li>.detail>.text {
      font-size: 0.9375rem;
      letter-spacing: 0.05em;
      line-height: 1.73333;
    }
  }

  /* ---------------------------------------------
  .vr-about-box
------------------------------------------------ */
  .vr-about-box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.875rem;
    margin-block-end: 1.5625rem;

    @media (max-width: 896px) {
      flex-direction: column;
      margin-block-end: 1.875rem;
    }

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

    >.detail>.heading-border-left {
      margin-block-end: 1.25rem;
    }

    >.detail>p {
      font-size: 1rem;
      letter-spacing: 0.05em;
      line-height: 1.75;
    }

    >figure {
      width: 100%;

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

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

  /* ---------------------------------------------
  .vr-case-list hidden state
------------------------------------------------ */
  .vr-case-list>li[hidden] {
    display: none;
  }
}