/* Interview（ユーザーインタビュー）ページ専用スタイル */

.interview-kv {
  position: relative;
  background: #ffffff;
  /* min-height: 58rem; */
  /* overflow: hidden; */
  padding-bottom: 2rem;
}

.interview-kv__hero {
  position: relative;
  width: 100%;
  /* height: 30.75rem; */
  /* 492px */
}

.interview-kv__hero-img {
  position: absolute;
  left: -15.375rem;
  /* -246px */
  top: -4.3125rem;
  /* -69px */
  width: 107.875rem;
  /* 1726px */
  height: 47.8125rem;
  /* 765px */
  object-fit: cover;
}

.interview-kv__hero-grad {
  /* position: absolute; */
  /* inset: 0; */
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
}

.interview-kv__hero-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 7.5rem;
  object-fit: cover;
}

.interview-kv__headline {
  position: relative;
  z-index: 2;
  left: 7.3125rem;
  /* 117px */
  margin-top: -24vw;
  /* 162px */
  margin-bottom: 3.5rem;
}

.interview-kv__headline h1 {
  margin: 0;
  font-family: var(--font-gsf);
  font-weight: 700;
  font-size: 4rem;
  line-height: 1.4;
  color: #ffffff;
  letter-spacing: 0;
}

.interview-kv__profile {
  position: relative;
  z-index: 3;
  /* margin-top: -13vw; */
  margin-left: 7.4375rem;
  /* 119px */
  width: 29.3125rem;
  /* 469px */
}

.interview-kv__profile-shadow {
  position: absolute;
  left: 12px;
  /* 18px */
  top: 12px;
  /* 18px */
  width: 100%;
  height: 100%;
  background: #f4ccd2;
}

.interview-kv__profile-panel {
  position: relative;
  background: var(--color-red);
  color: #ffffff;
  padding: 2.1875rem 2.4375rem 2.125rem;
  min-height: 26.875rem;
  /* 430px */
}

.interview-kv__profile-panel h2 {
  margin: 0 0 0.4375rem;
  /* font-family: var(--font-noto); */
  font-weight: 700;
  font-size: 1.75rem;
  /* 28px */
  line-height: 1.6;
  letter-spacing: 0.02em;
  /* font-feature-settings: "palt" 1; */
}

.body .interview-kv__role {
  margin: 0 0 1.875rem;
  /* font-family: var(--font-noto); */
  font-weight: 700;
  font-size: 1.125rem;
  /* 18px */
  line-height: 1.6;
  letter-spacing: 0.02em;
  /* font-feature-settings: "palt" 1; */
}

.interview-kv__profile-panel p {
  margin: 0;
  /* font-family: var(--font-noto); */
  font-weight: 500;
  font-size: 1.125rem;
  /* 18px */
  line-height: 1.6;
  letter-spacing: 0.02em;
  /* font-feature-settings: "palt" 1; */
}

@media (max-width: 768px) {
  .interview-kv {
    min-height: auto;
    padding-bottom: 4rem;
  }

  .interview-kv__hero {
    /* height: 23rem; */
  }

  .interview-kv__hero-img {
    left: -8rem;
    top: -2rem;
    width: 68rem;
    height: 30rem;
  }

  .interview-kv__headline {
    left: 1rem;
    /* bottom: 0; */
    top: 18rem;
    position: absolute;
    margin-top: 0;
  }

  .interview-kv__headline h1 {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .interview-kv__profile {
    margin-top: 1.8rem;
    margin-left: 1rem;
    width: calc(100% - 2.5rem);
  }

  .interview-kv__profile-panel {
    padding: 1.5rem 1.25rem;
    min-height: auto;
  }

  .interview-kv__profile-panel h2 {
    font-size: 1.4rem;
  }

  .interview-kv__role,
  .interview-kv__profile-panel p {
    font-size: 1rem;
  }
}

.interview-article {
  padding: 2rem 0 2.25rem;
}

.interview-article--4 {
  padding-top: 1.25rem;
}

.interview-article--4 .interview-qa__q>* {
  position: relative;
  z-index: 1;
}

.interview-closing {
  /* background: #f5f5f5; */
  padding: 0rem 0 5.5rem;
}

.interview-closing__inner {
  max-width: 61.25rem;
  /* 980px */
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.interview-closing__inner h2 {
  margin: 0;
  color: var(--color-red);
  text-align: center;
  font-family: var(--font-noto);
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
}

.interview-closing__inner p {
  margin: 0;
  color: #000000;
  font-family: var(--font-noto);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
}

.interview-closing__inner p span {
  color: var(--color-red);
  font-weight: 700;
}

.interview-closing__btn {
  min-width: 21.125rem;
  min-height: 4rem;
  padding: 0 1.75rem;
  border-radius: 6.25rem;
  border: 2px solid #071a6c;
  background: #071a6c;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--font-noto);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.interview-closing__btn img {
  width: 0.4375rem;
  height: 1rem;
  flex: none;
}

@media (max-width: 768px) {
  .interview-closing {
    padding: 0rem 0 4rem;
  }

  .interview-closing__inner {
    padding: 0 1rem;
    gap: 2rem;
  }

  .interview-closing__inner h2 {
    font-size: 1.55rem;
    text-align: left;
  }

  .interview-closing__inner p {
    font-size: 1rem;
    line-height: 1.75;
  }

  .interview-closing__btn {
    width: 100%;
    min-width: 0;
  }
}

.interview-article__inner {
  max-width: 62.5rem;
  /* 1000px */
  margin: 0 auto;
  padding: 0 1.25rem;
}

.interview-article__inner h2 {
  margin: 0 0 4rem;
  text-align: center;
  color: var(--color-red);
  font-family: var(--font-noto);
  font-weight: 700;
  font-size: 2.375rem;
  /* 38px */
  line-height: 1.3;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
}

.interview-article__hero {
  position: relative;
  margin: 0 0 2.75rem;
}

.interview-article__hero>img {
  display: block;
  width: 100%;
  height: auto;
}

.interview-article__hero-deco {
  /* position: absolute; */
  /* inset: 0; */
  /* object-fit: cover; */
  /* pointer-events: none; */
}

.interview-article__hero-deco2 {
  position: absolute;
  inset: 0;
  object-fit: cover;
  pointer-events: none;
}

.interview-article__subhead {
  margin: 2.25rem 0 2rem;
  text-align: center;
  color: var(--color-red);
  font-family: var(--font-noto);
  font-weight: 700;
  font-size: 2.375rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  font-feature-settings: "palt" 1;
}

.interview-qa {
  margin-bottom: 4rem;
}

.interview-qa__q {
  display: grid;
  grid-template-columns: 4.625rem 1fr;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.3rem;
}

.interview-qa__q img {
  /* width: 4.625rem; */
  /* height: 4.625rem; */
  display: none;
}

.interview-qa__q p {
  margin: 0;
  font-family: var(--font-noto);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.interview-qa__q p span,
.interview-qa__a p span {
  color: var(--color-red);
  font-weight: 700;
}

.interview-qa__a {
  background: #f5f5f5;
  padding: 1.5rem 1.5rem 1.625rem;
}

.body .interview-qa__name {
  margin: 0 0 0.5rem;
  color: var(--color-red);
  font-family: var(--font-noto);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.interview-qa__a p {
  margin: 0;
  /* color: #000000; */
  font-family: var(--font-noto);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.interview-qa__q:before {
  content: "";
  width: 5.3rem;
  height: 4.3rem;
  background: url(/img/interview_1/interview-rabbit.png);
  background-size: cover;
}

.company-about__actions {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.bridge-pink-right {
  background-image: url(/img/interview_1/bridge-pink.svg);
  background-position: top right;
  background-repeat: no-repeat;
}

.bridge-pink-left {
  background-image: url(/img/interview_1/bridge-pink-reverse.svg);
  background-position: top left;
  background-repeat: no-repeat;
}

body.interview-2Page main {
  background-image: url(/img/interview_1/bridge-pink.svg);
  background-position-x: right;
  background-position-y: 96%;
  background-repeat: no-repeat;
}

.interview_03Page .company-about__actions {
  margin-bottom: 4rem;
  margin-top: 5rem;
}

@media (max-width: 768px) {
  .interview-article {
    /* padding: 3.5rem 0 0rem; */
    background-size: contain;
    /* background-position-y: 2rem; */
  }

  .interview-article__inner {
    padding: 0 1rem;
  }

  .interview-article__inner h2 {
    font-size: 1.45rem;
    margin-bottom: 1.5rem;
    text-align: left;
  }

  .interview-article__subhead {
    font-size: 1.75rem;
    margin: 2rem 0 1.5rem;
  }

  .interview-qa__q {
    grid-template-columns: 3.5rem 1fr;
    gap: 0.75rem;
  }

  .interview-qa__q img {
    width: 3.5rem;
    height: 3.5rem;
  }

  .interview-qa__q p,
  .interview-qa__name,
  .interview-qa__a p {
    font-size: 1rem;
  }

  .interview-qa {
    margin-bottom: 3rem;
  }

  .interview-article__hero {
    margin-bottom: 2rem;
  }

  .interview-qa:last-of-type {
    margin-bottom: 1rem;
  }

  .company-about__actions {
    margin-top: 1rem;
    padding-bottom: 3rem;
  }

  .interview-qa__q:before {
    width: 3.9rem;
    height: 3.2rem;
  }

  body.interview-2Page main {
    background-position-y: 84.4%;
    background-size: contain;
  }

  .body .interview-kv__role {
    margin-bottom: 1rem;
  }

  .interview_03Page .company-about__actions {
    margin-top: 3rem;
    margin-bottom: 2rem;
  }
}

@media screen and (min-width: 1300px) {
  .interview-kv__profile,
  .interview-kv__headline {
    margin-left: 15vw;
    left: 0;
  }

  .interview-kv__headline {
    margin-top: -23vw;
  }
}

@media screen and (min-width: 500px) and (max-width: 768px) {
  .interview-kv__headline {
    left: 1rem;
    /* bottom: 0; */
    top: 18rem;
    position: absolute;
    margin-top: 0;
    /* bottom: 1rem; */
    top: 100vw;
  }
}