@charset "utf-8";

/* ↓↓↓ hotline ↓↓↓ */
.hotline {
  padding: 12rem 2rem;

  .block {
    max-width: 95.2rem;
    margin: 0 auto;

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

  a.link {
    font-size: max(10px, 1.5rem);
    text-decoration: underline;
    color: var(--cosmos-blue);
  }

  @media screen and (min-width: 769px) {
    a.link:hover {
      text-decoration: none;
    }
  }

  .text_group {
    .text {
      font-size: max(10px, 1.5rem);
      color: #222;

      +.text {
        margin-top: 3rem;
      }
    }
  }

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

  .gray_box {
    margin-top: 2.5rem;
    border-radius: 2rem;
    background-color: #F7F9FA;
    border: 1px solid #F0F0F0;
    padding: 4rem;
  }

  .point_list {

    .item {
      position: relative;
      font-size: max(10px, 1.5rem);
      color: #222;
      letter-spacing: 0.1em;
      line-height: 2;
      padding-left: 2rem;

      &::before {
        content: 'ー';
        position: absolute;
        top: 0;
        left: 0;
        color: var(--cosmos-blue);
      }
    }
  }

  .numbering_list {
    counter-reset: listnum;

    .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;
      }
    }
  }

  .conts_ttl {
    position: relative;
    margin-top: 6.4rem;
    margin-bottom: 2.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;
    }
  }
}

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

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

    .gray_box {
      margin-top: 3.2rem;
      padding: 3.2rem 2rem;

      +.conts_ttl {
        margin-top: 4.8rem;
      }
    }
  }
}

/* ↑↑↑ hotline ↑↑↑ */