@charset "utf-8";

.p-fv {
  position: relative;
}

.p-fv__breadcrumb {
  position: absolute;
  top: 102px;
  right: 0;
  padding: 0 26px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 30px;

  @media (width < 768px) {
    top: 80px;
    padding: 0 20px;
  }

  div:not(:first-of-type) {
    position: relative;
  }

  div:not(:first-of-type)::before {
    content: '';
    position: absolute;
    width: 7px;
    height: 6px;
    left: -20px;
    top: 50%;
    transform: translateY(-40%);
    background: url('https://mykako.co.jp/system_panel/uploads/images/breadcrumb-arrow.svg') no-repeat center center / contain;
  }

  p {
    font-weight: 400;
    font-size: 12px;
    color: var(--color-white);
    line-height: normal;
    letter-spacing: 0.03em;
  }

  a:hover {
    opacity: 0.7;
  }
}

.p-fv__flex {
  width: 100%;
  display: flex;
  align-items: center;

  @media (width < 768px) {
    flex-direction: column;
    align-items: start;
  }
}

.p-fv__main {
  margin-top: 70px;
  min-width: fit-content;
  flex: 1 1 auto;
  margin-left: clamp(20px, calc(110vw / 13.66), 110px);

  @media (width < 768px) {
    margin-top: 150px;
    margin-left: 20px;
  }
}

.p-fv__heading {
}

.p-fv__img {
  width: 68%;
  aspect-ratio: 929/496;
  min-height: 496px;
  overflow: hidden;
  clip-path: polygon(19% 0, 100% 0, 100% 100%, 0% 100%);
  position: relative;

  @media (width < 768px) {
    width: 100%;
    aspect-ratio: 375/300;
    min-height: auto;
    clip-path: polygon(0% 19%, 100% 0, 100% 100%, 0% 100%);
  }

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

.p-fv__img::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 2;
  background: linear-gradient(180deg, #09aa8a00 0%, #09aa8a30 30%, hsla(212, 99%, 32%, 0.7) 100%);
  pointer-events: none;
}