@charset "UTF-8";
@import url('component.css') layer(component);

/* ==========================================================================
  JS
========================================================================== */

@layer page {
  @media all and (width >= 48rem) {
    [data-start-animation='true'] .js-top-hero-mv .top-hero__header {
      -webkit-transition: 3s opacity;
      transition: 3s opacity; /** 子要素全体のアニメーションがいつ終わるか */
      opacity: 0;
    }
    [data-start-animation='true'] .js-top-hero-mv.is-start .top-hero__header {
      opacity: 1;
    }
    [data-start-animation='true'] .js-animation-header .l-header__in {
      -webkit-transition: 0.5s opacity;
      transition: 0.5s opacity;
      opacity: 0;
    }
    [data-start-animation='true'] .js-animation-header.is-show .l-header__in {
      opacity: 1;
    }
    [data-start-animation='true'] .js-animation-news .top-news__in {
      -webkit-transition-delay: 3s;
              transition-delay: 3s;
      -webkit-transition: 3s opacity;
      transition: 3s opacity;
      opacity: 0;
    }
    [data-start-animation='true'] .js-animation-news.is-show .top-news__in {
      opacity: 1;
    }

    [data-start-animation='true'] .js-top-hero-mv .top-hero__header-title .slidein {
      -webkit-filter: blur(10px);
              filter: blur(10px);
      -webkit-transform: translateX(-200px);
              transform: translateX(-200px);
      opacity: 0;
      -webkit-transition: opacity 2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-filter 2s cubic-bezier(0.25, 1, 0.5, 1) 0.4s;
      transition: opacity 2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-filter 2s cubic-bezier(0.25, 1, 0.5, 1) 0.4s;
      transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1), opacity 2s cubic-bezier(0.25, 1, 0.5, 1), filter 2s cubic-bezier(0.25, 1, 0.5, 1) 0.4s;
      transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1), opacity 2s cubic-bezier(0.25, 1, 0.5, 1), filter 2s cubic-bezier(0.25, 1, 0.5, 1) 0.4s, -webkit-transform 2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-filter 2s cubic-bezier(0.25, 1, 0.5, 1) 0.4s;
    }
    [data-start-animation='true'] .js-top-hero-mv.is-start .top-hero__header-title .slidein {
      -webkit-filter: blur(0);
              filter: blur(0);
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    [data-start-animation='true'] .js-top-hero-mv .top-hero__header-title .slidein-01 {
    }
    [data-start-animation='true'] .js-top-hero-mv .top-hero__header-title .slidein-02 {
      -webkit-transition-delay: 0.4s;
              transition-delay: 0.4s;
    }
  }
  @media all and (width < 48rem) {
    [data-start-animation='true'] .js-top-hero-mv .top-hero__header {
      -webkit-transition: 3s opacity;
      transition: 3s opacity; /** 子要素全体のアニメーションがいつ終わるか */
      opacity: 0;
    }
    [data-start-animation='true'] .js-top-hero-mv.is-start .top-hero__header {
      opacity: 1;
    }
    [data-start-animation='true'] .js-animation-header .l-header__in {
      -webkit-transition: 0.5s opacity;
      transition: 0.5s opacity;
      opacity: 0;
    }
    [data-start-animation='true'] .js-animation-header.is-show .l-header__in {
      opacity: 1;
    }
    [data-start-animation='true'] .js-animation-news .top-news__in {
      -webkit-transition-delay: 3s;
              transition-delay: 3s;
      -webkit-transition: 3s opacity;
      transition: 3s opacity;
      opacity: 0;
    }
    [data-start-animation='true'] .js-animation-news.is-show .top-news__in {
      opacity: 1;
    }

    [data-start-animation='true'] .js-top-hero-mv .top-hero__header-title .slidein {
      -webkit-filter: blur(10px);
              filter: blur(10px);
      -webkit-transform: translateX(-200px);
              transform: translateX(-200px);
      opacity: 0;
      -webkit-transition: opacity 2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-filter 2s cubic-bezier(0.25, 1, 0.5, 1) 0.4s;
      transition: opacity 2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-filter 2s cubic-bezier(0.25, 1, 0.5, 1) 0.4s;
      transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1), opacity 2s cubic-bezier(0.25, 1, 0.5, 1), filter 2s cubic-bezier(0.25, 1, 0.5, 1) 0.4s;
      transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1), opacity 2s cubic-bezier(0.25, 1, 0.5, 1), filter 2s cubic-bezier(0.25, 1, 0.5, 1) 0.4s, -webkit-transform 2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-filter 2s cubic-bezier(0.25, 1, 0.5, 1) 0.4s;
    }
    [data-start-animation='true'] .js-top-hero-mv.is-start .top-hero__header-title .slidein {
      -webkit-filter: blur(0);
              filter: blur(0);
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    [data-start-animation='true'] .js-top-hero-mv .top-hero__header-title .slidein-01 {
    }
    [data-start-animation='true'] .js-top-hero-mv .top-hero__header-title .slidein-02 {
      -webkit-transition-delay: 0.4s;
              transition-delay: 0.4s;
    }
  }
}

/* ==========================================================================
  TOP
========================================================================== */
@layer page {
  @media all and (width >= 48rem) {
    .main-container::before {
      background-color: #f0f1f1;
    }
    .main-container::after {
      content: '';
      top: 0;
      position: absolute;
      width: 100vw;
      height: 100%;
      background-image: url(/assets/img/top/bg_grd.png);
      background-image: url(/assets/img/top/bg_grd.webp);
      background-image: url(/assets/img/top/bg_grd.avif);
      background-size: 100vw auto;
      background-repeat: repeat-y;
      z-index: -2;
    }
    .main-container .c-txt {
      --txt-font-color: #171819;
      --txt-letter-spacing: 0.1em;
    }
    .l-container {
    }
    .l-section {
      padding-inline: 0;
    }
    .top-hero-mv {
      /* コンテナ */
      container-type: inline-size;
      width: 100vw;

      position: relative;
      max-width: calc(1920 / var(--font-size) * 1rem);
      aspect-ratio: 1440 / 702.28;
      overflow: hidden;
      background-position: right;
    }
    .top-hero-video {
      position: relative;
    }
    .top-hero-video video {
      position: absolute;
      width: calc(951 / 1440 * 100cqi);
      top: 0;
      right: 0;
      z-index: 0;
    }
    .top-hero-mv::before {
      content: '';
      top: 0;
      left: 0;
      position: absolute;
      width: calc(489 / 1440 * 100cqi);
      height: 100%;
      background: url(/assets/img/top/bg_page-hero.png);
      background: url(/assets/img/top/bg_page-hero.webp);
      background: url(/assets/img/top/bg_page-hero.avif);
      background-size: cover;
      background-position: center right;
      z-index: -1;
    }
    .top-hero__deco {
      position: relative;
      height: 100%;
    }
    .top-hero__deco::before {
      content: '';
      top: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      background: url(/assets/img/top/deco01_page-hero.png);
      background: url(/assets/img/top/deco01_page-hero.webp);
      background: url(/assets/img/top/deco01_page-hero.avif);
      background-size: cover;
      z-index: -1;
      mix-blend-mode: multiply;
    }
    .top-hero__in {
      height: 100%;
      padding-block: calc(calc(53 + 75) / 1440 * 100cqi) 0;
    }
    .top-hero__body {
      position: relative;
      height: 100%;
      padding-inline: calc(104 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    .top-hero__header {
      position: absolute;
      top: 0;
      left: 0;
      background-color: var(--white-color);
      padding-block: calc(54 / 1440 * 100cqi) calc(48 / 1440 * 100cqi);
      padding-inline: calc(42 / 1440 * 100cqi) calc(45 / var(--font-size) * 1rem);
      border-bottom-right-radius: calc(70 / 1440 * 100cqi);
    }
    .top-hero__header-title {
      position: relative;
      display: block;
      width: calc(574 / 1440 * 100cqi);
    }
    .top-hero__header-title--main {
      width: 100%;
      aspect-ratio: 574/76;
    }
    .top-hero__header-title--lead {
      width: calc(474 / 1440 * 100cqi);
      aspect-ratio: 474/64;
      margin-top: calc(40 / 1440 * 100cqi);
    }
    .top-hero {
      position: relative;
      max-width: calc(1920 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    .top-news {
      position: absolute;
      width: calc(300 / 1440 * 100vw);
      left: 0;
      bottom: 0;
      .top-news__in {
        position: relative;
        background: var(--white-color);
        border-top-left-radius: calc(20 / var(--font-size) * 1rem);
        border-bottom-right-radius: calc(20 / var(--font-size) * 1rem);
        padding-inline: calc(13 / var(--font-size) * 1rem);
        padding-block: calc(14 / var(--font-size) * 1rem);
        &::after {
          position: absolute;
          content: '';
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(203, 218, 225, 0.25);
          -webkit-filter: blur(calc(10 / var(--font-size) * 1rem));
                  filter: blur(calc(10 / var(--font-size) * 1rem));
          z-index: -1;
          mix-blend-mode: multiply;
        }
      }
      .top-news__head {
        position: absolute;
        top: 0;
        right: 0;
        -webkit-transform: rotate(90deg) translate(100%, -100%);
                transform: rotate(90deg) translate(100%, -100%);
        -webkit-transform-origin: right top;
                transform-origin: right top;
        .c-heading {
          --heading-font-color: var(--white-color);
          --heading-letter-spacing: 220;
          .c-heading__label {
            font-size: calc(33.68 / 1440 * 100vw);
          }
        }
      }
      .top-news-content {
      }
      .top-news-desc {
        padding-inline: calc(14 / var(--font-size) * 1rem);
      }
      .top-news-date {
        font-family: var(--ff-en);
        font-weight: 400;
        letter-spacing: 0.15em;
        font-size: calc(16 / var(--font-size) * 1rem);
        line-height: 2.265625;
      }
      .top-news-lead {
        font-weight: 500;
        font-size: calc(14 / var(--font-size) * 1rem);
        line-height: 1.6;
        letter-spacing: 0.2em;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 3行まで表示 */
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
    .l-section {
    }
    .l-section__in {
      position: relative;
    }
    .l-section__head {
      margin-bottom: calc(24 / var(--font-size) * 1rem);
    }
    .l-section__head .c-heading.--en {
      --heading-font-family: var(--ff-en-serif);
      --heading-letter-spacing: 240;
      margin-inline: auto;
    }
    .l-section__head.--vertical {
      position: absolute;
      margin: 0;
      left: 0;
      top: calc(10 / var(--font-size) * 1rem);
      -webkit-transform: rotate(90deg) translateY(-100%);
              transform: rotate(90deg) translateY(-100%);
      -webkit-transform-origin: left top;
              transform-origin: left top;
      .c-heading {
        margin: 0;
        position: relative;
        line-height: 1;
        &::before {
          position: absolute;
          content: '';
          right: -80%;
          top: calc(50% + calc(5 / var(--font-size) * 1rem));
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%);
          width: 100%;
          max-width: calc(180 / var(--font-size) * 1rem);
          height: calc(2 / var(--font-size) * 1rem);
          background: var(--primary-color-100);
        }
      }
    }
    .l-block__head {
      margin-bottom: calc(40 / var(--font-size) * 1rem);
    }
    .l-block__head.--vertical {
      position: absolute;
      margin: 0;
      left: 0;
      top: calc(10 / var(--font-size) * 1rem);
      -webkit-transform: rotate(90deg) translateY(-100%);
              transform: rotate(90deg) translateY(-100%);
      -webkit-transform-origin: left top;
              transform-origin: left top;
      .c-heading {
        margin: 0;
        line-height: 1;
      }
    }
    .l-block__head .c-heading {
      --heading-letter-spacing: 100;
      margin-inline: auto;
    }
  }
  @media all and (width < 64rem) {
    .top-hero__header {
      top: auto;
      bottom: calc(24 / var(--font-size) * 1rem);
      padding-block: calc(32 / var(--font-size) * 1rem);
      padding-inline: calc(40 / var(--font-size) * 1rem);
    }
    .top-hero__header-title {
      width: calc(424 / var(--font-size) * 1rem);
    }
    .top-hero__header-title--lead {
      width: calc(360 / var(--font-size) * 1rem);
    }
    .l-section__head.--vertical {
      .c-heading {
        --heading-font-size: 36;
      }
    }
    .top-news {
      left: auto;
      right: 0;
      bottom: calc(24 / var(--font-size) * 1rem);
      .top-news__head {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        left: 0;
        -webkit-transform-origin: left top;
                transform-origin: left top;
        -webkit-transform: rotate(-90deg) translate(-100%, -100%);
                transform: rotate(-90deg) translate(-100%, -100%);
      }
      .top-news-date {
        font-size: calc(16 / 1440 * 100vw);
      }
      .top-news-lead {
        font-size: calc(14 / 1440 * 100vw);
      }
    }
  }
  @media all and (width < 48rem) {
    .main-container {
      padding-top: calc(56.98 / var(--font-size) * 1rem);
    }
    .main-container::before {
      background-color: #f0f1f1;
    }
    .main-container::after {
      content: '';
      top: 0;
      position: absolute;
      width: 100vw;
      height: 100%;
      background-image: url(/assets/img/top/bg_grd_sp.png);
      background-image: url(/assets/img/top/bg_grd_sp.webp);
      background-image: url(/assets/img/top/bg_grd_sp.avif);
      background-size: 100vw auto;
      background-repeat: repeat-y;
      z-index: -2;
    }
    .main-container .c-txt {
      --txt-font-color: #171819;
      --txt-letter-spacing: 0.1em;
      --txt-line-height: 2;
    }
    .l-container {
      padding-top: calc(64 / var(--font-size) * 1rem);
    }
    .l-section {
      padding-inline: 0;
    }
    .top-hero-mv {
      /* コンテナ */
      container-type: inline-size;

      position: relative;
      aspect-ratio: 375/365;
      overflow: hidden;
    }
    .top-hero-video {
      position: absolute;
      top: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      height: calc(276.6402697918 / 375 * 100vw);
      aspect-ratio: 375/276.6402697918;
      z-index: 0;
    }
    .top-hero-video video {
      position: absolute;
      top: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      width: auto;
      height: 100%;
    }
    .top-hero-mv::before {
      content: '';
      left: 0;
      top: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      background: url(/assets/img/top/bg_page-hero.png);
      background: url(/assets/img/top/bg_page-hero.webp);
      background: url(/assets/img/top/bg_page-hero.avif);
      background-size: cover;
      z-index: -3;
    }
    .top-hero__deco {
      position: relative;
      height: 100%;
    }
    .top-hero__deco::before {
      content: '';
      top: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      background: url(/assets/img/top/deco01_page-hero.png);
      background: url(/assets/img/top/deco01_page-hero.webp);
      background: url(/assets/img/top/deco01_page-hero.avif);
      background-size: auto 100%;
      background-position: top center;
      z-index: -1;
      mix-blend-mode: multiply;
    }
    .top-hero__in {
      height: 100%;
      padding-block: calc(48 / var(--font-size) * 1rem) 0;
    }
    .top-hero__body {
      position: relative;
      height: 100%;
      max-width: calc(1360 / var(--font-size) * 1rem);
      padding-inline: calc(104 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    .top-hero__header {
      position: absolute;
      left: 0;
      bottom: calc(24 / 375 * 100vw);
      background-color: var(--white-color);
      padding-block: calc(18 / 375 * 100vw) calc(18 / 375 * 100vw);
      padding-inline: calc(14 / 375 * 100vw) calc(14 / 375 * 100vw);
      border-bottom-right-radius: calc(35 / 375 * 100vw);
    }
    .top-hero__header-title {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: calc(18 / var(--font-size) * 1rem);
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: calc(262 / 375 * 100vw);
      min-width: calc(262 / var(--font-size) * 1rem);
    }
    .top-hero {
      position: relative;
    }
    .top-news {
      margin-top: calc(36 / var(--font-size) * 1rem);
      padding-inline: calc(40 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
      .top-news__in {
        position: relative;
        background: var(--white-color);
        border-top-left-radius: calc(20 / var(--font-size) * 1rem);
        border-bottom-right-radius: calc(20 / var(--font-size) * 1rem);
        padding-inline: calc(13 / var(--font-size) * 1rem);
        padding-block: calc(14 / var(--font-size) * 1rem);
        &::after {
          position: absolute;
          content: '';
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(203, 218, 225, 0.25);
          -webkit-filter: blur(calc(10 / var(--font-size) * 1rem));
                  filter: blur(calc(10 / var(--font-size) * 1rem));
          z-index: -1;
          mix-blend-mode: multiply;
        }
      }
      .top-news__head {
        position: absolute;
        top: calc(14 / var(--font-size) * 1rem);
        left: calc(-2 / var(--font-size) * 1rem);
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
        -webkit-transform-origin: left top;
                transform-origin: left top;
        .c-heading {
          position: relative;
          --heading-line-height: 1;
          --heading-font-color: var(--primary-color-500);
          --heading-letter-spacing: 220;
          .c-heading__label {
            font-size: calc(22 / var(--font-size) * 1rem);
          }
          &::after {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(203, 218, 225, 0.25);
            -webkit-filter: blur(calc(4 / var(--font-size) * 1rem));
                    filter: blur(calc(4 / var(--font-size) * 1rem));
            z-index: -1;
            mix-blend-mode: multiply;
          }
        }
      }
      .top-news-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: calc(12 / var(--font-size) * 1rem);
      }
      .top-news-visual {
        -ms-flex-negative: 0;
            flex-shrink: 0;
        width: calc(135 / 375 * 100vw);
        border-top-left-radius: calc(12 / var(--font-size) * 1rem);
        overflow: hidden;
      }
      .top-news-desc {
      }
      .top-news-date {
        font-family: var(--ff-en);
        font-weight: 400;
        letter-spacing: 0.15em;
        font-size: calc(12 / var(--font-size) * 1rem);
        line-height: 1.5;
      }
      .top-news-lead {
        font-weight: 500;
        font-size: calc(14 / var(--font-size) * 1rem);
        line-height: 1.5;
        letter-spacing: 0.1em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
    .l-section {
    }
    .l-section__in {
      position: relative;
    }
    .l-section__head {
      margin-bottom: calc(8 / var(--font-size) * 1rem);
    }
    .l-section__head .c-heading.--en {
      --heading-font-size: 20;
      --heading-font-family: var(--ff-en-serif);
      --heading-letter-spacing: 240;
      margin-inline: auto;
    }
    .l-section__head.--vertical {
      position: absolute;
      margin: 0;
      left: 0;
      top: calc(10 / var(--font-size) * 1rem);
      -webkit-transform: rotate(90deg) translateY(-100%);
              transform: rotate(90deg) translateY(-100%);
      -webkit-transform-origin: left top;
              transform-origin: left top;
      .c-heading {
        --heading-line-height: 1;
        margin: 0;
        position: relative;
        &::before {
          position: absolute;
          content: '';
          right: -100%;
          top: calc(50% + calc(5 / var(--font-size) * 1rem));
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%);
          width: 100%;
          height: calc(1 / var(--font-size) * 1rem);
          background: var(--primary-color-100);
        }
      }
    }
    .l-block__head {
      margin-bottom: calc(24 / var(--font-size) * 1rem);
    }
    .l-block__head.--vertical {
      position: absolute;
      margin: 0;
      left: 0;
      top: calc(10 / var(--font-size) * 1rem);
      -webkit-transform: rotate(90deg) translateY(-100%);
              transform: rotate(90deg) translateY(-100%);
      -webkit-transform-origin: left top;
              transform-origin: left top;
      .c-heading {
        margin: 0;
        line-height: 1;
      }
    }
    .l-block__head .c-heading {
      --heading-letter-spacing: 0;
      margin-inline: auto;
    }
  }
}
/* Case Study */
@layer page {
  @media all and (width >= 48rem) {
    .case-study {
      padding-inline: 0;
      max-width: calc(1440 / var(--font-size) * 1rem);
      margin-inline: calc(-64 / var(--font-size) * 1rem);
      .l-block__head {
        margin-bottom: 0;
      }

      .c-btn-wrapper {
        margin-top: calc(40 / var(--font-size) * 1rem);
        margin-inline: auto;
      }
    }
    .c-slide__in,
    .c-slide-content {
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
    .c-slide-visual picture{
      width: 100%;
      height: 258px;
      display: block;
    }
    .c-slide-visual img{
      width: 100%;
	    height: 100%;
      object-fit: cover;
    }
    .c-slide-text {
      height: 100%;
      background: var(--white-color);
      padding-block: calc(20 / var(--font-size) * 1rem) calc(25 / var(--font-size) * 1rem);
      padding-inline: calc(20 / var(--font-size) * 1rem);
    }
    .c-slide-desc + .c-slide-tag-list {
      margin-top: calc(16 / var(--font-size) * 1rem);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      gap: calc(8 / var(--font-size) * 1rem);
    }
    .c-slide-desc {
      font-size: calc(18 / var(--font-size) * 1rem);
      line-height: 1.6;
      letter-spacing: 0;
      -webkit-font-feature-settings: 'palt';
              font-feature-settings: 'palt';
      font-weight: 500;
      color: #0c2543;
    }
    .c-slide-tag {
      --tag-color: #339bd4;
      display: inline-block;
      padding-inline: calc(14 / var(--font-size) * 1rem);
      padding-block: calc(2 / var(--font-size) * 1rem);
      border: var(--tag-color) calc(1 / var(--font-size) * 1rem) solid;
    }
    .c-slide-tag__text {
      font-size: calc(13 / var(--font-size) * 1rem);
      color: var(--tag-color);
      font-weight: bold;
      line-height: 1.8;
    }
    .c-slider {
      position: relative;
      container-type: inline-size;
      max-width: calc(1440 / var(--font-size) * 1rem);
    }
    .c-slider-track {
      padding-block: calc(40 / var(--font-size) * 1rem);
    }
    .c-slider-list {
      -webkit-box-align: stretch;
          -ms-flex-align: stretch;
              align-items: stretch;
    }
    .c-slider::before {
      position: absolute;
      content: '';
      left: 0;
      top: 0;
      width: calc(200 / 1440 * 100cqi);
      height: 100%;
      background: -webkit-gradient(linear, left top, right top, from(#f0f1f1d6), color-stop(70%, #f0f1f181), to(transparent)) no-repeat;
      background: linear-gradient(to right, #f0f1f1d6 0%, #f0f1f181 70%, transparent 100%) no-repeat;
      z-index: 1;
    }
    .c-slider::after {
      position: absolute;
      content: '';
      top: 0;
      right: 0;
      width: calc(200 / 1440 * 100cqi);
      height: 100%;
      background: -webkit-gradient(linear, right top, left top, from(#f0f1f1d6), color-stop(70%, #f0f1f181), to(transparent)) no-repeat;
      background: linear-gradient(to left, #f0f1f1d6 0%, #f0f1f181 70%, transparent 100%) no-repeat;
      z-index: 1;
    }
    .c-slider-slide {
      min-width: calc(280 / var(--font-size) * 1rem);
      height: auto;
      position: relative;
      -webkit-box-shadow: 0 0 calc(10 / var(--font-size) * 1rem) calc(3 / var(--font-size) * 1rem) #cbdae17f;
              box-shadow: 0 0 calc(10 / var(--font-size) * 1rem) calc(3 / var(--font-size) * 1rem) #cbdae17f;
      -webkit-transition: -webkit-box-shadow 0.25s;
      transition: -webkit-box-shadow 0.25s;
      transition: box-shadow 0.25s;
      transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: #cbdae1;
        opacity: 0.25;
        -webkit-filter: blur(calc(30 / var(--font-size) * 1rem));
                filter: blur(calc(30 / var(--font-size) * 1rem));
        -webkit-transform: scale(1.05);
                transform: scale(1.05);
        mix-blend-mode: multiply;
        z-index: -1;
        -webkit-transition: opacity 0.25s;
        transition: opacity 0.25s;
      }
      &:hover {
        -webkit-box-shadow: none;
                box-shadow: none;
        &::before {
          opacity: 0;
        }
      }
    }
    .c-slider:not(.is-overflow) .c-slider-arrows {
      display: none;
    }
    .c-slider-arrows {
      width: calc(1280 / 1440 * 100cqi);
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      z-index: 10;
    }
    .c-slider-arrow {
      --btn-bg-color: linear-gradient(-46deg, #203e9b, #76c1e4, #203e9b);

      width: calc(43 / var(--font-size) * 1rem);
      height: calc(43 / var(--font-size) * 1rem);
      overflow: hidden;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      opacity: 1;
    }
    .c-slider-arrow::before {
      content: '';
      position: absolute;
      left: 0;
      width: 200%;
      height: 100%;
      background: var(--btn-bg-color);
      -webkit-transition: all 0.25s;
      transition: all 0.25s;
    }
    .c-slider-arrow:hover::before {
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
    }
    .c-slider-arrow__label {
      position: relative;
      width: calc(12 / var(--font-size) * 1rem);
      height: calc(18 / var(--font-size) * 1rem);
      -webkit-mask-image: url(/assets/img/common/ico_slide_arrow.svg);
              mask-image: url(/assets/img/common/ico_slide_arrow.svg);
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      background: var(--white-color);
    }
    .c-slider-arrow:hover .c-slider-arrow--prev {
      -webkit-transform: translateX(10px);
              transform: translateX(10px);
    }
    .c-slider-arrow--next .c-slider-arrow__label {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
  }
  @media all and (width < 48rem) {
    .case-study {
      padding-inline: 0;
      margin-inline: calc(-16 / var(--font-size) * 1rem);
      .l-block__head {
        margin-bottom: 0;
        .c-heading {
          --heading-letter-spacing: 80;
        }
      }

      .c-btn-wrapper {
        margin-top: calc(8 / var(--font-size) * 1rem);
        margin-inline: auto;
      }
    }
    .c-slide__in,
    .c-slide-content {
      height: 100%;
    }
    .c-slide-content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
    .c-slide-text {
      height: 100%;
      background: var(--white-color);
      padding-block: calc(12 / var(--font-size) * 1rem) calc(17 / var(--font-size) * 1rem);
      padding-inline: calc(16 / var(--font-size) * 1rem);
    }
    .c-slide-desc + .c-slide-tag-list {
      margin-top: calc(12 / var(--font-size) * 1rem);
    }
    .c-slide-desc {
      font-size: calc(14 / var(--font-size) * 1rem);
      line-height: 1.7142857143;
      letter-spacing: 0;
      -webkit-font-feature-settings: 'palt';
              font-feature-settings: 'palt';
      font-weight: 500;
      color: #0c2543;
    }
    .c-slide-tag-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      gap: calc(8 / var(--font-size) * 1rem);
    }
    .c-slide-tag {
      --tag-color: #339bd4;
      display: inline-block;
      min-width: calc(67 / var(--font-size) * 1rem);
      text-align: center;
      font-size: calc(12 / var(--font-size) * 1rem);
      line-height: 1;
      padding-inline: calc(8 / var(--font-size) * 1rem);
      padding-block: calc(3 / var(--font-size) * 1rem) calc(4 / var(--font-size) * 1rem);
      border: var(--tag-color) calc(1 / var(--font-size) * 1rem) solid;
    }
    .c-slide-tag__text {
      display: inline-block;
      font-size: calc(12 / var(--font-size) * 1rem);
      height: calc(12 / var(--font-size) * 1rem);
      color: var(--tag-color);
      font-weight: bold;
    }
    .c-slider {
      position: relative;
      container-type: inline-size;
      max-width: calc(1440 / var(--font-size) * 1rem);
    }
    .c-slider-track {
      padding-block: calc(24 / var(--font-size) * 1rem);
    }
    .c-slider-list {
      -webkit-box-align: stretch;
          -ms-flex-align: stretch;
              align-items: stretch;
    }
    .c-slider-slide {
      min-width: calc(272 / var(--font-size) * 1rem);
      height: auto;
      position: relative;
      -webkit-box-shadow: 0 0 calc(10 / var(--font-size) * 1rem) calc(3 / var(--font-size) * 1rem) #cbdae17f;
              box-shadow: 0 0 calc(10 / var(--font-size) * 1rem) calc(3 / var(--font-size) * 1rem) #cbdae17f;
      -webkit-transition: -webkit-box-shadow 0.25s;
      transition: -webkit-box-shadow 0.25s;
      transition: box-shadow 0.25s;
      transition: box-shadow 0.25s, -webkit-box-shadow 0.25s;
      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: #cbdae1;
        opacity: 0.25;
        -webkit-filter: blur(calc(30 / var(--font-size) * 1rem));
                filter: blur(calc(30 / var(--font-size) * 1rem));
        -webkit-transform: scale(1.05);
                transform: scale(1.05);
        mix-blend-mode: multiply;
        z-index: -1;
        -webkit-transition: opacity 0.25s;
        transition: opacity 0.25s;
      }
    }
    .c-slider:not(.is-overflow) .c-slider-arrows {
      display: none;
    }
    .c-slider-arrows {
      width: calc(350 / 375 * 100vw);
      height: calc(40 / var(--font-size) * 1rem);
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      z-index: 10;
    }
    .c-slider-arrow {
      --btn-bg-color: linear-gradient(-46deg, #203e9b, #76c1e4, #203e9b);

      width: calc(30 / var(--font-size) * 1rem);
      height: calc(30 / var(--font-size) * 1rem);
      overflow: hidden;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      opacity: 1;
    }
    .c-slider-arrow::before {
      content: '';
      position: absolute;
      left: 0;
      width: 200%;
      height: 100%;
      background: var(--btn-bg-color);
      -webkit-transition: all 0.25s;
      transition: all 0.25s;
    }
    .c-slider-arrow__label {
      position: relative;
      width: calc(7 / var(--font-size) * 1rem);
      height: calc(13 / var(--font-size) * 1rem);
      -webkit-mask-image: url(/assets/img/common/ico_slide_arrow.svg);
              mask-image: url(/assets/img/common/ico_slide_arrow.svg);
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      background: var(--white-color);
    }
    .c-slider-arrow--prev {
      left: 0;
    }
    .c-slider-arrow--next {
      right: 0;
    }
    .c-slider-arrow--next .c-slider-arrow__label {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
  }
}
/* About us */
@layer page {
  @media all and (width >= 48rem) {
    .about {
      max-width: calc(1440 / var(--font-size) * 1rem);
      margin-inline: auto;
      padding-right: 0;

      .l-section__in {
        position: relative;
        max-width: calc(1120 / var(--font-size) * 1rem);
        margin-left: auto;
        margin-right: calc(-64 / var(--font-size) * 1rem);
        padding-left: calc(64 / var(--font-size) * 1rem);
        padding-right: 0;
      }
      .l-block__head {
        .c-heading {
          margin-inline: 0;
        }
      }
      .l-block {
        position: relative;
        padding-block: calc(90 / var(--font-size) * 1rem) calc(82 / var(--font-size) * 1rem);
        padding-inline: calc(94 / var(--font-size) * 1rem);

        &::before {
          position: absolute;
          content: '';
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: var(--white-color);
          background-image: url(/assets/img/top/bg_about-us.png);
          background-position: right center;
          background-size: calc(636 / var(--font-size) * 1rem);
          background-repeat: no-repeat;
          z-index: -1;
        }
        .c-btn-wrapper {
          margin-top: calc(40 / var(--font-size) * 1rem);
        }
      }
    }
  }
  @media all and (width < 64rem) {
    .about {
      .l-section__in {
        padding-left: calc(48 / var(--font-size) * 1rem);
        margin-right: calc(0 / var(--font-size) * 1rem);
      }
      .l-block {
        padding-block: calc(64 / var(--font-size) * 1rem);
        padding-inline: calc(48 / var(--font-size) * 1rem);
      }
    }
  }
  @media all and (width < 48rem) {
    .about {
      margin-inline: auto;
      padding-right: 0;

      .l-section__in {
        position: relative;
        margin-left: auto;
        margin-right: calc(-16 / var(--font-size) * 1rem);
        padding-left: calc(24 / var(--font-size) * 1rem);
        padding-right: 0;
      }
      .l-section__head .c-heading::before {
        right: -150%;
        top: calc(50% + calc(5 / var(--font-size) * 1rem));
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        width: 180%;
        max-width: calc(180 / var(--font-size) * 1rem);
      }
      .l-block {
        position: relative;
        padding-block: calc(48 / var(--font-size) * 1rem) calc(54 / var(--font-size) * 1rem);
        padding-inline: calc(24 / var(--font-size) * 1rem);

        &::before {
          position: absolute;
          content: '';
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: var(--white-color);
          /* background-image: url(/assets/img/top/bg_about-us.png); */
          /* background-position: right calc(50% + calc(16 / var(--font-size) * 1rem)); */
          /* background-size: auto 100%; */
          /* background-repeat: no-repeat; */
          z-index: -1;
        }
        &::after {
          position: absolute;
          content: '';
          right: calc(-130 / var(--font-size) * 1rem);
          top: calc(16 / var(--font-size) * 1rem);
          width: calc(342 / var(--font-size) * 1rem);
          height: calc(345 / var(--font-size) * 1rem);
          background-image: url(/assets/img/top/bg_about-us.png);
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
          z-index: -1;
        }
        .c-btn-wrapper {
          margin-top: calc(32 / var(--font-size) * 1rem);
        }
        .about-mission {
          margin-top: calc(36 / var(--font-size) * 1rem);
          position: relative;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          gap: calc(24 / var(--font-size) * 1rem);
          padding-block: calc(20 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
          padding-inline: calc(16 / var(--font-size) * 1rem);
        }
        .about-mission::before {
          position: absolute;
          content: '';
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #f6f8f8;
          mix-blend-mode: multiply;
          z-index: -1;
        }
        .about-mission__img {
          -ms-flex-negative: 0;
              flex-shrink: 0;
          width: calc(115 / var(--font-size) * 1rem);
        }
        .about-mission__text .c-txt {
          --txt-letter-spacing: 0.02em;
        }
      }
    }
  }
}
/* Service */
@layer page {
  @media all and (width >= 48rem) {
    .service {
      padding-inline: 0;
      margin-inline: calc(-64 / var(--font-size) * 1rem);
      /* コンテナ */
      container-type: inline-size;

      .l-section__in {
        position: relative;
        padding-block: calc(96 / var(--font-size) * 1rem) calc(104 / var(--font-size) * 1rem);
        padding-inline: calc(104 / var(--font-size) * 1rem);
        &::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          background: var(--primary-color-20);
          mix-blend-mode: multiply;
          border-top-right-radius: calc(150 / var(--font-size) * 1rem);
          border-bottom-left-radius: calc(150 / var(--font-size) * 1rem);
          z-index: -1;
          opacity: 0;
          -webkit-transform: translateY(3rem);
                  transform: translateY(3rem);
          -webkit-transition: 0.8s;
          transition: 0.8s;
        }
      }
      &.is-fadeUp-active .l-section__in::before {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
      }
      .l-block__head {
        margin-bottom: calc(64 / var(--font-size) * 1rem);
      }
    }
    .service-row {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: calc(72 / var(--font-size) * 1rem);
      .c-btn-wrapper {
        margin-top: calc(28 / var(--font-size) * 1rem);
        -ms-flex-item-align: end;
            -ms-grid-row-align: end;
            align-self: end;
      }
      .c-heading {
        --heading-font-size: 32;
        --heading-line-height: 1.75;
        margin-bottom: calc(56 / var(--font-size) * 1rem);
      }
    }
    .service-row-text {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      width: calc(648 / 1440 * 100cqi);
    }
    .service-row-visual {
      -ms-flex-negative: 0;
          flex-shrink: 0;
      width: calc(544 / 1440 * 100cqi);
      max-width: calc(544 / var(--font-size) * 1rem);
    }
    /* service-achieve */
    .service-achieve-block {
      margin-inline: calc(-104 / var(--font-size) * 1rem);
      padding-inline: calc(80 / var(--font-size) * 1rem);
      padding-block: calc(48 / var(--font-size) * 1rem) calc(48 / var(--font-size) * 1rem);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: space-evenly;
          -ms-flex-pack: space-evenly;
              justify-content: space-evenly;
      gap: calc(16 / var(--font-size) * 1rem);
      -webkit-box-align: stretch;
          -ms-flex-align: stretch;
              align-items: stretch;
      background-color: var(--primary-color-20);
      .l-block__head {
        margin-bottom: 0;
      }
      .l-block__head .c-heading {
        --heading-font-size: 35;
      }
    }
    .service-achieve {
      margin-top: 0;
      -ms-flex-item-align: end;
          -ms-grid-row-align: end;
          align-self: end;
    }
    .service-achieve-number {
      text-align: center;
    }
    .service-achieve-number__label {
      display: inline-block;
      font-family: var(--ff-en);
      letter-spacing: 0.08em;
      font-weight: 500;
      font-size: calc(100 / var(--font-size) * 1rem);
      background: -webkit-gradient(linear, left top, right top, from(#76c1e4), color-stop(#203e9b), color-stop(#76c1e4), to(#203e9b));
      background: linear-gradient(to right, #76c1e4, #203e9b, #76c1e4, #203e9b);
      background-position: right;
      background-size: 7.8em;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      & small {
        font-size: calc(36.88 / var(--font-size) * 1rem);
        letter-spacing: 0.1em;
      }
    }
    .achieve-detail-title {
      text-align: center;
    }
    .achieve-detail-title__label {
      font-weight: 500;
      color: var(--primary-color-500);
      font-size: calc(24 / var(--font-size) * 1rem);
      letter-spacing: 0.1em;
    }
    .achieve-detail-title__label > strong {
      font-weight: 500;
      font-size: calc(36 / var(--font-size) * 1rem);
      letter-spacing: 0.1em;
    }
    .achieve-detail-title__label > small {
      font-size: calc(20 / var(--font-size) * 1rem);
      letter-spacing: 0.1em;
    }
    .service-achieve-arrow {
      -ms-flex-item-align: end;
          -ms-grid-row-align: end;
          align-self: end;
      margin-bottom: calc(16 / var(--font-size) * 1rem);
      background: var(--white-color);
      padding-right: calc(16 / var(--font-size) * 1rem);
      width: calc(148 / var(--font-size) * 1rem);
      height: calc(86 / var(--font-size) * 1rem);
      clip-path: polygon(80% 0, 100% 50%, 80% 100%, 0 100%, 0 0);
    }
    .service-achieve-arrow-text {
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      text-align: center;
      margin-inline: auto;
    }
    .service-achieve-arrow-text__label {
      padding-block: calc(8 / var(--font-size) * 1rem);
      padding-inline: calc(8 / var(--font-size) * 1rem);
      font-weight: 500;
      font-size: calc(20 / var(--font-size) * 1rem);
      letter-spacing: 0.1em;
      line-height: 1.3745;
      color: var(--primary-color-500);
    }
    .service-achieve.--01 {
      -ms-flex-item-align: stretch;
          -ms-grid-row-align: stretch;
          align-self: stretch;
      -ms-flex-negative: 0;
          flex-shrink: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      height: auto;
      background: url(/assets/img/top/bg_achievement.png) no-repeat center/contain;
      padding-inline: calc(54 / var(--font-size) * 1rem);
      .l-block__head {
        height: 100%;
      }
    }
    .service-achieve.--02 {
      .service-achieve-number__label {
        background-size: 5.5em;
      }
    }
    .service-achieve.--03 {
      .service-achieve-number__label {
        background-size: 5.5em;
      }
    }
    /* flow */
    .flow {
      margin-top: calc(104 / var(--font-size) * 1rem);
      padding-inline: 0;
      .l-block__head {
        margin-bottom: 0;
        .c-heading {
          --heading-font-size: 32;
          margin-inline: 0;
          margin-bottom: 0;
        }
        .c-heading__label {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
        }
        .c-heading__label::before {
          content: '';
          width: 1rem;
          height: 1rem;
          display: block;
          background-color: var(--primary-color-500);
          margin-right: 1rem;
          border-radius: 9999px;
        }
        .c-txt {
          --txt-letter-spacing: 0.1em;
        }
      }
      .flow-tab-list-item__in {
        text-align: center;
        padding-block: calc(4 / var(--font-size) * 1rem);
      }
      .flow-step {
        --flow-steps: 5;
        --flow-gap-x: 50;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: calc(var(--flow-gap-x) / var(--font-size) * 1rem);
        padding-block: calc(40 / var(--font-size) * 1rem);
        &.--listed {
          --flow-steps: 4;
          --flow-gap-x: 60;
        }
      }
      .flow-step-item {
        --flow-step: 1;
        --flow-icon-width: 108;
        --flow-icon-height: 97;
        width: 100%;
        height: auto;
        + .flow-step-item {
          position: relative;
          container-type: inline-size;
        }
        &:first-of-type {
          .flow-step-heading {
            margin-left: 0;
            margin-right: calc(var(--flow-gap-x) * -0.25 / var(--font-size) * 1rem);
          }
        }
        &:last-of-type {
          .flow-step-heading {
            margin-right: 0;
            margin-left: calc(var(--flow-gap-x) * -0.25 / var(--font-size) * 1rem);
          }
          .flow-step-heading::after {
            content: '';
            position: absolute;
            width: calc(28 / var(--font-size) * 1rem);
            height: calc(30 / var(--font-size) * 1rem);
            right: 0;
            top: 50%;
            -webkit-transform: translateY(-50%) rotate(180deg);
                    transform: translateY(-50%) rotate(180deg);
            background: var(--primary-color-500);
            -webkit-mask-image: url(/assets/img/common/ico_slide_arrow.svg);
                    mask-image: url(/assets/img/common/ico_slide_arrow.svg);
            -webkit-mask-size: contain;
                    mask-size: contain;
            -webkit-mask-repeat: no-repeat;
                    mask-repeat: no-repeat;
          }
        }
        &.--01 {
          --flow-step: 1;
          --flow-icon-x: 24;
          .flow-step-icon::before {
            content: none;
          }
        }
        &.--02 {
          --flow-step: 2;
          --flow-icon-width: 94;
          --flow-icon-height: 108;
        }
        &.--03 {
          --flow-step: 3;
          --flow-icon-width: 100;
          --flow-icon-height: 90;
        }
        &.--04 {
          --flow-step: 4;
          --flow-icon-width: 105;
          --flow-icon-height: 105;
        }
        &.--05 {
          --flow-step: 5;
          --flow-icon-width: 106;
          --flow-icon-height: 108;
        }
      }
      .flow-step-item__in {
        height: 100%;
      }
      .flow-step-heading {
        text-align: center;
        min-height: calc(48 / var(--font-size) * 1rem);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        position: relative;
        margin-inline: calc(var(--flow-gap-x) * -1 / var(--font-size) * 1rem);
        margin-bottom: calc(40 / var(--font-size) * 1rem);
        &::before {
          position: absolute;
          content: '';
          left: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%);
          width: 100%;
          height: calc(2 / var(--font-size) * 1rem);
          background-color: var(--primary-color-500);
          clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 20% 0, 80% 0, 80% 100%, 20% 100%, 20% 100%, 100% 100%, 100% 0%);
        }
      }
      .flow-step-heading__label {
        position: relative;
        display: inline-block;
        padding-inline: calc(10 / var(--font-size) * 1rem);
        font-size: calc(18.87 / var(--font-size) * 1rem);
        line-height: 1;
        letter-spacing: 0.1em;
        color: var(--primary-color-600);
        font-weight: 500;
        & strong {
          font-family: var(--ff-en);
          font-weight: 500;
          font-size: calc(27 / var(--font-size) * 1rem);
        }
      }
      .flow-step-icon {
        position: relative;
        background: #eef3f7;
        border-bottom-left-radius: calc(20 / var(--font-size) * 1rem);
        border-bottom-right-radius: calc(20 / var(--font-size) * 1rem);
        &::before {
          position: absolute;
          content: '';
          width: calc(18 / 180 * 100cqi);
          height: calc(31 / 180 * 100cqi);
          left: calc(var(--flow-gap-x) * -0.5 / var(--font-size) * 1rem);
          top: 50%;
          -webkit-transform: translate(-50%, -50%) rotate(180deg);
                  transform: translate(-50%, -50%) rotate(180deg);
          -webkit-mask-image: url(/assets/img/common/ico_slide_arrow.svg);
                  mask-image: url(/assets/img/common/ico_slide_arrow.svg);
          -webkit-mask-size: contain;
                  mask-size: contain;
          -webkit-mask-repeat: no-repeat;
                  mask-repeat: no-repeat;
          background: #0d2643;
        }
      }
      .flow-step-icon-num {
        position: relative;
        padding: calc(8 / var(--font-size) * 1rem);
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #9cc9e6;
          opacity: calc(var(--flow-step) / var(--flow-steps));
          mix-blend-mode: multiply;
        }
      }
      .flow-step-icon-num__label {
        text-align: center;
        font-family: var(--ff-en);
        font-size: calc(24 / var(--font-size) * 1rem);
        & small {
          font-size: calc(21.34 / var(--font-size) * 1rem);
          letter-spacing: 0.26em;
        }
      }
      .flow-step-icon-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: calc(16 / var(--font-size) * 1rem);
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: end;
        padding-block: calc(24 / var(--font-size) * 1rem) calc(32 / var(--font-size) * 1rem);
        padding-inline: calc(24 / var(--font-size) * 1rem);
        height: calc(213 / var(--font-size) * 1rem);
      }
      .flow-step-item.--03 .flow-step-icon-content,
      .flow-step-item.--04 .flow-step-icon-content {
        padding-inline: calc(16 / var(--font-size) * 1rem);
      }
      .flow-step-icon-content__img {
        width: calc(var(--flow-icon-width) / var(--font-size) * 1rem);
        height: calc(var(--flow-icon-height) / var(--font-size) * 1rem);
        margin-left: calc(var(--flow-icon-x) / var(--font-size) * 1rem);
      }
      .flow-step-icon-content__text {
      }
      .flow-step-icon-content__text .c-txt {
        text-align: center;
        --txt-font-size: 18;
        --txt-letter-spacing: 0.1em;
        --txt-line-height: 1.4;
        font-weight: 500;
      }
      .flow-step-desc {
        margin-top: calc(32 / var(--font-size) * 1rem);
      }
      .flow-step-desc-list {
        --list-icon-color: #92afcb;
        --list-font-size: 15;
        --list-gap-y: 24;
        .c-list-item-text {
          line-height: 1.6;
        }
      }
    }
    /* Voice */
    .voice {
      max-width: calc(1440 / var(--font-size) * 1rem);
      margin-inline: auto;
      .l-section__in {
        max-width: calc(1004 / var(--font-size) * 1rem);
        margin-left: auto;
        margin-right: 0;
      }
      .l-section__head {
        margin-bottom: calc(12 / var(--font-size) * 1rem);
      }
      .l-section__head .c-heading {
        --heading-font-size: 35;
        margin-inline: 0;
        padding-bottom: 0;
      }
      .l-section__head .c-heading--bar::before {
        width: 110%;
        top: 50%;
        right: 0;
        left: auto;
        -webkit-transform: translate(100%, 100%);
                transform: translate(100%, 100%);
        background: var(--primary-color-100);
      }
      .l-block {
        padding-left: calc(80 / var(--font-size) * 1rem);
      }
      .l-block__head .c-heading {
        margin-inline: 0;
      }
    }
  }
  @media all and (width < 80rem) {
    .flow {
      .flow-step {
        position: relative;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: calc(60 / var(--font-size) * 1rem);
        padding-block: calc(32 / var(--font-size) * 1rem);
        padding-inline: calc(64 / var(--font-size) * 1rem) calc(48 / var(--font-size) * 1rem);
      }
      .flow-step::after {
        content: '';
        position: absolute;
        width: calc(28 / var(--font-size) * 1rem);
        height: calc(30 / var(--font-size) * 1rem);
        left: calc(40 / var(--font-size) * 1rem);
        bottom: calc(28 / var(--font-size) * 1rem);
        -webkit-transform: translateX(-50%) rotate(-90deg);
                transform: translateX(-50%) rotate(-90deg);
        background: var(--primary-color-500);
        -webkit-mask-image: url(/assets/img/common/ico_slide_arrow.svg);
                mask-image: url(/assets/img/common/ico_slide_arrow.svg);
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
      }
      .flow-step-item {
        position: relative;
        margin-inline: auto;
        &:first-of-type .flow-step-heading {
          margin-inline: calc(var(--flow-gap-x) * -1 / var(--font-size) * 1rem);
        }
        &:first-of-type .flow-step-heading::before {
          height: calc(100% + calc(var(--flow-gap-x) / var(--font-size) * 1rem));
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
          top: 0;
        }
        &:last-of-type .flow-step-heading {
          margin-inline: calc(var(--flow-gap-x) * -1 / var(--font-size) * 1rem);
        }
        &:last-of-type .flow-step-heading::after {
          content: none;
        }
        &::before {
          content: '';
          background-color: var(--primary-color-500);
          position: absolute;
          height: calc(100% + calc(var(--flow-gap-x) * 1.25 / var(--font-size) * 1rem));
          width: calc(2 / var(--font-size) * 1rem);
          left: calc(var(--flow-gap-x) * -0.5 / var(--font-size) * 1rem);
          top: calc(-24 / var(--font-size) * 1rem);
          -webkit-transform: none;
                  transform: none;
          clip-path: polygon(0 0, 0% 100%, 0 100%, 0 5%, 100% 5%, 100% 18%, 0 18%, 0 100%, 100% 100%, 100% 0%);
        }
        &:last-of-type::before {
          height: calc(100% + calc(var(--flow-gap-x) * 0.5 / var(--font-size) * 1rem));
          clip-path: polygon(0 0, 0% 100%, 0 100%, 0 8%, 100% 8%, 100% 20%, 0 20%, 0 100%, 100% 100%, 100% 0%);
        }
      }
      .flow-step-item__in {
        display: -ms-grid;
        display: grid;
        justify-items: start;
        -ms-grid-columns: 1fr auto;
        grid-template-columns: 1fr auto;
      }
      .flow-step-heading {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
        height: 100%;
        min-height: 0;
        position: relative;
        display: block;
        margin-bottom: calc(20 / var(--font-size) * 1rem);
        margin-inline: calc(var(--flow-gap-x) * -1 / var(--font-size) * 1rem);
        &::before {
          content: none;
          height: calc(100% + calc(var(--flow-gap-x) * 2 / var(--font-size) * 1rem));
          width: calc(2 / var(--font-size) * 1rem);
          left: 0.5em;
          top: calc(-24 / var(--font-size) * 1rem);
          -webkit-transform: none;
                  transform: none;
          clip-path: polygon(0 0, 0% 100%, 0 100%, 0 15%, 100% 15%, 100% 45%, 0 45%, 0 100%, 100% 100%, 100% 0%);
        }
      }
      .flow-step-heading__label {
        word-break: break-all;
        padding-inline: 0;
        padding-block: calc(8 / var(--font-size) * 1rem);
      }
      .flow-step-heading__label > br {
        display: none;
      }
      .flow-step-icon {
        width: 100%;
        min-width: calc(200 / var(--font-size) * 1rem);
      }
      .flow-step-icon::before {
        content: '';
        position: absolute;
        top: calc(-64 / var(--font-size) * 1rem);
        left: 50%;
        -webkit-transform: translate(-50%, -100%) rotate(-90deg);
                transform: translate(-50%, -100%) rotate(-90deg);
        width: calc(18 / var(--font-size) * 1rem);
        height: calc(31 / var(--font-size) * 1rem);
        background: var(--primary-color-500);
        -webkit-mask-image: url(/assets/img/common/ico_slide_arrow.svg);
                mask-image: url(/assets/img/common/ico_slide_arrow.svg);
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
      }
      .flow-step-icon-content {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: calc(40 / var(--font-size) * 1rem);
      }
      .flow-step-desc {
        margin-top: calc(64 / var(--font-size) * 1rem);
        margin-left: calc(24 / var(--font-size) * 1rem);
      }
    }
  }
  @media all and (width < 64rem) {
    .service {
      margin-inline: calc(-48 / var(--font-size) * 1rem);
      .l-section__in {
        padding-inline: calc(48 / var(--font-size) * 1rem);
        padding-bottom: calc(120 / var(--font-size) * 1rem);
        &::before {
          border-top-right-radius: calc(100 / var(--font-size) * 1rem);
          border-bottom-left-radius: calc(100 / var(--font-size) * 1rem);
        }
      }
    }
    .service-row {
      -webkit-box-orient: vertical;
      -webkit-box-direction: reverse;
          -ms-flex-direction: column-reverse;
              flex-direction: column-reverse;
      gap: calc(40 / var(--font-size) * 1rem);
      .c-heading {
        margin-bottom: calc(24 / var(--font-size) * 1rem);
      }
      .c-btn-wrapper {
        margin-top: calc(48 / var(--font-size) * 1rem);
        -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
      }
    }
    .service-row-text {
      width: 100%;
    }
    .service-row-visual {
      width: calc(400 / var(--font-size) * 1rem);
    }
    /* Acheive */
    .service-achieve-block {
      margin-block: calc(80 / var(--font-size) * 1rem);
      margin-inline: calc(-48 / var(--font-size) * 1rem);
      padding-inline: calc(48 / var(--font-size) * 1rem);
      padding-block: calc(40 / var(--font-size) * 1rem);

      .l-block__head .c-heading {
        --heading-font-size: 30;
      }
    }
    .service-achieve-number__label {
      font-size: calc(72 / var(--font-size) * 1rem);
    }
    .service-achieve-number__label > small {
      font-size: calc(24 / var(--font-size) * 1rem);
    }
    .service-achieve-arrow {
      width: calc(128 / var(--font-size) * 1rem);
      height: calc(72 / var(--font-size) * 1rem);
    }
    .service-achieve-arrow-text__label {
      font-size: calc(16 / var(--font-size) * 1rem);
    }
    .achieve-detail-title__label {
      font-size: calc(20 / var(--font-size) * 1rem);
    }
    .achieve-detail-title__label > strong {
      font-size: calc(28 / var(--font-size) * 1rem);
    }
    .achieve-detail-title__label > small {
      font-size: calc(16 / var(--font-size) * 1rem);
    }
    /* Voice */
    .voice {
      padding-left: 0;
      .l-section__in {
      }
      .l-section__head.--vertical {
      }
      .l-block {
        padding-left: calc(96 / var(--font-size) * 1rem);
        /* コンテナ */
        container-name: voiceCardContainer;
        container-type: inline-size;
      }
      .l-block__head {
        margin-bottom: calc(32 / var(--font-size) * 1rem);
      }
      @container voiceCardContainer (max-width: 47rem) {
        .c-voice-card {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
        }
      }
    }
  }
  @media all and (width < 48rem) {
    .service {
      padding-inline: 0;
      margin-inline: calc(-16 / var(--font-size) * 1rem);

      .l-section__in {
        position: relative;
        padding-block: calc(48 / var(--font-size) * 1rem) calc(54 / var(--font-size) * 1rem);
        padding-inline: calc(16 / var(--font-size) * 1rem);
        &::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          background: var(--primary-color-20);
          mix-blend-mode: multiply;
          border-top-right-radius: calc(75 / var(--font-size) * 1rem);
          border-bottom-left-radius: calc(75 / var(--font-size) * 1rem);
          z-index: -1;
          opacity: 0;
          -webkit-transform: translateY(3rem);
                  transform: translateY(3rem);
          -webkit-transition: 0.8s;
          transition: 0.8s;
        }
      }
      &.is-fadeUp-active .l-section__in::before {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
      }
      .l-block__head {
        margin-bottom: calc(64 / var(--font-size) * 1rem);
      }
    }
    .service-row {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: calc(24 / var(--font-size) * 1rem);
      .c-btn-wrapper {
        margin-top: calc(24 / var(--font-size) * 1rem);
      }
    }
    .service-row-text {
      width: 100%;
    }
    .service-row-visual {
      -ms-flex-negative: 0;
          flex-shrink: 0;
      width: 100%;
      max-width: calc(544 / var(--font-size) * 1rem);
    }
    .service-lead-text.c-txt {
      --txt-letter-spacing: 0.08em;
    }
    /* Achieve */
    .service-achieve-block {
      margin-inline: calc(-16 / var(--font-size) * 1rem);
      padding-inline: calc(16 / var(--font-size) * 1rem);
      padding-block: calc(48 / var(--font-size) * 1rem) calc(48 / var(--font-size) * 1rem);
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr auto auto 1fr;
      grid-template-columns: 1fr auto auto 1fr;
      justify-items: center;
      row-gap: calc(24 / var(--font-size) * 1rem);
      -webkit-column-gap: calc(16 / var(--font-size) * 1rem);
         -moz-column-gap: calc(16 / var(--font-size) * 1rem);
              column-gap: calc(16 / var(--font-size) * 1rem);
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      background-color: var(--primary-color-20);
      .l-block__head {
        margin-bottom: calc(8 / var(--font-size) * 1rem);
      }
      .l-block__head .c-heading {
        --heading-font-size: 28;
      }
    }
    .service-achieve {
      margin-top: 0;
    }
    .service-achieve-number {
      text-align: center;
    }
    .service-achieve-number__label {
      display: inline-block;
      font-family: var(--ff-en);
      letter-spacing: 0.08em;
      font-weight: 500;
      font-size: calc(70 / var(--font-size) * 1rem);
      background: -webkit-gradient(linear, left top, right top, from(#76c1e4), color-stop(#203e9b), color-stop(#76c1e4), to(#203e9b));
      background: linear-gradient(to right, #76c1e4, #203e9b, #76c1e4, #203e9b);
      background-position: right;
      background-size: 7.8em;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      & small {
        font-size: calc(24 / var(--font-size) * 1rem);
        letter-spacing: 0.1em;
      }
    }
    .achieve-detail-title {
      text-align: center;
    }
    .achieve-detail-title__label {
      font-weight: 500;
      color: var(--primary-color-500);
      font-size: calc(16 / var(--font-size) * 1rem);
      letter-spacing: 0.1em;
    }
    .achieve-detail-title__label > strong {
      font-weight: 500;
      font-size: calc(24 / var(--font-size) * 1rem);
      letter-spacing: 0.1em;
    }
    .achieve-detail-title__label > small {
      font-size: calc(13 / var(--font-size) * 1rem);
      letter-spacing: 0.1em;
    }
    .service-achieve-arrow {
      -ms-grid-column: 1;
      -ms-grid-column-span: 4;
      grid-column: 1/5;
      width: calc(180 / var(--font-size) * 1rem);
      height: auto;
      background-color: var(--white-color);
      padding-block: calc(8 / var(--font-size) * 1rem) calc(20 / var(--font-size) * 1rem);
      clip-path: polygon(0 0, 0 75%, 50% 100%, 100% 75%, 100% 0);
    }
    .service-achieve-arrow-text {
      text-align: center;
    }
    .service-achieve-arrow-text__label {
      padding-block: calc(8 / var(--font-size) * 1rem);
      padding-inline: calc(8 / var(--font-size) * 1rem);
      font-weight: 500;
      font-size: calc(14 / var(--font-size) * 1rem);
      letter-spacing: 0.1em;
      line-height: 1.3745;
      color: var(--primary-color-500);
    }
    .service-achieve.--01 {
      -ms-grid-column: 1;
      -ms-grid-column-span: 4;
      grid-column: 1/5;
      background: url(/assets/img/top/bg_achievement.png) no-repeat center/contain;
      padding-inline: calc(54 / var(--font-size) * 1rem);
    }
    .service-achieve.--02 {
      -ms-grid-column: 2;
      grid-column: 2;
      .service-achieve-number__label {
        background-size: 5.5em;
      }
    }
    .service-achieve.--03 {
      -ms-grid-column: 3;
      grid-column: 3;
      .service-achieve-number__label {
        background-size: 5.5em;
      }
    }
    /* flow */
    .flow {
      padding-inline: 0;
      .l-block__head {
        margin-bottom: calc(24 / var(--font-size) * 1rem);
        .c-heading {
          --heading-font-size: 28;
          margin-inline: 0;
          margin-bottom: 0;
        }
        .c-heading__label {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
        }
        .c-heading__label::before {
          content: '';
          width: 0.75rem;
          height: 0.75rem;
          display: block;
          background-color: var(--primary-color-500);
          margin-right: 1rem;
          border-radius: 9999px;
        }
        .c-txt {
          --txt-letter-spacing: 0.1em;
        }
      }
      .flow-step {
        --flow-gap-x: 20;
        --flow-steps: 5;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        position: relative;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: calc(60 / var(--font-size) * 1rem);
        padding-block: calc(32 / var(--font-size) * 1rem);
        padding-inline: calc(16 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
        &.--listed {
          --flow-steps: 4;
        }
      }
      .flow-step::after {
        content: '';
        position: absolute;
        width: calc(18 / var(--font-size) * 1rem);
        height: calc(20 / var(--font-size) * 1rem);
        left: calc(7 / var(--font-size) * 1rem);
        bottom: calc(33 / var(--font-size) * 1rem);
        -webkit-transform: translateX(-50%) rotate(-90deg);
                transform: translateX(-50%) rotate(-90deg);
        background: var(--primary-color-500);
        -webkit-mask-image: url(/assets/img/common/ico_slide_arrow.svg);
                mask-image: url(/assets/img/common/ico_slide_arrow.svg);
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
      }
      .flow-step-item {
        position: relative;
        margin-inline: auto;
        --flow-step: 1;
        --flow-icon-width: 54;
        --flow-icon-height: 48;
        width: 100%;
        height: auto;
        &.--01 {
          --flow-step: 1;
          --flow-icon-x: 12;
          .flow-step-icon::before {
            content: none;
          }
        }
        &.--02 {
          --flow-step: 2;
          --flow-icon-width: 47;
          --flow-icon-height: 54;
        }
        &.--03 {
          --flow-step: 3;
          --flow-icon-width: 50;
          --flow-icon-height: 45;
        }
        &.--04 {
          --flow-step: 4;
          --flow-icon-width: 52.5;
          --flow-icon-height: 52.5;
        }
        &.--05 {
          --flow-step: 5;
          --flow-icon-width: 53;
          --flow-icon-height: 54;
        }
        &::before {
          content: '';
          background-color: var(--primary-color-500);
          position: absolute;
          height: calc(100% + calc(var(--flow-gap-x) * 3 / var(--font-size) * 1rem));
          width: calc(2 / var(--font-size) * 1rem);
          left: calc(var(--flow-gap-x) * -0.5 / var(--font-size) * 1rem);
          top: calc(-24 / var(--font-size) * 1rem);
          -webkit-transform: none;
                  transform: none;
          clip-path: polygon(0 0, 0% 100%, 0 100%, 0 10%, 100% 10%, 100% 26%, 0 26%, 0 100%, 100% 100%, 100% 0%);
        }
        &:last-of-type::before {
          height: calc(100% + calc(var(--flow-gap-x) * 1 / var(--font-size) * 1rem));
          clip-path: polygon(0 0, 0% 100%, 0 100%, 0 12%, 100% 12%, 100% 28%, 0 28%, 0 100%, 100% 100%, 100% 0%);
        }
      }
      .flow-step-item__in {
        display: -ms-grid;
        display: grid;
        justify-items: start;
        -ms-grid-columns: 1fr auto;
        grid-template-columns: 1fr auto;
        -ms-grid-rows: auto auto auto;
        grid-template-rows: auto auto auto;
      }
      .flow-step-heading {
        text-align: center;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
        height: auto;
        position: relative;
        display: block;
        margin-bottom: calc(8 / var(--font-size) * 1rem);
        &::before {
          content: none;
          height: calc(100% + calc(var(--flow-gap-x) * 2 / var(--font-size) * 1rem));
          width: calc(1 / var(--font-size) * 1rem);
          left: 0.5em;
          top: calc(-24 / var(--font-size) * 1rem);
          -webkit-transform: none;
                  transform: none;
        }
      }
      .flow-step-heading__label {
        position: relative;
        display: inline-block;
        font-size: calc(16 / var(--font-size) * 1rem);
        line-height: 1;
        letter-spacing: 0.1em;
        color: var(--primary-color-600);
        font-weight: 500;
        padding-block: calc(8 / var(--font-size) * 1rem);
        & strong {
          font-family: var(--ff-en);
          font-weight: 500;
          font-size: calc(22.4 / var(--font-size) * 1rem);
        }
      }
      .flow-step-icon {
        position: relative;
        background: #eef3f7;
        margin-left: calc(16 / var(--font-size) * 1rem);
        margin-right: auto;
        border-bottom-left-radius: calc(20 / var(--font-size) * 1rem);
        border-bottom-right-radius: calc(20 / var(--font-size) * 1rem);
        min-width: calc(130 / var(--font-size) * 1rem);
        &::before {
          content: '';
          position: absolute;
          top: calc(-64 / var(--font-size) * 1rem);
          left: 50%;
          -webkit-transform: translate(-50%, -100%) rotate(-90deg);
                  transform: translate(-50%, -100%) rotate(-90deg);
          width: calc(12 / var(--font-size) * 1rem);
          height: calc(24 / var(--font-size) * 1rem);
          background: var(--primary-color-500);
          -webkit-mask-image: url(/assets/img/common/ico_slide_arrow.svg);
                  mask-image: url(/assets/img/common/ico_slide_arrow.svg);
          -webkit-mask-size: contain;
                  mask-size: contain;
          -webkit-mask-repeat: no-repeat;
                  mask-repeat: no-repeat;
        }
      }
      .flow-step-icon-num {
        position: relative;
        padding: calc(8 / var(--font-size) * 1rem);
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #9cc9e6;
          opacity: calc(var(--flow-step) / var(--flow-steps));
          mix-blend-mode: multiply;
        }
      }
      .flow-step-icon-num__label {
        text-align: center;
        font-family: var(--ff-en);
        font-size: calc(19.2 / var(--font-size) * 1rem);
        & small {
          font-size: calc(17.07 / var(--font-size) * 1rem);
          letter-spacing: 0.26em;
        }
      }
      .flow-step-icon-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: calc(16 / var(--font-size) * 1rem);
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: end;
        padding-block: calc(16 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
        padding-inline: calc(8 / var(--font-size) * 1rem);
      }
      .flow-step-icon-content__img {
        width: calc(var(--flow-icon-width) / var(--font-size) * 1rem);
        height: calc(var(--flow-icon-height) / var(--font-size) * 1rem);
        margin-left: calc(var(--flow-icon-x) / var(--font-size) * 1rem);
      }
      .flow-step-icon-content__text {
      }
      .flow-step-icon-content__text .c-txt {
        text-align: center;
        --txt-font-size: 14;
        --txt-letter-spacing: 0.08em;
        --txt-line-height: 1.4;
        font-weight: 500;
      }
    }
    /* Voice */
    .voice {
      margin-inline: auto;
      .l-section__in {
        margin-left: auto;
        margin-right: 0;
      }
      .l-section__head .c-heading {
        margin-inline: 0;
        padding-bottom: 0;
      }
      .l-section__head .c-heading--bar::before {
        width: 110%;
        top: 50%;
        right: 0;
        left: auto;
        -webkit-transform: translate(100%, 100%);
                transform: translate(100%, 100%);
        background: var(--primary-color-100);
      }
      .l-block__head {
        margin-bottom: calc(56 / var(--font-size) * 1rem);
      }
      .l-block {
        padding-left: calc(48 / var(--font-size) * 1rem);
      }
      .l-block__head .c-heading {
        margin-inline: 0;
      }
      .c-voice-card {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
      }
    }
  }
}
/* Recruit */
@layer page {
  @media all and (width >= 48rem) {
    .recruit {
      max-width: calc(1440 / var(--font-size) * 1rem);
      margin-top: calc(138 / var(--font-size) * 1rem);
      margin-inline: auto;
      /* 987 - 673 */
      .l-section__in {
        max-width: calc(1126 / var(--font-size) * 1rem);
        padding-right: calc(64 / var(--font-size) * 1rem);
        margin-left: 0;
      }
      .l-section__head.--vertical {
        left: auto;
        right: 0;
        top: calc(-36 / var(--font-size) * 1rem);
        -webkit-transform: rotate(90deg) translate(100%, -50%);
                transform: rotate(90deg) translate(100%, -50%);
        -webkit-transform-origin: right bottom;
                transform-origin: right bottom;
      }
      .l-section__body {
        position: relative;
        /* 1062 */
        container-type: inline-size;
      }
      .recruit-visual {
        position: absolute;
        content: '';
        background-image: url(/assets/img/top/img_recruit.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: calc(673 / 1062 * 100cqi);
        aspect-ratio: 673/386;
        top: calc(50% - calc(24 / var(--font-size) * 1rem));
        left: 0;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
      }
      .l-block {
        background: var(--white-color);
        margin-left: calc(75 / var(--font-size) * 1rem);
        padding-block: calc(100 / var(--font-size) * 1rem) calc(60 / var(--font-size) * 1rem);
        padding-inline: calc(48 / 1062 * 100cqi);
        padding-left: calc(638 / 1062 * 100cqi);
        min-height: calc(544 / 1062 * 100cqi);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
      }
      .l-block__content {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
      }
      .recruit-text {
        height: 100%;
      }
      .l-block__head .c-heading {
        margin-inline: 0;
      }
      .c-btn-wrapper {
        margin-top: calc(40 / var(--font-size) * 1rem);
      }
    }
  }
  @media all and (width < 64rem) {
    .recruit {
      margin-left: calc(0 / var(--font-size) * 1rem);
      padding-left: 0;
      .l-section__in {
        padding-right: calc(48 / var(--font-size) * 1rem);
      }
      .l-section__head.--vertical {
        -webkit-transform: rotate(90deg) translate(100%, 0);
                transform: rotate(90deg) translate(100%, 0);
      }
      .l-block {
        margin-left: 0;
        padding-left: calc(48 / var(--font-size) * 1rem);
        padding-top: calc(472 / 1062 * 100cqi);
      }
      .l-block__head {
        margin-bottom: calc(24 / var(--font-size) * 1rem);
      }
      .recruit-visual {
        top: calc(-48 / var(--font-size) * 1rem);
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        width: calc(720 / 879 * 100cqi);
      }
    }
  }
  @media all and (width < 48rem) {
    .recruit {
      margin-top: calc(88 / var(--font-size) * 1rem);
      /* 984 - 456 */
      .l-section__in {
        padding-right: calc(24 / var(--font-size) * 1rem);
        margin-left: calc(-16 / var(--font-size) * 1rem);
      }
      .l-section__head.--vertical {
        right: 0;
        top: calc(-16 / var(--font-size) * 1rem);
        -webkit-transform: rotate(90deg) translate(100%, -10%);
                transform: rotate(90deg) translate(100%, -10%);
        -webkit-transform-origin: right bottom;
                transform-origin: right bottom;
      }
      .l-section__body {
        position: relative;
        container-type: inline-size;
      }
      .recruit-visual {
        position: absolute;
        content: '';
        background-image: url(/assets/img/top/img_recruit.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: calc(311 / 375 * 100vw);
        aspect-ratio: 673/386;
        top: 0;
        left: 0;
        margin-top: calc(-24 / var(--font-size) * 1rem);
        -webkit-transform: none;
                transform: none;
      }
      .l-block {
        background: var(--white-color);
        padding-top: calc(184 / 375 * 100vw);
        padding-inline: calc(24 / var(--font-size) * 1rem);
        padding-bottom: calc(54 / var(--font-size) * 1rem);
      }
      .l-block__head .c-heading {
        --heading-letter-spacing: 80;
        margin-inline: 0;
      }
      .c-btn-wrapper {
        margin-top: calc(32 / var(--font-size) * 1rem);
      }
    }
  }
}
/* Faq */
@layer page {
  @media all and (width >= 48rem) {
    .faq {
      max-width: calc(1440 / var(--font-size) * 1rem);
      margin-inline: auto;
      .c-heading {
        margin-inline: 0;
      }
      .l-section__head {
        margin-bottom: calc(12 / var(--font-size) * 1rem);
        .c-heading {
          --heading-letter-spacing: 300;
          margin-inline: 0;
          padding-bottom: calc(14 / var(--font-size) * 1rem);
          &::before {
            width: 110%;
            bottom: 50%;
            right: 0;
            left: auto;
            -webkit-transform: translate(100%, 100%);
                    transform: translate(100%, 100%);
            background: var(--primary-color-100);
          }
        }
      }
      .l-block__head {
        margin-bottom: calc(46 / var(--font-size) * 1rem);
        .c-heading {
          --heading-letter-spacing: 0;
        }
      }
    }
  }
  @media all and (width < 48rem) {
    .faq {
      max-width: calc(1440 / var(--font-size) * 1rem);
      margin-inline: auto;
      .c-heading {
        margin-inline: 0;
      }
      .l-section__head {
        margin-bottom: 0;
        .c-heading {
          --heading-letter-spacing: 300;
          margin-inline: 0;
          padding-bottom: calc(8 / var(--font-size) * 1rem);
          &::before {
            width: calc(118 / var(--font-size) * 1rem);
            bottom: 50%;
            right: 0;
            left: auto;
            -webkit-transform: translate(110%, 150%);
                    transform: translate(110%, 150%);
            background: var(--primary-color-100);
          }
        }
      }
      .l-block__head {
        margin-bottom: calc(24 / var(--font-size) * 1rem);
        .c-heading {
          --heading-letter-spacing: 0;
        }
      }
    }
  }
}
/* Card */
@layer page {
  @media all and (width >= 48rem) {
    .card {
      container-type: inline-size;
      .l-section__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: calc(84 / 1440 * 100cqi);
      }
      .l-block {
        position: relative;
        width: calc(520 / var(--font-size) * 1rem);
        padding-left: calc(40 / var(--font-size) * 1rem);
        + .l-block {
          margin-top: 0;
        }
        .l-block__head.--vertical {
        }
        .l-block__head .c-heading {
          --heading-font-size: 25.8;
          --heading-letter-spacing: 100;
          padding-bottom: calc(8 / var(--font-size) * 1rem);
        }
      }
      .card-link {
        background-image: url(/assets/img/top/img_card-company.png);
        background-size: contain;
        background-repeat: no-repeat;
        -webkit-transition: all 0.25s;
        transition: all 0.25s;
        container-type: inline-size;
        .c-heading {
          --heading-font-color: var(--white-color);
          --heading-letter-spacing: 100;
          margin-inline: auto;
          position: relative;
          z-index: 0;
        }
        .c-heading__label {
          font-size: calc(40 / 480 * 100cqi);
          position: relative;
          z-index: 10;
          font-weight: 400;
          color: var(--white-color);
          -webkit-text-fill-color: var(--white-color);
        }
        .c-heading__label::before {
          position: absolute;
          content: '';
          width: 100%;
          height: 100%;
          background: rgb(62, 164, 209, 0.71);
          mix-blend-mode: multiply;
          -webkit-filter: blur(calc(54 / var(--font-size) * 1rem));
                  filter: blur(calc(54 / var(--font-size) * 1rem));
          z-index: -1;
          -webkit-transition: all 0.25s;
          transition: all 0.25s;
        }
        &.--knowledge {
          background-image: url(/assets/img/top/img_card-knowledge.png);
          .c-heading__label::before {
            background: rgb(73, 129, 192);
            mix-blend-mode: normal;
          }
        }
        .card-link__in {
          position: relative;
          aspect-ratio: 481/234;
        }
        .card-link__content {
          height: 100%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
        }
        .card-link-ico {
          position: absolute;
          right: calc(30 / var(--font-size) * 1rem);
          bottom: calc(20 / var(--font-size) * 1rem);
        }
      }
      .card-link a:hover {
        .c-heading__label::before {
          opacity: 0;
        }
      }
      .card-link:has(a:hover) {
        -webkit-filter: brightness(1.08);
                filter: brightness(1.08);
      }
    }
  }
  @media all and (width < 64rem) {
    .card {
      .l-section__body {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        gap: calc(64 / var(--font-size) * 1rem);
      }
    }
  }
  @media all and (width < 48rem) {
    .card {
      .l-section__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: calc(24 / var(--font-size) * 1rem);
      }
      .l-block {
        width: 100%;
        position: relative;
        padding-left: calc(24 / var(--font-size) * 1rem);
        + .l-block {
          margin-top: 0;
        }
        .l-block__head.--vertical {
          left: calc(-4 / var(--font-size) * 1rem);
        }
        .l-block__head .c-heading {
          --heading-font-size: 20;
          --heading-letter-spacing: 160;
        }
      }
      .card-link {
        background-image: url(/assets/img/top/img_card-company.png);
        background-size: contain;
        background-repeat: no-repeat;
        -webkit-transition: all 0.25s;
        transition: all 0.25s;
        container-type: inline-size;
        .c-heading {
          --heading-font-color: var(--white-color);
          --heading-letter-spacing: 100;
          margin-inline: auto;
          position: relative;
          z-index: 0;
        }
        .c-heading__label {
          font-size: calc(30 / var(--font-size) * 1rem);
          position: relative;
          z-index: 10;
          font-weight: 400;
          color: var(--white-color);
          -webkit-text-fill-color: var(--white-color);
        }
        .c-heading__label::before {
          position: absolute;
          content: '';
          width: 100%;
          height: 100%;
          background: rgb(62, 164, 209, 0.71);
          mix-blend-mode: multiply;
          -webkit-filter: blur(calc(54 / var(--font-size) * 1rem));
                  filter: blur(calc(54 / var(--font-size) * 1rem));
          z-index: -1;
          -webkit-transition: all 0.25s;
          transition: all 0.25s;
        }
        &.--knowledge {
          background-image: url(/assets/img/top/img_card-knowledge.png);
          .c-heading__label::before {
            background: rgb(73, 129, 192);
            mix-blend-mode: normal;
          }
        }
        .card-link__in {
          position: relative;
          aspect-ratio: 481/234;
        }
        .card-link__content {
          height: 100%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
        }
        .card-link-ico {
          position: absolute;
          width: calc(38 / var(--font-size) * 1rem);
          height: calc(29 / var(--font-size) * 1rem);
          right: calc(16 / var(--font-size) * 1rem);
          bottom: calc(16 / var(--font-size) * 1rem);
        }
      }
    }
  }
}