@charset "utf-8";

:root {
  --underline: #D3F1FF;
  --bg-light: #E7F4FA;
}

.twinkle_group {
  display: flex;
  width: fit-content;
  gap: .8rem;

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

/* ↓↓↓ intro ↓↓↓ */
.intro {
  padding: 12rem 3rem 6.4rem;

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

    .heading {
      font-size: 2.8rem;
      font-weight: 700;
      text-align: center;
      line-height: 1.714;
      margin-bottom: 3rem;
    }

    .text {
      font-size: max(10px, 1.5rem);
      text-align: center;
      line-height: 1.866;
      color: #222222;
      margin-bottom: 4.8rem;

      .marker {
        font-weight: 700;
        display: inline;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        background: linear-gradient(#0000 60%, var(--underline) 0, var(--underline) 4%);
      }
    }

    .image {
      margin-bottom: 78px;
    }

    .twinkle_group {
      margin-inline: auto;
    }
  }
}

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

    .block {
      margin: 0 auto;

      .heading {
        font-size: 2rem;
      }

      .text {
        text-align: justify;
        line-height: 1.866;
        margin-bottom: 3.2rem;
      }

      .image {
        margin-bottom: 6.4rem;
      }

      .twinkle_group {
        gap: .8rem;

        img {
          width: 2rem;
        }
      }
    }
  }

}

/* ↑↑↑ intro ↑↑↑ */


/* ↓↓↓ area ↓↓↓ */
.area {

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

    .block_head {
      width: fit-content;
      margin-inline: auto;
      background: var(--bg-light);
      padding-inline: 1.2rem 1.6rem;
      border-radius: .8rem .8rem 0 0;

      .twinkle_ttl {
        position: relative;
        display: flex;
        align-items: center;
        font-size: max(10px, 1.5rem);
        font-weight: 700;
        color: var(--cosmos-blue);
        letter-spacing: 0.05em;
        padding-block: 1rem .8rem;
        gap: .4rem;

        &::before {
          content: '';
          position: relative;
          top: 0;
          left: 0;
          width: 1.6rem;
          aspect-ratio: 1;
          background: url(/wp/wp-content/themes/cosmos-cpo/img/common/cosmos_kirameki.svg) no-repeat;
          background-size: cover;
        }
      }
    }

    .block_body {
      position: relative;
      background: var(--bg-light);
      padding-inline: 7.2rem;
      border-radius: 2rem 2rem 0 0;
      z-index: 0;

      .map_img {
        position: absolute;
        width: 86.4rem;
        aspect-ratio: 864/218;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        z-index: -1;
      }

      .block_body_inner {
        padding-block: 2.5rem 11.7rem;
      }

      .lead {
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        display: flex;
        flex-direction: column;
        margin-bottom: 2.4rem;

        .strong {
          color: var(--cosmos-blue);
        }

        .num {
          font-size: 4.8rem;
          font-weight: 500;
          line-height: 1;
          font-family: var(--font-poppins);
        }
      }

      .text {
        color: #222222;
        text-align: center;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .area {

    .block {
      margin: 0 auto;

      .block_head {
        border-radius: 1rem 1rem 0 0;
      }

      .block_body {
        position: relative;
        background: var(--bg-light);
        padding-inline: 2rem;
        border-radius: 0;
        z-index: 0;

        .map_img {
          position: relative;
          width: 100%;
          aspect-ratio: 342/86;
          top: initial;
          left: initial;
          translate: initial;
          margin-bottom: 4.8rem;
          z-index: -1;
        }

        .block_body_inner {
          padding-block: 4rem 0;
        }

        .lead {
          font-size: 2.4rem;
          font-weight: 700;
          line-height: 1.2;
          text-align: center;
          display: flex;
          flex-direction: column;
          margin-bottom: 2.4rem;

          .strong {
            color: var(--cosmos-blue);
          }

          .num {
            font-size: 4.8rem;
            font-weight: 500;
            line-height: 1;
            font-family: var(--font-poppins);
          }
        }

        .text {
          text-align: justify;
        }
      }
    }
  }
}

/* ↑↑↑ area ↑↑↑ */

/* ↓↓↓ service ↓↓↓ */
.service {
  background: #F7F9FA;
  padding-block: 8rem 12rem;

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

    .twinkle_common_ttl {
      margin-bottom: 3.2rem;
    }

    .service_list {
      display: flex;
      flex-direction: column;
      gap: 2.4rem;

      .list_item {
        display: flex;
      }

      .image {
        min-width: 36rem;
        border-radius: 2rem 0 0 2rem;
        overflow: hidden;
      }

      .item_img {
        aspect-ratio: 360/240;
        transition: scale 0.3s ease;
      }

      .item_body {
        position: relative;
        width: 100%;
        background: #fff;
        padding: 5.6rem 6.4rem 0;
        border: 1px solid #DDDDDD;
        border-radius: 0 2rem 2rem 0;
        transition: background-color 0.3s ease;

        .text_group {
          max-width: 44rem;
          transition: color 0.3s ease;

          .heading {
            font-size: 2.4rem;
            font-weight: 700;
            letter-spacing: 0;
            margin-bottom: 2rem;
            transition: color 0.3s ease;
          }

          .text {
            font-size: max(10px, 1.5rem);
            letter-spacing: 0.08em;
          }
        }

        .link {
          position: absolute;
          display: flex;
          align-items: center;
          width: fit-content;
          gap: .6rem;
          right: 0;
          bottom: 2.4rem;
          font-size: 1.3rem;
          font-weight: 500;
          letter-spacing: 0.1em;
          color: var(--cosmos-blue);
          padding-right: 3rem;

          .circle {
            position: relative;
            display: block;
            width: 2.4rem;
            aspect-ratio: 1;
            background-color: var(--bg-light);
            border-radius: 50%;
            z-index: 0;

            &::before {
              content: "";
              position: absolute;
              border-right: 2px solid var(--cosmos-blue);
              border-bottom: 2px solid var(--cosmos-blue);
              rotate: -45deg;
              top: 50%;
              left: 45%;
              translate: -50% -50%;
              width: .4rem;
              aspect-ratio: 1;
              z-index: 1;
            }
          }
        }
      }

      @media screen and (min-width: 769px) {
        .list_item:hover {

          .item_body {
            background-color: #E7F4FA;
          }

          .text_group {
            color: #8B8B8B;

            .heading {
              color: #8B8B8B;
            }
          }

          .item_img {
            scale: 1.05;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .service {
    background: #F7F9FA;
    padding-block: 8rem;

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

      .inner {
        padding-inline: 2.4rem;
      }

      .twinkle_common_ttl {
        margin-bottom: 3.2rem;
      }

      .service_list {
        gap: 1.6rem;

        .list_item {
          flex-direction: column;
        }

        .image {
          min-width: initial;
          width: 100%;
          border-radius: 2rem 2rem 0 0;
          border: 1px solid #DDDDDD;
          border-bottom: none;
          aspect-ratio: initial;
        }

        .item_body {
          position: relative;
          padding: 2.4rem 2rem;
          border-radius: 0 0 2rem 2rem;

          .text_group {
            max-width: auto;

            .heading {
              font-size: 1.8rem;
              margin-bottom: 1rem;
            }
          }

          .text {
            margin-bottom: 1rem;
          }

          .link {
            position: relative;
            gap: .6rem;
            right: 0;
            bottom: 0;
            padding-right: 0;
            margin-left: auto;
          }
        }
      }
    }
  }
}

/* ↑↑↑ service ↑↑↑ */