@charset "UTF-8";
@import url('component.css') layer(component);
:root {
  /* 変数追加 */
}
/* ==========================================================================
  ABOUT
========================================================================== */
@layer page {
  @media all and (width >= 48rem) {
    .about {
      .page-hero::before {
        background-image: url(/assets/img/about/bg_page-hero.png);
        background-image: url(/assets/img/about/bg_page-hero.webp);
        background-image: url(/assets/img/about/bg_page-hero.avif);
      }
      .l-container {
        max-width: calc(1440 / var(--font-size) * 1rem);
        padding-inline: 0;
      }
      .vision {
        .l-section__head {
          margin-bottom: calc(48 / var(--font-size) * 1rem);
          .c-heading {
            max-width: calc(521 / var(--font-size) * 1rem);
            margin-inline: auto;
          }
        }
        .vision-lead {
          margin-top: calc(48 / var(--font-size) * 1rem);
          text-align: center;
          font-weight: 500;
          --txt-letter-spacing: 0.1em;
        }
        .l-block {
          position: relative;
          max-width: calc(808 / var(--font-size) * 1rem);
          margin-inline: auto;
        }
        .l-block::before {
          position: absolute;
          content: '';
          width: 100%;
          height: 100%;
          background: rgb(99, 161, 218, 0.08);
          -webkit-filter: blur(calc(40 / var(--font-size) * 1rem));
                  filter: blur(calc(40 / var(--font-size) * 1rem));
          mix-blend-mode: multiply;
          z-index: -1;
        }
        .l-block__content {
          position: relative;
          z-index: 0;
          border-top-left-radius: calc(70 / var(--font-size) * 1rem);
          border-bottom-right-radius: calc(70 / var(--font-size) * 1rem);
          background: rgba(255, 255, 255, 0.5);
          padding-block: calc(24 / var(--font-size) * 1rem) calc(32 / var(--font-size) * 1rem);
          padding-inline: calc(64 / var(--font-size) * 1rem);

          text-align: center;
        }
        .vision-group + .vision-group {
          margin-top: calc(24 / var(--font-size) * 1rem);
        }
        .vision-group-head {
          margin-bottom: calc(13 / var(--font-size) * 1rem);
        }
        .vision-group-head__label.c-txt {
          --txt-font-color: #6bb2dc;
          --txt-font-size: 37.73;
          --txt-line-height: 1;
          font-family: var(--ff-en);
          font-style: italic;
          font-weight: 200;
          letter-spacing: 0.1em;
        }
        .vision-group-lead__label.c-txt {
          --txt-line-height: 1.888;
          --txt-letter-spacing: 0.1em;
          font-weight: 500;
          color: var(--primary-color-500);
        }
      }

      .message {
        max-width: calc(1440 / var(--font-size) * 1rem);
        padding-inline: 0;
        .l-section__in {
          position: relative;
          container-type: inline-size;
          margin-inline: calc(-64 / var(--font-size) * 1rem);
          padding-block: calc(212 / var(--font-size) * 1rem) calc(122 / 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-left-radius: calc(150 / var(--font-size) * 1rem);
            border-bottom-right-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-section__head {
          position: absolute;
          top: 0;
          left: calc(168 / var(--font-size) * 1rem);
          .c-heading {
            --heading-font-color: var(--white-color);
            --heading-font-size: 100;
            --heading-font-family: var(--ff-en);
            --heading-letter-spacing: 100;
            --heading-line-height: 1.5;
            font-style: italic;

            .c-heading__label {
              font-weight: 100;
            }
          }
        }
      }
      .message-block {
        padding-left: calc(64 / var(--font-size) * 1rem);
        .message-block__in {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: reverse;
              -ms-flex-direction: row-reverse;
                  flex-direction: row-reverse;
          max-width: calc(1169 / var(--font-size) * 1rem);
          padding-right: calc(116 / 1440 * 100%);
          margin-left: auto;
          margin-right: 0;
          background: var(--white-color);
          container-type: inline-size;
        }
        &:nth-of-type(2n) {
          padding-left: 0;
          padding-right: calc(64 / var(--font-size) * 1rem);
          .message-block__in {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
            padding-right: 0;
            padding-left: calc(116 / 1440 * 100%);
            margin-left: 0;
            margin-right: auto;
            margin-top: calc(120 / var(--font-size) * 1rem);
          }
        }
      }
      .message-head {
        -ms-flex-negative: 0;
            flex-shrink: 0;
        width: calc(367 / 1053 * 100cqi);
        margin-top: calc(-54 / var(--font-size) * 1rem);

        .message-sign {
          margin-top: calc(16 / var(--font-size) * 1rem);
          padding-left: calc(8 / var(--font-size) * 1rem);
          padding-bottom: calc(40 / var(--font-size) * 1rem);
        }
        .message-sign__position.c-txt {
          --txt-font-color: #3581c4;
          --txt-letter-spacing: 0.1em;
        }
      }
      .message-desc {
        padding-block: calc(72 / var(--font-size) * 1rem) calc(80 / var(--font-size) * 1rem);
        padding-inline: calc(64 / var(--font-size) * 1rem) calc(72 / var(--font-size) * 1rem);
      }
      .message-paragraph + .message-paragraph {
        margin-top: calc(32 / var(--font-size) * 1rem);
      }
      .message-paragraph.c-txt {
        --txt-letter-spacing: 0.1em;
      }

      .info {
        .l-section__in {
          max-width: calc(900 / var(--font-size) * 1rem);
          margin-inline: auto;
        }
        .c-heading--bar {
          --heading-font-size: 26;
          --heading-letter-spacing: 100;
          &::before {
            bottom: calc(50% + calc(3 / var(--font-size) * 1rem));
            left: auto;
            right: calc(-8 / var(--font-size) * 1rem);
            -webkit-transform: translate(100%, 50%);
                    transform: translate(100%, 50%);
            height: calc(1 / var(--font-size) * 1rem);
            width: calc(134 / var(--font-size) * 1rem);
            background: var(--primary-color-100);
          }
        }
        .l-block {
          container-type: inline-size;
        }
        .l-block__head {
          margin-bottom: calc(108 / var(--font-size) * 1rem);
        }
        .info-group {
          display: -ms-grid;
          display: grid;
          -ms-grid-columns: calc(296 / 900 * 100cqi) 1fr;
          grid-template-columns: calc(296 / 900 * 100cqi) 1fr;
        }
        .info-group + .info-group {
          padding-top: calc(32 / var(--font-size) * 1rem);
          margin-top: calc(32 / var(--font-size) * 1rem);
          border-top: rgb(10, 20, 47, 0.2) calc(1 / var(--font-size) * 1rem) solid;
        }
        .info-group-head__label {
          --txt-letter-spacing: 0.1em;
          font-weight: 500;
        }
        .info-group-lead__label {
          --txt-letter-spacing: 0.1em;
          --txt-line-height: 1.6;
        }
        .info-group.--manager {
          .info-group-lead__label {
            line-height: 2;
          }
        }
      }
    }
  }
  @media all and (width < 64rem) {
    .about .message {
      .l-section__head {
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        .c-heading {
          --heading-font-size: 80;
        }
        .c-heading__label {
          white-space: nowrap;
        }
      }
      .l-section__in::before {
      }
      .message-head {
        width: calc(400 / 959 * 100cqi);
        margin-inline: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: calc(24 / 959 * 100cqi);
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: end;
      }
      .message-sign {
        -ms-flex-negative: 0;
            flex-shrink: 0;
        width: calc(158 / 959 * 100cqi);
        padding-bottom: calc(16 / var(--font-size) * 1rem);
      }
      .message-block {
        padding-inline: calc(48 / var(--font-size) * 1rem);
      }
      .message-block__in {
        display: block;
        padding-right: 0;
      }
      &:nth-of-type(2n) {
        .message-block__in {
          padding: 0;
          padding-left: 0;
        }
        .message-head {
        }
      }
      .message-desc {
        padding-block: calc(48 / var(--font-size) * 1rem);
        padding-inline: calc(48 / var(--font-size) * 1rem);
      }
    }
  }
  @media all and (width < 48rem) {
    .about {
      .page-hero::before {
        background-image: url(/assets/img/about/bg_page-hero.png);
        background-image: url(/assets/img/about/bg_page-hero.webp);
        background-image: url(/assets/img/about/bg_page-hero.avif);
      }
      .l-container {
        padding-inline: 0;
      }
      .vision {
        .l-section__head {
          margin-bottom: calc(32 / var(--font-size) * 1rem);
          .c-heading {
            width: calc(312 / var(--font-size) * 1rem);
            margin-inline: auto;
          }
        }
        .vision-lead {
          --txt-line-height: 2;
          --txt-letter-spacing: 0.1em;
          margin-top: calc(24 / var(--font-size) * 1rem);
          text-align: center;
          font-weight: 500;
        }
        .l-block {
          position: relative;
          margin-inline: auto;
        }
        .l-block__content {
          border-top-left-radius: calc(30 / var(--font-size) * 1rem);
          border-bottom-right-radius: calc(30 / var(--font-size) * 1rem);
          background: var(--white-color);
          padding-block: calc(24 / var(--font-size) * 1rem) calc(32 / var(--font-size) * 1rem);
          padding-inline: calc(24 / var(--font-size) * 1rem);
          -webkit-box-shadow: 0px 0px calc(20 / var(--font-size) * 1rem) calc(5 / var(--font-size) * 1rem) rgb(99, 161, 218, 0.08);
                  box-shadow: 0px 0px calc(20 / var(--font-size) * 1rem) calc(5 / var(--font-size) * 1rem) rgb(99, 161, 218, 0.08);

          text-align: center;
        }
        .vision-group + .vision-group {
          margin-top: calc(16 / var(--font-size) * 1rem);
        }
        .vision-group-head {
          margin-bottom: calc(8 / var(--font-size) * 1rem);
        }
        .vision-group-head__label.c-txt {
          --txt-font-color: #6bb2dc;
          --txt-font-size: 30;
          --txt-line-height: 1;
          font-family: var(--ff-en);
          font-style: italic;
          font-weight: 200;
          letter-spacing: 0.08em;
        }
        .vision-group-lead__label.c-txt {
          --txt-line-height: 2;
          --txt-letter-spacing: 0.08em;
          font-weight: 500;
          color: var(--primary-color-500);
        }
      }

      .message {
        padding-inline: 0;
        .l-section__in {
          position: relative;
          container-type: inline-size;
          margin-inline: calc(-16 / var(--font-size) * 1rem);
          padding-block: calc(170 / var(--font-size) * 1rem) calc(64 / 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-left-radius: calc(75 / var(--font-size) * 1rem);
            border-bottom-right-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-section__head {
          position: absolute;
          top: calc(16 / var(--font-size) * 1rem);
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
          .c-heading {
            --heading-font-color: var(--white-color);
            --heading-font-size: 44;
            --heading-font-family: var(--ff-en);
            --heading-letter-spacing: 80;
            --heading-line-height: 1.5;
            font-style: italic;

            .c-heading__label {
              font-weight: 100;
            }
          }
        }
        .message-block {
          padding-inline: calc(16 / var(--font-size) * 1rem);
          .message-block__in {
            background: var(--white-color);
          }
          &:nth-of-type(2n) {
            .message-block__in {
              margin-top: calc(120 / var(--font-size) * 1rem);
            }
          }
        }
        .message-head {
          display: block;
          width: calc(214 / var(--font-size) * 1rem);
          -webkit-transform: translateY(calc(-52 / var(--font-size) * 1rem));
                  transform: translateY(calc(-52 / var(--font-size) * 1rem));

          .message-sign {
            margin-top: calc(16 / var(--font-size) * 1rem);
            padding-left: calc(8 / var(--font-size) * 1rem);
            padding-bottom: 0;
            width: unset;
          }
          .message-sign__position.c-txt {
            --txt-font-color: #3581c4;
            --txt-letter-spacing: 0.1em;
          }
          .message-sign__name {
            margin-top: calc(8 / var(--font-size) * 1rem);
            width: calc(120 / var(--font-size) * 1rem);
          }
        }
        .message-desc {
          margin-top: calc(-52 / var(--font-size) * 1rem);
          padding-block: calc(40 / var(--font-size) * 1rem) calc(48 / var(--font-size) * 1rem);
          padding-inline: calc(24 / var(--font-size) * 1rem);
        }
        .message-paragraph + .message-paragraph {
          margin-top: calc(32 / var(--font-size) * 1rem);
        }
        .message-paragraph.c-txt {
          --txt-font-color: #171819;
          --txt-line-height: 2;
          --txt-letter-spacing: 0.08em;
        }
      }

      .info {
        .l-section__in {
          max-width: 100%;
          margin-inline: auto;
        }
        .c-heading--bar {
          --heading-line-height: 1;
          --heading-font-size: 17;
          --heading-letter-spacing: 160;
          &::before {
            bottom: calc(50% + calc(3 / var(--font-size) * 1rem));
            left: auto;
            right: calc(-8 / var(--font-size) * 1rem);
            -webkit-transform: translate(100%, 50%);
                    transform: translate(100%, 50%);
            height: calc(1 / var(--font-size) * 1rem);
            width: calc(64 / var(--font-size) * 1rem);
            background: var(--primary-color-100);
          }
        }
        .l-block {
          container-type: inline-size;
        }
        .l-block__head {
          margin-bottom: calc(72 / var(--font-size) * 1rem);
        }
        .info-group {
          display: -ms-grid;
          display: grid;
          -ms-grid-columns: calc(96 / var(--font-size) * 1rem) 1fr;
          grid-template-columns: calc(96 / var(--font-size) * 1rem) 1fr;
        }
        .info-group + .info-group {
          padding-top: calc(24 / var(--font-size) * 1rem);
          margin-top: calc(24 / var(--font-size) * 1rem);
          border-top: rgb(10, 20, 47, 0.2) calc(1 / var(--font-size) * 1rem) solid;
        }
        .info-group:last-of-type {
          padding-bottom: calc(24 / var(--font-size) * 1rem);
          border-bottom: rgb(10, 20, 47, 0.2) calc(1 / var(--font-size) * 1rem) solid;
        }
        .info-group-head__label {
          --txt-letter-spacing: 0.08em;
          font-weight: 500;
        }
        .info-group-lead__label {
          --txt-letter-spacing: 0.08em;
          --txt-line-height: 1.6;

          .c-text-link {
            display: block;
            max-width: calc(228 / 375 * 100vw);
          }
        }
      }
    }
  }
}
/* ==========================================================================
  SERVICE
========================================================================== */
@layer page {
  @media all and (width >= 48rem) {
    .service {
      .l-container {
        max-width: calc(1228 / var(--font-size) * 1rem);
      }
      .page-hero::before {
        background-image: url(/assets/img/service/bg_page-hero.png);
        background-image: url(/assets/img/service/bg_page-hero.webp);
        background-image: url(/assets/img/service/bg_page-hero.avif);
      }
      .l-section__head {
        margin-bottom: calc(8 / var(--font-size) * 1rem);
        .c-heading {
          --heading-font-size: 26;
          --heading-letter-spacing: 100;
          --heading-font-color: var(--primary-grd-v2--90);
          padding-bottom: 0;
          padding-right: calc(8 / var(--font-size) * 1rem);
          &::before {
            width: calc(134 / var(--font-size) * 1rem);
            left: auto;
            right: 0;
            bottom: calc(50% - calc(5 / var(--font-size) * 1rem));
            -webkit-transform: translate(100%, 50%);
                    transform: translate(100%, 50%);
            background: var(--primary-color-200);
          }
        }
      }
    }
    /* intro */
    .service .intro {
      .l-block__content .c-txt {
        --txt-letter-spacing: 0.1em;
        text-align: center;
        & strong {
          font-weight: 500;
        }
      }
      .intro-solution {
        .l-block__head {
          margin-bottom: calc(24 / var(--font-size) * 1rem);
        }
        .c-heading {
          margin-inline: auto;
          --heading-font-family: var(--ff-jp);
          --heading-font-size: 23;
          --heading-letter-spacing: 100;
          & strong {
            font-size: calc(35 / var(--font-size) * 1rem);
            font-weight: 500;
          }
        }
        margin-top: calc(88 / var(--font-size) * 1rem);
      }
      .intro-bubble-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: calc(18 / var(--font-size) * 1rem);
        max-width: calc(718 / var(--font-size) * 1rem);
        margin-inline: auto;
        margin-block: calc(40 / var(--font-size) * 1rem);
      }
      .intro-bubble {
        position: relative;
        width: 100%;
        height: calc(123 / var(--font-size) * 1rem);
        -webkit-mask-image: url(/assets/img/service/ico_bubble-left.svg);
                mask-image: url(/assets/img/service/ico_bubble-left.svg);
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        background: -webkit-gradient(linear, left top, right top, from(#7ab7d5), to(#3d5aa1));
        background: linear-gradient(to right, #7ab7d5, #3d5aa1);
        background-size: 300% 100%;
        background-position: left;
        /* コンテナ */
        container-type: inline-size;

        .intro-bubble__in {
          padding-block: calc(20 / var(--font-size) * 1rem);
          padding-inline: calc(12 / 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;
        }
        .intro-bubble-text {
          font-size: calc(18 / var(--font-size) * 1rem);
          font-weight: 500;
          line-height: 1.5;
          letter-spacing: 0.1em;
          color: var(--white-color);
          text-align: center;
          & small {
            display: block;
            font-size: calc(14 / 227.33 * 100cqi);
            letter-spacing: 0.1em;
            line-height: 2;
          }
        }

        &.--02 {
          -webkit-mask-image: url(/assets/img/service/ico_bubble-center.svg);
                  mask-image: url(/assets/img/service/ico_bubble-center.svg);
          background-position: center;
        }
        &.--03 {
          -webkit-mask-image: url(/assets/img/service/ico_bubble-right.svg);
                  mask-image: url(/assets/img/service/ico_bubble-right.svg);
          background-position: right;
        }
      }
      .intro-case {
        .l-block__head {
          max-width: calc((677 + 88 * 2) / var(--font-size) * 1rem);
          margin-inline: auto;
          padding-inline: calc(88 / var(--font-size) * 1rem);
          padding-bottom: calc(16 / var(--font-size) * 1rem);
          position: relative;
          &::before,
          &::after {
            content: '';
            width: calc(73 / var(--font-size) * 1rem);
            height: calc(58 / var(--font-size) * 1rem);
            position: absolute;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url(/assets/img/service/ico_quotation.svg);
          }
          &::before {
            top: 0;
            left: 0;
          }
          &::after {
            right: 0;
            bottom: 0;
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
          }
        }
        .l-block__content {
          margin-top: calc(24 / var(--font-size) * 1rem);
        }
      }
    }
    .solution-cta {
      margin-top: calc(56 / var(--font-size) * 1rem);
    }
    .solution-cta-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: stretch;
          -ms-flex-align: stretch;
              align-items: stretch;
      gap: calc(18 / var(--font-size) * 1rem);
      max-width: calc(818 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    .solution-cta-item {
      /* コンテナ */
      container-type: inline-size;
      width: 100%;
      height: auto;
      position: relative;
      -webkit-box-shadow: 0 0 calc(30 / var(--font-size) * 1rem) calc(3 / var(--font-size) * 1rem) rgba(222, 237, 245, 0.45);
              box-shadow: 0 0 calc(30 / var(--font-size) * 1rem) calc(3 / var(--font-size) * 1rem) rgba(222, 237, 245, 0.45);
      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: calc(2 / var(--font-size) * 1rem);
        background: var(--primary-grd-v2--90);
      }
      .solution-cta-item__in {
        padding-block: calc(16 / var(--font-size) * 1rem) calc(23 / var(--font-size) * 1rem);
        padding-inline: calc(32 / var(--font-size) * 1rem);
        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;
        gap: calc(12 / var(--font-size) * 1rem);
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
      }
      .solution-cta-item-title {
        font-size: calc(20 / var(--font-size) * 1rem);
        line-height: 1.6;
        letter-spacing: 0.1em;
        text-align: center;
        font-weight: 500;
        color: var(--primary-color-300);
      }
      .solution-cta-item-lead {
        margin-top: calc(16 / var(--font-size) * 1rem);
      }
      .solution-cta-item-lead__label {
        text-align: center;
        line-height: 1.5714285714;
        font-size: calc(14 / var(--font-size) * 1rem);
      }
      .solution-cta-item-btn {
        margin-inline: auto;
        width: 100%;
      }
      .c-btn {
        --btn-bg-color: linear-gradient(to right, #76c1e4, #2769a2 50%, #76c1e4 100%);
        .c-btn-ico {
          margin-left: calc(48 / var(--font-size) * 1rem);
        }
      }
      &.--secondary {
        &::before {
          background: var(--secondary-grd--90);
        }
        .solution-cta-item-title {
          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;
          min-height: calc(48 / var(--font-size) * 1rem);
          color: var(--secondary-color-1000);
        }
        .c-btn {
          --btn-bg-color: linear-gradient(to right, var(--secondary-color-500), var(--secondary-color-1000) 50%, var(--secondary-color-500));
          .c-btn-ico {
            margin-left: calc(32 / var(--font-size) * 1rem);
          }
          .c-btn-txt {
            line-height: 1.5;
            text-align: center;
          }
        }
      }
    }
    .solution-cta-item__in {
      background: var(--white-color);
    }

    /* achieve */
    .service .achieve {
      padding-inline: 0;
      container-type: inline-size;
      .l-section__in {
        padding-block: calc(56 / 1312 * 100cqi) calc(32 / 1312 * 100cqi);
        padding-inline: calc(124 / 1312 * 100cqi);
        &::before {
          border-top-left-radius: calc(150 / 1312 * 100cqi);
          border-bottom-right-radius: calc(150 / 1312 * 100cqi);
          opacity: 0;
          -webkit-transform: translateY(3rem);
                  transform: translateY(3rem);
          -webkit-transition: 0.8s;
          transition: 0.8s;
        }
      }
      .l-section__body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        gap: calc(40 / 1228 * 100cqi);
      }
      &.is-fadeUp-active .l-section__in::before {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
      }
      /* achieve-detail */
      .achieve-detail {
        margin-top: 0;
        .l-block__head {
          display: inline-block;
          margin-bottom: calc(40 / 1228 * 100cqi);
          .c-heading {
            --heading-font-color: var(--primary-color-500);
            --heading-line-height: 1.66875;
            margin-inline: auto;
            position: relative;
            -webkit-text-fill-color: var(--heading-font-color);
            .c-heading__label {
              font-weight: 400;
              font-size: calc(40 / 1228 * 100cqi);
            }
            & small {
              display: block;
              font-size: calc(16 / 1228 * 100cqi);
              letter-spacing: 0.1em;
              font-weight: 400;
            }
          }
        }
      }
      .achieve-detail-title {
      }
      .achieve-detail-title__label {
        display: inline-block;
        font-size: calc(26.56 / 1228 * 100cqi);
        line-height: 1;
        color: var(--primary-color-500);
        letter-spacing: 0.1em;
        font-weight: 500;
      }
      .achieve-detail-number {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
      }
      .achieve-detail-number__label {
        display: inline-block;
        font-family: var(--ff-en);
        letter-spacing: 0.08em;
        font-weight: 500;
        font-size: calc(100 / 1228 * 100cqi);
        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 / 1228 * 100cqi);
          letter-spacing: 0.1em;
        }
      }
      .achieve-detail.--02 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        position: relative;
        padding-top: calc(24 / var(--font-size) * 1rem);
        .l-block__content {
          margin-top: 0;
          height: 100%;
        }
        .l-block__content + .l-block__content {
          margin-left: calc(56 / 1228 * 100cqi);
          .achieve-detail-title {
            margin-bottom: calc(19 / var(--font-size) * 1rem);
          }
        }
        .l-block__head {
          position: absolute;
          left: calc(-32 / var(--font-size) * 1rem);
          bottom: calc(38 / 1228 * 100cqi);
          -webkit-transform: translateX(-100%);
                  transform: translateX(-100%);
          background: -webkit-gradient(linear, left top, right top, from(#5c9ed2), to(#20409c));
          background: linear-gradient(to right, #5c9ed2, #20409c);
          padding-right: calc(16 / 1228 * 100cqi);
          height: calc(85 / 1228 * 100cqi);
          margin-bottom: 0;
          clip-path: polygon(80% 0, 100% 50%, 80% 100%, 0 100%, 0 0);
          .c-heading {
            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;
            --heading-font-family: var(--ff-jp);
            --heading-font-color: var(--white-color);
            margin-inline: auto;
            .c-heading__label {
              padding-block: calc(8 / 1228 * 100cqi);
              padding-inline: calc(8 / 1228 * 100cqi);
              font-weight: 400;
              font-size: calc(20 / 1228 * 100cqi);
            }
          }
        }
        .achieve-detail-title {
          background: var(--white-color);
          padding-block: calc(6 / 1228 * 100cqi);
          padding-inline: calc(6 / 1228 * 100cqi);
          min-width: calc(146 / 1228 * 100cqi);
          text-align: center;
          margin-bottom: calc(24 / 1228 * 100cqi);
        }
        .achieve-detail-title__label {
          font-size: calc(20 / 1228 * 100cqi);
        }
        .achieve-detail-number-chart {
          width: calc(218 / 1228 * 100cqi);
        }
      }
      .l-block__content:last-child {
        .achieve-detail-number-chart {
          width: calc(209 / 1228 * 100cqi);
        }
      }
    }

    /* feature */
    .service .feature {
      padding-inline: 0;
      .l-block__head {
        margin-bottom: calc(24 / var(--font-size) * 1rem);
      }
      .feature-group {
        /* コンテナ */
        container-type: inline-size;
      }
      .feature-group__in {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-column-gap: calc(56 / var(--font-size) * 1rem);
           -moz-column-gap: calc(56 / var(--font-size) * 1rem);
                column-gap: calc(56 / var(--font-size) * 1rem);
        row-gap: calc(24 / var(--font-size) * 1rem);
      }
      .feature-group:nth-child(2n) .feature-group__in {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
      }
      .feature-group + .feature-group {
        margin-top: calc(124 / var(--font-size) * 1rem);
      }
      .feature-group__head {
        -ms-flex-negative: 0;
            flex-shrink: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: calc(24 / var(--font-size) * 1rem);
        padding-left: calc(24 / var(--font-size) * 1rem);
      }
      .feature-group-num__label {
        font-family: var(--ff-en);
        font-weight: 200;
        font-style: italic;
        font-size: calc(100.66 / var(--font-size) * 1rem);
        letter-spacing: 0.1em;
        line-height: 1;
        background: -webkit-gradient(linear, left top, right top, from(#76c1e4), to(var(--primary-color-500)));
        background: linear-gradient(to right, #76c1e4, var(--primary-color-500));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .feature-group-title {
        color: var(--primary-color-500);
        & small {
          font-size: calc(14 / var(--font-size) * 1rem);
          line-height: 2.2857142857;
          letter-spacing: 0.1em;
        }
      }
      .feature-group-title__label {
        font-size: calc(36 / var(--font-size) * 1rem);
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.1em;
      }
      .feature-group-title__lead {
        display: block;
        margin-top: calc(6 / var(--font-size) * 1rem);
        font-size: calc(26 / var(--font-size) * 1rem);
        line-height: 1.5857692308;
        letter-spacing: 0.1em;
      }
      .feature-group__visual {
        max-width: calc(447 / var(--font-size) * 1rem);
      }
      .feature-cta {
        margin-top: calc(160 / var(--font-size) * 1rem);
      }
    }
    .feature-cta {
      max-width: calc(720 / var(--font-size) * 1rem);
      margin-inline: auto;
      padding-block: calc(30 / var(--font-size) * 1rem);
      position: relative;
      &::before,
      &::after {
        position: absolute;
        content: '';
        background-image: url(/assets/img/service/img_feature-cta01.png);
        background-size: contain;
        background-repeat: no-repeat;
      }
      &::before {
        bottom: calc(16 / var(--font-size) * 1rem);
        left: 0;
        width: calc(135 / var(--font-size) * 1rem);
        aspect-ratio: 135/97;
        z-index: 1;
      }
      &::after {
        top: calc(24 / var(--font-size) * 1rem);
        left: 0;
        -webkit-transform: translateX(50%);
                transform: translateX(50%);
        background-image: url(/assets/img/service/img_feature-cta02.png);
        width: calc(108 / var(--font-size) * 1rem);
        aspect-ratio: 108/78;
        z-index: 0;
      }
      .l-block__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;
        position: relative;
        &::before,
        &::after {
          position: absolute;
          content: '';
          background-image: url(/assets/img/service/img_feature-cta03.png);
          background-size: contain;
          background-repeat: no-repeat;
        }
        &::before {
          bottom: calc(-16 / var(--font-size) * 1rem);
          right: 0;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
          width: calc(124 / var(--font-size) * 1rem);
          aspect-ratio: 124/90;
          z-index: 1;
        }
        &::after {
          top: 0;
          right: 0;
          background-image: url(/assets/img/service/img_feature-cta04.png);
          width: calc(158 / var(--font-size) * 1rem);
          aspect-ratio: 158/115;
          z-index: 0;
        }
      }
      .c-txt {
        --txt-letter-spacing: 0.1em;
        --txt-font-color: var(--primary-color-500);
        line-height: 3.7083333333;
        font-weight: 500;
      }
      .c-btn-wrapper {
        max-width: calc(256 / var(--font-size) * 1rem);
        .c-btn {
          --btn-font-size: 16.63;
          --btn-letter-spacing: 0.16;
        }
      }
    }

    /* flow */
    .service .flow {
      padding-inline: 0;
      .l-block__head {
        margin-bottom: calc(40 / var(--font-size) * 1rem);
        .c-heading {
          margin-bottom: calc(16 / var(--font-size) * 1rem);
        }
        .c-txt {
          --txt-letter-spacing: 0.1em;
        }
      }
      .flow-tab-list-item__in {
        text-align: center;
        padding-block: calc(4 / var(--font-size) * 1rem);
        padding-inline: calc(16 / var(--font-size) * 1rem);
      }
      .flow-tab-container {
        background: var(--white-color);
      }
      .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-inline: calc(62 / 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: var(--primary-color-600);
        }
      }
      .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;
        background: var(--white-color);
        & 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;
        }
      }
    }
    /* その他のサービス一覧 */
    .service .flow-services {
      margin-top: calc(80 / var(--font-size) * 1rem);
      .flow-services__head {
        background-color: #d2e3ef;
        padding-block: calc(14 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
        padding-inline: calc(32 / var(--font-size) * 1rem);
      }
      .flow-services-heading {
        text-align: center;
        font-size: calc(22 / var(--font-size) * 1rem);
        letter-spacing: 0.1em;
        line-height: 1.5454545455;
        font-weight: 500;
        color: var(--primary-color-500);
      }
      .flow-services-heading > small {
        display: block;
        font-size: calc(15 / var(--font-size) * 1rem);
      }
      .flow-services__body {
        background-color: var(--white-color);
        padding-block: calc(24 / var(--font-size) * 1rem);
        padding-inline: calc(40 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);

        display: -ms-grid;

        display: grid;
        -ms-grid-columns: auto auto 1fr;
        grid-template-columns: auto auto 1fr;
        -webkit-column-gap: calc(24 / var(--font-size) * 1rem);
           -moz-column-gap: calc(24 / var(--font-size) * 1rem);
                column-gap: calc(24 / var(--font-size) * 1rem);
        row-gap: calc(56 / var(--font-size) * 1rem);
      }
      .flow-service-title {
        font-size: calc(18 / var(--font-size) * 1rem);
        font-weight: 500;
        color: var(--primary-color-500);
        line-height: 1.4222222222;
      }
      .flow-service-list {
        --list-font-size: 16;
        --list-line-height: 1.6;
      }
      .flow-service .c-list-item-text__label {
        letter-spacing: 0.1em;
      }
    }

    /* voice */
    .service .voice {
      padding-inline: 0;
      .l-block__head {
        margin-bottom: calc(56 / var(--font-size) * 1rem);
      }
      .c-voice-card {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }
      .c-voice-card-item {
        max-width: calc(560 / var(--font-size) * 1rem);
      }
      .c-voice-card-item__in {
        background: -webkit-gradient(linear, left top, right top, from(#b2d6ec), to(#daeaf4));
        background: linear-gradient(to right, #b2d6ec, #daeaf4);
      }
      .c-voice-card-item-content {
        padding-top: calc(32 / var(--font-size) * 1rem);
      }
      .c-voice-card-item-content-title {
        min-height: calc(56 / var(--font-size) * 1rem);
        padding-right: calc(24 / var(--font-size) * 1rem);
      }
      .c-voice-card-item-content-title__label {
        --txt-font-color: #171819;
        --txt-font-size: 24;
      }
      .c-voice-card-item-content-lead {
      }
      .c-voice-card-item-content-lead__label {
        --txt-font-color: #171819;
      }
      .c-voice-card-item-content-lead__label strong {
        display: block;
        font-weight: 500;
      }
    }

    /* faq */
    .service .faq {
      padding-inline: 0;
      .l-block__head {
        margin-bottom: calc(48 / var(--font-size) * 1rem);
      }
    }
  }
  @media all and (width < 80rem) {
    .service .feature {
      .feature-group-list {
      }
      .feature-group__head {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1/3;
      }
      .feature-group__visual {
        -ms-grid-row: 2;
        grid-row: 2;
        -ms-grid-row-align: start;
            align-self: start;
      }
      .feature-group-title {
      }
      .feature-group-title__label {
        font-size: calc(32 / var(--font-size) * 1rem);
      }
    }
    .service .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::before {
        content: '';
        position: absolute;
        height: calc(100% - calc(40 / var(--font-size) * 1rem));
        width: calc(2 / var(--font-size) * 1rem);
        left: calc(28 / var(--font-size) * 1rem);
        background: var(--primary-color-500);
        top: calc(12 / var(--font-size) * 1rem);
        -webkit-transform: none;
                transform: none;
      }
      .flow-step::after {
        content: '';
        position: absolute;
        width: calc(28 / var(--font-size) * 1rem);
        height: calc(30 / var(--font-size) * 1rem);
        left: calc(29 / var(--font-size) * 1rem);
        bottom: calc(26 / 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;
        }
      }
      .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(1 / var(--font-size) * 1rem);
          left: 0.5em;
          top: calc(-24 / var(--font-size) * 1rem);
          -webkit-transform: none;
                  transform: none;
        }
      }
      .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 {
      .intro {
        .intro-case {
          .intro-bubble {
            .intro-bubble-text {
              & small {
                font-size: calc(12 / var(--font-size) * 1rem);
              }
            }
          }
        }
        .intro-solution {
          .solution-cta-item {
            .solution-cta-item__in {
              padding-inline: calc(24 / var(--font-size) * 1rem);
            }
          }
        }
      }

      .voice {
        .c-voice-card {
          -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;
        }
      }
    }
  }
  @media all and (width < 48rem) {
    .service {
      .l-container {
        max-width: calc(1228 / var(--font-size) * 1rem);
      }
      .page-hero::before {
        background-image: url(/assets/img/service/bg_page-hero.png);
        background-image: url(/assets/img/service/bg_page-hero.webp);
        background-image: url(/assets/img/service/bg_page-hero.avif);
      }
      .l-section__head {
        margin-bottom: calc(8 / var(--font-size) * 1rem);
        .c-heading {
          --heading-font-size: 26;
          --heading-letter-spacing: 100;
          --heading-font-color: var(--primary-grd-v2--90);
          padding-bottom: 0;
          padding-right: calc(8 / var(--font-size) * 1rem);
          &::before {
            width: calc(134 / var(--font-size) * 1rem);
            left: auto;
            right: 0;
            bottom: calc(50% - calc(5 / var(--font-size) * 1rem));
            -webkit-transform: translate(100%, 50%);
                    transform: translate(100%, 50%);
            background: var(--primary-color-200);
          }
        }
      }
    }
    /* intro */
    .service .intro {
      .l-block__content .c-txt {
        --txt-line-height: 2;
        --txt-letter-spacing: 0.08em;
        text-align: center;
        & strong {
          font-weight: 500;
        }
      }
      .intro-case {
        .l-block__head {
          width: -webkit-fit-content;
          width: -moz-fit-content;
          width: fit-content;
          margin-inline: auto;
          padding-inline: calc(40 / var(--font-size) * 1rem);
          padding-block: calc(16 / var(--font-size) * 1rem);
          position: relative;
          margin-bottom: calc(21 / var(--font-size) * 1rem);
          &::before,
          &::after {
            content: '';
            aspect-ratio: 50/40;
            width: calc(50 / var(--font-size) * 1rem);
            position: absolute;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url(/assets/img/service/ico_quotation.svg);
          }
          &::before {
            top: 0;
            left: 0;
          }
          &::after {
            right: 0;
            bottom: 0;
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg);
          }
        }
      }
      .intro-bubble-list {
        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(6 / var(--font-size) * 1rem);
        margin-inline: auto;
        margin-block: calc(24 / var(--font-size) * 1rem);
      }
      .intro-bubble {
        position: relative;
        height: calc(129 / var(--font-size) * 1rem);
        aspect-ratio: 220/258;
        -webkit-mask-image: url(/assets/img/service/ico_bubble-left_sp.svg);
                mask-image: url(/assets/img/service/ico_bubble-left_sp.svg);
        -webkit-mask-size: contain;
                mask-size: contain;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        background: -webkit-gradient(linear, left top, right top, from(#7ab7d5), to(#3d5aa1));
        background: linear-gradient(to right, #7ab7d5, #3d5aa1);
        background-size: 300% 100%;
        background-position: left;
        /* コンテナ */
        container-type: inline-size;

        .intro-bubble__in {
          padding-block: calc(12 / var(--font-size) * 1rem);
          padding-inline: calc(8 / 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;
        }
        .intro-bubble-text {
          font-size: calc(14 / var(--font-size) * 1rem);
          font-weight: bold;
          line-height: 1.5;
          letter-spacing: 0.08em;
          color: var(--white-color);
          text-align: center;
          & small {
            display: block;
            font-size: calc(12 / var(--font-size) * 1rem);
            line-height: 1.25;
            letter-spacing: 0.05em;
          }
        }

        &.--01 {
        }

        &.--02 {
          -webkit-mask-image: url(/assets/img/service/ico_bubble-center_sp.svg);
                  mask-image: url(/assets/img/service/ico_bubble-center_sp.svg);
          background-position: center;
        }
        &.--03 {
          -webkit-mask-image: url(/assets/img/service/ico_bubble-right_sp.svg);
                  mask-image: url(/assets/img/service/ico_bubble-right_sp.svg);
          background-position: right;

          .intro-bubble__in {
            padding-block: calc(24 / var(--font-size) * 1rem);
          }
        }
      }
      .intro-solution {
        .c-heading {
          text-align: center;
          margin-inline: auto;
          --heading-font-family: var(--ff-jp);
          --heading-font-size: 18;
          --heading-letter-spacing: 80;
          & strong {
            font-size: calc(26 / var(--font-size) * 1rem);
            font-weight: 500;
          }
        }
      }
    }
    .solution-cta {
      margin-top: calc(40 / var(--font-size) * 1rem);
      .solution-cta-item {
        /* コンテナ */
        container-type: inline-size;
        width: 100%;
        height: auto;
        position: relative;
        -webkit-box-shadow: 0 0 calc(30 / var(--font-size) * 1rem) calc(3 / var(--font-size) * 1rem) rgba(222, 237, 245, 0.45);
                box-shadow: 0 0 calc(30 / var(--font-size) * 1rem) calc(3 / var(--font-size) * 1rem) rgba(222, 237, 245, 0.45);
      }
      .solution-cta-item + .solution-cta-item {
        margin-top: calc(16 / var(--font-size) * 1rem);
      }
      .solution-cta-item::before {
        content: '';
        position: absolute;
        width: 100%;
        height: calc(2 / var(--font-size) * 1rem);
        background: var(--primary-grd-v2--90);
      }
      .solution-cta-item .c-btn {
        --btn-min-height: 54;
        --btn-font-size: 15.8;
        --btn-px: 20;
        --btn-ico-size-x: 20;
        --btn-ico-size-y: 26;
        --btn-bg-color: linear-gradient(to right, #76c1e4, #2769a2 50%, #76c1e4 100%);
      }
      .solution-cta-item .c-btn--contact .c-btn-ico {
        margin-left: calc(40 / var(--font-size) * 1rem);
      }
      .solution-cta-item .c-btn--download .c-btn-ico {
        margin-left: calc(24 / var(--font-size) * 1rem);
      }
      .solution-cta-item.--secondary {
        &::before {
          background: var(--secondary-grd--90);
        }
        .solution-cta-item-title {
          color: var(--secondary-color-1000);
        }
        .c-btn {
          --btn-bg-color: linear-gradient(to right, var(--secondary-color-500), var(--secondary-color-1000) 50%, var(--secondary-color-500));
        }
      }
      .solution-cta-item__in {
        background: var(--white-color);
        padding-block: calc(16 / var(--font-size) * 1rem) calc(23 / var(--font-size) * 1rem);
        padding-inline: calc(32 / var(--font-size) * 1rem);
        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;
        gap: calc(24 / var(--font-size) * 1rem);
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
      }
      .solution-cta-item-title {
        font-size: calc(16 / var(--font-size) * 1rem);
        line-height: 1.7;
        letter-spacing: 0.08em;
        text-align: center;
        font-weight: 500;
        color: var(--primary-color-300);
      }
      .solution-cta-item-lead {
        margin-top: calc(16 / var(--font-size) * 1rem);
      }
      .solution-cta-item-lead__label {
        text-align: center;
        line-height: 1.5;
        font-size: calc(12 / var(--font-size) * 1rem);
        letter-spacing: 0.08em;
      }
      .solution-cta-item-btn {
        margin-inline: auto;
        width: 100%;
      }
    }

    /* achieve */
    .service .achieve {
      padding-inline: 0;
      container-type: inline-size;
      .l-section__in {
        padding-block: calc(44 / var(--font-size) * 1rem) calc(32 / var(--font-size) * 1rem);
        padding-inline: calc(16 / var(--font-size) * 1rem);
        &::before {
          border-top-left-radius: calc(75 / var(--font-size) * 1rem);
          border-bottom-right-radius: calc(75 / var(--font-size) * 1rem);
          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-section__body {
        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;
      }
      /* achieve-detail */
      .achieve-detail {
        margin-top: 0;
        .l-block__head {
          display: inline-block;
          .c-heading {
            --heading-letter-spacing: 0;
            --heading-font-color: var(--primary-color-500);
            --heading-line-height: 1.66875;
            margin-inline: auto;
            position: relative;
            background: transparent;
            -webkit-background-clip: border-box;
            -webkit-text-fill-color: var(--heading-font-color);
            .c-heading__label {
              font-size: calc(30 / var(--font-size) * 1rem);
            }
            & small {
              font-size: calc(10 / var(--font-size) * 1rem);
              display: block;
              letter-spacing: 0.08em;
              font-weight: 400;
            }
          }
        }
      }
      .achieve-detail-title {
      }
      .achieve-detail-title__label {
        text-align: right;
        display: inline-block;
        font-size: calc(18 / var(--font-size) * 1rem);
        line-height: 1.5;
        color: var(--primary-color-500);
        letter-spacing: 0.08em;
        font-weight: 500;
      }
      .achieve-detail-number {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
      }
      .achieve-detail-number__label {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: baseline;
            -ms-flex-align: baseline;
                align-items: baseline;
        line-height: 1;
        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: 8.2em;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        & small {
          font-family: var(--ff-jp);
          font-weight: 500;
          font-size: calc(30 / var(--font-size) * 1rem);
          letter-spacing: 0.1em;
        }
      }
      .achieve-detail.--01 .l-block__content {
        margin-top: calc(24 / var(--font-size) * 1rem);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: baseline;
            -ms-flex-align: baseline;
                align-items: baseline;
        gap: calc(8 / var(--font-size) * 1rem);
      }
      .achieve-detail.--02 {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        position: relative;
        padding-top: calc(24 / var(--font-size) * 1rem);
        .l-block__content {
          margin-top: 0;
          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;
        }
        .l-block__content + .l-block__content {
          margin-left: calc(20 / var(--font-size) * 1rem);
          .achieve-detail-title {
            margin-bottom: calc(13 / var(--font-size) * 1rem);
          }
        }
        .l-block__head {
          width: calc(180 / var(--font-size) * 1rem);
          -ms-grid-column: 1;
          -ms-grid-column-span: 2;
          grid-column: 1/3;
          background: -webkit-gradient(linear, left top, right top, from(#5c9ed2), to(#20409c));
          background: linear-gradient(to right, #5c9ed2, #20409c);
          margin-bottom: calc(24 / var(--font-size) * 1rem);
          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);
          .c-heading {
            padding-inline: calc(8 / var(--font-size) * 1rem) calc(0 / 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;
            text-align: center;
            --heading-font-family: var(--ff-jp);
            --heading-font-color: var(--white-color);
            --heading-letter-spacing: 100;
            .c-heading__label {
              font-weight: 400;
              font-size: calc(16 / var(--font-size) * 1rem);
            }
            & small {
              display: inline;
              font-size: calc(12.8 / var(--font-size) * 1rem);
            }
          }
        }
        .achieve-detail-title {
          text-align: center;
          margin-bottom: calc(15 / var(--font-size) * 1rem);
        }
        .achieve-detail-title__label {
          background: var(--white-color);
          padding-block: calc(2 / var(--font-size) * 1rem);
          padding-inline: calc(4 / var(--font-size) * 1rem);
          font-size: calc(13 / var(--font-size) * 1rem);
        }
        .achieve-detail-number-chart {
          height: calc(132 / var(--font-size) * 1rem);
        }
      }
      .l-block__content:last-child {
        .achieve-detail-number-chart {
          height: calc(134 / var(--font-size) * 1rem);
        }
      }
    }

    /* feature */
    .service .feature {
      padding-inline: 0;
      .l-block__head {
        margin-bottom: calc(32 / var(--font-size) * 1rem);
      }
      .feature-group {
        /* コンテナ */
        container-type: inline-size;
      }
      .feature-group__in {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: calc(32 / var(--font-size) * 1rem);
      }
      .feature-group + .feature-group {
        margin-top: calc(52 / var(--font-size) * 1rem);
      }
      .feature-group__head {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: calc(12 / var(--font-size) * 1rem);
        margin-left: calc(-8 / var(--font-size) * 1rem);
      }
      .feature-group-num__label {
        font-family: var(--ff-en);
        font-weight: 200;
        font-style: italic;
        font-size: calc(70 / var(--font-size) * 1rem);
        letter-spacing: 0.08em;
        line-height: 0.9;
        background: -webkit-gradient(linear, left top, right top, from(#76c1e4), to(var(--primary-color-500)));
        background: linear-gradient(to right, #76c1e4, var(--primary-color-500));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .feature-group-title {
        color: var(--primary-color-500);
        & small {
          font-size: calc(10 / var(--font-size) * 1rem);
          line-height: 1;
          letter-spacing: 0.08em;
        }
      }
      .feature-group-title__label {
        font-size: calc(22 / var(--font-size) * 1rem);
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.06em;
      }
      .feature-group-title__lead {
        display: block;
        font-size: calc(16 / var(--font-size) * 1rem);
        line-height: 1.8;
        letter-spacing: 0.06em;
      }

      .feature-group-lead {
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
      }
      .feature-group-lead__label {
        --txt-line-height: 2;
        --txt-letter-spacing: 0.08em;
      }
      .feature-group__visual {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
      }
      .feature-cta {
        margin-top: calc(88 / var(--font-size) * 1rem);
      }
    }
    .feature-cta {
      max-width: calc(343 / var(--font-size) * 1rem);
      margin-inline: auto;
      padding-top: calc(112 / var(--font-size) * 1rem);
      position: relative;
      &::before,
      &::after {
        position: absolute;
        content: '';
        background-image: url(/assets/img/service/img_feature-cta01.png);
        background-size: contain;
        background-repeat: no-repeat;
      }
      &::before {
        top: calc(17 / var(--font-size) * 1rem);
        left: 0;
        width: calc(110 / var(--font-size) * 1rem);
        aspect-ratio: 135/97;
        z-index: 0;
      }
      &::after {
        top: 0;
        left: calc(95 / var(--font-size) * 1rem);
        background-image: url(/assets/img/service/img_feature-cta02.png);
        width: calc(100 / var(--font-size) * 1rem);
        aspect-ratio: 108/78;
        z-index: 1;
      }
      .l-block__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;
        position: relative;
        &::before,
        &::after {
          position: absolute;
          content: '';
          background-image: url(/assets/img/service/img_feature-cta03.png);
          background-size: contain;
          background-repeat: no-repeat;
        }
        &::before {
          top: calc(-100% + calc(54 / var(--font-size) * 1rem));
          right: calc(83 / var(--font-size) * 1rem);
          width: calc(90 / var(--font-size) * 1rem);
          aspect-ratio: 124/90;
          z-index: 1;
        }
        &::after {
          top: -100%;
          right: 0;
          background-image: url(/assets/img/service/img_feature-cta04.png);
          width: calc(110 / var(--font-size) * 1rem);
          aspect-ratio: 158/115;
          z-index: 0;
        }
      }
      .c-txt {
        --txt-letter-spacing: 0.1em;
        --txt-font-color: var(--primary-color-500);
        line-height: 3.7083333333;
        font-weight: 500;
      }
      .c-btn-wrapper {
        max-width: calc(220 / var(--font-size) * 1rem);
        .c-btn {
          --btn-font-size: 15;
          --btn-letter-spacing: 0.16;
        }
      }
    }
    .service .feature + .l-service-contact {
      margin-top: calc(32 / var(--font-size) * 1rem);
    }

    /* flow */
    .service .flow {
      padding-inline: 0;
      .l-block__head {
        margin-bottom: calc(40 / var(--font-size) * 1rem);
        .c-heading {
          margin-bottom: calc(16 / var(--font-size) * 1rem);
        }
        .c-txt {
          --txt-letter-spacing: 0.1em;
        }
      }
      .flow-tab-container {
        background: var(--white-color);
      }
      .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(32 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
        &.--listed {
          --flow-steps: 4;
        }
      }
      .flow-step::before {
        content: '';
        position: absolute;
        height: calc(100% - calc(40 / var(--font-size) * 1rem));
        width: calc(1 / var(--font-size) * 1rem);
        left: calc(16 / var(--font-size) * 1rem);
        background: var(--primary-color-500);
        top: calc(12 / var(--font-size) * 1rem);
        -webkit-transform: none;
                transform: none;
      }
      .flow-step::after {
        content: '';
        position: absolute;
        width: calc(18 / var(--font-size) * 1rem);
        height: calc(20 / var(--font-size) * 1rem);
        left: calc(16.5 / var(--font-size) * 1rem);
        bottom: calc(26 / 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;
        }
      }
      .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);
        background: var(--white-color);
        & 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;
        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;
      }
    }
    /* その他のサービス一覧 */
    .service .flow-services {
      margin-top: calc(54 / var(--font-size) * 1rem);
      .flow-services__head {
        background-color: #d2e3ef;
        padding-block: calc(12 / var(--font-size) * 1rem) calc(14 / var(--font-size) * 1rem);
        padding-inline: calc(16 / var(--font-size) * 1rem);
      }
      .flow-services-heading {
        text-align: center;
        font-size: calc(18 / var(--font-size) * 1rem);
        letter-spacing: 0.08em;
        line-height: 1.8;
        font-weight: 500;
        color: var(--primary-color-500);
      }
      .flow-services-heading > small {
        display: block;
        font-size: calc(12 / var(--font-size) * 1rem);
      }
      .flow-services__body {
        background-color: var(--white-color);
        padding-block: calc(16 / var(--font-size) * 1rem);
        padding-inline: calc(24 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
      }
      .flow-service-content + .flow-service-content {
        margin-top: calc(14 / var(--font-size) * 1rem);
      }
      .flow-service-title {
        font-size: calc(16 / var(--font-size) * 1rem);
        font-weight: 500;
        color: var(--primary-color-500);
        line-height: 1.4222222222;
      }
      .flow-service-list {
        --list-font-size: 13;
        --list-line-height: 1.6;
      }
      .flow-service .c-list-item-text__label {
        letter-spacing: 0.08em;
      }
    }

    /* voice */
    .service .voice {
      padding-inline: 0;
      .l-block__head {
        margin-bottom: calc(56 / var(--font-size) * 1rem);
      }
      .c-voice-card {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }
      .c-voice-card-item {
        max-width: calc(560 / var(--font-size) * 1rem);
      }
      .c-voice-card-item__in {
        background: -webkit-gradient(linear, left top, right top, from(#b2d6ec), to(#daeaf4));
        background: linear-gradient(to right, #b2d6ec, #daeaf4);
      }
      .c-voice-card-item-content {
        padding-top: calc(20 / var(--font-size) * 1rem);
      }
      .c-voice-card-item-content-title {
        min-height: calc(48 / var(--font-size) * 1rem);
        padding-right: calc(24 / var(--font-size) * 1rem);
      }
      .c-voice-card-item-content-title__label {
        --txt-font-color: #171819;
        --txt-font-size: 18;
      }
      .c-voice-card-item-content-lead {
      }
      .c-voice-card-item-content-lead__label {
        --txt-font-color: #171819;
      }
      .c-voice-card-item-content-lead__label strong {
        display: block;
        font-weight: 500;
      }
    }

    /* faq */
    .service .faq {
      padding-inline: 0;
      .l-block__head {
        margin-bottom: calc(48 / var(--font-size) * 1rem);
      }
    }
  }
}

/* ==========================================================================
  CASESTUDY
========================================================================== */
@layer page {
  @media all and (width >= 48rem) {
    .casestudy .l-container {
      max-width: none;
    }
    .casestudy .l-section {
      padding-inline: 0;
    }
    .casestudy .l-section__in {
      max-width: calc(1214 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    .casestudy .l-section__head {
      margin-bottom: calc(32 / var(--font-size) * 1rem);
    }
    .casestudy .l-section__head .c-heading,
    .casestudy .l-section__head .c-heading {
      --heading-font-family: var(--ff-jp);
      --heading-font-size: 30;
      --heading-line-height: 2.3333333333;
      --heading-letter-spacing: 100;
      position: relative;
      padding-left: calc(24 / var(--font-size) * 1rem);
    }
    .casestudy .l-section__head .c-heading::before {
      position: absolute;
      content: '';
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      height: calc(40 / var(--font-size) * 1rem);
      width: calc(4 / var(--font-size) * 1rem);
      background: var(--primary-color-500);
    }
    .casestudy-list__item {
      position: relative;
    }
    .casestudy-list__item + .casestudy-list__item {
      margin-top: calc(40 / var(--font-size) * 1rem);
    }
    .casestudy-list__in {
      position: relative;
      padding: calc(36 / var(--font-size) * 1rem);
    }
    .casestudy-list__in::before,
    .casestudy-list__in::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-bottom-right-radius: calc(50 / var(--font-size) * 1rem);
      pointer-events: none;
    }
    .casestudy-list__in::before {
      background-color: var(--white-color);
      z-index: -1;
    }
    .casestudy-list__in::after {
      background: rgba(99, 161, 218, 0.16);
      -webkit-filter: blur(calc(50 / var(--font-size) * 1rem));
              filter: blur(calc(50 / var(--font-size) * 1rem));
      mix-blend-mode: multiply;
      z-index: -2;
      opacity: 1;
      -webkit-transition: 0.25s opacity;
      transition: 0.25s opacity;
    }
    .casestudy-list__link:hover .casestudy-list__in::after {
      opacity: 0;
    }
    .casestudy-list__content {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: calc(239 / var(--font-size) * 1rem) auto;
      grid-template-columns: calc(239 / var(--font-size) * 1rem) auto;
      -ms-grid-rows: (auto)[3];
      grid-template-rows: repeat(3, auto);
      -webkit-column-gap: calc(32 / var(--font-size) * 1rem);
         -moz-column-gap: calc(32 / var(--font-size) * 1rem);
              column-gap: calc(32 / var(--font-size) * 1rem);
    }
    .casestudy-list__img {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 1;
      -ms-grid-row-span: 3;
      grid-row: 1 / 4;
      -ms-grid-row-align: center;
          align-self: center;
    }
    .casestudy-list__tag {
      -ms-grid-column: 2;
      -ms-grid-column-span: 1;
      grid-column: 2 / 3;
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
      grid-row: 1 / 2;
      margin-bottom: calc(16 / var(--font-size) * 1rem);
    }
    .casestudy-list__tag-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      gap: calc(10 / var(--font-size) * 1rem);
    }
    .casestudy-list__tag-item {
      background-color: #dbe8ef;
    }
    .casestudy-list__tag-in {
      padding: calc(4 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    }
    .casestudy-list__tag-label {
      font-size: calc(13 / var(--font-size) * 1rem);
    }
    .casestudy-list__heading {
      -ms-grid-column: 2;
      -ms-grid-column-span: 1;
      grid-column: 2 / 3;
      -ms-grid-row: 2;
      -ms-grid-row-span: 1;
      grid-row: 2 / 3;
    }
    .casestudy-list__heading-label {
      font-size: calc(24 / var(--font-size) * 1rem);
      line-height: 1.6;
      font-weight: 500;
    }
    .casestudy-list__customer {
      -ms-grid-column: 2;
      -ms-grid-column-span: 1;
      grid-column: 2 / 3;
      -ms-grid-row: 3;
      -ms-grid-row-span: 1;
      grid-row: 3 / 4;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-top: calc(32 / var(--font-size) * 1rem);
      padding-right: calc(72 / var(--font-size) * 1rem);
    }
    .casestudy-list__customer-content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: calc(12 / var(--font-size) * 1rem);
    }
    .casestudy-list__customer-seller {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      max-width: calc(339 / var(--font-size) * 1rem);
    }
    .casestudy-list__customer-seller-title {
      position: relative;
      font-size: calc(14 / var(--font-size) * 1rem);
      color: #2585d7;
      font-weight: 600;
      margin-right: calc(20 / var(--font-size) * 1rem);
      padding-right: calc(15 / var(--font-size) * 1rem);
      padding-top: calc(3 / var(--font-size) * 1rem);
      -ms-flex-negative: 0;
          flex-shrink: 0;
    }
    .casestudy-list__customer-seller-label {
      font-size: calc(15 / var(--font-size) * 1rem);
      color: #2585d7;
      font-weight: 500;
      padding-top: calc(2 / var(--font-size) * 1rem);
    }
    .casestudy-list__customer-seller-title::after {
      content: '';
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      right: 0;
      width: calc(1 / var(--font-size) * 1rem);
      height: calc(100% - calc(6 / var(--font-size) * 1rem));
      background-color: #2585d7;
    }
    .casestudy-list__customer-icon__label {
      font-size: calc(20 / var(--font-size) * 1rem);
      line-height: 1;
      padding-top: calc(1 / var(--font-size) * 1rem);
    }
    .casestudy-list__customer-buyer {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .casestudy-list__customer-icon + .casestudy-list__customer-buyer {
      max-width: calc(339 / var(--font-size) * 1rem);
    }
    .casestudy-list__customer-buyer-title {
      position: relative;
      font-size: calc(14 / var(--font-size) * 1rem);
      color: #20409c;
      font-weight: 600;
      margin-right: calc(20 / var(--font-size) * 1rem);
      padding-right: calc(15 / var(--font-size) * 1rem);
      padding-top: calc(3 / var(--font-size) * 1rem);
      -ms-flex-negative: 0;
          flex-shrink: 0;
    }
    .casestudy-list__customer-buyer-title::after {
      content: '';
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      right: 0;
      width: calc(1 / var(--font-size) * 1rem);
      height: calc(100% - calc(6 / var(--font-size) * 1rem));
      background-color: #20409c;
    }
    .casestudy-list__customer-buyer-label {
      font-size: calc(15 / var(--font-size) * 1rem);
      color: #20409c;
      font-weight: 500;
      padding-top: calc(2 / var(--font-size) * 1rem);
    }
    .casestudy-list__arrow {
      position: absolute;
      bottom: 0;
      right: 0;
    }
    .casestudy-list__arrow::before {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      margin-right: calc(48 / var(--font-size) * 1rem);
      margin-bottom: calc(48 / var(--font-size) * 1rem);
      width: calc(48 / var(--font-size) * 1rem);
      height: calc(36 / var(--font-size) * 1rem);
      background-image: url('/assets/img/casestudy/ico_arrow.svg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    /* 動画セクション */
    .case-video {
      position: relative;
      margin-inline: calc(-64 / var(--font-size) * 1rem);
    }
    .case-video::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: rgba(227, 239, 245, 0.59);
      mix-blend-mode: multiply;
      z-index: -1;
      opacity: 0;
      -webkit-transform: translateY(3rem);
              transform: translateY(3rem);
      -webkit-transition: 0.8s;
      transition: 0.8s;
    }
    .case-video.is-fadeUp-active::before {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    .case-video .l-section__in {
      container-name: videoContainer;
      container-type: inline-size;
      padding-block: calc(40 / var(--font-size) * 1rem) calc(64 / var(--font-size) * 1rem);
    }
    .case-video-slider .splide__arrows {
      position: absolute;
      top: calc(-60 / var(--font-size) * 1rem);
      right: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: calc(24 / var(--font-size) * 1rem);
    }
    .case-video-slider .splide__arrow {
      pointer-events: none;
      position: static;
      background-color: #bdbfc1;
      opacity: 1;
      -webkit-mask-image: url(/assets/img/common/ico_btn-arrow.svg);
              mask-image: url(/assets/img/common/ico_btn-arrow.svg);
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      width: calc(49 / var(--font-size) * 1rem);
      height: calc(31 / var(--font-size) * 1rem);
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
      -webkit-transition: all 0.25s;
      transition: all 0.25s;
    }
    .case-video-slider.is-overflow .splide__arrow {
      pointer-events: auto;
      background-color: var(--primary-color-500);
    }
    .case-video-slider .splide__arrow--prev {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
    .case-video-track {
      overflow: visible !important;
    }
    .case-video-item {
      max-width: calc(384 / var(--font-size) * 1rem);
    }
    .case-video-title {
      margin-top: calc(8 / var(--font-size) * 1rem);
    }
    .case-video-title__label {
      font-size: calc(18 / var(--font-size) * 1rem);
      line-height: 1.6;
      font-weight: 500;
      letter-spacing: 0.1em;
    }
    .case-video-visual {
      position: relative;
      -webkit-transition: all 0.25s;
      transition: all 0.25s;
    }
    .case-video-visual::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      width: calc(54 / var(--font-size) * 1rem);
      height: calc(54 / var(--font-size) * 1rem);
      background-image: url(/assets/img/casestudy/ico_play.svg);
      background-size: contain;
      background-repeat: no-repeat;
    }
    .case-video-visual::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--white-color);
      opacity: 0;
      -webkit-transition: all 0.25s;
      transition: all 0.25s;
    }
    .case-video-item:hover .case-video-visual::after {
      opacity: 0.3;
    }

    /* モーダル */
    html.is-modal-active {
      overflow: hidden;
    }
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      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;
      z-index: 9999;
    }

    .modal-content {
      position: relative;
      background: white;
      padding-block: calc(48 / var(--font-size) * 1rem);
      padding-inline: calc(48 / var(--font-size) * 1rem);
      width: 100%;
      height: 90vh;
      height: 90dvh;
      max-width: calc(1080 / var(--font-size) * 1rem);
      max-height: calc(720 / var(--font-size) * 1rem);
      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;
    }

    .modal-close {
      position: absolute;
      top: calc(12 / var(--font-size) * 1rem);
      right: calc(16 / var(--font-size) * 1rem);
      background: none;
      border: none;
      font-size: calc(24 / var(--font-size) * 1rem);
      line-height: 1;
      cursor: pointer;
      z-index: 1;
      color: #333;
      width: calc(24 / var(--font-size) * 1rem);
      height: calc(24 / 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;
      -webkit-transition: background-color 0.2s;
      transition: background-color 0.2s;
    }

    .modal-close:hover {
      background-color: #f0f0f0;
    }

    #youtube-player {
      max-width: 100%;
      max-height: 100%;
    }
  }
  @container videoContainer (width < 75.875rem) {
    .case-video .l-section__head {
      padding-inline: calc(64 / var(--font-size) * 1rem);
    }
    .case-video-slider {
      padding-inline: calc(64 / var(--font-size) * 1rem);
    }
    .case-video-slider .splide__arrows {
      right: calc(48 / var(--font-size) * 1rem);
    }
  }
  @media all and (width < 64rem) {
    .casestudy-list__customer-content {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: calc(16.42 / var(--font-size) * 1rem) 1fr;
      grid-template-columns: calc(16.42 / var(--font-size) * 1rem) 1fr;
    }
    .casestudy-list__customer-seller {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1/3;
    }
    .case-video {
      margin-inline: calc(-48 / var(--font-size) * 1rem);
    }
    .case-video .l-section__head {
      padding-inline: calc(48 / var(--font-size) * 1rem);
    }
    .case-video-slider {
      padding-inline: calc(48 / var(--font-size) * 1rem);
    }
    .case-video-slider .splide__arrows {
    }
  }
  @media all and (width < 48rem) {
    .casestudy .l-container {
      max-width: none;
    }
    .casestudy .l-section {
      padding-inline: 0;
    }
    .casestudy .l-section__in {
      max-width: calc(1214 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    .casestudy .l-section__head,
    .casestudy .l-section__head {
      margin-bottom: calc(24 / var(--font-size) * 1rem);
    }
    .casestudy .l-section__head .c-heading,
    .casestudy .l-section__head .c-heading {
      --heading-font-family: var(--ff-jp);
      --heading-font-size: 20;
      --heading-line-height: 2.3333333333;
      --heading-letter-spacing: 80;
      position: relative;
      padding-left: calc(16 / var(--font-size) * 1rem);
    }
    .casestudy .l-section__head .c-heading::before {
      position: absolute;
      content: '';
      left: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      height: calc(24 / var(--font-size) * 1rem);
      width: calc(2 / var(--font-size) * 1rem);
      background: var(--primary-color-500);
    }
    .casestudy-list__item {
      position: relative;
    }
    .casestudy-list__item + .casestudy-list__item {
      margin-top: calc(40 / var(--font-size) * 1rem);
    }
    .casestudy-list__in {
      position: relative;
      padding-block: calc(16 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
      padding-inline: calc(16 / var(--font-size) * 1rem);
    }
    .casestudy-list__in::before,
    .casestudy-list__in::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-bottom-right-radius: calc(50 / var(--font-size) * 1rem);
      pointer-events: none;
    }
    .casestudy-list__in::before {
      background-color: var(--white-color);
      z-index: -1;
    }
    .casestudy-list__in::after {
      background: rgba(99, 161, 218, 0.16);
      -webkit-filter: blur(calc(50 / var(--font-size) * 1rem));
              filter: blur(calc(50 / var(--font-size) * 1rem));
      mix-blend-mode: multiply;
      z-index: -2;
      opacity: 1;
    }
    .casestudy-list__content {
    }
    .casestudy-list__img {
      margin-bottom: calc(24 / var(--font-size) * 1rem);
    }
    .casestudy-list__img img {
      width: 100%;
    }
    .casestudy-list__tag {
      margin-bottom: calc(16 / var(--font-size) * 1rem);
    }
    .casestudy-list__tag-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      gap: calc(12 / var(--font-size) * 1rem);
    }
    .casestudy-list__tag-item {
      background-color: #dbe8ef;
    }
    .casestudy-list__tag-in {
      padding: calc(2 / var(--font-size) * 1rem) calc(12 / var(--font-size) * 1rem);
    }
    .casestudy-list__tag-label {
      font-size: calc(12 / var(--font-size) * 1rem);
    }
    .casestudy-list__heading {
    }
    .casestudy-list__heading-label {
      font-size: calc(17 / var(--font-size) * 1rem);
      line-height: 1.6;
      font-weight: 500;
      letter-spacing: 0.06em;
    }
    .casestudy-list__customer {
      margin-top: calc(24 / var(--font-size) * 1rem);
      padding-right: calc(44 / var(--font-size) * 1rem);
    }
    .casestudy-list__customer-content {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: calc(16.42 / var(--font-size) * 1rem) 1fr;
      grid-template-columns: calc(16.42 / var(--font-size) * 1rem) 1fr;
      row-gap: calc(8 / var(--font-size) * 1rem);
      -webkit-column-gap: calc(12 / var(--font-size) * 1rem);
         -moz-column-gap: calc(12 / var(--font-size) * 1rem);
              column-gap: calc(12 / var(--font-size) * 1rem);
    }
    .casestudy-list__customer-content:not(:has(.casestudy-list__customer-seller)) {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .casestudy-list__customer-seller {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1/3;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-negative: 0;
          flex-shrink: 0;
    }
    .casestudy-list__customer-seller-title {
      position: relative;
      font-size: calc(12 / var(--font-size) * 1rem);
      color: #2585d7;
      font-weight: 600;
      margin-right: calc(10 / var(--font-size) * 1rem);
      padding-right: calc(8 / var(--font-size) * 1rem);
      padding-top: calc(3 / var(--font-size) * 1rem);
      -ms-flex-negative: 0;
          flex-shrink: 0;
    }
    .casestudy-list__customer-seller-label {
      font-size: calc(13 / var(--font-size) * 1rem);
      color: #2585d7;
      font-weight: 500;
      padding-top: calc(3 / var(--font-size) * 1rem);
    }
    .casestudy-list__customer-seller-title::after {
      content: '';
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      right: 0;
      width: calc(1 / var(--font-size) * 1rem);
      height: calc(100% - calc(6 / var(--font-size) * 1rem));
      background-color: #2585d7;
    }
    .casestudy-list__customer-icon {
      -ms-grid-row: 2;
      grid-row: 2;
    }
    .casestudy-list__customer-icon__label {
      font-size: calc(16.42 / var(--font-size) * 1rem);
      line-height: 1;
      padding-top: calc(1 / var(--font-size) * 1rem);
    }
    .casestudy-list__customer-buyer {
      -ms-grid-row: 2;
      grid-row: 2;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .casestudy-list__customer-buyer-title {
      position: relative;
      font-size: calc(12 / var(--font-size) * 1rem);
      color: #20409c;
      font-weight: 600;
      margin-right: calc(10 / var(--font-size) * 1rem);
      padding-right: calc(8 / var(--font-size) * 1rem);
      padding-top: calc(3 / var(--font-size) * 1rem);
      -ms-flex-negative: 0;
          flex-shrink: 0;
    }
    .casestudy-list__customer-buyer-title::after {
      content: '';
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      right: 0;
      width: calc(1 / var(--font-size) * 1rem);
      height: calc(100% - calc(6 / var(--font-size) * 1rem));
      background-color: #20409c;
    }
    .casestudy-list__customer-buyer-label {
      font-size: calc(13 / var(--font-size) * 1rem);
      color: #20409c;
      font-weight: 500;
      padding-top: calc(3 / var(--font-size) * 1rem);
    }
    .casestudy-list__arrow {
      position: absolute;
      bottom: 0;
      right: 0;
    }
    .casestudy-list__arrow::before {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      margin-right: calc(24 / var(--font-size) * 1rem);
      margin-bottom: calc(24 / var(--font-size) * 1rem);
      width: calc(38 / var(--font-size) * 1rem);
      height: calc(29 / var(--font-size) * 1rem);
      background-image: url('/assets/img/casestudy/ico_arrow.svg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    /* 動画セクション */
    .case-video {
      position: relative;
      margin-inline: calc(-16 / var(--font-size) * 1rem);
    }
    .case-video::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: rgba(227, 239, 245, 0.59);
      mix-blend-mode: multiply;
      z-index: -1;
      opacity: 0;
      -webkit-transform: translateY(3rem);
              transform: translateY(3rem);
      -webkit-transition: 0.8s;
      transition: 0.8s;
    }
    .case-video.is-fadeUp-active::before {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    .case-video .l-section__in {
      padding-block: calc(32 / var(--font-size) * 1rem) calc(40 / var(--font-size) * 1rem);
    }
    .case-video .l-section__head {
      padding-inline: calc(16 / var(--font-size) * 1rem);
    }
    .case-video-slider {
      padding-inline: calc(16 / var(--font-size) * 1rem);
    }
    .case-video-slider .splide__arrows {
      position: absolute;
      top: calc(-56 / var(--font-size) * 1rem);
      right: calc(16 / var(--font-size) * 1rem);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: calc(24 / var(--font-size) * 1rem);
    }
    .case-video-slider .splide__arrow {
      position: static;
      background-color: var(--primary-color-500);
      opacity: 1;
      -webkit-mask-image: url(/assets/img/common/ico_btn-arrow.svg);
              mask-image: url(/assets/img/common/ico_btn-arrow.svg);
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
      width: calc(38 / var(--font-size) * 1rem);
      height: calc(24 / var(--font-size) * 1rem);
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg);
      -webkit-transition: all 0.25s;
      transition: all 0.25s;
    }
    .case-video-item {
      max-width: calc(360 / var(--font-size) * 1rem);
      min-width: calc(272 / var(--font-size) * 1rem);
    }
    .case-video-slider .splide__arrow:disabled {
      pointer-events: none;
      background-color: #bdbfc1;
    }
    .case-video-slider .splide__arrow--prev {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
    .case-video-track {
      overflow: visible !important;
    }
    .case-video-title {
      margin-top: calc(8 / var(--font-size) * 1rem);
    }
    .case-video-title__label {
      font-size: calc(16 / var(--font-size) * 1rem);
      line-height: 1.6;
      font-weight: 500;
      letter-spacing: 0.1em;
    }
    .case-video-visual {
      position: relative;
      -webkit-transition: all 0.25s;
      transition: all 0.25s;
    }
    .case-video-visual::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      width: calc(40 / var(--font-size) * 1rem);
      height: calc(40 / var(--font-size) * 1rem);
      background-image: url(/assets/img/casestudy/ico_play.svg);
      background-size: contain;
      background-repeat: no-repeat;
    }
    .case-video-visual::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--white-color);
      opacity: 0;
      -webkit-transition: all 0.25s;
      transition: all 0.25s;
    }

    /* モーダル */
    html.is-modal-active {
      overflow: hidden;
    }
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      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;
      z-index: 9999;
    }

    .modal-content {
      position: relative;
      background: white;
      padding-block: calc(32 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
      padding-inline: calc(16 / var(--font-size) * 1rem);
      max-width: 100vw;
      max-height: 100vh;
      max-height: 100dvh;
      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;
    }

    .modal-close {
      position: absolute;
      top: calc(4 / var(--font-size) * 1rem);
      right: calc(8 / var(--font-size) * 1rem);
      background: none;
      border: none;
      font-size: calc(20 / var(--font-size) * 1rem);
      line-height: 1;
      cursor: pointer;
      z-index: 1;
      color: #333;
      width: calc(24 / var(--font-size) * 1rem);
      height: calc(24 / 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;
      -webkit-transition: background-color 0.2s;
      transition: background-color 0.2s;
    }

    #youtube-player {
      max-width: 100%;
      max-height: 100%;
    }
  }
}
/* ==========================================================================
  CASESTUDY 事例詳細
========================================================================== */
@layer page {
  @media all and (width >= 48rem) {
    .casestudy-case-article {
      line-height: 2;
      letter-spacing: 0.01em;
    }
    .casestudy-case-catch {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: calc(391 / var(--font-size) * 1rem) auto;
      grid-template-columns: calc(391 / var(--font-size) * 1rem) auto;
      -ms-grid-rows: auto auto;
      grid-template-rows: auto auto;
      -webkit-column-gap: calc(34 / var(--font-size) * 1rem);
         -moz-column-gap: calc(34 / var(--font-size) * 1rem);
              column-gap: calc(34 / var(--font-size) * 1rem);
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }
    .casestudy-case-catch-img {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      -ms-grid-row: 1;
      -ms-grid-row-span: 2;
      grid-row: 1 / 3;
    }
    .casestudy-case-catch-img img {
      width: 100%;
    }
    .casestudy-case-catch-heading {
      -ms-grid-column: 2;
      -ms-grid-column-span: 1;
      grid-column: 2 / 3;
      -ms-grid-row: 1;
      -ms-grid-row-span: 1;
      grid-row: 1 / 2;
      -ms-grid-row-align: end;
          align-self: end;
    }
    .casestudy-case-catch-heading__label {
      font-size: calc(30 / var(--font-size) * 1rem);
      font-family: var(--ff-jp-serif);
      line-height: 1.4;
      letter-spacing: 0.05em;
    }
    .casestudy-case-catch-info {
      -ms-grid-column: 2;
      -ms-grid-column-span: 1;
      grid-column: 2 / 3;
      -ms-grid-row: 2;
      -ms-grid-row-span: 1;
      grid-row: 2 / 3;
      margin-top: calc(40 / var(--font-size) * 1rem);
      padding-top: calc(40 / var(--font-size) * 1rem);
      position: relative;
      -ms-grid-row-align: start;
          align-self: start;
    }
    .casestudy-case-catch-info::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(1 / var(--font-size) * 1rem);
      background-color: #b0b5c3;
    }
    .casestudy-case-catch-info__category {
      margin-bottom: calc(8 / var(--font-size) * 1rem);
    }
    .casestudy-case-catch-info__category-label {
      font-size: calc(24 / var(--font-size) * 1rem);
      font-weight: 500;
    }
    .casestudy-case-catch-info__date-label {
      font-size: calc(17 / var(--font-size) * 1rem);
      font-family: var(--ff-en);
    }
    .casestudy-case-info {
      margin-top: calc(40 / var(--font-size) * 1rem);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: calc(42 / var(--font-size) * 1rem);
    }
    .casestudy-case-info-block {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      position: relative;
    }
    .casestudy-case-info-block::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .casestudy-case-info-block::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(1 / var(--font-size) * 1rem);
      z-index: -1;
    }
    .casestudy-case-info-block--seller::before {
      background-color: #2585d7;
      opacity: 0.06;
    }
    .casestudy-case-info-block--seller::after {
      background-color: #2585d7;
    }
    .casestudy-case-info-block--buyer::before {
      background-color: #20409c;
      opacity: 0.06;
    }
    .casestudy-case-info-block--buyer::after {
      background-color: #20409c;
    }
    .casestudy-case-info-block__inner {
      padding: calc(24 / var(--font-size) * 1rem) calc(38 / var(--font-size) * 1rem);
    }
    .casestudy-case-info-block-heading {
      margin-bottom: calc(10 / var(--font-size) * 1rem);
    }
    .casestudy-case-info-block-heading__label {
      font-size: calc(18 / var(--font-size) * 1rem);
    }
    .casestudy-case-info-block--seller .casestudy-case-info-block-heading__label {
      color: #2585d7;
    }
    .casestudy-case-info-block--buyer .casestudy-case-info-block-heading__label {
      color: #20409c;
    }
    .casestudy-case-info-block-list__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
    .casestudy-case-info-block-list__item + .casestudy-case-info-block-list__item {
      margin-top: calc(4 / var(--font-size) * 1rem);
    }
    .casestudy-case-info-block-list__label {
      -ms-flex-negative: 0;
          flex-shrink: 0;
      padding-right: calc(6 / var(--font-size) * 1rem);
      font-size: calc(14 / var(--font-size) * 1rem);
    }
    .casestudy-case-info-block-list__label::after {
      content: '：';
      margin-left: calc(6 / var(--font-size) * 1rem);
    }
    .casestudy-case-info-block-list__value {
      margin: 0;
      font-size: calc(14 / var(--font-size) * 1rem);
    }
    .casestudy-case-lead {
      margin-top: calc(60 / var(--font-size) * 1rem);
    }
    .casestudy-case-lead__label {
      font-size: calc(16 / var(--font-size) * 1rem);
      font-weight: 500;
    }
    .casestudy-case-support {
      margin-top: calc(60 / var(--font-size) * 1rem);
      position: relative;
    }
    .casestudy-case-support::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-color: #fff;
      border-top-left-radius: calc(50 / var(--font-size) * 1rem);
      border-bottom-right-radius: calc(50 / var(--font-size) * 1rem);
    }
    .casestudy-case-support::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: calc(100% + calc(54 / var(--font-size) * 1rem));
      height: calc(100% + calc(54 / var(--font-size) * 1rem));
      margin-top: calc(-27 / var(--font-size) * 1rem);
      z-index: -2;
      background-color: #63a1da;
      border-top-left-radius: calc(50 / var(--font-size) * 1rem);
      border-bottom-right-radius: calc(50 / var(--font-size) * 1rem);
      -webkit-filter: blur(calc(54 / var(--font-size) * 1rem));
              filter: blur(calc(54 / var(--font-size) * 1rem));
      opacity: 0.08;
      mix-blend-mode: multiply;
    }
    .casestudy-case-support__inner {
      padding: calc(24 / var(--font-size) * 1rem) calc(42 / var(--font-size) * 1rem);
    }
    .casestudy-case-support-heading {
      margin-bottom: calc(10 / var(--font-size) * 1rem);
    }
    .casestudy-case-support-heading__label {
      font-size: calc(18 / var(--font-size) * 1rem);
      font-weight: 700;
      color: #20409c;
    }
    .casestudy-case-support-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-column-gap: calc(40 / var(--font-size) * 1rem);
         -moz-column-gap: calc(40 / var(--font-size) * 1rem);
              column-gap: calc(40 / var(--font-size) * 1rem);
      row-gap: calc(4 / var(--font-size) * 1rem);
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    }
    .casestudy-case-support-list__item {
      width: calc((100% - (40 / var(--font-size) * 1rem)) / 2);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      color: #20409c;
      font-size: calc(15 / var(--font-size) * 1rem);
    }
    .casestudy-case-support-list__item::before {
      content: '・';
    }
    .casestudy-case-index {
      margin-top: calc(60 / var(--font-size) * 1rem);
      position: relative;
    }
    .casestudy-case-index::before,
    .casestudy-case-index::after {
      content: '';
      width: 100%;
      height: calc(1 / var(--font-size) * 1rem);
      background-color: #b0b5c3;
      position: absolute;
      left: 0;
    }
    .casestudy-case-index::before {
      top: 0;
    }
    .casestudy-case-index::after {
      bottom: 0;
    }
    .casestudy-case-index__inner {
      padding: calc(24 / var(--font-size) * 1rem);
    }
    .casestudy-case-index-heading {
      margin-bottom: calc(12 / var(--font-size) * 1rem);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: calc(24 / var(--font-size) * 1rem);
    }
    .casestudy-case-index-heading__ico {
      width: calc(30 / var(--font-size) * 1rem);
    }
    .casestudy-case-index-heading__label {
      font-family: var(--ff-en);
      font-weight: 600;
      font-size: calc(18 / var(--font-size) * 1rem);
    }
    .casestudy-case-index-list__item {
      font-size: calc(16 / var(--font-size) * 1rem);
    }
    .casestudy-case-index-list__item::before {
      content: '・';
      padding-right: calc(6 / var(--font-size) * 1rem);
    }
    .casestudy-case-index-list__label {
      text-decoration: underline;
      text-underline-offset: calc(4 / var(--font-size) * 1rem);
    }
    .casestudy-case-index-list__label:hover {
      text-decoration: none;
    }
    .casestudy-case-block {
      margin-top: calc(60 / var(--font-size) * 1rem);
      margin-bottom: calc(80 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section + .casestudy-case-block__section {
      margin-top: calc(56 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section h3 {
      font-family: var(--ff-jp-serif);
      -webkit-font-feature-settings: 'palt';
              font-feature-settings: 'palt';
      font-weight: 500;
      line-height: 1.4;
      font-size: calc(26 / var(--font-size) * 1rem);
      background: linear-gradient(93deg, #76c1e4, #203e9b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      margin-bottom: calc(32 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section p {
      font-size: calc(16 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section figure {
      margin: 0 auto;
      margin-top: calc(32 / var(--font-size) * 1rem);
      text-align: center;
      max-width: calc(825 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section figcaption {
      margin-top: calc(8 / var(--font-size) * 1rem);
      font-size: calc(13 / var(--font-size) * 1rem);
      color: #0d2643;
    }
    .casestudy-case-block__section .pmi-sched {
      display: flex;
    }
    .casestudy-case-block__section .pmi-sched dt{
    }
    .casestudy-case-block__section .pmi-sched dd{
      margin-top: 0;
    }
    .casestudy-case-block__section * + * {
      margin-top: calc(24 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section .casestudy-case-block__question {
      color: #20409c;
      font-weight: 600;
      font-size: calc(18 / var(--font-size) * 1rem);
      position: relative;
      padding-left: calc(36 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section .casestudy-case-block__question::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      width: calc(24 / var(--font-size) * 1rem);
      height: calc(1 / var(--font-size) * 1rem);
      background-color: #20409c;
    }
    .casestudy-case-block__section .casestudy-case-block__answer + .casestudy-case-block__question {
      margin-top: calc(48 / var(--font-size) * 1rem);
    }
    .casestudy-case-block-note {
      font-size: calc(12 / var(--font-size) * 1rem);
    }
    .casestudy-case-block-note__label::before {
      content: '※';
    }
    .casestudy-case-link {
      color: var(--primary-color-500);
      text-decoration: underline;
    }
    .casestudy-case-link::after {
      line-height: inherit;
      font-size: inherit;
      content: '';
      display: inline-block;
      margin-left: calc(4 / var(--font-size) * 1rem);
      width: 1em;
      height: 1em;
      background-color: var(--primary-color-500);
      -webkit-mask-image: url(/assets/img/common/ico_link-window.svg);
      mask-image: url(/assets/img/common/ico_link-window.svg);
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }
    .casestudy-case-link:hover {
      text-decoration: none;
    }
    .casestudy-case-article .l-block__footer {
      margin-bottom: calc(64 / var(--font-size) * 1rem);
    }
    .casestudy-case-charge {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: calc(100 / var(--font-size) * 1rem) 1fr;
      grid-template-columns: calc(100 / var(--font-size) * 1rem) 1fr;
      padding-block: calc(32 / var(--font-size) * 1rem) calc(40 / var(--font-size) * 1rem);
      padding-inline: calc(40 / var(--font-size) * 1rem);
      border: calc(1 / var(--font-size) * 1rem) var(--black-color) solid;
    }
    .casestudy-case-charge-heading {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1/3;
      -ms-grid-row: 1;
      grid-row: 1;
    }
    .casestudy-case-charge-heading__label {
      font-size: calc(20 / var(--font-size) * 1rem);
      line-height: 1.92;
      color: var(--primary-color-500);
      font-weight: 500;
      letter-spacing: 0.1em;
    }
    .casestudy-case-charge-position {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1/3;
      -ms-grid-row: 2;
      grid-row: 2;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-column-gap: calc(40 / var(--font-size) * 1rem);
         -moz-column-gap: calc(40 / var(--font-size) * 1rem);
              column-gap: calc(40 / var(--font-size) * 1rem);
      margin-bottom: calc(16 / var(--font-size) * 1rem);
    }
    .casestudy-case-charge-position__label {
      white-space: nowrap;
      font-size: calc(16 / var(--font-size) * 1rem);
      line-height: 2.4;
      font-weight: 500;
      letter-spacing: 0.1em;
    }
    .casestudy-case-charge-position-note__label {
      white-space: nowrap;
      text-align: right;
      font-size: calc(14 / var(--font-size) * 1rem);
      line-height: 2.05714285714;
      letter-spacing: 0.05em;
    }
    .casestudy-case-charge-img {
    }
    .casestudy-case-charge-comment {
      background-color: var(--white-color);
      margin-left: calc(28 / var(--font-size) * 1rem);
      padding-block: calc(16 / var(--font-size) * 1rem);
      padding-inline: calc(24 / var(--font-size) * 1rem);
      position: relative;
    }
    .casestudy-case-charge-comment::before {
      position: absolute;
      content: '';
      left: 0;
      top: calc(28 / var(--font-size) * 1rem);
      -webkit-transform: translateX(-99%);
              transform: translateX(-99%);
      width: calc(16 / var(--font-size) * 1rem);
      height: calc(28 / var(--font-size) * 1rem);
      background-color: var(--white-color);
      clip-path: polygon(0 50%, 100% 100%, 100% 0);
    }
    .casestudy-case-charge-comment__label {
      font-size: calc(16 / var(--font-size) * 1rem);
      line-height: 1.8;
      letter-spacing: 0.05em;
    }
    .casestudy-case-back-btn {
      margin-inline: auto;
      margin-bottom: calc(120 / var(--font-size) * 1rem);
    }
    .casestudy-case-back-btn .c-btn-ico__label {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
  }
  @media all and (width < 48rem) {
    .casestudy-case-article {
      line-height: 2;
      letter-spacing: 0.08em;
    }
    .casestudy-case-catch {
    }
    .casestudy-case-catch-img {
    }
    .casestudy-case-catch-img img {
      width: 100%;
    }
    .casestudy-case-catch-heading {
      margin-top: calc(32 / var(--font-size) * 1rem);
      padding-bottom: calc(24 / var(--font-size) * 1rem);
    }
    .casestudy-case-catch-heading__label {
      font-size: calc(22 / var(--font-size) * 1rem);
      font-family: var(--ff-jp-serif);
      line-height: 1.6;
      letter-spacing: 0.06em;
      & br {
        display: none;
      }
    }
    .casestudy-case-catch-info {
      padding-top: calc(24 / var(--font-size) * 1rem);
      position: relative;
      -ms-flex-item-align: start;
          -ms-grid-row-align: start;
          align-self: start;
    }
    .casestudy-case-catch-info::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(1 / var(--font-size) * 1rem);
      background-color: #b0b5c3;
    }
    .casestudy-case-catch-info__category {
      margin-bottom: calc(8 / var(--font-size) * 1rem);
    }
    .casestudy-case-catch-info__category-label {
      font-size: calc(18 / var(--font-size) * 1rem);
      line-height: 1.4166666667;
      font-weight: 500;
      letter-spacing: 0.08em;
    }
    .casestudy-case-catch-info__date-label {
      font-size: calc(13 / var(--font-size) * 1rem);
      line-height: 1.5692307692;
      font-family: var(--ff-en);
      letter-spacing: 0.03em;
    }
    .casestudy-case-info {
      margin-top: calc(32 / var(--font-size) * 1rem);
    }
    .casestudy-case-info-block {
      position: relative;
    }
    .casestudy-case-info-block + .casestudy-case-info-block {
      margin-top: calc(12 / var(--font-size) * 1rem);
    }
    .casestudy-case-info-block::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .casestudy-case-info-block::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: calc(2 / var(--font-size) * 1rem);
      z-index: -1;
    }
    .casestudy-case-info-block--seller::before {
      background-color: #2585d7;
      opacity: 0.06;
    }
    .casestudy-case-info-block--seller::after {
      background-color: #2585d7;
    }
    .casestudy-case-info-block--buyer::before {
      background-color: #20409c;
      opacity: 0.06;
    }
    .casestudy-case-info-block--buyer::after {
      background-color: #20409c;
    }
    .casestudy-case-info-block__inner {
      padding-block: calc(16 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
      padding-inline: calc(16 / var(--font-size) * 1rem);
    }
    .casestudy-case-info-block-heading {
      margin-bottom: calc(10 / var(--font-size) * 1rem);
    }
    .casestudy-case-info-block-heading__label {
      font-size: calc(14 / var(--font-size) * 1rem);
      line-height: 1.5;
      font-weight: 500;
      letter-spacing: 0.08em;
    }
    .casestudy-case-info-block--seller .casestudy-case-info-block-heading__label {
      color: #2585d7;
    }
    .casestudy-case-info-block--buyer .casestudy-case-info-block-heading__label {
      color: #20409c;
    }
    .casestudy-case-info-block-list__item {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: calc(80 / var(--font-size) * 1rem) 1fr;
      grid-template-columns: calc(80 / var(--font-size) * 1rem) 1fr;
    }
    .casestudy-case-info-block-list__item + .casestudy-case-info-block-list__item {
      margin-top: calc(8 / var(--font-size) * 1rem);
    }
    .casestudy-case-info-block-list__label {
      -ms-flex-negative: 0;
          flex-shrink: 0;
      padding-right: calc(6 / var(--font-size) * 1rem);
      font-size: calc(12 / var(--font-size) * 1rem);
      line-height: 1.5;
    }
    .casestudy-case-info-block-list__label::after {
      content: '：';
      margin-left: calc(2 / var(--font-size) * 1rem);
    }
    .casestudy-case-info-block-list__value {
      margin: 0;
      font-size: calc(12 / var(--font-size) * 1rem);
      line-height: 1.5;
    }
    .casestudy-case-lead {
      margin-top: calc(40 / var(--font-size) * 1rem);
    }
    .casestudy-case-lead__label {
      font-size: calc(13 / var(--font-size) * 1rem);
      font-weight: 500;
      letter-spacing: 0.08em;
    }
    .casestudy-case-support {
      margin-top: calc(40 / var(--font-size) * 1rem);
      position: relative;
    }
    .casestudy-case-support::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-color: #fff;
      border-top-left-radius: calc(30 / var(--font-size) * 1rem);
      border-bottom-right-radius: calc(30 / var(--font-size) * 1rem);
    }
    .casestudy-case-support::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: calc(100% + calc(54 / var(--font-size) * 1rem));
      height: calc(100% + calc(54 / var(--font-size) * 1rem));
      margin-top: calc(-27 / var(--font-size) * 1rem);
      z-index: -2;
      background-color: #63a1da;
      border-top-left-radius: calc(30 / var(--font-size) * 1rem);
      border-bottom-right-radius: calc(30 / var(--font-size) * 1rem);
      -webkit-filter: blur(calc(54 / var(--font-size) * 1rem));
              filter: blur(calc(54 / var(--font-size) * 1rem));
      opacity: 0.08;
      mix-blend-mode: multiply;
    }
    .casestudy-case-support__inner {
      padding: calc(24 / var(--font-size) * 1rem) calc(16 / var(--font-size) * 1rem);
    }
    .casestudy-case-support-heading {
      padding-inline: calc(8 / var(--font-size) * 1rem);
      margin-bottom: calc(10 / var(--font-size) * 1rem);
    }
    .casestudy-case-support-heading__label {
      font-size: calc(14 / var(--font-size) * 1rem);
      line-height: 1.5;
      font-weight: 700;
      color: #20409c;
    }
    .casestudy-case-support-list {
    }
    .casestudy-case-support-list__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: calc(4 / var(--font-size) * 1rem);
      color: #20409c;
      font-size: calc(13 / var(--font-size) * 1rem);
      line-height: 1.6;
      letter-spacing: 0.08em;
    }
    .casestudy-case-support-list__item::before {
      content: '・';
    }
    .casestudy-case-index {
      margin-top: calc(60 / var(--font-size) * 1rem);
      position: relative;
    }
    .casestudy-case-index::before,
    .casestudy-case-index::after {
      content: '';
      width: 100%;
      height: calc(1 / var(--font-size) * 1rem);
      background-color: #b0b5c3;
      position: absolute;
      left: 0;
    }
    .casestudy-case-index::before {
      top: 0;
    }
    .casestudy-case-index::after {
      bottom: 0;
    }
    .casestudy-case-index__inner {
      padding-block: calc(20 / var(--font-size) * 1rem);
      padding-inline: calc(16 / var(--font-size) * 1rem);
    }
    .casestudy-case-index-heading {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: calc(12 / var(--font-size) * 1rem);
      margin-bottom: calc(8 / var(--font-size) * 1rem);
    }
    .casestudy-case-index-heading__ico {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: start;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      width: calc(21 / var(--font-size) * 1rem);
    }
    .casestudy-case-index-heading__ico img {
      vertical-align: text-top;
    }
    .casestudy-case-index-heading__label {
      font-family: var(--ff-en);
      font-weight: 600;
      font-size: calc(14 / var(--font-size) * 1rem);
      line-height: 1.5;
    }
    .casestudy-case-index-list__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      font-size: calc(13 / var(--font-size) * 1rem);
    }
    .casestudy-case-index-list__item::before {
      display: block;
      content: '・';
      padding-right: calc(6 / var(--font-size) * 1rem);
    }
    .casestudy-case-index-list__label {
      letter-spacing: 0.08em;
      text-decoration: underline;
      text-underline-offset: calc(4 / var(--font-size) * 1rem);
      font-weight: 500;
    }
    .casestudy-case-index-list__label:hover {
      text-decoration: none;
    }
    .casestudy-case-block {
      margin-top: calc(60 / var(--font-size) * 1rem);
      margin-bottom: calc(80 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section + .casestudy-case-block__section {
      margin-top: calc(64 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section h3 {
      font-family: var(--ff-jp-serif);
      -webkit-font-feature-settings: 'palt';
              font-feature-settings: 'palt';
      font-weight: 500;
      line-height: 1.6;
      font-size: calc(18 / var(--font-size) * 1rem);
      letter-spacing: 0.08em;
      background: linear-gradient(93deg, #76c1e4, #203e9b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      margin-bottom: calc(40 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section p {
      font-size: calc(13 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section figure {
      margin: 0 auto;
      margin-top: calc(32 / var(--font-size) * 1rem);
      text-align: center;
      max-width: calc(825 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section figcaption {
      margin-top: calc(8 / var(--font-size) * 1rem);
      font-size: calc(10 / var(--font-size) * 1rem);
      font-weight: 500;
      letter-spacing: 0.08em;
      color: #0d2643;
    }
    .casestudy-case-block__section .pmi-sched {
      display: flex;
      font-size: calc(13 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section .pmi-sched dt,
    .casestudy-case-block__section .pmi-sched dd{
      width: 50%;
      margin-top: 0;
    }
    .casestudy-case-block__section * + * {
      margin-top: calc(24 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section .casestudy-case-block__question {
      color: #20409c;
      font-weight: 600;
      font-size: calc(14 / var(--font-size) * 1rem);
      letter-spacing: 0.08em;
      position: relative;
      padding-left: calc(28 / var(--font-size) * 1rem);
    }
    .casestudy-case-block__section .casestudy-case-block__question::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      margin-top: 1em;
      width: calc(16 / var(--font-size) * 1rem);
      height: calc(1 / var(--font-size) * 1rem);
      background-color: #20409c;
    }
    .casestudy-case-block__section .casestudy-case-block__answer + .casestudy-case-block__question {
      margin-top: calc(48 / var(--font-size) * 1rem);
    }
    .casestudy-case-block-note {
      font-size: calc(10 / var(--font-size) * 1rem);
      letter-spacing: 0.1em;
    }
    .casestudy-case-block-note__label::before {
      content: '※';
    }
    .casestudy-case-link {
      color: var(--primary-color-500);
      text-decoration: underline;
    }
    .casestudy-case-link::after {
      line-height: inherit;
      font-size: inherit;
      content: '';
      display: inline-block;
      margin-left: calc(4 / var(--font-size) * 1rem);
      width: 1em;
      height: 1em;
      background-color: var(--primary-color-500);
      -webkit-mask-image: url(/assets/img/common/ico_link-window.svg);
      mask-image: url(/assets/img/common/ico_link-window.svg);
      -webkit-mask-size: contain;
      mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }
    .casestudy-case-article .l-block__footer {
      margin-bottom: calc(64 / var(--font-size) * 1rem);
    }
    .casestudy-case-charge {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr calc(100 / var(--font-size) * 1rem);
      grid-template-columns: 1fr calc(100 / var(--font-size) * 1rem);
      padding-block: calc(24 / var(--font-size) * 1rem) calc(32 / var(--font-size) * 1rem);
      border-top: calc(2 / var(--font-size) * 1rem) var(--black-color) solid;
      border-bottom: calc(2 / var(--font-size) * 1rem) var(--black-color) solid;
    }
    .casestudy-case-charge-heading {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1/3;
      -ms-grid-row: 1;
      grid-row: 1;
      margin-bottom: calc(8 / var(--font-size) * 1rem);
    }
    .casestudy-case-charge-heading__label {
      font-size: calc(20 / var(--font-size) * 1rem);
      line-height: 1.92;
      color: var(--primary-color-500);
      font-weight: 500;
      letter-spacing: 0.1em;
    }
    .casestudy-case-charge-position {
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1/2;
      -ms-grid-row: 2;
      grid-row: 2;
      margin-bottom: calc(12 / var(--font-size) * 1rem);
      padding-right: calc(12 / var(--font-size) * 1rem);
    }
    .casestudy-case-charge-position__label {
      font-size: calc(14 / var(--font-size) * 1rem);
      line-height: 1.5;
      font-weight: 600;
      letter-spacing: 0.1em;
    }
    .casestudy-case-charge-position-note {
      margin-top: calc(16 / var(--font-size) * 1rem);
    }
    .casestudy-case-charge-position-note__label {
      white-space: nowrap;
      font-size: calc(9 / var(--font-size) * 1rem);
      line-height: 1;
      letter-spacing: 0.1em;
    }
    .casestudy-case-charge-img {
      -ms-grid-column: 2;
      grid-column: 2;
      -ms-grid-row: 1;
      -ms-grid-row-span: 2;
      grid-row: 1/3;
    }
    .casestudy-case-charge-comment {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1/3;
      background-color: var(--white-color);
      padding-block: calc(16 / var(--font-size) * 1rem);
      padding-inline: calc(16 / var(--font-size) * 1rem);
      position: relative;
    }
    .casestudy-case-charge-comment::before {
      position: absolute;
      content: '';
      left: 50%;
      -webkit-transform: translate(-50%, -99%);
              transform: translate(-50%, -99%);
      top: 0;
      width: calc(28 / var(--font-size) * 1rem);
      height: calc(16 / var(--font-size) * 1rem);
      background-color: var(--white-color);
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }
    .casestudy-case-charge-comment__label {
      font-size: calc(13 / var(--font-size) * 1rem);
      line-height: 2;
      letter-spacing: 0.05em;
    }
    .casestudy-case-back-btn {
      margin-inline: auto;
      margin-bottom: calc(48 / var(--font-size) * 1rem);
    }
    .casestudy-case-back-btn .c-btn {
      --btn-px: 18;
    }
    .casestudy-case-back-btn .c-btn-ico__label {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
  }
}

/* ==========================================================================
  KNOWLEDGE_DOWNLOAD
========================================================================== */
@layer page {
  @media all and (width >= 48rem) {
    .knowledge_download .l-block__head {
      max-width: calc(852 / var(--font-size) * 1rem);
      margin-inline: auto;
      margin-bottom: calc(90 / var(--font-size) * 1rem);
    }
    .knowledge_download .l-block__content {
      max-width: calc(1018 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    .knowledge_download .l-section__head {
      margin-bottom: calc(60 / var(--font-size) * 1rem);
    }
    .knowledge_download .l-section__head .c-heading {
      margin-inline: auto;
    }
    .knowledge_download-lead__label {
      text-align: center;
    }
    .knowledge_download-list {
      margin-top: calc(80 / var(--font-size) * 1rem);
    }
    .knowledge_download-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      gap: calc(60 / var(--font-size) * 1rem);
    }
    .knowledge_download-list__item {
      width: calc((100% - (60 / var(--font-size) * 1rem)) / 2);
    }
    .knowledge_download-list__item.--comingsoon {
      .knowledge_download-list__img {
        position: relative;
        &::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background: url(/assets/img/knowledge/download/img_comingsoon.png) no-repeat center/contain;
        }
      }
      .knowledge_download-list__btn .c-btn {
        pointer-events: none;
        -webkit-filter: grayscale(1) brightness(1.2) contrast(0.8);
                filter: grayscale(1) brightness(1.2) contrast(0.8);
      }
    }
    .knowledge_download-list__img img {
      width: 100%;
    }
    .knowledge_download-list__text {
      margin-top: calc(30 / var(--font-size) * 1rem);
    }
    .knowledge_download-list__btn {
      margin-top: calc(35 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    /* 関連書籍バナー */
    .knowledge_download-banner {
      max-width: calc(697 / var(--font-size) * 1rem);
      margin-top: calc(56 / var(--font-size) * 1rem);
      margin-inline: auto;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        width: 110%;
        height: 110%;
        background-color: #deedf5;
        -webkit-filter: blur(40px);
                filter: blur(40px);
        opacity: 0.69;
        z-index: 0;
      }
    }
    .knowledge_download-banner__in {
      background: -webkit-gradient(linear, left top, right top, from(#ee6b00), to(#f6b987));
      background: linear-gradient(to right, #ee6b00, #f6b987);
      padding-bottom: calc(8 / var(--font-size) * 1rem);
      position: relative;
      &::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        margin-right: calc(40 / var(--font-size) * 1rem);
        margin-top: calc(-24 / var(--font-size) * 1rem);
        width: calc(190 / var(--font-size) * 1rem);
        height: calc(234 / var(--font-size) * 1rem);
        background: url(/assets/img/knowledge/download/img_book.png) no-repeat center/contain;
      }
    }
    .knowledge_download-banner__head {
      padding-block: calc(16 / var(--font-size) * 1rem);
      padding-inline: calc(58 / var(--font-size) * 1rem);
    }
    .knowledge_download-banner-title {
      font-size: calc(23 / var(--font-size) * 1rem);
      color: var(--white-color);
      letter-spacing: 0.11em;
      font-weight: 400;
    }
    .knowledge_download-banner__body {
      background-color: var(--white-color);
      padding-inline: calc(58 / var(--font-size) * 1rem);
      padding-block: calc(8 / var(--font-size) * 1rem) calc(18 / var(--font-size) * 1rem);
    }
    .knowledge_download-banner-text {
      font-size: calc(16 / var(--font-size) * 1rem);
      letter-spacing: 0.1em;
      font-weight: 500;
      line-height: 2;
    }
    .knowledge_download-banner .c-text-link {
      --text-link-size: 15.41;
      --text-link-color: var(--primary-color-500);
      font-weight: bold;
      &::before {
        -webkit-transform: scaleX(1);
                transform: scaleX(1);
      }
    }
    .knowledge_download-banner .c-text-link:hover::before {
      -webkit-transform: scaleX(0);
              transform: scaleX(0);
    }
  }
  @media all and (width < 64rem) {
    .knowledge_download-list {
      gap: calc(40 / var(--font-size) * 1rem);
    }
    .knowledge_download-list__item {
      width: calc((100% - (40 / var(--font-size) * 1rem)) / 2);
    }
  }
  @media all and (width < 48rem) {
    .knowledge_download .l-block__head {
      margin-bottom: calc(64 / var(--font-size) * 1rem);
    }
    .knowledge_download .l-section__head {
      margin-bottom: calc(24 / var(--font-size) * 1rem);
    }
    .knowledge_download .l-section__head .c-heading {
      margin-inline: auto;
    }
    .knowledge_download-lead__label {
      text-align: left;
      --txt-font-size: 13;
      --txt-line-height: 2;
      --txt-letter-spacing: 0.08em;
    }
    .knowledge_download-list {
      margin-top: calc(32 / var(--font-size) * 1rem);
    }
    .knowledge_download-list__item + .knowledge_download-list__item {
      margin-top: calc(64 / var(--font-size) * 1rem);
    }
    .knowledge_download-list__item {
      width: 100%;
    }
    .knowledge_download-list__item.--comingsoon {
      .knowledge_download-list__img {
        position: relative;
        &::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background: url(/assets/img/knowledge/download/img_comingsoon.png) no-repeat center/contain;
        }
      }
      .knowledge_download-list__btn .c-btn {
        pointer-events: none;
        -webkit-filter: grayscale(1) brightness(1.2) contrast(0.8);
                filter: grayscale(1) brightness(1.2) contrast(0.8);
      }
    }
    .knowledge_download-list__img img {
      width: 100%;
    }
    .knowledge_download-list__text {
      margin-top: calc(16 / var(--font-size) * 1rem);
    }
    .knowledge_download-list__text-label {
      --txt-font-size: 13;
      --txt-line-height: 2;
      --txt-letter-spacing: 0.08em;
    }
    .knowledge_download-list__btn {
      margin-top: calc(32 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    /* 関連書籍バナー */
    .knowledge_download-banner {
      max-width: calc(540 / var(--font-size) * 1rem);
      margin-top: calc(40 / var(--font-size) * 1rem);
      margin-inline: auto;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        width: 110%;
        height: 110%;
        background-color: #deedf5;
        -webkit-filter: blur(40px);
                filter: blur(40px);
        opacity: 0.69;
        z-index: 0;
      }
    }
    .knowledge_download-banner__in {
      background: -webkit-gradient(linear, left top, right top, from(#ee6b00), to(#f6b987));
      background: linear-gradient(to right, #ee6b00, #f6b987);
      padding-bottom: calc(8 / var(--font-size) * 1rem);
      position: relative;
      &::after {
        content: '';
        position: absolute;
        right: calc(50% - calc(96 / 375 * 100vw));
        bottom: 0;
        -webkit-transform: translateX(50%);
                transform: translateX(50%);
        margin-bottom: calc(-24 / var(--font-size) * 1rem);
        width: calc(162 / var(--font-size) * 1rem);
        height: calc(198 / var(--font-size) * 1rem);
        background: url(/assets/img/knowledge/download/img_book.png) no-repeat center/contain;
      }
    }
    .knowledge_download-banner__head {
      padding-block: calc(11 / var(--font-size) * 1rem);
      padding-inline: calc(16 / var(--font-size) * 1rem);
      text-align: center;
    }
    .knowledge_download-banner-title {
      font-size: calc(16 / var(--font-size) * 1rem);
      color: var(--white-color);
      letter-spacing: 0.11em;
      font-weight: 400;
    }
    .knowledge_download-banner__body {
      background-color: var(--white-color);
      padding-inline: calc(16 / var(--font-size) * 1rem) calc(120 / var(--font-size) * 1rem);
      padding-block: calc(8 / var(--font-size) * 1rem) calc(18 / var(--font-size) * 1rem);
    }
    .knowledge_download-banner-text {
      max-width: calc(300 / var(--font-size) * 1rem);
      margin-inline: auto;
      font-size: calc(13 / var(--font-size) * 1rem);
      letter-spacing: 0.1em;
      font-weight: 500;
      line-height: 2;
    }
    .knowledge_download-banner .c-text-link {
      --text-link-size: 14;
      --text-link-color: var(--primary-color-500);
      font-weight: bold;
    }
  }
}
/* ==========================================================================
  KNOWLEDGE_SEMINAR
========================================================================== */
@layer page {
  @media all and (width >= 48rem) {
    .knowledge_seminar .l-block__head {
      max-width: calc(852 / var(--font-size) * 1rem);
      margin-inline: auto;
      margin-bottom: calc(90 / var(--font-size) * 1rem);
    }
    .knowledge_seminar .l-block__content {
      max-width: calc(796 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    .knowledge_seminar .l-section__head {
      margin-bottom: calc(60 / var(--font-size) * 1rem);
    }
    .knowledge_seminar .l-section__head .c-heading {
      margin-inline: auto;
    }
    .knowledge_seminar-lead__label {
      text-align: center;
    }
    .knowledge_seminar-info {
      margin-top: calc(40 / var(--font-size) * 1rem);
    }
    .knowledge_seminar-info-banner {
      border-bottom-left-radius: calc(30 / var(--font-size) * 1rem);
      border-top-right-radius: calc(30 / var(--font-size) * 1rem);
      overflow: hidden;
      position: relative;
    }
    .knowledge_seminar-info-banner__img img {
      width: 100%;
    }
    .knowledge_seminar-info-banner__text {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: calc(20 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem);
    }
    .knowledge_seminar-info-banner__text::before,
    .knowledge_seminar-info-banner__text::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .knowledge_seminar-info-banner__text::before {
      background: linear-gradient(-93deg, #76c1e4, #203e9b);
      opacity: 0.81;
    }
    .knowledge_seminar-info-banner__text::after {
      backdrop-filter: blur(calc(7.6 / var(--font-size) * 1rem));
    }
    .knowledge_seminar-info-banner__text-label {
      position: relative;
      z-index: 1;
      color: var(--white-color);
      letter-spacing: 0.1em;
    }
    .knowledge_seminar-info-banner__text-label span {
      font-family: var(--ff-jp-serif);
    }
    .knowledge_seminar-info__in > * {
      margin-top: calc(24 / var(--font-size) * 1rem);
    }
    .knowledge_seminar-info__in > *:first-child {
      margin-top: 0;
    }
    .knowledge_seminar-info__in .knowledge_seminar-info-lead > * + *,
    .knowledge_seminar-info__in .knowledge_seminar-info-text > * + *,
    .knowledge_seminar-info__in .knowledge_seminar-info-list > * + *,
    .knowledge_seminar-info__in .knowledge_seminar-info-note > * + * {
      margin-top: calc(16 / var(--font-size) * 1rem);
    }
    .knowledge_seminar-info-lead {
      text-align: center;
      font-weight: 500;
    }
    .knowledge_seminar-info-text {
      text-align: center;
    }
    .knowledge_seminar-info-list {
      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;
    }
    .knowledge_seminar-info-note {
      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;
    }
    .knowledge_seminar-info-btn {
      max-width: calc(290 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
  }
  @media all and (width < 48rem) {
    .knowledge_seminar .l-block__head {
      margin-inline: auto;
      margin-bottom: calc(64 / var(--font-size) * 1rem);
    }
    .knowledge_seminar .l-block__content {
    }
    .knowledge_seminar .l-section__head {
      margin-bottom: calc(24 / var(--font-size) * 1rem);
    }
    .knowledge_seminar .l-section__head .c-heading {
      margin-inline: auto;
    }
    .knowledge_seminar-lead__label {
      text-align: left;
      --txt-font-size: 13;
      --txt-line-height: 2;
      --txt-letter-spacing: 0.08em;
    }
    .knowledge_seminar-info {
      margin-top: calc(40 / var(--font-size) * 1rem);
    }
    .knowledge_seminar-info-banner {
      border-bottom-left-radius: calc(20 / var(--font-size) * 1rem);
      border-top-right-radius: calc(20 / var(--font-size) * 1rem);
      overflow: hidden;
      position: relative;
      aspect-ratio: 343/228;
    }
    .knowledge_seminar-info-banner__img {
      height: 100%;
    }
    .knowledge_seminar-info-banner__img img {
      width: auto;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }
    .knowledge_seminar-info-banner__text {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: calc(16 / var(--font-size) * 1rem) calc(6 / var(--font-size) * 1rem);
    }
    .knowledge_seminar-info-banner__text::before,
    .knowledge_seminar-info-banner__text::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .knowledge_seminar-info-banner__text::before {
      background: linear-gradient(-93deg, #76c1e4, #203e9b);
      opacity: 0.81;
    }
    .knowledge_seminar-info-banner__text::after {
      backdrop-filter: blur(calc(7.6 / var(--font-size) * 1rem));
    }
    .knowledge_seminar-info-banner__text-label {
      position: relative;
      text-align: center;
      z-index: 1;
      color: var(--white-color);
      --txt-font-size: 16;
      --txt-letter-spacing: 0.06em;
    }
    .knowledge_seminar-info-banner__text-label span {
      display: block;
      font-size: calc(18 / var(--font-size) * 1rem);
      font-family: var(--ff-jp-serif);
    }
    .knowledge_seminar-info__in > * {
      margin-top: calc(24 / var(--font-size) * 1rem);
    }
    .knowledge_seminar-info__in > *:first-child {
      margin-top: 0;
    }
    .knowledge_seminar-info__in .knowledge_seminar-info-lead > * + *,
    .knowledge_seminar-info__in .knowledge_seminar-info-text > * + *,
    .knowledge_seminar-info__in .knowledge_seminar-info-list > * + *,
    .knowledge_seminar-info__in .knowledge_seminar-info-note > * + * {
      margin-top: calc(16 / var(--font-size) * 1rem);
    }
    .knowledge_seminar-info-lead {
      padding-inline: calc(16 / var(--font-size) * 1rem);
      text-align: center;
    }
    .knowledge_seminar-info-lead__label {
      --txt-font-size: 13;
      --txt-line-height: 2;
      --txt-letter-spacing: 0.08em;
      font-weight: 500;
    }
    .knowledge_seminar-info-text {
      text-align: left;
    }
    .knowledge_seminar-info-text__label {
      --txt-font-size: 13;
      --txt-line-height: 2;
      --txt-letter-spacing: 0.08em;
    }
    .knowledge_seminar-info-list {
      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;
    }
    .knowledge_seminar-info-list .c-list {
      --list-font-size: 13;
      --list-icon-size: 6;
      --list-line-height: 2;
      --list-font-color: #20409c;
      --list-icon-color: #2a569f;
      font-weight: 500;
      letter-spacing: 0.08em;
    }
    .knowledge_seminar-info-note {
      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;
    }
    .knowledge_seminar-info-note .c-list {
      --list-font-size: 10;
      --list-line-height: 1.5;
    }
    .knowledge_seminar-info-btn {
      margin-top: calc(32 / var(--font-size) * 1rem);
      max-width: calc(236 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    .knowledge_seminar-info-btn .c-btn {
      --btn-font-size: 15.8;
    }
  }
}
/* ==========================================================================
  KNOWLEDGE_BLOG
========================================================================== */
@layer page {
  @media all and (width >= 48rem) {
    .knowledge_blog .l-section {
      padding-inline: 0;
    }
    .knowledge_blog .l-block__head {
      max-width: calc(852 / var(--font-size) * 1rem);
      margin-inline: auto;
      margin-bottom: calc(90 / var(--font-size) * 1rem);
    }
    .knowledge_blog .l-block__content {
      max-width: calc(1214 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    .knowledge_blog .l-section__head {
      margin-bottom: calc(60 / var(--font-size) * 1rem);
    }
    .knowledge_blog .l-section__head .c-heading {
      margin-inline: auto;
    }
    .knowledge_blog-lead__label {
      text-align: center;
    }
    .knowledge_blog-list {
      margin-top: calc(78 / var(--font-size) * 1rem);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: calc(32 / var(--font-size) * 1rem);
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    }
    .knowledge_blog-list__item {
      width: calc((100% - ((32 / var(--font-size) * 1rem) * 2)) / 3);
      max-height: calc(466 / var(--font-size) * 1rem);
      /* コンテナ 383.33 */
      container-type: inline-size;
    }
    .knowledge_blog-list__item.--new {
      position: relative;

      &::before {
        content: 'NEW';
        position: absolute;
        font-family: var(--ff-en);
        font-size: calc(19.32 / 383.33 * 100cqi);
        letter-spacing: 0.1em;
        color: var(--white-color);
        background: var(--secondary-grd--90);
        padding-block: calc(11 / 383.33 * 100cqi) calc(9 / 383.33 * 100cqi);
        padding-inline: calc(14 / 383.33 * 100cqi);
        border-bottom-right-radius: calc(20 / 383.33 * 100cqi);
        z-index: 2;
      }
    }
    .knowledge_blog-list__link:hover .knowledge_blog-list__in::after {
      opacity: 0;
    }
    .knowledge_blog-list__in {
      padding: calc(24 / var(--font-size) * 1rem);
      position: relative;
      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;
    }
    .knowledge_blog-list__in::before,
    .knowledge_blog-list__in::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .knowledge_blog-list__in::before {
      background-color: var(--white-color);
    }
    .knowledge_blog-list__in::after {
      background: rgba(99, 161, 218, 0.16);
      -webkit-filter: blur(calc(50 / var(--font-size) * 1rem));
              filter: blur(calc(50 / var(--font-size) * 1rem));
      mix-blend-mode: multiply;
      z-index: -2;
      opacity: 1;
      -webkit-transition: 0.25s opacity;
      transition: 0.25s opacity;
    }
    .knowledge_blog-list__img {
      margin-bottom: calc(18 / var(--font-size) * 1rem);
    }
    .knowledge_blog-list__img img {
      aspect-ratio: 335/220;
      width: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: top;
         object-position: top;
    }
    .knowledge_blog-list__title-label {
      font-weight: 500;
      --txt-line-height: 1.6;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      max-height: calc(1.6em * 3);
      text-overflow: ellipsis;
    }
    .knowledge_blog-list__text {
      margin-top: calc(14 / var(--font-size) * 1rem);
      -webkit-box-flex: 1;
          -ms-flex: auto;
              flex: auto;
    }
    .knowledge_blog-list__text {
      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: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
    }
    .knowledge_blog-list__text-label {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      --txt-line-height: 1.6;
      max-height: calc(1.6em * 3);
      text-overflow: ellipsis;
    }
  }
  @media all and (width < 48rem) {
    .knowledge_blog .l-section {
      padding-inline: 0;
    }
    .knowledge_blog .l-block__head {
      margin-inline: auto;
      margin-bottom: calc(64 / var(--font-size) * 1rem);
    }
    .knowledge_blog .l-block__content {
    }
    .knowledge_blog .l-section__head {
      margin-bottom: calc(24 / var(--font-size) * 1rem);
    }
    .knowledge_blog .l-section__head .c-heading {
      margin-inline: auto;
    }
    .knowledge_blog-lead__label {
      text-align: left;
      --txt-font-size: 13;
      --txt-line-height: 2;
      --txt-letter-spacing: 0.08em;
    }
    .knowledge_blog-list {
      margin-top: calc(64 / var(--font-size) * 1rem);
      max-width: calc(383.33 / var(--font-size) * 1rem);
      margin-inline: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    }
    .knowledge_blog-list__item {
    }
    .knowledge_blog-list__item + .knowledge_blog-list__item {
      margin-top: calc(32 / var(--font-size) * 1rem);
    }
    .knowledge_blog-list__item.--new {
      position: relative;

      &::before {
        content: 'NEW';
        position: absolute;
        font-family: var(--ff-en);
        font-size: calc(15 / var(--font-size) * 1rem);
        letter-spacing: 0.1em;
        color: var(--white-color);
        background: var(--secondary-grd--90);
        padding-block: calc(9 / var(--font-size) * 1rem) calc(7 / var(--font-size) * 1rem);
        padding-inline: calc(12 / var(--font-size) * 1rem);
        border-bottom-right-radius: calc(15 / var(--font-size) * 1rem);
        z-index: 2;
      }
    }
    .knowledge_blog-list__in {
      padding: calc(16 / var(--font-size) * 1rem);
      position: relative;
      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;
    }
    .knowledge_blog-list__in::before,
    .knowledge_blog-list__in::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .knowledge_blog-list__in::before {
      background-color: var(--white-color);
    }
    .knowledge_blog-list__in::after {
      background: rgba(99, 161, 218, 0.16);
      -webkit-filter: blur(calc(50 / var(--font-size) * 1rem));
              filter: blur(calc(50 / var(--font-size) * 1rem));
      mix-blend-mode: multiply;
      z-index: -2;
      opacity: 1;
      -webkit-transition: 0.25s opacity;
      transition: 0.25s opacity;
    }
    .knowledge_blog-list__img {
      margin-bottom: calc(18 / var(--font-size) * 1rem);
    }
    .knowledge_blog-list__img img {
      width: 100%;
      aspect-ratio: 311/204;
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: top;
         object-position: top;
    }
    .knowledge_blog-list__title-label {
      font-weight: 500;
      --txt-font-size: 17;
      --txt-line-height: 1.6;
      --txt-letter-spacing: 0.06em;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      max-height: calc(1.6em * 3);
      text-overflow: ellipsis;
    }
    .knowledge_blog-list__text {
      margin-top: calc(14 / var(--font-size) * 1rem);
      -webkit-box-flex: 1;
          -ms-flex: auto;
              flex: auto;
    }
    .knowledge_blog-list__text {
      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: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
    }
    .knowledge_blog-list__text-label {
      display: -webkit-box;
      --txt-font-size: 13;
      --txt-letter-spacing: 0.08em;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      --txt-line-height: 1.6;
      max-height: calc(1.6em * 3);
      text-overflow: ellipsis;
    }
  }
}
/* ==========================================================================
  KNOWLEDGE_BLOG コラム詳細
========================================================================== */
@layer page {
  @media all and (width >= 48rem) {
    .knowledge_blog-article .l-container {
      padding-bottom: calc(88 / var(--font-size) * 1rem);
    }
    .blog-article {
      line-height: 2;
      letter-spacing: 0.1em;
    }
    .blog-article .l-section {
      padding-top: calc(64 / var(--font-size) * 1rem);
      max-width: calc(1224 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    .blog-article .l-block__head {
      max-width: none;
      margin-bottom: calc(56 / var(--font-size) * 1rem);
    }
    .blog-article-catch {
    }
    .blog-article-catch-heading {
      margin-bottom: calc(40 / var(--font-size) * 1rem);
    }
    .blog-article-catch-heading__label {
      color: var(--primary-color-500);
      font-size: calc(40 / var(--font-size) * 1rem);
      font-family: var(--ff-jp-serif);
      line-height: 1.6;
      letter-spacing: 0.05em;
    }
    .blog-article-catch-info {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: calc(24 / var(--font-size) * 1rem);
    }
    .blog-article-catch-info__category {
      display: inline-block;
      background: #dbe8ef;
      padding-block: calc(6 / var(--font-size) * 1rem);
      padding-inline: calc(14 / var(--font-size) * 1rem);
    }
    .blog-article-catch-info__category-label {
      font-size: calc(13 / var(--font-size) * 1rem);
      line-height: 1;
    }
    .blog-article-catch-info__date-label {
      font-size: calc(15 / var(--font-size) * 1rem);
    }
    .blog-article-catch-info__date-label .number {
      font-family: var(--ff-en);
      font-size: calc(17 / var(--font-size) * 1rem);
    }
    .blog-article-index {
      margin-top: calc(40 / var(--font-size) * 1rem);
      position: relative;
    }
    .blog-article-index::before,
    .blog-article-index::after {
      content: '';
      width: 100%;
      height: calc(1 / var(--font-size) * 1rem);
      background-color: #b0b5c3;
      position: absolute;
      left: 0;
    }
    .blog-article-index::before {
      top: 0;
    }
    .blog-article-index::after {
      bottom: 0;
    }
    .blog-article-index__inner {
      padding: calc(24 / var(--font-size) * 1rem);
    }
    .blog-article-index-heading {
      margin-bottom: calc(12 / var(--font-size) * 1rem);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: calc(24 / var(--font-size) * 1rem);
    }
    .blog-article-index-heading__ico {
      width: calc(30 / var(--font-size) * 1rem);
    }
    .blog-article-index-heading__label {
      font-family: var(--ff-en);
      font-weight: 600;
      font-size: calc(18 / var(--font-size) * 1rem);
    }
    .blog-article-index-list__item {
      font-size: calc(16 / var(--font-size) * 1rem);
      font-weight: 500;
    }
    .blog-article-index-list__item::before {
      content: '・';
      padding-right: calc(6 / var(--font-size) * 1rem);
    }
    .blog-article-index-list__label {
      text-decoration: underline;
      text-underline-offset: calc(4 / var(--font-size) * 1rem);
    }
    .blog-article-index-list__label:hover {
      text-decoration: none;
    }
    .blog-article-lead {
      margin-top: calc(60 / var(--font-size) * 1rem);
    }
    .blog-article-lead__label {
      font-size: calc(16 / var(--font-size) * 1rem);
    }
    .blog-solution-cta {
      margin-top: calc(56 / var(--font-size) * 1rem);
    }
    .blog-solution-cta .solution-cta-item-lead__label {
      letter-spacing: 0.1em;
    }
    .blog-article-block {
      margin-top: calc(60 / var(--font-size) * 1rem);
      margin-bottom: calc(80 / var(--font-size) * 1rem);
    }
    .blog-article-block__section + .blog-article-block__section {
      margin-top: calc(56 / var(--font-size) * 1rem);
    }
    .blog-article-block__section h3 {
      font-weight: 500;
      line-height: 1.47;
      font-size: calc(26 / var(--font-size) * 1rem);
      color: var(--primary-color-500);
      padding-bottom: calc(16 / var(--font-size) * 1rem);
      margin-bottom: calc(16 / var(--font-size) * 1rem);
      border-bottom: calc(1 / var(--font-size) * 1rem) var(--primary-color-500) solid;
    }
    .blog-article-block__section h4{
      font-weight: 500;
      line-height: 1.6;
      font-size: calc(16 / var(--font-size) * 1rem);
      color: var(--black-color, #000);
      padding-left: calc(16 / var(--font-size) * 1rem);
      border-left: calc(5 / var(--font-size) * 1rem) var(--primary-color-500) solid;
    }
    .blog-article-block__section p {
      font-size: calc(16 / var(--font-size) * 1rem);
    }
    .blog-article-block__section .blog-article-block__question {
      color: #20409c;
      font-weight: 600;
      font-size: calc(18 / var(--font-size) * 1rem);
      position: relative;
      padding-left: calc(36 / var(--font-size) * 1rem);
    }
    .blog-article-block__section .blog-article-block__question::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      width: calc(24 / var(--font-size) * 1rem);
      height: calc(1 / var(--font-size) * 1rem);
      background-color: #20409c;
    }
    .blog-article-block__section .blog-article-block__text + .blog-article-block__question {
      margin-top: calc(48 / var(--font-size) * 1rem);
    }
    .blog-article-link-list li{
      margin-top: 10px;
    }
    .blog-article-link {
      color: var(--primary-color-500);
      text-decoration: underline;
    }
    .blog-article-link:hover {
      text-decoration: none;
    }
    .blog-article-link::after {
      line-height: inherit;
      font-size: inherit;
      content: '';
      display: inline-block;
      margin-left: calc(4 / var(--font-size) * 1rem);
      width: 1em;
      height: 1em;
      background-color: var(--primary-color-500);
      -webkit-mask-image: url(/assets/img/common/ico_link-window.svg);
              mask-image: url(/assets/img/common/ico_link-window.svg);
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
    }
    .blog-article-block-note {
      font-size: calc(12 / var(--font-size) * 1rem);
    }
    .blog-article-block-note__label + .blog-article-block-note__label {
      margin-top: 0;
    }
    .blog-article-block-note__label::before {
      content: '※';
    }
    .blog-article-block__section figure {
      margin: 0 auto;
      margin-top: calc(64 / var(--font-size) * 1rem);
      text-align: center;
      max-width: calc(820 / var(--font-size) * 1rem);
    }
    .blog-article-block__section figure + * {
      margin-top: calc(64 / var(--font-size) * 1rem);
    }
    .blog-article-block__section figcaption {
      margin-top: calc(8 / var(--font-size) * 1rem);
      font-size: calc(13 / var(--font-size) * 1rem);
      color: #0d2643;
    }
    .blog-article-block__section * + * {
      margin-top: calc(40 / var(--font-size) * 1rem);
    }
    .blog-article .l-block__footer {
      margin-bottom: calc(120 / var(--font-size) * 1rem);
    }
    .blog-article-writer {
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: auto auto 1fr;
      grid-template-columns: auto auto 1fr;
      padding-block: calc(30 / var(--font-size) * 1rem) calc(30 / var(--font-size) * 1rem);
      padding-inline: calc(60 / var(--font-size) * 1rem);
      position: relative;
      background: var(--white-color);
      border-top-left-radius: calc(50 / var(--font-size) * 1rem);
      border-bottom-right-radius: calc(50 / var(--font-size) * 1rem);
    }
    .blog-article-writer::before {
      position: absolute;
      content: '';
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      z-index: -1;
      width: 100%;
      height: 110%;
      background: #63a1da;
      opacity: 0.08;
      mix-blend-mode: multiply;
      -webkit-filter: blur(15px);
              filter: blur(15px);
    }
    .blog-article-writer:not(:has(.blog-article-writer-comment)) {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      .blog-article-writer-img {
        width: calc(120 / var(--font-size) * 1rem);
      }
    }
    .blog-article-writer-img {
      -ms-grid-column: 1;
      grid-column: 1;
      -ms-grid-row: 1;
      -ms-grid-row-span: 2;
      grid-row: 1/3;
      margin-right: calc(30 / var(--font-size) * 1rem);
    }
    .blog-article-writer-heading {
      -ms-grid-column: 2;
      grid-column: 2;
      -ms-grid-row: 1;
      grid-row: 1;
      margin-right: calc(20 / var(--font-size) * 1rem);
      min-height: calc(60 / var(--font-size) * 1rem);
    }
    .blog-article-writer-heading__label {
      position: relative;
      font-size: calc(18 / var(--font-size) * 1rem);
      line-height: 1.6;
      font-weight: 500;
      letter-spacing: 0.1em;
      padding-right: calc(30 / var(--font-size) * 1rem);
      background: var(--primary-grd--90);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
    }
    .blog-article-writer-heading__label::before {
      content: '';
      position: absolute;
      width: calc(24 / var(--font-size) * 1rem);
      height: calc(1 / var(--font-size) * 1rem);
      background: var(--primary-color-200);
      right: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
    }
    .blog-article-writer-position {
      -ms-grid-column: 3;
      grid-column: 3;
      -ms-grid-row: 1;
      grid-row: 1;
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      color: var(--primary-color-500);
    }
    .blog-article-writer-position.--link .blog-article-writer-position__label::after {
      line-height: inherit;
      font-size: inherit;
      content: '';
      display: inline-block;
      margin-left: calc(4 / var(--font-size) * 1rem);
      width: 0.9em;
      height: 0.9em;
      background-color: var(--primary-color-500);
      -webkit-mask-image: url(/assets/img/common/ico_link-window.svg);
              mask-image: url(/assets/img/common/ico_link-window.svg);
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
    }
    .blog-article-writer-position__label {
      font-size: calc(18 / var(--font-size) * 1rem);
      line-height: 1.6;
      font-weight: 700;
      letter-spacing: 0.1em;
    }
    .blog-article-writer-position-note {
      margin-top: calc(4 / var(--font-size) * 1rem);
    }
    .blog-article-writer-position-note__label {
      font-size: calc(15 / var(--font-size) * 1rem);
      line-height: 1.8;
      letter-spacing: 0.1em;
    }
    .blog-article-writer-comment {
      -ms-grid-column: 2;
      -ms-grid-column-span: 2;
      grid-column: 2/4;
      -ms-grid-row-align: end;
          align-self: end;
      padding-top: calc(8 / var(--font-size) * 1rem);
    }
    .blog-article-writer-comment__label {
      font-size: calc(15 / var(--font-size) * 1rem);
      line-height: 1.8;
      letter-spacing: 0.1em;
    }
    .knowledge_blog-article .l-contact-footer {
      max-width: calc(1224 / var(--font-size) * 1rem);
    }
    .blog-related {
      max-width: calc(1224 / var(--font-size) * 1rem);
      margin-inline: auto;
    }
    .blog-related .knowledge_blog-list {
      margin-top: calc(40 / var(--font-size) * 1rem);
    }
    .blog-article-back-btn {
      margin-inline: auto;
      margin-block: calc(40 / var(--font-size) * 1rem) calc(80 / var(--font-size) * 1rem);
    }
    .blog-article-back-btn .c-btn {
      --btn-bg-color: linear-gradient(-90deg, var(--primary-color-500), var(--primary-color-200) 50%, var(--primary-color-500));
    }
    .blog-article-back-btn .c-btn-ico__label {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
    .blog-feature-cta-wrap {
      position: relative;
      max-width: calc(1224 / var(--font-size) * 1rem);
      margin-inline: auto;
      padding-block: calc(24 / var(--font-size) * 1rem) calc(48 / var(--font-size) * 1rem);
      padding-inline: calc(16 / var(--font-size) * 1rem);
      /* コンテナ */
      container-type: inline-size;
      container-name: blogCtaContainer;
    }
    .blog-feature-cta-wrap::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: var(--primary-color-20);
      border-top-left-radius: calc(100 / var(--font-size) * 1rem);
      border-bottom-right-radius: calc(100 / var(--font-size) * 1rem);
      mix-blend-mode: multiply;
      z-index: -2;
    }
    .blog-feature-cta .l-block__content {
      max-width: calc(720 / var(--font-size) * 1rem);
    }
    .blog-feature-cta-wrap + .l-contact-footer {
      margin-top: calc(72 / var(--font-size) * 1rem);
    }
  }
  @media all and (width < 48rem) {
    .knowledge_blog-article .l-container {
      padding-bottom: calc(40 / var(--font-size) * 1rem);
    }
    .blog-article {
      line-height: 2;
      letter-spacing: 0.08em;
    }
    .blog-article .l-section {
      padding-top: calc(48 / var(--font-size) * 1rem);
    }
    .blog-article .l-block__head {
      margin-bottom: calc(40 / var(--font-size) * 1rem);
    }
    .blog-article-catch {
    }
    .blog-article-catch-heading {
      margin-bottom: calc(24 / var(--font-size) * 1rem);
    }
    .blog-article-catch-heading__label {
      color: var(--primary-color-500);
      font-size: calc(22 / var(--font-size) * 1rem);
      font-family: var(--ff-jp-serif);
      line-height: 1.6;
      letter-spacing: 0.08em;
    }
    .blog-article-catch-info {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: calc(16 / var(--font-size) * 1rem);
    }
    .blog-article-catch-info__category {
      display: inline-block;
      background: #dbe8ef;
      padding-block: calc(3 / var(--font-size) * 1rem);
      padding-inline: calc(12 / var(--font-size) * 1rem);
    }
    .blog-article-catch-info__category-label {
      font-size: calc(12 / var(--font-size) * 1rem);
      line-height: 1;
    }
    .blog-article-catch-info__date-label {
      font-size: calc(12 / var(--font-size) * 1rem);
    }
    .blog-article-catch-info__date-label .number {
      font-family: var(--ff-en);
      font-size: calc(13 / var(--font-size) * 1rem);
    }
    .blog-article-index {
      margin-top: calc(24 / var(--font-size) * 1rem);
      position: relative;
    }
    .blog-article-index::before,
    .blog-article-index::after {
      content: '';
      width: 100%;
      height: calc(1 / var(--font-size) * 1rem);
      background-color: #b0b5c3;
      position: absolute;
      left: 0;
    }
    .blog-article-index::before {
      top: 0;
    }
    .blog-article-index::after {
      bottom: 0;
    }
    .blog-article-index__inner {
      padding-block: calc(20 / var(--font-size) * 1rem);
      padding-inline: calc(16 / var(--font-size) * 1rem);
    }
    .blog-article-index-heading {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      gap: calc(12 / var(--font-size) * 1rem);
      margin-bottom: calc(8 / var(--font-size) * 1rem);
    }
    .blog-article-index-heading__ico {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: start;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      width: calc(21 / var(--font-size) * 1rem);
    }
    .blog-article-index-heading__ico img {
      vertical-align: text-top;
    }
    .blog-article-index-heading__label {
      font-family: var(--ff-en);
      font-weight: 600;
      font-size: calc(14 / var(--font-size) * 1rem);
      line-height: 1.5;
    }
    .blog-article-index-list__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      font-size: calc(13 / var(--font-size) * 1rem);
      font-weight: 500;
    }
    .blog-article-index-list__item::before {
      content: '・';
      padding-right: calc(6 / var(--font-size) * 1rem);
    }
    .blog-article-index-list__label {
      letter-spacing: 0.08em;
      text-decoration: underline;
      text-underline-offset: calc(4 / var(--font-size) * 1rem);
    }
    .blog-article-index-list__label:hover {
      text-decoration: none;
    }
    .blog-article-lead {
      margin-top: calc(40 / var(--font-size) * 1rem);
    }
    .blog-article-lead__label {
      letter-spacing: 0.08em;
      font-size: calc(13 / var(--font-size) * 1rem);
    }
    .blog-solution-cta {
      margin-top: calc(40 / var(--font-size) * 1rem);
    }
    .blog-solution-cta .solution-cta-item-lead__label {
      letter-spacing: 0.1em;
    }
    .blog-article-block {
      margin-top: calc(48 / var(--font-size) * 1rem);
      margin-bottom: calc(32 / var(--font-size) * 1rem);
    }
    .blog-article-block__section + .blog-article-block__section {
      margin-top: calc(40 / var(--font-size) * 1rem);
    }
    .blog-article-block__section h3 {
      font-weight: 500;
      line-height: 1.6;
      font-size: calc(18 / var(--font-size) * 1rem);
      color: var(--primary-color-500);
      padding-bottom: calc(16 / var(--font-size) * 1rem);
      margin-bottom: calc(16 / var(--font-size) * 1rem);
      border-bottom: calc(1 / var(--font-size) * 1rem) var(--primary-color-500) solid;
    }
    .blog-article-block__section h4{
      font-weight: 500;
      line-height: 1.6;
      font-size: calc(14 / var(--font-size) * 1rem);
      color: var(--black-color, #000);
      padding-left: calc(14 / var(--font-size) * 1rem);
      border-left: calc(5 / var(--font-size) * 1rem) var(--primary-color-500) solid;
    }
    .blog-article-block__section p {
      font-size: calc(13 / var(--font-size) * 1rem);
      letter-spacing: 0.08em;
    }
    .blog-article-block__section .blog-article-block__question {
      color: #20409c;
      font-weight: 600;
      font-size: calc(14 / var(--font-size) * 1rem);
      letter-spacing: 0.08em;
      position: relative;
      padding-left: calc(28 / var(--font-size) * 1rem);
    }
    .blog-article-block__section .blog-article-block__question::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      margin-top: 1em;
      width: calc(16 / var(--font-size) * 1rem);
      height: calc(1 / var(--font-size) * 1rem);
      background-color: #20409c;
    }
    .blog-article-block__section .blog-article-block__text + .blog-article-block__question {
      margin-top: calc(48 / var(--font-size) * 1rem);
    }
    .blog-article-link-list li{
      margin-top: 10px;
      font-size: calc(13 / var(--font-size) * 1rem);
    }
    .blog-article-link {
      color: var(--primary-color-500);
      text-decoration: underline;
    }
    .blog-article-link:hover {
      text-decoration: none;
    }
    .blog-article-link::after {
      line-height: inherit;
      font-size: inherit;
      content: '';
      display: inline-block;
      margin-left: calc(4 / var(--font-size) * 1rem);
      width: 1em;
      height: 1em;
      background-color: var(--primary-color-500);
      -webkit-mask-image: url(/assets/img/common/ico_link-window.svg);
              mask-image: url(/assets/img/common/ico_link-window.svg);
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
    }
    .blog-article-block-note {
      font-size: calc(10 / var(--font-size) * 1rem);
      letter-spacing: 0.1em;
    }
    .blog-article-block-note__label + .blog-article-block-note__label {
      margin-top: 0;
    }
    .blog-article-block-note__label::before {
      content: '※';
    }
    .blog-article-block__section figure {
      margin-top: calc(40 / var(--font-size) * 1rem);
      margin-inline: 0;
      text-align: center;
    }
    .blog-article-block__section figure + * {
      margin-top: calc(40 / var(--font-size) * 1rem);
    }
    .blog-article-block__section figcaption {
      margin-top: calc(8 / var(--font-size) * 1rem);
      font-size: calc(13 / var(--font-size) * 1rem);
      color: #0d2643;
    }
    .blog-article-block__section * + * {
      margin-top: calc(32 / var(--font-size) * 1rem);
    }
    .blog-article .l-block__footer {
      margin-bottom: calc(64 / var(--font-size) * 1rem);
    }
    .blog-article-writer {
      display: -ms-grid;
      display: grid;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -ms-grid-columns: calc(104 / var(--font-size) * 1rem) 1fr;
      grid-template-columns: calc(104 / var(--font-size) * 1rem) 1fr;
      padding-block: calc(24 / var(--font-size) * 1rem) calc(24 / var(--font-size) * 1rem);
      padding-inline: calc(24 / var(--font-size) * 1rem);
      position: relative;
      background: var(--white-color);
      border-top-left-radius: calc(30 / var(--font-size) * 1rem);
      border-bottom-right-radius: calc(30 / var(--font-size) * 1rem);
    }
    .blog-article-writer::before {
      position: absolute;
      content: '';
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      z-index: -1;
      width: 100%;
      height: 110%;
      background: #63a1da;
      opacity: 0.08;
      mix-blend-mode: multiply;
      -webkit-filter: blur(15px);
              filter: blur(15px);
    }
    .blog-article-writer-img {
      -ms-grid-column: 1;
      grid-column: 1;
      -ms-grid-row: 1;
      -ms-grid-row-span: 2;
      grid-row: 1/3;
      margin-right: calc(30 / var(--font-size) * 1rem);
    }
    .blog-article-writer-heading {
      -ms-grid-column: 2;
      grid-column: 2;
      -ms-grid-row: 1;
      grid-row: 1;
      font-size: calc(14 / var(--font-size) * 1rem);
      line-height: 1.5;
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content;
    }
    .blog-article-writer-heading__label {
      display: inline-block;
      position: relative;
      padding-right: calc(32 / var(--font-size) * 1rem);
      font-weight: 500;
      letter-spacing: 0.08em;
      background: var(--primary-grd--90);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
    }
    .blog-article-writer-heading__label::before {
      content: '';
      position: absolute;
      width: calc(24 / var(--font-size) * 1rem);
      height: calc(1 / var(--font-size) * 1rem);
      background: var(--primary-color-200);
      right: 0;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
    }
    .blog-article-writer-position {
      -ms-grid-column: 2;
      grid-column: 2;
      -ms-grid-row: 2;
      grid-row: 2;
      color: var(--primary-color-500);
    }
    .blog-article-writer-position.--link .blog-article-writer-position__label::after {
      line-height: inherit;
      font-size: inherit;
      content: '';
      display: inline-block;
      margin-left: calc(4 / var(--font-size) * 1rem);
      width: 0.9em;
      height: 0.9em;
      background-color: var(--primary-color-500);
      -webkit-mask-image: url(/assets/img/common/ico_link-window.svg);
              mask-image: url(/assets/img/common/ico_link-window.svg);
      -webkit-mask-size: contain;
              mask-size: contain;
      -webkit-mask-repeat: no-repeat;
              mask-repeat: no-repeat;
    }
    .blog-article-writer-position__label {
      font-size: calc(14 / var(--font-size) * 1rem);
      line-height: 1.5;
      font-weight: 700;
      letter-spacing: 0.1em;
    }
    .blog-article-writer-position-note {
      margin-top: calc(6 / var(--font-size) * 1rem);
    }
    .blog-article-writer-position-note__label {
      font-size: calc(12 / var(--font-size) * 1rem);
      line-height: 1;
      letter-spacing: 0.1em;
    }
    .blog-article-writer-comment {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1/3;
      -ms-grid-row-align: end;
          align-self: end;
      margin-top: calc(16 / var(--font-size) * 1rem);
    }
    .blog-article-writer-comment__label {
      font-size: calc(12 / var(--font-size) * 1rem);
      line-height: 1.8;
      letter-spacing: 0.1em;
    }
    .knowledge_blog-article .l-contact-footer {
      max-width: calc(1224 / var(--font-size) * 1rem);
    }
    .blog-related {
      margin-inline: auto;
    }
    .blog-related__head .c-heading {
      --heading-font-size: 22;
    }
    .blog-related .knowledge_blog-list {
      margin-top: calc(24 / var(--font-size) * 1rem);
    }
    .blog-related .knowledge_blog-list__item + .knowledge_blog-list__item {
      margin-top: calc(16 / var(--font-size) * 1rem);
    }
    .blog-related .knowledge_blog-list__title-label {
      --txt-font-size: 14;
      --txt-line-height: 1.4;
      -webkit-line-clamp: 4;
      max-height: calc(1.6em * 4);
    }
    .blog-related .knowledge_blog-list__in {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      padding: calc(12 / var(--font-size) * 1rem);
    }
    .blog-related .knowledge_blog-list__img {
      margin-bottom: 0;
      margin-right: calc(12 / var(--font-size) * 1rem);
      -ms-flex-negative: 0;
          flex-shrink: 0;
      max-width: calc(150 / var(--font-size) * 1rem);
    }
    .blog-article-back-btn {
      margin-inline: auto;
      margin-block: calc(32 / var(--font-size) * 1rem) calc(64 / var(--font-size) * 1rem);
    }
    .blog-article-back-btn .c-btn {
      --btn-bg-color: linear-gradient(-90deg, var(--primary-color-500), var(--primary-color-200) 50%, var(--primary-color-500));
    }
    .blog-article-back-btn .c-btn-ico__label {
      -webkit-transform: rotate(180deg);
              transform: rotate(180deg);
    }
    .blog-feature-cta-wrap {
      position: relative;
      padding-block: calc(40 / var(--font-size) * 1rem) calc(32 / var(--font-size) * 1rem);
      padding-inline: calc(16 / var(--font-size) * 1rem);
    }
    .blog-feature-cta-wrap::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: var(--primary-color-20);
      border-top-left-radius: calc(50 / var(--font-size) * 1rem);
      border-bottom-right-radius: calc(50 / var(--font-size) * 1rem);
      mix-blend-mode: multiply;
      z-index: -2;
    }
    .blog-feature-cta {
      &::before {
        width: calc(100 / var(--font-size) * 1rem);
      }
      &::after {
        width: calc(91 / var(--font-size) * 1rem);
      }
      .l-block__content {
        &::before {
          top: calc(-100% + calc(40 / var(--font-size) * 1rem));
          width: calc(82 / var(--font-size) * 1rem);
        }
        &::after {
          width: calc(100 / var(--font-size) * 1rem);
        }
      }
    }
    .blog-feature-cta-wrap + .l-contact-footer {
      margin-top: calc(48 / var(--font-size) * 1rem);
    }
  }
}

/* ==========================================================================
  PRIVACY POLICY
========================================================================== */
/* 全角数字 */
@counter-style em-decimal {
  system: numeric;
  symbols: '\FF10''\FF11''\FF12''\FF13''\FF14''\FF15''\FF16''\FF17''\FF18''\FF19';
}
/* まる数字 */
@counter-style circled-num {
  system: numeric;
  symbols: '\24EA''\2460''\2461''\2462''\2463''\2464''\2465''\2466''\2467''\2468';
}
@layer page {
  @media all and (width >= 48rem) {
    .privacypolicy {
      .page-hero {
        padding-inline: calc(64 / var(--font-size) * 1rem);
        height: auto;
      }
      .page-hero::before {
        background-image: none;
      }
      .page-hero__header-title {
        font-size: calc(45.76 / var(--font-size) * 1rem);
        color: var(--primary-color-500);
      }
      .page-hero__header-title::after {
        width: calc(250 / var(--font-size) * 1rem);
        background-color: var(--primary-color-500);
        margin-left: calc(16 / var(--font-size) * 1rem);
      }
      .page-hero__header-lead {
        font-size: calc(24.5 / var(--font-size) * 1rem);
        color: var(--primary-color-500);
        letter-spacing: 0.1em;
      }
      .page-hero__in {
        max-width: calc(1224 / var(--font-size) * 1rem);
        margin-inline: auto;
      }
      .page-hero__body {
        padding-inline: 0;
        padding-top: calc(88 / var(--font-size) * 1rem);
      }
      .l-breadcrumb {
        padding-inline: calc(64 / var(--font-size) * 1rem);
      }
      .l-section {
        padding-inline: 0;
      }
      .l-section__head {
        margin-bottom: calc(80 / var(--font-size) * 1rem);
      }
      .l-container {
        max-width: calc(1224 / var(--font-size) * 1rem);
        margin-inline: auto;
        padding-top: calc(128 / var(--font-size) * 1rem);
      }
      .privacy-section-lead {
        --txt-font-color: #171819;
        --txt-letter-spacing: 0.1em;
      }

      .privacy-content {
        counter-reset: number 0;
      }
      .privacy-block-heading::before {
        counter-increment: number 1;
        content: counter(number) '.';
      }
      .privacy-block {
        counter-reset: lv1number 0;
      }
      .privacy-block-desc-list--lv1 > .c-list-item::before {
        counter-increment: lv1number 1;
        content: '（' counter(lv1number, em-decimal) '）';
      }
      .privacy-block-desc-list--lv1 {
        counter-reset: lv2number 0;
        --list-gap-y: 24;
      }
      .privacy-block-desc-list--lv2.--number > .c-list-item::before {
        counter-increment: lv2number 1;
        content: counter(lv2number, circled-num);
      }

      .privacy-block-desc-text + .privacy-block-desc-list--lv1 {
        margin-top: calc(16 / var(--font-size) * 1rem);
      }
      .privacy-block-desc-list--lv2 {
        margin-top: calc(8 / var(--font-size) * 1rem);
      }
      .privacy-block-desc-list--lv2.c-list--circle {
        --list-icon-size: 8;
      }
      .privacy-block-desc-list--lv2 .c-list-item::before {
        margin-left: -1.625em;
        margin-right: 0.5em;
      }
      .privacy-block-desc-list--lv2.c-list--circle .c-list-item::before {
        margin-left: -1.25em;
        margin-right: 0.75em;
        margin-top: 0.875em;
      }
      .privacy-block-desc-list--lv1 > .c-list-item .c-list-item-text__label {
        font-weight: 500;
      }
      .privacy-block-desc-list--lv2 > .c-list-item .c-list-item-text__label {
        font-weight: 400;
      }
      .privacy-block-desc-list {
        --list-line-height: 2;
      }
      .privacy-block__head {
        margin-bottom: calc(32 / var(--font-size) * 1rem);
      }
      .privacy-block-heading {
        font-size: calc(24 / var(--font-size) * 1rem);
        font-weight: 500;
        line-height: 1.333;
        letter-spacing: 0.1em;
      }
      .privacy-block__content {
        padding-left: calc(32 / var(--font-size) * 1rem);
      }
      .privacy-block-desc {
        font-size: calc(16 / var(--font-size) * 1rem);
        line-height: 2;
        letter-spacing: 0.1em;
      }
    }
  }
  @media all and (width < 48rem) {
    .privacypolicy {
      .page-hero__header-title {
        max-width: calc(100vw - calc(100 / var(--font-size) * 1rem));
        font-size: calc(28 / var(--font-size) * 1rem);
        color: var(--primary-color-500);
        letter-spacing: 0.3em;
        line-height: 1.6;
      }
      .page-hero__header-title::after {
        width: calc(100 / var(--font-size) * 1rem);
        top: auto;
        bottom: calc(16 / var(--font-size) * 1rem);
        -webkit-transform: none;
                transform: none;
        background-color: var(--primary-color-500);
      }
      .page-hero__header-lead {
        color: var(--primary-color-500);
        letter-spacing: 0.1em;
      }
      .l-section__head {
        margin-bottom: calc(64 / var(--font-size) * 1rem);
      }
      .privacy-section-lead {
        --txt-font-color: #171819;
        --txt-letter-spacing: 0.1em;
        --txt-line-height: 2;
      }

      .privacy-content {
        counter-reset: number 0;
      }
      .privacy-block-heading::before {
        counter-increment: number 1;
        content: counter(number) '.';
      }
      .privacy-block {
        counter-reset: lv1number 0;
      }
      .privacy-block-desc-list--lv1 > .c-list-item::before {
        counter-increment: lv1number 1;
        content: '(' counter(lv1number, em-decimal) ')';
      }
      .privacy-block-desc-list--lv1 {
        counter-reset: lv2number 0;
        --list-gap-y: 24;
      }
      .privacy-block-desc-list--lv2.--number > .c-list-item::before {
        counter-increment: lv2number 1;
        content: counter(lv2number, circled-num);
      }

      .privacy-block-desc-text + .privacy-block-desc-list--lv1 {
        margin-top: calc(16 / var(--font-size) * 1rem);
      }
      .privacy-block-desc-list--lv2 {
        margin-top: calc(8 / var(--font-size) * 1rem);
      }
      .privacy-block-desc-list--lv2.c-list--circle {
        --list-icon-size: 6;
      }
      .privacy-block-desc-list--lv2 .c-list-item::before {
        margin-left: -1.625em;
        margin-right: 0.5em;
      }
      .privacy-block-desc-list--lv2.c-list--circle .c-list-item::before {
        margin-left: -1.25em;
        margin-right: 0.75em;
        margin-top: 0.875em;
      }
      .privacy-block-desc-list--lv1 > .c-list-item .c-list-item-text__label {
        font-weight: 500;
      }
      .privacy-block-desc-list--lv2 > .c-list-item .c-list-item-text__label {
        font-weight: 400;
      }
      .privacy-block-desc-list {
        --list-font-size: 16;
        --list-line-height: 2;
      }
      .privacy-block__head {
        margin-bottom: calc(16 / var(--font-size) * 1rem);
      }
      .privacy-block-heading {
        font-size: calc(20 / var(--font-size) * 1rem);
        font-weight: 500;
        line-height: 1.7;
        letter-spacing: 0.1em;
      }
      .privacy-block__content {
      }
      .privacy-block-desc {
        font-size: calc(16 / var(--font-size) * 1rem);
        line-height: 2;
        letter-spacing: 0.1em;
      }
    }
  }
}

.l-modal {
  display: none;
  width: 100%;
  height: 100%;
  max-width: calc(980 / var(--font-size) * 1rem);
  max-height: 90dvh;
}
body {
  position: relative;
}
.l-modal.is-open {
  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;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: fixed;
  z-index: 10000;
}
.l-modal-bg {
  z-index: 9999;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  background-color: #0d2643;
  opacity: 0;
  visibility: hidden;
}
.is-modal-active .l-modal-bg {
  opacity: 0.7;
  visibility: visible;
}
.l-modal-container {
  position: relative;
  padding-block: calc(20 / var(--font-size) * 1rem);
  padding-inline: calc(20 / var(--font-size) * 1rem);
  width: 100%;
  height: 100%;
  margin: auto;
}
.l-modal__in {
  background-color: var(--white-color);
  width: 100%;
  height: 100%;
}
.l-modal-close-trigger {
  position: absolute;
  cursor: pointer;
  right: 0;
  top: 0;
}
.l-modal-close-trigger__ico {
  color: var(--white-color);
  font-size: 20px;
}