/* pages/about.css */

body[data-path="/about/"] {
  --offset--inview-ready-sm: 60;
  --offset--inview-ready-md: 90;

  .js-inview-target {
    opacity: 1;
    translate: 0 0;
    transition:
      opacity 0.6s ease 0s,
      translate 0.6s ease 0s;
  }

  .js-inview-target.js-inview-ready {
    opacity: 0;
    translate: 0 calc(var(--offset--inview-ready-sm) * 1rem / 16);
    @media (width >= 768px) {
      translate: 0 calc(var(--offset--inview-ready-md) * 1px);
    }
  }

  .p-bg {
    position: relative;
    /* min-block-size: 1000px; */
    padding-block-end: calc(10 * 1rem / 16);
    background-color: var(--color--red);
    overflow: hidden;
  }

  .p-bg::before {
    content: "";
    position: absolute;
    inset: calc(-228 * 1rem / 16) auto auto 50%;
    z-index: 1;
    display: block;
    inline-size: calc(793 * 1rem / 16);
    block-size: calc(763 * 1rem / 16);
    margin-inline: auto;
    border-radius: 50%;
    background-color: var(--color--white);
    translate: calc(-793 / 2 * 1rem / 16) 0;
  }

  .p-bg::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: block;
    block-size: calc(244 * 1rem / 16);
    background-color: var(--color--white);
  }

  @media (width >= 768px) {
    .p-bg::before {
      inset: -572px auto auto 50%;
      inline-size: 3000px;
      block-size: 1077px;
      translate: -1500px 0;
    }

    .p-bg::after {
      block-size: 250px;
      background: linear-gradient(180deg, rgba(var(--color-rgb--white), 0) 0%, rgba(var(--color-rgb--white), 1) 60%);
      background: linear-gradient(
        180deg in oklab,
        rgba(var(--color-rgb--white), 0) 0%,
        rgba(var(--color-rgb--white), 1) 60%
      );
    }
  }

  .p-header {
    position: relative;
    z-index: 3;
    block-size: calc(535 * 1rem / 16);
    margin-inline: auto;
    padding-block-start: calc(172 * 1rem / 16);
    @media (width >= 768px) {
      block-size: 505px;
      padding-block-start: 118px;
    }

    .p-header__title {
      display: flex;
      flex-flow: column;
      align-items: center;
      gap: calc(16 * 1rem / 16);
      @media (width >= 768px) {
        gap: 36px;
      }

      h1,
      h2 {
        inline-size: calc(245.5 * 1rem / 16);
        @media (width >= 768px) {
          inline-size: 635px;
        }
      }

      h1 {
        margin-block: unset;
      }

      h2 {
        line-height: 1.6;
        text-align: center;
      }
    }
  }

  .p-header::before {
    content: "";
    position: absolute;
    inset: calc(76.74 * 1rem / 16) auto auto 50%;
    inline-size: calc(210.88 * 1rem / 16);
    block-size: calc(489.91 * 1rem / 16);
    background-image: url("/assets/img/pages/about/index/header/illust1_sm.webp");
    background-position: top left;
    background-size: contain;
    background-repeat: no-repeat;
    translate: calc(-244.38 * 1rem / 16) 0;
  }

  .p-header::after {
    content: "";
    position: absolute;
    inset: calc(75.41 * 1rem / 16) auto auto 50%;
    inline-size: calc(222.47 * 1rem / 16);
    block-size: calc(493.41 * 1rem / 16);
    background-image: url("/assets/img/pages/about/index/header/illust2_sm.webp");
    background-position: top left;
    background-size: contain;
    background-repeat: no-repeat;
    translate: 0 0;
  }

  @media (width >= 768px) {
    .p-header::before {
      inset: 77px auto auto 50%;
      inline-size: 482.45px;
      block-size: 492.17px;
      background-image: url("/assets/img/pages/about/index/header/illust1_md.webp");
      background-position: top left;
      background-size: contain;
      background-repeat: no-repeat;
      translate: -744.45px 0;
    }

    .p-header::after {
      inset: 45px auto auto 50%;
      display: block;
      inline-size: 461.93px;
      block-size: 544.69px;
      background-image: url("/assets/img/pages/about/index/header/illust2_md.webp");
      background-position: top left;
      background-size: contain;
      background-repeat: no-repeat;
      translate: 298px 0;
    }
  }

  .p-business {
    position: relative;
    z-index: 4;

    .p-business__title {
      line-height: 1.4;
      @media (width >= 768px) {
        line-height: revert;
      }
    }

    .p-business__card {
      display: grid;
      grid-template-columns: calc(20 * 1rem / 16) 1fr calc(20 * 1rem / 16);
      grid-template-rows: calc(40 * 1rem / 16) auto calc(30 * 1rem / 16) auto calc(30 * 1rem / 16) auto calc(
          30 * 1rem / 16
        );
      grid-template-areas:
        ". . ."
        ". title ."
        ". . ."
        ". text ."
        ". . ."
        ". images ."
        ". . .";
      border-radius: calc(8 * 1rem / 16);
      background-color: var(--color--white);
      box-shadow: 0 3px 6px 0 rgba(var(--color-rgb--black), 0.08);
      @media (width >= 768px) {
        grid-template-columns: 60px 20px 450px 1fr 60px;
        grid-template-rows: 45px auto 50px auto 40px;
        grid-template-areas:
          ". . . . ."
          ". . title text ."
          ". . . . ."
          ". images images images ."
          ". . . . .";
      }
    }

    .p-business__card-title {
      grid-area: title;
      justify-self: center;
      line-height: 1;
      @media (width >= 768px) {
        justify-self: revert;
        align-self: center;
      }

      .c-icon--refrigerator {
        inline-size: calc(56 * 1rem / 16);
        block-size: calc(52 * 1rem / 16);
        @media (width >= 768px) {
          inline-size: 70px;
          block-size: 65.66px;
        }
      }

      .c-icon--foods {
        inline-size: calc(56 * 1rem / 16);
        block-size: calc(53 * 1rem / 16);
        @media (width >= 768px) {
          inline-size: 70px;
          block-size: 66.5px;
        }
      }
    }

    .p-business__card-text {
      grid-area: text;
      line-height: 1.6;
      @media (width >= 768px) {
        align-self: center;
        line-height: 1.444;
      }
    }

    .p-business__card-images {
      grid-area: images;
      display: flex;
      flex-flow: column;
      gap: calc(20 * 1rem / 16);
      @media (width >= 768px) {
        flex-flow: row;
      }
    }
  }

  .p-process {
    counter-reset: heading;
    position: relative;
    /* padding-block-end: calc(305 * 1rem / 16); */
    padding-block-end: calc((305 + 70) * 1rem / 16);
    overflow: hidden;
    @media (width >= 768px) {
      /* padding-block-end: 55px; */
      padding-block-end: calc(55px + 90px);
    }

    .p-process__title {
      margin-inline: auto;
      text-align: center;
      /* background-color: #ccc; */

      img {
        inline-size: calc(186 * 1rem / 16);
        @media (width >= 768px) {
          inline-size: 490px;
        }
      }
    }

    .p-process__container {
      inline-size: calc(337 * 1rem / 16);
      margin-inline: auto;
      @media (width >= 768px) {
        inline-size: 1138.5px;
      }
    }

    .p-process__container:nth-of-type(1)::before {
      content: "";
      display: block;
      block-size: calc(21.54 * 1rem / 16);
      margin-block-start: calc(-38 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/process/line2_sm.webp");
      background-position: left bottom;
      background-size: calc(337 * 1rem / 16) calc(22 * 1rem / 16);
      background-repeat: no-repeat;
    }
    @media (width >= 768px) {
      .p-process__container:nth-of-type(1)::before {
        block-size: 23px;
        margin-block-start: -33px;
        background-image: url("/assets/img/pages/about/index/process/line2_md.webp");
        background-size: 1139px 23px;
      }
    }

    .p-process__container:nth-of-type(odd)::after {
      content: "";
      display: block;
      block-size: calc(40.13 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/process/line3_sm.webp");
      background-position: left top;
      background-size: calc(337 * 1rem / 16) calc(40.5 * 1rem / 16);
      background-repeat: no-repeat;
    }
    @media (width >= 768px) {
      .p-process__container:nth-of-type(odd)::after {
        block-size: 40.5px;
        background-image: url("/assets/img/pages/about/index/process/line3_md.webp");
        /* background-size: 1138.5px 40.5px; */
        background-size: 1139px 40.5px;
      }
    }

    .p-process__container:nth-of-type(even)::after {
      content: "";
      display: block;
      block-size: calc(40.13 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/process/line4_sm.webp");
      background-position: left top;
      background-size: calc(337 * 1rem / 16) calc(40.5 * 1rem / 16);
      background-repeat: no-repeat;
    }
    @media (width >= 768px) {
      .p-process__container:nth-of-type(even)::after {
        block-size: 40.5px;
        background-image: url("/assets/img/pages/about/index/process/line4_md.webp");
        /* background-size: 1138.5px 40.5px; */
        background-size: 1139px 40.5px;
      }
    }

    .p-process__container:nth-last-of-type(1)::after {
      content: "";
      display: block;
      block-size: calc(28.84 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/process/line5_sm.webp");
      background-position: left top;
      background-size: calc(337 * 1rem / 16) calc(29 * 1rem / 16);
      background-repeat: no-repeat;
    }
    @media (width >= 768px) {
      .p-process__container:nth-last-of-type(1)::after {
        block-size: 32px;
        background-image: url("/assets/img/pages/about/index/process/line5_md.webp");
        /* background-size: 1138.5px 32px; */
        background-size: 1139px 32px;
      }
    }

    .p-process__content {
      position: relative;
      margin-block: -1px;
    }

    .p-process__container:nth-of-type(odd) .p-process__content {
      /* padding-inline-start: calc(28 * 1rem / 16); */
      border-inline-start: calc(3 * 1rem / 16) solid var(--color--red);
      border-inline-end: calc(3 * 1rem / 16) solid transparent;
      @media (width >= 768px) {
        /* padding-inline-start: 78px; */
        border-width: 5px;
      }
    }

    .p-process__container:nth-of-type(even) .p-process__content {
      /* padding-inline-end: calc(28 * 1rem / 16); */
      border-inline-start: calc(3 * 1rem / 16) solid transparent;
      border-inline-end: calc(3 * 1rem / 16) solid var(--color--red);
      @media (width >= 768px) {
        /* padding-inline-end: 78px; */
        border-width: 5px;
      }
    }

    .p-process__container:nth-of-type(1) .p-process__content {
      display: grid;
      grid-template-columns: calc(28 * 1rem / 16) calc(303 * 1rem / 16) calc(22 * 1rem / 16);
      grid-template-rows:
        calc(40 * 1rem / 16) auto calc(30 * 1rem / 16) auto calc(10 * 1rem / 16) auto calc(30 * 1rem / 16)
        auto calc(60 * 1rem / 16);
      grid-template-areas:
        ". . ."
        ". title ."
        ". . ."
        ". hint-text ."
        ". . ."
        "images images images"
        ". . ."
        ". text ."
        ". . .";
      @media (width >= 768px) {
        grid-template-columns: 78px 1fr;
        grid-template-rows: 60px auto 10px auto 35px auto 50px;
        grid-template-areas:
          ". . "
          ". title"
          ". ."
          ". images"
          ". ."
          ". text"
          ". .";
      }

      .p-process__hint-text {
        grid-area: hint-text;
        justify-self: start;
        display: inline-flex;
        align-items: center;
        min-block-size: calc(36 * 1rem / 16);
        padding-inline: calc(15 * 1rem / 16);
        border-radius: 9999px;
        background-color: #f7f7f7;
        @media (width >= 768px) {
          display: none;
        }
      }

      .p-process__images {
        grid-area: images;
        position: relative;
        min-block-size: calc(400 * 1rem / 16);
        @media (width >= 768px) {
          min-block-size: calc(460 * 1rem / 16);
        }
      }

      .p-process__map {
        padding-inline-start: calc(28 * 1rem / 16);
        overflow-x: scroll;
        @media (width >= 768px) {
          padding-inline-start: revert;
          overflow-x: revert;
        }

        .c-image {
          inline-size: calc(550 * 1rem / 16);
          @media (width >= 768px) {
            inline-size: 820px;
          }
        }
      }

      .p-process__image:nth-of-type(1) {
        position: absolute;
        inset: auto auto calc(66 * 1rem / 16) calc(28 * 1rem / 16);
        @media (width >= 768px) {
          inset: auto auto 4px 58px;
        }

        .c-image {
          inline-size: calc(150 * 1rem / 16);
          @media (width >= 768px) {
            inline-size: 210.81px;
          }
        }
      }

      .p-process__image:nth-of-type(2) {
        position: absolute;
        inset: auto auto 0 calc(200 * 1rem / 16);
        @media (width >= 768px) {
          inset: auto auto 0 875px;
        }

        .c-image {
          inline-size: calc(174 * 1rem / 16);
          @media (width >= 768px) {
            inline-size: 418px;
          }
        }
      }
    }

    .p-process__container:nth-of-type(1) .p-process__content::before,
    .p-process__container:nth-of-type(1) .p-process__content::after {
      content: "";
      position: absolute;
      /* display: block; */
      background-position: top left;
      background-size: contain;
      background-repeat: no-repeat;
    }

    .p-process__container:nth-of-type(1) .p-process__content::before {
      inset: calc(20 * 1rem / 16) auto auto calc(226 * 1rem / 16);
      inline-size: calc(118.95 * 1rem / 16);
      block-size: calc(136 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/process/illust1_sm.webp");
    }

    .p-process__container:nth-of-type(1) .p-process__content::after {
      inset: calc(498 * 1rem / 16) auto auto calc(-12 * 1rem / 16);
      inline-size: calc(80.8 * 1rem / 16);
      block-size: calc(65.06 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/process/illust2_sm.webp");
    }

    @media (width >= 768px) {
      .p-process__container:nth-of-type(1) .p-process__content::before {
        inset: 36px auto auto 919px;
        inline-size: 381.71px;
        block-size: 227.35px;
        background-image: url("/assets/img/pages/about/index/process/illust1_md.webp");
      }
      .p-process__container:nth-of-type(1) .p-process__content::after {
        inset: 461px auto auto -94px;
        inline-size: 153.02px;
        block-size: 123.22px;
        background-image: url("/assets/img/pages/about/index/process/illust2_md.webp");
      }
    }

    .p-process__container:nth-of-type(2) .p-process__content {
      display: grid;
      grid-template-columns: calc(303 * 1rem / 16);
      grid-template-rows: calc(50 * 1rem / 16) auto calc(30 * 1rem / 16) auto calc(40 * 1rem / 16) auto calc(
          55 * 1rem / 16
        );
      grid-template-areas:
        "."
        "title"
        ". "
        "text"
        "."
        "image"
        ".";
      @media (width >= 768px) {
        grid-template-columns: 405px 70px 576px 78px;
        grid-template-rows: 55px auto 35px auto 70px;
        grid-template-areas:
          ". . . ."
          ". . title ."
          ". . . ."
          "image . text ."
          ". . . .";
      }

      .p-process__image {
        translate: calc(100% - calc(380 * 1rem / 16)) 0;
        @media (width >= 768px) {
          translate: calc(100% - 650px) 0;
        }

        .c-image {
          inline-size: calc(380 * 1rem / 16);
          @media (width >= 768px) {
            inline-size: 650px;
          }
        }
      }

      .p-process__image.js-inview-target {
        translate: calc(100% - calc(380 * 1rem / 16)) 0;
        @media (width >= 768px) {
          translate: calc(100% - 650px) 0;
        }
      }

      .p-process__image.js-inview-target.js-inview-ready {
        translate: calc(100% - calc(380 * 1rem / 16)) calc(var(--offset--inview-ready-sm) * 1rem / 16);
        @media (width >= 768px) {
          translate: calc(100% - 650px) calc(var(--offset--inview-ready-md) * 1px);
        }
      }
    }

    .p-process__container:nth-of-type(2) .p-process__content::before,
    .p-process__container:nth-of-type(2) .p-process__content::after {
      content: "";
      position: absolute;
      background-position: top left;
      background-size: contain;
      background-repeat: no-repeat;
    }

    .p-process__container:nth-of-type(2) .p-process__content::before {
      inset: calc(-55 * 1rem / 16) auto auto calc(28 * 1rem / 16);
      inline-size: calc(112.23 * 1rem / 16);
      block-size: calc(85.58 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/process/illust3_sm.webp");
    }

    .p-process__container:nth-of-type(2) .p-process__content::after {
      inset: calc(-56 * 1rem / 16) auto auto calc(218 * 1rem / 16);
      inline-size: calc(84.96 * 1rem / 16);
      block-size: calc(84.84 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/process/illust4_sm.webp");
    }

    @media (width >= 768px) {
      .p-process__container:nth-of-type(2) .p-process__content::before {
        inset: -62px auto auto 156px;
        inline-size: 205.64px;
        block-size: 156.82px;
        background-image: url("/assets/img/pages/about/index/process/illust3_md.webp");
      }
      .p-process__container:nth-of-type(2) .p-process__content::after {
        inset: -68px auto auto 927px;
        inline-size: 155.68px;
        block-size: 155.46px;
        background-image: url("/assets/img/pages/about/index/process/illust4_md.webp");
      }
    }

    .p-process__container:nth-of-type(3) .p-process__content {
      display: grid;
      grid-template-columns: calc(28 * 1rem / 16) calc(303 * 1rem / 16);
      grid-template-rows: calc(50 * 1rem / 16) auto calc(30 * 1rem / 16) auto calc(40 * 1rem / 16) auto calc(
          55 * 1rem / 16
        );
      grid-template-areas:
        ". ."
        ". title"
        ". ."
        ". text"
        ". ."
        ". image"
        ". .";
      @media (width >= 768px) {
        grid-template-columns: 78px 486px 90px 475px;
        grid-template-rows: 55px auto 30px auto 45px;
        grid-template-areas:
          ". . . ."
          ". title . ."
          ". . . ."
          ". text .image"
          ". . . .";
      }

      .p-process__image {
        .c-image {
          inline-size: calc(380 * 1rem / 16);
          @media (width >= 768px) {
            inline-size: 628px;
          }
        }
      }
    }

    .p-process__container:nth-of-type(3) .p-process__content::before,
    .p-process__container:nth-of-type(3) .p-process__content::after {
      content: "";
      position: absolute;
      background-position: top left;
      background-size: contain;
      background-repeat: no-repeat;
    }

    .p-process__container:nth-of-type(3) .p-process__content::before {
      inset: calc(-67 * 1rem / 16) auto auto calc(28 * 1rem / 16);
      inline-size: calc(67.68 * 1rem / 16);
      block-size: calc(84.82 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/process/illust5_sm.webp");
    }

    .p-process__container:nth-of-type(3) .p-process__content::after {
      inset: calc(-62 * 1rem / 16) auto auto calc(223 * 1rem / 16);
      inline-size: calc(80.23 * 1rem / 16);
      block-size: calc(80.34 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/process/illust6_sm.webp");
    }

    @media (width >= 768px) {
      .p-process__container:nth-of-type(3) .p-process__content::before {
        inset: -126px auto auto 718px;
        inline-size: 117.02px;
        block-size: 146.66px;
        background-image: url("/assets/img/pages/about/index/process/illust5_md.webp");
      }
      .p-process__container:nth-of-type(3) .p-process__content::after {
        inset: -72px auto auto 905px;
        inline-size: 131.76px;
        block-size: 131.94px;
        background-image: url("/assets/img/pages/about/index/process/illust6_md.webp");
      }
    }

    .p-process__container:nth-of-type(4) .p-process__content {
      display: grid;
      grid-template-columns: calc(303 * 1rem / 16);
      grid-template-rows: calc(60 * 1rem / 16) auto calc(30 * 1rem / 16) auto calc(70 * 1rem / 16);
      grid-template-areas:
        "."
        "title"
        "."
        "text"
        ".";
      @media (width >= 768px) {
        /* grid-template-columns: 405px 70px 576px 78px; */
        grid-template-columns: 423px 70px 558px 78px;
        grid-template-rows: 45px auto 45px auto;
        grid-template-areas:
          ". . . ."
          ". . title ."
          ". . . ."
          "image . text ."
          ". . . .";
        /* margin-block-end: -55px; */
        max-block-size: 405px;
      }

      .p-process__illust {
        grid-area: illust;
        position: absolute;
        inset: auto auto calc(-91 * 1rem / 16) calc(48 * 1rem / 16);
        @media (width >= 768px) {
          inset: auto auto -74px 500px;
        }
      }

      .p-process__illust::before {
        content: "";
        display: block;
        inline-size: calc(172.53 * 1rem / 16);
        block-size: calc(134.31 * 1rem / 16);
        background-image: url("/assets/img/pages/about/index/process/illust9_sm.webp");
        background-position: top left;
        background-size: contain;
        background-repeat: no-repeat;
      }
      @media (width >= 768px) {
        .p-process__illust::before {
          inline-size: 233.58px;
          block-size: 181.85px;
        }
      }

      .p-process__image {
        position: absolute;
        inset: auto calc(-3 * 1rem / 16) calc(-334 * 1rem / 16) auto;
        translate: calc(100% - 380 * 1rem / 16) inherit;
        @media (width >= 768px) {
          position: revert;
          translate: calc(100% - 586px) inherit;
        }

        .c-image {
          inline-size: calc(380 * 1rem / 16);
          @media (width >= 768px) {
            inline-size: 586px;
          }
        }
      }

      .p-process__image.js-inview-target {
        translate: calc(100% - 380 * 1rem / 16) 0;
        @media (width >= 768px) {
          translate: calc(100% - 586px) 0;
        }
      }

      .p-process__image.js-inview-target.js-inview-ready {
        translate: calc(100% - 380 * 1rem / 16) calc(var(--offset--inview-ready-sm) * 1rem / 16);
        @media (width >= 768px) {
          translate: calc(100% - 586px) calc(var(--offset--inview-ready-md) * 1px);
        }
      }
    }

    .p-process__container:nth-of-type(4) .p-process__content::before,
    .p-process__container:nth-of-type(4) .p-process__content::after {
      content: "";
      position: absolute;
      background-position: top left;
      background-size: contain;
      background-repeat: no-repeat;
    }

    .p-process__container:nth-of-type(4) .p-process__content::before {
      inset: calc(-74 * 1rem / 16) auto auto calc(28 * 1rem / 16);
      inline-size: calc(127.89 * 1rem / 16);
      block-size: calc(107.66 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/process/illust7_sm.webp");
    }

    .p-process__container:nth-of-type(4) .p-process__content::after {
      inset: calc(-63 * 1rem / 16) auto auto calc(200 * 1rem / 16);
      inline-size: calc(96.26 * 1rem / 16);
      block-size: calc(85.51 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/process/illust8_sm.webp");
    }

    @media (width >= 768px) {
      .p-process__container:nth-of-type(4) .p-process__content::before {
        inset: -249px auto auto -109px;
        inline-size: 240.49px;
        block-size: 202.44px;
        background-image: url("/assets/img/pages/about/index/process/illust7_md.webp");
      }
      .p-process__container:nth-of-type(4) .p-process__content::after {
        inset: -136px auto auto 285px;
        inline-size: 158.53px;
        block-size: 140.83px;
        background-image: url("/assets/img/pages/about/index/process/illust8_md.webp");
      }
    }

    .p-process__heading {
      counter-increment: heading;
      grid-area: title;

      & > span:nth-of-type(1) {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        inline-size: calc(40 * 1rem / 16);
        block-size: calc(40 * 1rem / 16);
        border-radius: 9999px;
        background-color: var(--color--red);
        line-height: 1;
        @media (width >= 768px) {
          inline-size: calc(70 * 1rem / 16);
          block-size: calc(70 * 1rem / 16);
        }
      }

      & > span:nth-of-type(1)::before {
        content: counter(heading);
        translate: 0 0.03em;
      }
    }

    .p-process__image {
      grid-area: image;
    }

    .p-process__text {
      grid-area: text;

      .c-text {
        line-height: 1.8;
        @media (width >= 768px) {
          line-height: 1.777;
        }
      }

      .c-text + .c-text {
        margin-block-start: 1lh;
      }
    }
  }

  .p-process::before {
    content: "";
    position: absolute;
    inset: calc(48 * 1rem / 16) 0 auto calc(50% + 107 * 1rem / 16);
    display: block;
    block-size: calc(22 * 1rem / 16);
    background-image: url("/assets/img/pages/about/index/process/line1_sm.webp");
    background-position: left top;
    background-size: calc(80 * 1rem / 16) calc(22 * 1rem / 16);
    background-repeat: repeat-x;
  }
  @media (width >= 768px) {
    .p-process::before {
      /* inset: 40px 0 auto calc(50% + 276px); */
      inset: 40px 0 auto calc(50% + 276px);
      block-size: 23px;
      background-image: url("/assets/img/pages/about/index/process/line1_md.webp");
      background-size: 150px 23px;
    }
  }

  .p-figures {
    padding-block: calc(60 * 1rem / 16) calc(50 * 1rem / 16);
    background-color: var(--color--red);

    @media (width >= 768px) {
      padding-block: 65px 55px;
    }

    .p-figures__title {
      /* line-height: 1; */
    }

    .p-figures__cards {
      display: grid;
      grid-auto-flow: row;
      grid-template-columns: 1fr;
      gap: calc(20 * 1rem / 16);

      @media (width >= 768px) {
        grid-auto-flow: revert;
        grid-template-columns: repeat(3, 1fr);
        gap: unset;
        column-gap: 50px;
        row-gap: 30px;
      }
    }

    .p-figures__card {
      display: grid;
      grid-template-columns: calc(20 * 1rem / 16) auto calc(20 * 1rem / 16);
      grid-template-rows: calc(25 * 1rem / 16) auto calc(15 * 1rem / 16) 1fr calc(10 * 1rem / 16) auto calc(
          20 * 1rem / 16
        );
      grid-template-areas:
        ". . ."
        ". title ."
        ". . ."
        ". container ."
        ". . ."
        ". note ."
        ". . .";
      border-radius: calc(8 * 1rem / 16);
      background-color: var(--color--white);

      @media (width >= 768px) {
        grid-template-columns: calc(30 * 1rem / 16) auto calc(30 * 1rem / 16);
        grid-template-rows:
          calc(35 * 1rem / 16) auto calc(30 * 1rem / 16) 1fr calc(20 * 1rem / 16) minmax(calc(13 * 1rem / 16), auto)
          calc(20 * 1rem / 16);
      }
    }

    .p-figures__card:nth-of-type(6) {
      grid-template-rows: calc(25 * 1rem / 16) auto calc(10 * 1rem / 16) 1fr calc(10 * 1rem / 16) auto calc(
          20 * 1rem / 16
        );

      @media (width >= 768px) {
        grid-template-rows:
          calc(35 * 1rem / 16) auto calc(5 * 1rem / 16) 1fr calc(10 * 1rem / 16) minmax(calc(13 * 1rem / 16), auto)
          calc(20 * 1rem / 16);
      }
    }

    .p-figures__card-title {
      grid-area: title;
      justify-self: center;
      line-height: 1;
    }

    .p-figures__container {
      grid-area: container;
      display: flex;
      flex-flow: column;
      align-items: center;
      gap: calc(10 * 1rem / 16);

      @media (width >= 768px) {
        justify-content: center;
        gap: calc(25 * 1rem / 16);
      }
    }

    .p-figures__card:nth-of-type(6) .p-figures__container {
      gap: calc(5 * 1rem / 16);

      @media (width >= 768px) {
        gap: unset;
      }
    }

    .p-figures__icon {
      display: inline-block;
      inline-size: calc(80 * 1rem / 16);
      block-size: calc(80 * 1rem / 16);
      background-color: var(--color--red);
      mask-position: center;
      mask-repeat: no-repeat;
      mask-size: contain;
    }

    .p-figures__card:nth-of-type(1) .p-figures__icon {
      mask-image: url("/assets/img/pages/about/index/figures/icon1.svg");
    }

    .p-figures__card:nth-of-type(2) .p-figures__icon {
      mask-image: url("/assets/img/pages/about/index/figures/icon2.svg");
    }

    .p-figures__card:nth-of-type(3) .p-figures__icon {
      mask-image: url("/assets/img/pages/about/index/figures/icon3.svg");
    }

    .p-figures__card:nth-of-type(4) .p-figures__icon {
      mask-image: url("/assets/img/pages/about/index/figures/icon4.svg");
    }

    .p-figures__card:nth-of-type(5) .p-figures__icon {
      mask-image: url("/assets/img/pages/about/index/figures/icon5.svg");
    }

    .p-figures__card:nth-of-type(6) .p-figures__icon {
      mask-image: url("/assets/img/pages/about/index/figures/icon6.svg");
    }

    .p-figures__data {
      display: flex;
      flex-flow: column;
      gap: 0.15em;
      line-height: 1;

      data,
      time {
        display: inline-flex;
        align-items: baseline;
        gap: 0.05em;

        span:not(.c-text--number) {
          translate: 0 -0.1em;
        }
      }
    }

    .p-figures__note {
      grid-area: note;
      justify-self: right;
      line-height: 1;
    }
  }

  .p-benefits {
    counter-reset: number;

    position: relative;
    padding-block: calc(80 * 1rem / 16) calc(70 * 1rem / 16);

    @media (width >= 768px) {
      padding-block: 145px 85px;
    }

    .c-container {
      position: relative;
    }

    .p-benefits__mask {
      position: absolute;
      inset: 0;
      clip-path: inset(0);
      pointer-events: none;
    }

    .p-benefits__bg {
      position: fixed;
      inset: 0;
      z-index: -1;
      background-image: url("/assets/img/pages/about/index/benefits/bg_sm.webp");
      background-position: top left;
      background-size: cover;
      background-repeat: no-repeat;

      @media (width >= 768px) {
        background-image: url("/assets/img/pages/about/index/benefits/bg_md.webp");
      }
    }

    .p-benefits__title {
      line-height: 2;
      text-align: center;

      & > span {
        /* padding-inline: 0.2em; */
        padding-inline: 0.3em;
        padding-block: 0em 0.1em;
        background-color: var(--color--white);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
      }

      & > span > span {
        position: relative;
        inset: 0.04em auto auto -0.04em;
        line-height: 0;

        @media (width >= 768px) {
          /* inset: 0.04em auto auto -0.04em; */
        }
      }
    }

    .p-benefits__card {
      counter-increment: number;

      position: relative;
    }

    .p-benefits__card::before {
      content: "";
      position: absolute;
      background-position: top left;
      background-size: contain;
      background-repeat: no-repeat;
    }

    .p-benefits__card:nth-of-type(1)::before {
      inset: calc(-36 * 1rem / 16) auto auto calc(116 * 1rem / 16);
      inline-size: calc(73.93 * 1rem / 16);
      block-size: calc(71.46 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/benefits/illust1_sm.webp");
    }

    @media (width >= 768px) {
      .p-benefits__card:nth-of-type(1)::before {
        inset: -48px auto auto 193px;
        inline-size: 112.38px;
        block-size: 108.63px;
        background-image: url("/assets/img/pages/about/index/benefits/illust1_md.webp");
      }
    }

    .p-benefits__card:nth-of-type(2)::before {
      inset: calc(-44 * 1rem / 16) auto auto calc(136 * 1rem / 16);
      inline-size: calc(63.52 * 1rem / 16);
      block-size: calc(79.6 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/benefits/illust2_sm.webp");
    }

    @media (width >= 768px) {
      .p-benefits__card:nth-of-type(2)::before {
        inset: -56px auto auto 193px;
        inline-size: 96.26px;
        block-size: 120.65px;
        background-image: url("/assets/img/pages/about/index/benefits/illust2_md.webp");
      }
    }

    .p-benefits__card:nth-of-type(3)::before {
      inset: calc(-42 * 1rem / 16) auto auto calc(123 * 1rem / 16);
      inline-size: calc(89.26 * 1rem / 16);
      block-size: calc(79.29 * 1rem / 16);
      background-image: url("/assets/img/pages/about/index/benefits/illust3_sm.webp");
    }

    @media (width >= 768px) {
      .p-benefits__card:nth-of-type(3)::before {
        inset: -47px auto auto 193px;
        inline-size: 116.53px;
        block-size: 103.52px;
        background-image: url("/assets/img/pages/about/index/benefits/illust3_md.webp");
      }
    }

    .p-benefits__card + .p-benefits__card {
      margin-block-start: calc(90 * 1rem / 16);
    }

    .p-benefits__number {
      position: absolute;
      inset: calc((-7 - 24) * 1rem / 16) auto auto calc((-3 + 33) * 1rem / 16);
      line-height: 1;

      @media (width >= 768px) {
        inset: calc(-10px - 28px) auto auto calc(-4px + 58px);
      }
    }

    .p-benefits__number::before {
      content: counter(number, decimal-leading-zero);
    }

    .p-benefits__container {
      display: grid;
      grid-template-columns: calc(20 * 1rem / 16) 1fr calc(20 * 1rem / 16);
      grid-template-rows: calc(65 * 1rem / 16) auto calc(30 * 1rem / 16) auto calc(30 * 1rem / 16) auto;
      grid-template-areas:
        ". . ."
        ". title ."
        ". . ."
        ". text ."
        ". . ."
        "image image image";
      border-radius: calc(8 * 1rem / 16);
      background-color: var(--color--white);
      overflow: hidden;
      box-shadow: 0 2px 12px 0 rgba(var(--color-rgb--black), 0.05);

      @media (width >= 768px) {
        grid-template-columns: 60px 1fr 65px 470px;
        grid-template-rows: 75px auto 35px auto 45px;
        grid-template-areas:
          ". . . image"
          ". title . image"
          ". . . image"
          ". text . image"
          ". . . image";
      }
    }

    .p-benefits__card-title {
      grid-area: title;
      line-height: 1.458;
    }

    .p-benefits__text {
      grid-area: text;

      .c-text {
        line-height: 1.8;
      }

      .c-text + .c-text {
        margin-block-start: 1lh;
      }
    }

    .p-benefits__image {
      grid-area: image;
      line-height: 1;

      img {
        @media (width >= 768px) {
          block-size: inherit;
        }
      }
    }
  }

  .p-initiatives {
    position: relative;
    padding-block: calc(70 * 1rem / 16);
    @media (width >= 768px) {
      padding-block: 100px 80px;
    }

    .c-container {
      position: relative;
    }

    .p-initiatives__mask {
      position: absolute;
      inset: 0;
      pointer-events: none;
      clip-path: inset(0);
    }

    .p-initiatives__bg {
      position: fixed;
      inset: 0;
      z-index: -1;
      background-image: url("/assets/img/pages/about/index/initiatives/bg_sm.webp");
      background-position: top left;
      background-size: cover;
      background-repeat: no-repeat;
      @media (width >= 768px) {
        background-image: url("/assets/img/pages/about/index/initiatives/bg_md.webp");
      }
    }

    .p-initiatives__section {
      & > p.c-text {
        line-height: 1.8;
        @media (width >= 768px) {
          line-height: 1.777;
          text-align: center;
        }
      }
    }

    .p-initiatives__title {
      color: #3baa01;
      line-height: 1.5;
      @media (width >= 768px) {
        text-align: center;
      }

      & > span {
        padding-inline: 0.4em;
        padding-block: 0.05em 0.15em;
        background-color: var(--color--white);
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        @media (width >= 768px) {
          padding-inline: 0.5em;
          padding-block: 0.1em 0.2em;
        }
      }
    }

    .p-initiatives__images {
      display: grid;
      grid-template-columns: 1fr;
      gap: calc(40 * 1rem / 16);
      @media (width >= 768px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
      }
    }

    .p-initiatives__image {
      & > figcaption.c-text {
        margin-block-start: calc(20 * 1rem / 16);
        line-height: 1.6;
        @media (width >= 768px) {
          margin-block-start: 30px;
          line-height: 1.458;
        }
      }
    }
  }

  .p-more-about {
    padding-block: calc(50 * 1rem / 16) calc(60 * 1rem / 16);
    background-color: #f7efe7;
    @media (width >= 768px) {
      padding-block: 120px 50px;
    }

    .c-card-link {
      .c-card-link__image {
        aspect-ratio: 335 / 167;
        @media (width >= 768px) {
          aspect-ratio: 366 / 182;
        }
      }
    }

    .p-more-about__links {
      display: grid;
      grid-template-columns: 1fr;
      gap: calc(30 * 1rem / 16);
      @media (width >= 768px) {
        grid-template-columns: repeat(3, 1fr);
        gap: 50px;
      }
    }

    .p-more-about__link {
      inline-size: 100%;
    }

    .p-more-about__text {
      margin-block-start: calc(20 * 1rem / 16);
    }
  }
}

body[data-path="/about/movie/"] {

  @media (width < 768px) {
      section#techHistory {
        margin-bottom: 100px;
      }
      section#techHistory ul {
        margin-top: 50px;
      }
      section#techHistory ul li {
        text-align: center;
        margin-bottom: 2em;
      }
      section#techHistory ul li a img {
        border: 1px solid #ddd;
      }
      section#techHistory ul li a:first-child:after {
        display: none;
      }
      section#techHistory ul li a {
        color: #333;
      }
    }

  /* ----------------------------------------------------------
    TechHistory Sec
    -----------------------------------------------------------*/
  @media (width >= 768px) {
    section#techHistory {
      margin-top:0px;
      margin-bottom: 170px;
    }
    section#techHistory ul {
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      margin-top: 20px;
    }
    section#techHistory ul li {
      text-align: center;
    }
    section#techHistory ul li:not(:first-of-type) {
      margin-left: calc(80px / 3);
    }
    section#techHistory ul li a img {
      border: 1px solid #ddd;
      margin-bottom: 1em;
    }
    section#techHistory ul li a:first-child:after {
      display: none;
    }
    section#techHistory ul li a {
      color: #333;
    }
  }
  @media (width >= 768px) {
    #techHistory {
      ul {
        margin: 0;
      }
    }
  }
}