@charset "utf-8";

/* ↓↓↓ concept ↓↓↓ */
.concept {
  padding: 7.4rem 3rem 10rem;

  .block {
    +.block {
      margin-top: 10rem;
    }
  }

  .intro_box {
    .copy_group {
      text-align: center;
      border-radius: 2rem;
      overflow: hidden;
    }

    .twinkle_group {
      display: flex;
      justify-content: center;
      gap: 0.8rem;
      margin-top: 3.2rem;

      img {
        width: 3rem;
        aspect-ratio: 1;
      }
    }

    .text {
      display: block;
      max-width: 60rem;
      font-size: max(10px, 1.5rem);
      letter-spacing: 0.1em;
      margin: 3.2rem auto 0;
      color: #222;
    }
  }

  .conts_ttl {
    position: relative;
    margin-top: 6.4rem;
    padding-left: 2.4rem;
    overflow: hidden;

    .txt {
      position: relative;
      display: block;
      width: max-content;
      font-size: max(10px, 1.5rem);
      font-weight: 700;
      color: var(--cosmos-blue);
      background-color: #fff;
      border: 1px solid #D0DEE5;
      border-bottom: none;
      border-radius: 1rem 1rem 0 0;
      padding: 1rem 1.6rem 1rem 3.2rem;
      z-index: 1;

      &::before {
        content: '';
        position: absolute;
        translate: 0 -50%;
        top: 50%;
        left: 1.6rem;
        width: 1.6rem;
        height: 1.6rem;
        mask-image: url(/wp/wp-content/themes/cosmos-cpo/img/common/cosmos_kirameki.svg);
        mask-size: cover;
        background-color: var(--cosmos-blue);
      }
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: -2.4rem;
      width: 100vw;
      height: 1px;
      background-color: #D0DEE5;
    }
  }

  .twinkle_common_ttl {
    +.conts_ttl {
      margin-top: 3.2rem;
    }
  }

  .numbering_list {
    counter-reset: listnum;
    margin-top: 2.4rem;

    .item {
      position: relative;
      font-size: max(10px, 1.5rem);
      line-height: 2;
      padding-left: 3rem;

      +.item {
        margin-top: 1.6rem;
      }

      &::before {
        counter-increment: listnum;
        content: counter(listnum) ".";
        position: absolute;
        top: 0.2em;
        left: 0;
        color: var(--cosmos-blue);
        vertical-align: middle;
        font-size: 2.4rem;
        font-family: var(--font-poppins);
        font-weight: 500;
        line-height: 1;
      }
    }
  }

  .identity_list {
    display: flex;
    gap: 2rem;
    margin-top: 2.4rem;

    .item {
      width: calc((100% - 2rem * 2) / 3);
      background-color: #F7F9FA;
      border: 1px solid #F0F0F0;
      border-radius: 2rem;
      padding: 2.4rem 3.2rem 3.2rem;

      .image {
        width: 12rem;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
      }

      .text-group {
        margin-top: 1.6rem;
      }

      .theme {
        text-align: center;
        font-size: 1.8rem;
        font-weight: 700;
      }

      .text {
        font-size: max(10px, 1.5rem);
        line-height: 2;
        color: #222;
        margin-top: 0.8rem;
      }
    }
  }

  .feature_list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin-top: 2.4rem;

    .item {
      display: flex;
      gap: 4rem;
      width: 100%;
      background-color: #F7F9FA;
      border: 1px solid #F0F0F0;
      border-radius: 2rem;
      padding: 3.2rem 4rem;

      .image {
        min-width: 12rem;
        width: 12rem;
        height: 12rem;
        border-radius: 50%;
        overflow: hidden;
      }

      .text-group {
        padding-top: 1rem;
      }

      .theme {
        font-size: 1.8rem;
        font-weight: 700;
      }

      .text {
        font-size: max(10px, 1.5rem);
        line-height: 2;
        color: #222;
        margin-top: 0.8rem;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .concept {
    padding: 6.4rem 2rem 8rem;

    .block {
      +.block {
        margin-top: 6.4rem;
      }
    }

    .intro_box {
      .twinkle_group {
        gap: 0.8rem;

        img {
          width: 2rem;
        }
      }

      .text {
        max-width: initial;
        text-align: justify;
        font-size: max(10px, 1.5rem);
        letter-spacing: 0.1em;
        margin: 3.2rem auto 0;
      }
    }

    .conts_ttl {
      margin-top: 4.8rem;
      padding-left: 0;

      .txt {
        padding: 1rem 1.6rem 1rem 3rem;

        &::before {
          translate: 0 0;
          top: 1.4rem;
          left: 1rem;
        }
      }

      &::after {
        left: 0;
      }
    }

    .identity_list {
      flex-direction: column;
      gap: 1rem;

      .item {
        display: flex;
        width: 100%;
        gap: 1.6rem;
        padding: 2.4rem 2rem;

        .image {
          min-width: 7.8rem;
          width: 7.8rem;
          height: 7.8rem;
        }

        .text-group {
          margin-top: 0;
        }

        .theme {
          text-align: left;
        }

        .text {
          margin-top: 1.2rem;
        }
      }
    }

    .feature_list {
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      margin-top: 2.4rem;

      .item {
        gap: 1.6rem;
        padding: 2.4rem 2rem;

        .image {
          min-width: 7.8rem;
          width: 7.8rem;
          height: 7.8rem;
        }

        .text-group {
          padding-top: 0;
        }

        .text {
          margin-top: 1.2rem;
        }
      }
    }
  }
}

/* ↑↑↑ concept ↑↑↑ */