@charset "UTF-8";

@import url("_common.css");
@import url("_utility.css");

body.p-feature {
  /* feature common ======== */

  /* feature-english-education-top ======== */
  &.--feature-english-education-top {
    & .l-contents {
      @media (max-width: 750px) {
        padding-block: 20px;
        background-color: var(--color-gray-primary);
      }

      & .l-contents__inner {
        display: grid;
        position: relative;

        &::before {
          @media not all and (max-width: 750px) {
            display: block;
            content: "";
            width: 95%;
            height: 100%;
            background-color: var(--color-gray-primary);
            position: absolute;
            top: 5%;
            z-index: -1;
          }

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

        & .c-button {
          grid-template-columns: auto auto;
          margin-block-start: 2em;

          @media not all and (max-width: 750px) {
            width: fit-content;
          }

          @media (max-width: 750px) {
            width: 50%;
            margin-inline: auto;
          }

          & .icon {
            width: 0.6em;
          }

          & .desvg polyline {
            stroke: var(--color-black-primary);
          }
        }

        & figure {
          @media (max-width: 750px) {
            border-radius: 10px;
            overflow: hidden;

            &>img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
            }
          }
        }
      }

      &:not(:first-of-type) {
        @media (max-width: 750px) {
          margin-block-start: 20px;
        }
      }
    }

    /* feature-english-education-top common */

    & .l-contents.--01 {
      & .l-width-primary {
        max-width: calc(1400px + 24px + 24px);
        margin-inline: auto 0;
      }

      & .l-contents__inner {
        @media not all and (max-width: 750px) {
          grid-template-columns: 1fr 65%;
          gap: 40px;
        }

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

        &::before {
          @media not all and (max-width: 750px) {
            left: 5%;
          }
        }
      }
    }

    /* feature-english-education-top 01 */

    & .l-contents.--02 {
      & .l-width-primary {
        margin-inline: 0 auto;
      }

      & .l-contents__inner {
        @media not all and (max-width: 750px) {
          grid-template-columns: 65% 1fr;
          gap: 40px;
        }

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

        &>div:nth-of-type(1) {
          @media not all and (max-width: 750px) {
            order: 2;
          }
        }

        &>div:nth-of-type(2) {
          @media not all and (max-width: 750px) {
            order: 1;
          }
        }
      }

      & figure {}
    }

    /* feature-english-education-top 02 */

    & .l-contents.--03 {
      & .l-width-primary {
        margin-inline: auto 0;
      }

      & .l-contents__inner {
        @media not all and (max-width: 750px) {
          grid-template-columns: 1fr 65%;
          gap: 40px;
        }

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

        &::before {
          left: 5%;
        }
      }
    }

    /* feature-english-education-top 03 */
  }

  /* feature-english-education-top */

  /* immersion ======== */
  &.--feature-english-education-immersion {
    & .l-contents.--01 {}

    /* immersion 01 */

    & .l-contents.--02 {}

    /* immersion 02 */

    & .l-contents.--03 {
      background-color: var(--color-gray-decenary);

    }

    /* immersion 03 */

    & .l-contents.--04 {
      & ol {
        all: revert;
        padding-inline-start: 2em;

        & strong {
          font-size: clamp(1rem, 0.894rem + 0.45vw, 1.375rem);
          /* 16px 22px */
          font-weight: 700;
        }

        &>li {
          &::marker {
            font-size: clamp(1rem, 0.894rem + 0.45vw, 1.375rem);
            /* 16px 22px */
            font-weight: 700;
          }

          &+& {
            margin-block-start: 1em;
          }
        }
      }
    }

    /* immersion 04 */

    & .l-contents.--05 {
      & .l-contents__inner {
        border: 1px solid color-mix(in srgb, var(--color-black-primary) 80%, transparent);

        @media not all and (max-width: 750px) {
          padding: 2em;
        }

        @media (max-width: 750px) {
          padding: 1em;
        }
      }
    }

    /* immersion 05 */
  }

  /* immersion */

  /* abroad ======== */
  &.--feature-english-education-abroad {
    & .l-contents.--01 {
      & .l-contents__inner {
        & h3 {
          display: grid;
          place-items: center;
          margin-block-start: 1em;
          padding-inline: 1em;
          background-color: var(--color-white);
          border: 1px solid color-mix(in srgb, var(--color-black-primary) 75%, transparent);
          ;
          text-align: center;

          &+p {
            margin-block-start: 1em;
          }
        }
      }
    }

    /* abroad 01 */

    & .l-contents.--02 {

      /* Student Voice */
      & .l-width-primary {
        padding: 2em;
        border-radius: clamp(0.5rem, 0.288rem + 0.91vw, 1.25rem);
        /* 8px 20px */
        background-color: var(--color-gray-septenary);

        & h2 {
          font-size: clamp(1.125rem, 0.877rem + 1.06vw, 2rem);
          /* 18px 32px */
          font-weight: 700;
          position: relative;
          z-index: 5;
        }

        &>.l-contents__inner {
          display: grid;
          gap: 20px;

          @media not all and (max-width: 750px) {
            grid-template-columns: 1fr 1fr;
          }

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

          &>div {
            display: grid;
            margin-block-start: 2em;
            position: relative;

            @media not all and (max-width: 750px) {
              grid-template-columns: 1fr 30%;
              grid-template-rows: repeat(2, auto);
              gap: 10px;
              grid-template-areas:
                "p figure"
                "dl dl";
            }

            @media (max-width: 750px) {
              grid-template-columns: 1fr;
              grid-template-rows: repeat(3, auto);
              gap: 10px;
              grid-template-areas:
                "p"
                "dl"
                "figure";
            }

            &::before {
              display: block;
              content: "";
              width: 15%;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              aspect-ratio: 1;
              position: absolute;
              left: 2.5%;
              z-index: 0;

              @media not all and (max-width: 750px) {
                top: -20%;
              }

              @media (max-width: 750px) {
                top: -1em;
              }
            }

            &:nth-of-type(1) {
              &::before {
                background-image: url(../img/common/icon-number-01.svg);
              }
            }

            &:nth-of-type(2) {
              &::before {
                background-image: url(../img/common/icon-number-02.svg);
              }
            }

            & p {
              grid-area: p;
            }

            & figure {
              grid-area: figure;
              margin-inline: auto;

              @media (max-width: 750px) {
                width: 60%;
              }
            }

            & dl {
              grid-area: dl;
              display: grid;
              grid-template-columns: auto 1fr;
              gap: 1em;

              & dt {
                font-weight: 400;
              }
            }
          }

          & p {
            position: relative;
            z-index: 5;
          }

          & figure {
            position: relative;
            z-index: 5;
          }
        }
      }
    }

    /* abroad 02 */

    & .l-contents.--03 {
      & .l-contents__inner {
        & ul {
          display: grid;
          gap: clamp(1rem, 0.009rem + 4.23vw, 4.5rem);

          /* 16px 72 px */
          @media not all and (max-width: 750px) {
            grid-template-columns: repeat(2, 1fr);
          }

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

    /* abroad 03 */
  }

  /* abroad */

  /* certification ======== */
  &.--feature-english-education-certification {
    & .l-contents.--01 {
      & .l-contents__inner {
        &>div {
          display: grid;
          place-items: center;
          padding-block: 3em;
          padding-inline: 1em;
          background-color: var(--color-gray-decenary);
          border-radius: clamp(0.5rem, 0.288rem + 0.91vw, 1.25rem);

          /* 8px 20px */
          &>p {
            &>span:nth-of-type(1) {
              margin-inline-end: 2em;
              font-size: clamp(1rem, 0.717rem + 1.21vw, 2rem);
              /* 16px 32px */
              font-weight: 500;
            }

            &>span:nth-of-type(2) {
              color: var(--color-red-primary);
              font-size: clamp(1.875rem, 1.344rem + 2.26vw, 3.75rem);
              /* 30px 60px */
            }

            &>span:nth-of-type(3) {
              font-size: clamp(1rem, 0.717rem + 1.21vw, 2rem);
              /* 16px 32px */
              font-weight: 500;
            }
          }
        }
      }
    }

    /* certification 01 */

    & .l-contents.--02 {}

    /* certification 02 */

    & .l-contents.--03 {
      & .l-width-primary {
        background-color: var(--color-gray-decenary);
        border-radius: clamp(0.5rem, 0.288rem + 0.91vw, 1.25rem);

        /* 8px 20px */
        @media not all and (max-width: 750px) {
          padding-block: 2em;
          padding-inline: 2em;
        }

        @media (max-width: 750px) {
          padding-block: 24px;
          padding-inline: 24px;
        }

        & figure {
          text-align: center;
        }

        & .l-contents__inner {
          &:nth-of-type(1) {
            font-weight: 500;

            & dl {
              display: grid;
              align-items: start;
              grid-template-columns: auto 1fr;
              gap: 8px;
              margin-block-start: .5em;

              & dt {
                display: inline grid;
                place-items: center;
                width: 4em;
                padding-inline: .5em;
                border-radius: clamp(0.25rem, 0.144rem + 0.45vw, 0.625rem);
                /* 4px 10px */
              }

              &:nth-of-type(1) {
                & dt {
                  border: 1px solid color-mix(in srgb, var(--color-gray-octonary) 75%, transparent);
                  ;
                  background-color: var(--color-white);
                }
              }

              &:nth-of-type(2) {
                & dt {
                  background-color: var(--color-green-secondary);
                  color: var(--color-white);
                }
              }

              &:nth-of-type(3) {
                & dt {
                  background-color: #ef6671;
                  color: var(--color-white);
                }
              }
            }

            & article {
              display: grid;
              place-items: center;
              width: fit-content;
              padding: 0.25em 1em;
              border: 2px solid var(--color-black-primary);
              font-size: clamp(1rem, 0.823rem + 0.75vw, 1.625rem);
              /* 16px 26px */
              font-weight: 500;
            }
          }

          &:nth-of-type(2) {
            &>div {
              display: grid;
              gap: 20px;

              @media not all and (max-width: 750px) {
                grid-template-columns: repeat(4, 1fr);
              }

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

              & figure {
                margin-block-start: 2em;
              }
            }
          }
        }
      }
    }

    /* certification 03 */
  }

  /* certification */

  /* course top ======== */
  &.--feature-course-top {
    & .l-contents.--01 {}

    /* top 01 */

    & .l-contents.--02 {
      @media not all and (max-width: 750px) {
        & .l-contents__inner {
          width: 80%;
          margin-inline: auto;
        }
      }

      & a {
        & figure {
          filter: brightness(1);
          transition: filter 0.4s ease-in-out;

          & figcaption {
            margin-block-start: 0.5em;
            line-height: 1.4;
          }
        }

        @media (any-hover: hover) {
          &:hover figure {
            filter: brightness(1.2);
          }
        }
      }
    }

    /* top 02 */
  }

  /* course top */

  &.--feature-course-junior {
    & .l-contents.--01 {}

    /* junior 01 */

    & .l-contents.--02 {
      background-color: var(--color-gray-primary);

      & h3 {
        font-size: clamp(1.125rem, 0.983rem + 0.6vw, 1.625rem);
        /* 18px 26px */
        font-weight: 700;

        &+* {
          margin-block-start: 1em;
        }
      }

      article.note {
        margin-block-start: 2em;
        padding: 1em;
        border: 1px solid color-mix(in srgb, var(--color-gray-octonary) 50%, transparent);
      }
    }

    /* junior 02 */

    & .l-contents.--03 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);

        & h3 {
          font-size: clamp(1.125rem, 0.983rem + 0.6vw, 1.625rem);
          /* 18px 26px */
          font-weight: 700;

          &+* {
            margin-block-start: 1em;
          }
        }
      }
    }

    /* junior 03 */

    & .l-contents.--04 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);

        & h3 {
          font-size: clamp(1.125rem, 0.983rem + 0.6vw, 1.625rem);
          /* 18px 26px */
          font-weight: 700;

          &+* {
            margin-block-start: 1em;
          }
        }

        article.note {
          margin-block-start: 2em;
          padding: 1em;
          border: 1px solid color-mix(in srgb, var(--color-gray-octonary) 50%, transparent);
        }
      }
    }

    /* junior 04 */
    & .l-contents.--05 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);

        & h3 {
          font-size: clamp(1.125rem, 0.983rem + 0.6vw, 1.625rem);
          /* 18px 26px */
          font-weight: 700;

          &+* {
            margin-block-start: 1em;
          }
        }
      }
    }

    /* junior 05 */
    & .l-contents.--06 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);

        & h3 {
          font-size: clamp(1.125rem, 0.983rem + 0.6vw, 1.625rem);
          /* 18px 26px */
          font-weight: 700;

          &+* {
            margin-block-start: 1em;
          }
        }
      }

      & .c-button.--round.--green {
        grid-template-columns: auto auto;
        margin-block-start: 3em;
        width: 260px;

        @media not all and (max-width: 750px) {}

        @media (max-width: 750px) {
          margin-inline: auto;
        }

        & .icon {
          width: 0.6em;
        }

        & .desvg polyline {
          stroke: var(--color-black-primary);
        }
      }
    }

    /* junior 06 */
    & .l-contents.--07 {}

    /* junior 07 */
  }

  /* junior */

  &.--feature-course-high-toi {
    & .l-contents.--01 {}

    /* high-toi 01 */

    & .l-contents.--02 {}

    /* high-toi 02 */

    & .l-contents.--03 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);
      }
    }

    /* high-toi 03 */

    & .l-contents.--04 {
      & h2.c-title.--underline {
        color: var(--color-red-primary);
        text-decoration: none;
      }
    }

    /* high-toi 04 */

    & .l-contents.--05 {
      & ul {
        all: revert;
        list-style: disc;
        padding-inline-start: 1.5em;

        li {
          &+& {
            margin-block-start: 1.5em;
          }
        }
      }
    }

    /* high-toi 05 */

    & .l-contents.--06 {

      /* Student Voice */
      & .l-width-primary {
        padding: 2em;
        border-radius: clamp(0.5rem, 0.288rem + 0.91vw, 1.25rem);
        /* 8px 20px */
        background-color: var(--color-gray-septenary);

        & h2 {
          font-size: clamp(1.125rem, 0.877rem + 1.06vw, 2rem);
          /* 18px 32px */
          font-weight: 700;
          position: relative;
          z-index: 5;
        }

        &>.l-contents__inner {
          display: grid;
          gap: 20px;

          @media not all and (max-width: 750px) {
            grid-template-columns: 1fr 1fr;
          }

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

          &>div {
            display: grid;

            @media not all and (max-width: 750px) {
              grid-template-columns: 1fr 30%;
              grid-template-rows: repeat(2, auto);
              gap: 10px;
              grid-template-areas:
                "p figure"
                "dl dl";
            }

            @media (max-width: 750px) {
              grid-template-columns: 1fr;
              grid-template-rows: repeat(3, auto);
              gap: 10px;
              grid-template-areas:
                "p"
                "dl"
                "figure";
            }

            margin-block-start: 2em;
            position: relative;

            &::before {
              display: block;
              content: "";
              width: 15%;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              aspect-ratio: 1;
              position: absolute;
              left: 2.5%;
              z-index: 0;

              @media not all and (max-width: 750px) {
                top: -20%;
              }

              @media (max-width: 750px) {
                top: -1em;
              }
            }

            &:nth-of-type(1) {
              &::before {
                background-image: url(../img/common/icon-number-01.svg);
              }
            }

            &:nth-of-type(2) {
              &::before {
                background-image: url(../img/common/icon-number-02.svg);
              }
            }

            & p {
              grid-area: p;
            }

            & figure {
              grid-area: figure;
              margin-inline: auto;

              @media (max-width: 750px) {
                width: 60%;
              }
            }

            & dl {
              grid-area: dl;
              display: grid;
              grid-template-columns: auto 1fr;
              gap: 1em;

              & dt {
                font-weight: 400;
              }
            }
          }

          & p {
            position: relative;
            z-index: 5;
          }

          & figure {
            position: relative;
            z-index: 5;
          }
        }
      }
    }

    /* high-toi 06 */
  }

  /* high-toi */

  &.--feature-course-high-aic {
    & .l-contents.--01 {}

    /* high-aic 01 */

    & .l-contents.--02 {
      background-color: var(--color-gray-septenary);

      & .l-contents__inner {
        align-items: center;
      }
    }

    /* high-aic 02 */

    & .l-contents.--03 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);

        /* 「IBディプロマ・プログラムとは」を箇条書き（disc）表示。
           リセットで list-style-type:"" が当たるため all:revert で戻す。 */
        & ul {
          all: revert;
          list-style: disc;
          padding-inline-start: 1.5em;

          &>li+li {
            margin-block-start: .5em;
          }
        }

        & figure {
          width: 60%;
          margin-inline: auto;

          &>img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
          }
        }
      }
    }

    /* high-aic 03 */

    & .l-contents.--04 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);

        & ol {
          display: grid;
          gap: clamp(1.25rem, 0.542rem + 3.02vw, 3.75rem);

          /* 20px 60px */
          @media not all and (max-width: 750px) {
            grid-template-columns: repeat(2, 1fr);
          }

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

          &>li {
            & h3 {
              color: var(--color-red-primary);
              font-size: clamp(1.25rem, 0.896rem + 1.51vw, 2.5rem);
              /* 20px 40px */
              font-weight: 700;

              & .number {
                margin-inline-end: 0.25em;
                font-family: "Montserrat", sans-serif;
                font-optical-sizing: auto;
                font-size: clamp(2.5rem, 1.792rem + 3.02vw, 5rem);
                /* 40px 86px */
                font-weight: 600;

              }
            }

            & h4 {
              margin-block-start: 1em;
              font-size: clamp(1rem, 0.965rem + 0.15vw, 1.125rem);
              /* 16px1 18px */
              font-weight: 700;

              &+p {
                margin-block-start: .5em;
              }
            }

            & article.description {
              margin-block-start: 2em;
              padding: 1.5em;
              border-radius: clamp(0.5rem, 0.288rem + 0.91vw, 1.25rem);
              /* 8px 20px */
              background-color: var(--color-gray-septenary);

              & h5 {
                display: inline grid;
                place-items: center;
                width: fit-content;
                padding-inline: 1em;
                border-radius: clamp(0.313rem, 0.224rem + 0.38vw, 0.625rem);
                /* 5px 10px */
                background-color: var(--color-white);
                font-size: clamp(1.125rem, 1.054rem + 0.3vw, 1.375rem);
                /* 18px 22px */
                font-weight: 700;
                text-align: center;

                &+p {
                  margin-block-start: 1em;

                  &+h5 {
                    margin-block-start: 1.5em;
                  }
                }
              }

              &>div {
                display: grid;
                gap: 16px;

                @media not all and (max-width: 750px) {
                  grid-template-columns: 1fr 1fr;
                }

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

                & figure {
                  margin-block-start: 2em;

                  &>figcaption {
                    margin-block-start: .5em;
                    font-size: 11px;
                  }
                }
              }
            }

            &.--03 {
              & h4 {
                display: grid;
                place-items: center;
                width: fit-content;
                padding-inline: 1em;
                background-color: var(--color-gray-septenary);
                border-radius: clamp(0.313rem, 0.224rem + 0.38vw, 0.625rem);
                /* 5px 10px */
                text-align: center;
              }

              & h5 {
                margin-block-start: 1.5em;
              }
            }

            &.--04 {
              figure {
                margin-block-start: 2em;
                font-size: clamp(2.5rem, 1.792rem + 3.02vw, 5rem);
                /* 40px 86px */
                aspect-ratio: 599.3538/343.1181;

                &>img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  object-position: center;
                }

                &>figcaption {
                  margin-block-start: .5em;
                  font-size: 11px;
                  text-align: center;
                }
              }
            }
          }
        }
      }
    }

    /* high-aic 04 */

    & .l-contents.--05 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);

        &>div:nth-of-type(1) {
          figure {
            margin-block-start: 1em;
          }
        }
      }
    }

    /* high-aic 05 */

    & .l-contents.--06 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);

        & ul {
          all: revert;
          list-style: disc;
          padding-inline-start: 1.5em;
          font-weight: 700;
        }

        & article.note {
          margin-block-start: 1.5em;
          padding: 1em;
          border: 1px solid color-mix(in srgb, var(--color-gray-octonary) 50%, transparent);
        }
      }
    }

    /* high-aic 06 */

    & .l-contents.--07 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);

        & ul {
          all: revert;
          list-style: disc;
          padding-inline-start: 1.5em;
          font-weight: 700;
        }
      }
    }

    /* high-aic 07 */

    & .l-contents.--08 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);

        & ul {
          all: revert;
          list-style: disc;
          padding-inline-start: 1.5em;

          &>li {
            &+& {
              margin-block-start: 1em;
            }
          }
        }
      }
    }

    /* high-aic 08 */

    & .l-contents.--09 {
      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);
      }
    }

    /* high-aic 09 */

    & .l-contents.--10 {}

    /* high-aic 10 */

    & .l-contents.--11 {
      background-color: var(--color-gray-septenary);

      & h2 {
        font-family: "Montserrat", sans-serif;
        font-size: clamp(1.188rem, 0.856rem + 1.41vw, 2.375rem);
        /*19px 38px */
        font-size: clamp(1.5rem, 1.256rem + 1.04vw, 2.375rem);
        /*24px 38px */
        font-weight: 600;

        & span {
          font-size: 16px;
        }
      }

      & .c-accordion__summary {
        background-color: var(--color-white);
      }
    }

    /* high-aic 11 */

    & .l-contents.--12 {

      /* Student Voice */
      & .l-width-primary {
        padding: 2em;
        border-radius: clamp(0.5rem, 0.288rem + 0.91vw, 1.25rem);
        /* 8px 20px */
        background-color: var(--color-gray-septenary);

        & h2 {
          font-size: clamp(1.125rem, 0.877rem + 1.06vw, 2rem);
          /* 18px 32px */
          font-weight: 700;
          position: relative;
          z-index: 5;
        }

        &>.l-contents__inner {
          display: grid;
          gap: 20px;

          @media not all and (max-width: 750px) {
            grid-template-columns: 1fr 1fr;
          }

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

          &>div {
            display: grid;
            margin-block-start: 2em;
            position: relative;

            @media not all and (max-width: 750px) {
              grid-template-columns: 1fr 30%;
              grid-template-rows: repeat(2, auto);
              gap: 10px;
              grid-template-areas:
                "p figure"
                "dl dl";
            }

            @media (max-width: 750px) {
              grid-template-columns: 1fr;
              grid-template-rows: repeat(3, auto);
              gap: 10px;
              grid-template-areas:
                "p"
                "dl"
                "figure";
            }

            &::before {
              display: block;
              content: "";
              width: 15%;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
              aspect-ratio: 1;
              position: absolute;
              left: 2.5%;
              z-index: 0;

              @media not all and (max-width: 750px) {
                top: -20%;
              }

              @media (max-width: 750px) {
                top: -1em;
              }
            }

            &:nth-of-type(1) {
              &::before {
                background-image: url(../img/common/icon-number-01.svg);
              }
            }

            &:nth-of-type(2) {
              &::before {
                background-image: url(../img/common/icon-number-02.svg);
              }
            }

            & p {
              grid-area: p;
            }

            & figure {
              grid-area: figure;
              margin-inline: auto;

              @media (max-width: 750px) {
                width: 60%;
              }
            }

            & dl {
              grid-area: dl;
              display: grid;
              grid-template-columns: auto 1fr;
              gap: 1em;

              & dt {
                font-weight: 400;
              }
            }
          }

          & p {
            position: relative;
            z-index: 5;
          }

          & figure {
            position: relative;
            z-index: 5;
          }
        }
      }
    }

    /* high-aic 12 */
  }

  /* high-aic */

  &.--feature-world {
    & .l-contents.--01 {}

    /* world 01 */

    & .l-contents.--02 {
      background-color: var(--color-gray-primary);

      & .l-contents__inner {
        border-bottom: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);

        & h3 {
          font-weight: 400;
        }
      }

      & article.note {
        margin-block-start: 2em;
        padding: 1em;
        border: 1px solid color-mix(in srgb, var(--color-black-primary) 50%, transparent);
        font-size: 15px;
      }

      & figure {
        mix-blend-mode: multiply;
      }
    }

    /* world 02 */

    & .l-contents.--03 {
      background-color: var(--color-gray-primary);

      & .l-contents__inner {
        &>div:nth-of-type(1) {
          & figure {
            width: 50%;
            margin-block-start: 2em;
            margin-inline: auto;

            &>img {
              width: 100%;
              height: 100%;
              object-fit: contain;
              object-position: center;
            }
          }
        }

        &>div:nth-of-type(2) {
          article.note {
            padding: 1em 2em;
            background-color: var(--color-white);
            border-radius: clamp(0.5rem, 0.288rem + 0.91vw, 1.25rem);

            /* 8px 20px */
            &+& {
              margin-block-start: 1em;
            }
          }
        }
      }
    }

    /* world 03 */

    & .l-contents.--04 {
      & article.note {
        display: grid;
        align-items: center;
        padding: 2em;
        background-color: var(--color-gray-decenary);
        border-radius: clamp(0.5rem, 0.288rem + 0.91vw, 1.25rem);

        /* 8px 20px */
        @media not all and (max-width: 750px) {
          grid-template-columns: auto auto;
          gap: 2em;
          width: fit-content;
        }

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

        & h3 {
          font-size: clamp(1.188rem, 0.856rem + 1.41vw, 2.375rem);
          /*19px 38px */
          font-size: clamp(1.5rem, 1.256rem + 1.04vw, 2.375rem);
          /*24px 38px */
          font-weight: 700;

          &>span {
            display: block;
            font-size: clamp(1rem, 0.894rem + 0.45vw, 1.375rem);
            /* 16px 22px */
          }
        }

        &>p {
          /* font-size: clamp(0.938rem, 0.672rem + 1.13vw, 1.875rem); */
          /* 15px 30px */
          font-size: clamp(1.25rem, 1.073rem + 0.75vw, 1.875rem);
          /* 20px 30px */
          font-weight: 700;

          @media (max-width: 750px) {
            text-align: right;
          }

          &>span {
            color: var(--color-red-primary);
            /* font-size: clamp(1.875rem, 1.344rem + 2.26vw, 3.75rem) */
            ;
            /* 30px 60px */
            font-size: clamp(2.5rem, 2.146rem + 1.51vw, 3.75rem);
            /* 40px 60px */
          }
        }
      }

      & p.annotation {
        margin-block-start: 1em;
        padding-inline-start: 1em;
        text-indent: -1em;
      }

      & table {
        width: 100%;

        @media (max-width: 750px) {
          &.--world {
            width: auto;
            min-width: 600px;
          }
        }

        & tr:has(td) {
          border-bottom: 1px solid color-mix(in srgb, var(--color-gray-octonary) 50%, transparent);
        }

        & th,
        & td {
          padding: .5em 1em;
        }

        & th {
          background-color: var(--color-gray-novenary);
          font-weight: 500;
          text-align: center;
        }

        &.--world {
          & td {
            &:nth-of-type(1) {
              white-space: nowrap;
            }

            &:nth-of-type(3),
            &:nth-of-type(4) {
              text-align: right;
            }
          }
        }

        &.--medical {
          & td {
            &:nth-of-type(2) {
              text-align: right;
            }
          }
        }

        &.--domestic {
          & td {
            &:nth-of-type(3) {
              text-align: right;
            }
          }
        }

        &.--medical {
          & td {
            &:nth-of-type(2) {
              text-align: right;
            }
          }
        }

        &+p {
          margin-block-start: 0.5em;
          text-align: right;
        }
      }
    }

    /* world 04 */
  }

  /* feature-world */
}

.l-width-primary.--p-none {
  @media (max-width: 750px) {
    padding-inline: 0;
  }
}

.c-title {
  &.--underline {
    &.--p-24 {
      @media (max-width: 750px) {
        padding-inline: 24px;
      }
    }
  }
}