@charset "utf-8";

main {
  position: relative;
  padding: 10rem 0 0;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 48rem;
    background: linear-gradient(0deg, rgba(237, 246, 250, 0) 0%, rgba(231, 244, 250, 1) 100%);
  }

  &::after {
    content: '';
    position: absolute;
    top: 10rem;
    right: 0;
    width: 54.4rem;
    height: 30rem;
    background: url(/wp/wp-content/themes/cosmos-cpo/img/common/under_fv_deco.png) no-repeat;
    background-size: contain;
  }
}

@media screen and (max-width: 768px) {
  main {
    padding: 7.2rem 0 0;

    &::after {
      top: 7.2rem;
      width: 33.7rem;
      height: 20.5rem;
      background: url(/wp/wp-content/themes/cosmos-cpo/img/common/under_fv_deco_sp.png) no-repeat;
      background-size: contain;
    }
  }
}

/* ↓↓↓ fv ↓↓↓ */
.fv {
  padding: 16rem 3rem 0;

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

  .page_ttl {
    position: relative;

    .en {
      position: relative;
      font-family: var(--font-poppins);
      font-size: max(10px, 1.6rem);
      font-weight: 500;
      color: var(--cosmos-blue);
      transition: color 0.3s ease;

      &::before {
        content: '';
        position: absolute;
        top: -1rem;
        left: -1.3rem;
        width: 3rem;
        height: 3rem;
        background: url(/wp/wp-content/themes/cosmos-cpo/img/common/en_circle_blue.png) no-repeat;
        background-size: cover;
        z-index: -1;
      }
    }

    .ttl {
      position: relative;
      width: max-content;
      font-size: 3.8rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      line-height: 1.2;
      transition: color 0.3s ease;
    }
  }

  .breadcrumbs {
    position: relative;
    display: flex;
    gap: 3rem;
    margin: 8rem auto 0;
    padding-bottom: 3.2rem;
    border-bottom: 1px solid #E7F4FA;

    .breadcrumbs_item {
      position: relative;
      font-size: max(10px, 1.2rem);
      font-weight: 500;
      color: var(--text-black);

      &:not(:last-of-type) {
        &::after {
          content: '';
          position: absolute;
          translate: 0 -50%;
          top: 50%;
          right: -1.8rem;
          width: 0.6rem;
          height: 0.6rem;
          background: url(/wp/wp-content/themes/cosmos-cpo/img/common/breadcrumbs_arrow.svg) no-repeat;
          background-size: contain;
        }
      }

      a {
        color: var(--cosmos-blue);
        text-decoration: underline;
        transition: color 0.3s ease;
      }

      @media screen and (min-width: 769px) {
        a:hover {
          text-decoration: none;
          color: #58C7FF;
        }
      }
    }
  }
}


@media screen and (max-width: 768px) {
  .fv {
    padding: 6.2rem 2rem 0;

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

    .page_ttl {
      .en {
        &::before {
          left: -1.3rem;
        }
      }

      .ttl {
        font-size: 2.8rem;
        padding-left: 0;
      }
    }

    .breadcrumbs {
      gap: 2.3rem;
      margin: 4rem auto 0;
      padding-bottom: 1.6rem;

      .breadcrumbs_item {

        &:not(:last-of-type) {
          &::after {
            right: -1.6rem;
          }
        }
      }
    }
  }
}

/* ↑↑↑ fv ↑↑↑ */

/* ↓↓↓ privacy ↓↓↓ */
.privacy {
  position: relative;
  padding: 12rem 3rem;
  z-index: 1;

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

    .text_group {
      .text {
        font-size: 1.5rem;
        color: #222222;

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

@media screen and (max-width: 768px) {
  .privacy {
    padding: 7.4rem 2rem 8rem;
  }
}

/* ↑↑↑ fv ↑↑↑ */