/* =======================================================================
    interview Page Styles
======================================================================= */

/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

.interview_container {
  display: flex;
}

.interview_title {
  border-bottom: 1px solid var(--wp--preset--color--custom-light-pink);
  display: inline-block;
  position: relative;
  text-decoration: none !important;
  transition: all 0.3s;
  width: 100%;

  &::before,
  &::after {
    content: "";
    position: absolute;
    bottom: 1.5rem;
    right: 0;
    width: 20px;
    height: 4px;
    border-radius: 9999px;
    background-color: var(--wp--preset--color--custom-light-pink);
    transform-origin: calc(100% - 2px) 50%;
  }

  &::before {
    transform: rotate(45deg);
  }

  &::after {
    transform: rotate(-45deg);
  }

  &:hover {
    opacity: 0.3;
  }
}

/* =======================================================================
    Grid
======================================================================= */
.interview_grid {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 5%;

  a {
    text-decoration: none;
    transition: all 0.3s;

    &:hover {
      opacity: 0.3;
    }
  }

  div {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center;
  }

  p {
    padding-top: 1rem;
  }
}

/* =======================================================================
    slider 
======================================================================= */
.interview_slider {
  margin-right: calc(50% - 50vw);

  /* インジケーター */
  .flex-control-nav {
    li {
      a {
        width: 1rem !important;
        height: 1rem !important;
        border-radius: 50% !important;
        box-shadow: none !important;
      }
    }
  }
}

.interview_shape-1 {
  img {
    border-radius: 43% 57% 73% 27% / 63% 34% 66% 37%;
  }
}

.interview_shape-2 {
  img {
    border-radius: 30% 70% 30% 70% / 38% 54% 46% 62%;
  }
}

.interview_shape-3 {
  img {
    border-radius: 81% 19% 25% 75% / 36% 30% 70% 64%;
  }
}

.interview_shape-4 {
  img {
    border-radius: 26% 74% 52% 48% / 52% 32% 68% 48%;
  }
}

.interview_shape-3 {
  img {
    border-radius: 81% 19% 25% 75% / 36% 30% 70% 64%;
  }
}
.interview_shape-5 {
  img {
    border-radius: 59% 41% 21% 79% / 62% 53% 47% 38%;
  }
}
.interview_shape-6 {
  img {
    border-radius: 37% 63% 35% 65% / 50% 68% 32% 50%;
  }
}
/* =======================================================================
   Media Query
======================================================================= */

/* スマホ */
@media (max-width: 768px) {
  .interview_container {
    flex-direction: column-reverse;
  }

  .interview_title {
    width: 100%;
    &::before,
    &::after {
      right: 1rem;
    }
  }

  .interview_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7.5%;

    div {
      padding: 2rem 0 0;
    }

    img {
      width: 6rem;
      height: 6rem;
    }
  }
}