.ceramic {
  & .inner {
    margin-inline: auto;
  }

  & .group-wrap01 {
    position: relative;
    padding-bottom: 100px;
    background-color: #f7f7f7;

    &::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      translate: -50% 0;
      width: 160px;
      height: 41px;
      clip-path: polygon(100% 0, 0 0, 50% 100%);
      background-color: #f7f7f7;
      z-index: 2;
    }
  }

  & .group-wrap02 {
    position: relative;
    background: linear-gradient(to bottom, rgb(219 219 219) 0%, rgb(152 152 152 / 0) 100%);

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 230px;
      background: linear-gradient(to bottom, #3c4248 0%, transparent 100%);
      opacity: 0.6;
      z-index: 1;
    }
  }

  & .group01 {
    padding-top: 140px;
    position: relative;
    z-index: 1;

    &::after {
      content: "";
      margin: 80px auto 93px;
      display: block;
      width: min(100%, 1030px);
      height: 1px;
      background-color: #ccc;
    }

    & .inner {
      max-width: 1030px;
    }

    & .container01 {
      display: grid;
      grid-template-columns: 1fr 410px;
      grid-template-rows: auto auto auto;
      gap: 0 82px;
    }

    & .heading01 {
      margin-block: var(--leading-trim);
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      align-self: end;
      font-size: 36px;
      font-weight: 600;
      letter-spacing: 0.05em;
      line-height: calc(60 / 36);
      text-shadow: 0 0 20px rgb(255 255 255);
    }

    & .texts01 {
      margin-top: 51px;
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      align-self: start;

      & .text01 {
        margin-block: var(--leading-trim);
        font-size: 16px;
        line-height: calc(36 / 16);
      }

      & .text01 + .text01 {
        margin-top: 1lh;
      }
    }

    & .wrap01 {
      padding: 68px 40px;
      grid-column: 2 / 3;
      grid-row: 1 / 4;
      align-self: center;
      height: fit-content;
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0 3px 46px rgb(0 0 0 / 0.05);
    }

    & .texts02 {
      margin-top: 41px;

      & .text01 {
        margin-block: var(--leading-trim);
        font-size: 16px;
        letter-spacing: 0.05em;
        line-height: calc(26 / 16);
        text-align: center;
      }
    }

    & .wrap02 {
      margin-top: 46px;
      grid-column: 1 / 2;
      grid-row: 3 / 4;
    }
  }

  @media (max-width: 767px) {
    & .group01 {
      padding-top: 80px;

      &::after {
        margin: 40px auto 40px;
      }

      & .inner {
        padding-inline: 15px;
        max-width: 606px;
      }

      & .container01 {
        grid-template-columns: 1fr;
        gap: 0 82px;
      }

      & .heading01 {
        font-size: min(calc(36 / 606 * 100vw), 36px);
        grid-column: initial;
        grid-row: initial;
      }

      & .texts01 {
        margin-top: 51px;
        grid-column: initial;
        grid-row: initial;

        & .text01 {
          font-size: clamp(14px, calc(16 / 606 * 100vw), 16px);
        }
      }

      & .wrap01 {
        margin-top: 40px;
        padding: 24px;
        grid-column: initial;
        grid-row: initial;
      }

      & .texts02 {
        margin-top: 40px;

        & .text01 {
          font-size: clamp(14px, calc(16 / 606 * 100vw), 16px);
        }
      }

      & .wrap02 {
        margin-top: 40px;
        grid-column: initial;
        grid-row: initial;
      }
    }
  }

  & .group02 {
    & .inner {
      max-width: 1020px;
    }

    & .heading01 {
      margin-block: var(--leading-trim);
      font-size: 46px;
      font-weight: 600;
      letter-spacing: 0.05em;
      line-height: calc(80 / 46);
      text-shadow: 0 0 20px rgb(255 255 255);
      text-align: center;

      & span {
        display: inline-block;
      }
    }

    & .container01 {
      margin-top: 70px;
      display: flex;
      justify-content: center;
      gap: 21px;

      & .texts01 {
        flex: 1;
        max-width: max-content;

        & .text01 {
          margin-block: var(--leading-trim);
          font-size: 16px;
          line-height: calc(38 / 16);

          & + .text01 {
            margin-top: 1lh;
          }

          & .md {
            font-size: 18px;
          }

          & .lg {
            font-size: 24px;
          }

          & .marker {
            background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgb(255, 245, 172) 70%);
          }
        }
      }

      & .wrap01 {
        flex: 0 0 560px;
      }
    }
  }

  @media (max-width: 767px) {
    & .group02 {
      & .inner {
        padding-inline: 15px;
        max-width: 606px;
      }

      & .heading01 {
        font-size: min(calc(46 / 606 * 100vw), 46px);
      }

      & .container01 {
        margin-top: 40px;
        display: block;

        & .texts01 {
          & .text01 {
            font-size: clamp(14px, calc(16 / 606 * 100vw), 16px);

            & .md {
              font-size: clamp(16px, calc(18 / 606 * 100vw), 18px);
            }

            & .lg {
              font-size: clamp(20px, calc(24 / 606 * 100vw), 24px);
            }
          }
        }

        & .wrap01 {
          margin-top: 40px;
        }
      }
    }
  }

  & .group03 {
    & .inner {
      max-width: 1020px;
    }

    & .heading01 {
      padding: 19px;
      font-size: 28px;
      font-weight: 600;
      letter-spacing: 0.05em;
      line-height: 1.5;
      color: #fff;
      background-color: #666;
      border-radius: 10px;
      text-align: center;

      & span {
        display: inline-block;
      }
    }

    & .container01 {
      margin: 70px auto 0;
      display: flex;
      justify-content: center;
      gap: 50px;
      max-width: 960px;

      & .texts01 {
        order: 1;
        flex: 1;

        & .text01 {
          margin-block: var(--leading-trim);
          font-size: 16px;
          line-height: calc(36 / 16);

          & + .text01 {
            margin-top: 1lh;
          }
        }
      }

      & .wrap01 {
        flex: 0 0 533px;
      }

      & .texts02 {
        margin-top: 20px;

        & .text01 {
          margin-block: var(--leading-trim);
          font-size: 10px;
          line-height: calc(15 / 10);
        }
      }
    }
  }

  @media (max-width: 767px) {
    & .group03 {
      & .inner {
        padding-inline: 15px;
        max-width: 606px;
      }

      & .heading01 {
        padding: calc(19 / 28 * 1em);
        font-size: clamp(24px, calc(28 / 606 * 100vw), 28px);
      }

      & .container01 {
        margin: 40px 0 0;
        flex-direction: column;
        gap: 40px;

        & .texts01 {
          order: 0;

          & .text01 {
            font-size: clamp(14px, calc(16 / 606 * 100vw), 16px);
          }
        }

        & .texts02 {
          margin-top: 20px;

          & .text01 {
            font-size: 10px;
          }
        }

        & .wrap01 {
          flex: 0 0 auto;
        }
      }
    }
  }

  & .group04 {
    margin-top: 90px;
    padding: 58px 65px 54px 80px;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 3px 46px rgb(0 0 0 / 0.05);

    &.inner {
      max-width: 1090px;
    }

    & .heading01 {
      margin-block: var(--leading-trim);
      font-size: 36px;
      font-weight: 600;
      letter-spacing: 0.05em;
      line-height: calc(60 / 36);
      color: #2554bf;
      text-align: center;

      & span {
        display: inline-block;
      }
    }

    & .container01 {
      margin-top: 58px;
      display: flex;
      gap: 60px;
      flex-direction: row-reverse;

      & .texts01 {
        flex: 1;

        & .text01 {
          margin-block: var(--leading-trim);
          font-size: 18px;
          font-weight: 700;
          line-height: calc(38 / 18);

          & + .text01 {
            margin-top: 1lh;
          }

          & .md {
            font-size: 24px;
          }
        }
      }

      & .wrap01 {
        flex: 0 0 433px;
      }
    }

    & .container02 {
      margin-top: 60px;
      display: flex;
      gap: 56px;

      & .texts01 {
        flex: 1;

        & .text01 {
          margin-block: var(--leading-trim);
          font-size: 16px;
          line-height: calc(36 / 16);

          & .md {
            font-size: 18px;
          }
        }
      }

      & .wrap01 {
        flex: 0 0 355px;
      }
    }
  }

  @media (max-width: 767px) {
    & .group04 {
      margin-top: 40px;
      padding: 40px 24px;

      &.inner {
        padding-inline: 15px;
        max-width: 606px;
      }

      & .heading01 {
        font-size: min(calc(36 / 606 * 100vw), 36px);
      }

      & .container01 {
        margin-top: 40px;
        flex-direction: column;
        gap: 40px;

        & .texts01 {
          flex: 1;

          & .text01 {
            font-size: clamp(14px, calc(18 / 606 * 100vw), 18px);

            & .md {
              font-size: clamp(20px, calc(24 / 606 * 100vw), 24px);
            }
          }
        }

        & .wrap01 {
          flex: 0 0 auto;
        }
      }

      & .container02 {
        margin-top: 40px;
        flex-direction: column;
        gap: 40px;

        & .texts01 {
          & .text01 {
            font-size: clamp(14px, calc(16 / 606 * 100vw), 16px);

            & .md {
              font-size: clamp(16px, calc(18 / 606 * 100vw), 18px);
            }
          }
        }

        & .wrap01 {
          flex: 0 0 auto;
        }
      }
    }
  }

  & .group05 {
    padding: 97px 0 100px;
    position: relative;
    z-index: 1;

    & .inner {
      max-width: 1020px;
    }

    & .heading01 {
      margin-block: var(--leading-trim);
      font-size: 48px;
      font-weight: 600;
      letter-spacing: 0.05em;
      line-height: calc(60 / 48);
      color: #2554bf;
      text-align: center;

      & span {
        display: inline-block;
      }
    }

    & .box01 {
      margin: 39px auto 0;
      padding: 57px 16px 56px 57px;
      max-width: 1000px;
      border-radius: 10px;
      background-color: #fff;
      box-shadow: 0 3px 46px rgb(235 241 250);
    }

    & .container01 {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 52px;

      & .wrap01 {
        flex: 0 0 365px;
      }

      & .texts01 {
        flex: 1;

        & .text01 {
          margin-block: var(--leading-trim);
          font-size: 18px;
          font-weight: 700;
          line-height: calc(40 / 18);
        }
      }
    }

    & .heading02 {
      margin: calc(80px + var(--leading-trim)) 0 var(--leading-trim);
      font-size: 36px;
      font-weight: 600;
      line-height: calc(56 / 36);
      color: #666;
      text-align: center;

      & span {
        display: inline-block;
      }
    }

    & .texts02 {
      margin-top: 50px;

      & .text01 {
        margin-block: var(--leading-trim);
        font-size: 16px;
        line-height: calc(40 / 16);
        text-align: center;
      }
    }

    & .heading03 {
      margin: calc(61px + var(--leading-trim)) 0 var(--leading-trim);
      font-size: 28px;
      font-weight: 600;
      line-height: calc(41 / 28);
      color: #2554bf;
      text-align: center;

      & span {
        display: inline-block;
      }
    }

    & .container02 {
      margin: 28px auto 0;
      padding: 16px 18px;
      position: relative;
      display: flex;
      align-items: center;
      gap: 30px;
      max-width: 693px;
      background-color: rgb(95 183 173 / 0.1);
      border-radius: 10px;

      &::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        translate: -50% -4px;
        width: 301px;
        aspect-ratio: 301 / 88.85;
        clip-path: polygon(100% 0, 0 0, 50% 100%);
        background: linear-gradient(to bottom, rgb(255 255 255 / 0) 0%, #5fb7ad 100%);
        opacity: .31;
      }

      & .wrap01 {
        flex: 0 0 284px;
      }

      & .texts01 {
        flex: 1;

        & .text01 {
          margin-block: var(--leading-trim);
          padding-left: 24px;
          position: relative;
          font-size: 20px;
          font-weight: 600;
          line-height: calc(48 / 20);
          color: #444;

          & + .text01 {
            margin-top: calc(20px + var(--leading-trim));
          }

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 16px;
            height: 1lh;
            background: url(../img/ceramic/group05-list-icon.svg) no-repeat center center/contain;
          }
        }
      }
    }

    & .heading04 {
      margin-top: 80px;
      padding: 25px;
      background-color: #e67993;
      border-radius: 10px;

      & > span {
        margin-block: var(--leading-trim);
        display: block;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: 0.1em;
        line-height: calc(58 / 30);
        color: #fff;
        text-align: center;

        & span {
          display: inline-block;
        }
      }
    }

    & .container03 {
      margin: 60px auto 0;
      display: flex;
      align-items: center;
      gap: 46px;
      max-width: 986px;

      & .wrap01 {
        flex: 0 0 385px;
      }

      & .texts01 {
        flex: 1;

        & .text01 {
          margin-block: var(--leading-trim);
          font-size: 16px;
          line-height: calc(42 / 16);

          & .md {
            font-size: 18px;
            line-height: calc(42 / 18);
          }

          & .pink {
            color: #e67993;
          }
        }
      }
    }

    & .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;

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

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgb(136 189 255 / 0) 0%, rgb(255 255 255 / .6) 80%, transparent 100%);
      }
    }
  }

  @media (max-width: 767px) {
    & .group05 {
      padding: 40px 0 40px;

      & .inner {
        padding-inline: 15px;
        max-width: 606px;
      }

      & .heading01 {
        font-size: min(calc(48 / 606 * 100vw), 48px);
      }

      & .box01 {
        margin: 40px 0 0;
        padding: 40px 24px;
      }

      & .container01 {
        flex-direction: column-reverse;
        gap: 40px;

        & .wrap01 {
          flex: 0 0 auto;
        }

        & .texts01 {
          & .text01 {
            font-size: clamp(16px, calc(18 / 606 * 100vw), 18px);
          }
        }
      }

      & .heading02 {
        margin: calc(40px + var(--leading-trim)) 0 var(--leading-trim);
        font-size: min(calc(36 / 606 * 100vw), 36px);
      }

      & .texts02 {
        margin-top: 40px;

        & .text01 {
          font-size: clamp(14px, calc(16 / 606 * 100vw), 16px);
          text-align: left;
        }
      }

      & .heading03 {
        margin: calc(40px + var(--leading-trim)) 0 var(--leading-trim);
        font-size: clamp(20px, calc(28 / 606 * 100vw), 28px);
      }

      & .container02 {
        margin: 24px auto 0;
        padding: 24px 16px;
        flex-direction: column;
        align-items: start;
        gap: 24px;

        & .wrap01 {
          flex: 0 0 auto;
        }

        & .texts01 {
          flex: 1;

          & .text01 {
            margin-block: var(--leading-trim);
            padding-left: calc(24 / 20 * 1em);
            font-size: clamp(14px, calc(20 / 606 * 100vw), 20px);

            &::before {
              width: clamp(14px, calc(16 / 606 * 100vw), 16px);
            }
          }
        }
      }

      & .heading04 {
        margin-top: 40px;
        padding: 16px;

        & > span {
          font-size: clamp(20px, calc(30 / 606 * 100vw), 30px);
        }
      }

      & .container03 {
        margin: 24px auto 0;
        flex-direction: column;
        align-items: start;
        gap: 24px;

        & .wrap01 {
          flex: 0 0 auto;
        }

        & .texts01 {
          & .text01 {
            font-size: clamp(14px, calc(16 / 606 * 100vw), 16px);

            & .md {
              font-size: clamp(16px, calc(18 / 606 * 100vw), 18px);
            }
          }
        }
      }
    }
  }

  & .group06 {
    padding: 80px 0 110px;
    background-color: rgb(124 186 179 / 0.1);

    & .inner {
      max-width: 1020px;
    }

    & .heading01 {
      padding: 22px;
      border-radius: 10px;
      background-color: #598fd9;

      & span {
        margin-block: var(--leading-trim);
        display: block;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: 0.05em;
        line-height: calc(45 / 30);
        text-align: center;
        color: #fff;
      }
    }

    & .container01 {
      margin-top: 51px;
      position: relative;

      & img {
        position: absolute;
        top: 40px;
        right: 0;
        display: block;
        width: min(100%, 463px);

        &.sp {
          display: none;
        }
      }
    }

    & .texts01 {
      & .text01 {
        margin-block: var(--leading-trim);
        font-size: 36px;
        font-weight: 600;
        line-height: calc(58 / 36);
        color: #666;
      }

      & .text02 {
        margin: calc(50px + var(--leading-trim)) 0 var(--leading-trim);
        font-size: 28px;
        font-weight: 700;
        line-height: calc(56 / 28);
        color: #598fd9;

        & span {
          font-size: 38px;
          line-height: calc(56 / 38);
        }
      }

      & .sp {
        display: none;
      }
    }

    & .texts02 {
      margin-top: 60px;

      & .md {
        font-size: 18px;
      }

      & .text {
        margin-block: var(--leading-trim);
        font-size: 16px;
        line-height: calc(46 / 16);
        color: #555;
      }

      & .text01 {
        max-width: 515px;
      }

      & .text02 {
        margin-top: 60px;
      }
    }
  }

  @media (max-width: 767px) {
    & .group06 {
      padding: 40px 0 40px;
  
      & .inner {
        padding-inline: 15px;
        max-width: 606px;
      }
  
      & .heading01 {
        padding: 16px;
  
        & span {
          font-size: clamp(20px,calc(30 / 606 * 100vw),30px);
          text-align: left;
        }
      }
  
      & .container01 {
        margin-top: 40px;
  
        & img {
          margin: 24px auto 0;
          position: static;
          width: min(100%, 463px);

          &.pc {
            display: none;
          }

          &.sp {
            display: block;
          }
        }
      }
  
      & .texts01 {
        & .text01 {
          font-size: clamp(20px,calc(36 / 606 * 100vw),36px);
        }
  
        & .text02 {
          margin: calc(40px + var(--leading-trim)) 0 var(--leading-trim);
          font-size: clamp(16px,calc(28 / 606 * 100vw),28px);
          text-align: center;
  
          & span {
            font-size: min(calc(38 / 606 * 100vw));
          }
        }

        & .sp {
          display: inline;
        }

        & .pc {
          display: none;
        }
      }
  
      & .texts02 {
        margin-top: 40px;
  
        & .md {
          font-size: clamp(16px,calc(18 / 606 * 100vw),18px);
        }
  
        & .text {
          font-size: clamp(14px,calc(16 / 606 * 100vw),16px);
          line-height: 2;
        }
  
        & .text01 {
          max-width: 100%;
        }
  
        & .text02 {
          margin-top: 1lh;
        }
      }
    }
  }
}