@charset "utf-8";

.p-fv {
  width: 100%;
  min-height: 100vh;
  background: url("https://do-and-be.jp/system_panel/uploads/images/fv-bg.png") no-repeat center center / cover;
  overflow: hidden;

  @media (width < 768px) {
    min-height: auto;
  }
}

.gjs-dashed *[data-highlightable] .p-fv {
  min-height: auto;
  height: max-content;
}

.p-fv__inner {
  max-width: none;
  height: 100%;
  padding: 20px 20px 50px 269px;
  position: relative;

  @media (width < 1120px) {
    padding: 20px 20px 41px 200px;
  }

  @media (width < 768px) {
    padding: 20px 20px 41px;
  }
}

.p-fv__bg {
  position: absolute;
  width: calc(248vw / 13.66);
  top: 77px;
  right: 9%;
  z-index: 0;

  @media (width < 768px) {
    width: 120px;
    top: 185px;
  }
}

.gjs-dashed *[data-highlightable] .p-fv__bg {
  z-index: 2;
}

.p-fv__breadcrumb {
  @media (width < 768px) {
    margin-top: 40px;
  }
}

.p-fv__container {
  width: calc(946vw / 13.66);
  margin: 0 auto;
  padding-left: 22px;
  position: relative;
  z-index: 1;

  @media (width < 1120px) {
    padding-left: 0;
    width: 100%;
  }
}

.p-fv__heading {
  margin-top: calc(36vw / 13.66);
  width: fit-content;

  @media (width < 768px) {
    margin-top: 40px;
  }
}

.p-fv__img {
  margin-top: calc(56vw / 13.66);
  width: 100%;
  aspect-ratio: 925/360;
  border-radius: 6px;
  overflow: hidden;

  @media (width < 768px) {
    margin-top: 40px;
    aspect-ratio: 70/36;
  }

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

.p-fv__categories {
  margin-top: calc(50vw / 13.66);

  @media (width < 768px) {
    margin-top: 60px;
  }
}

.p-fv__service-nav {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.p-fv__service-link {
  background: #ffffff;
  border-radius: 10px;
  padding: 14px 20px 14px 30px;
  display: flex;
  align-items: center;
  line-height: 1;
  gap: 20px;
  color: #555555;
  letter-spacing: 0.06em;

  img {
    width: 22px;
  }
}