@charset "UTF-8";

/* main, .breadcrumbs */
@media all {
  .greeting-main .breadcrumbs :where(*) {
    color: #98a3ae;
  }
  .greeting-main .breadcrumbs-item::after {
    border-color: #98a3ae;
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .greeting-main {
      padding-top: 110rem;
      background: linear-gradient(
        to bottom,
        var(--bg-lightblue) 200rem,
        #fff 200rem
      );
    }
    .greeting-main .breadcrumbs {
      padding: 0 20rem 20rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .greeting-main {
      padding-bottom: 160rem;
      background: linear-gradient(
        to bottom,
        var(--bg-lightblue) 1280rem,
        #fff 100%
      );
    }
    .greeting-main .breadcrumbs {
      margin: 0 auto;
      width: 1000rem;
    }
    .greeting-main {
      padding-top: 140rem;
    }
  }
}

/* greeting-header */
@media all {
  .greeting-header {
    position: relative;
    display: flex;
    justify-content: flex-end;
  }
  .greeting-header-text {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(to right, #0061a2, #0061a2 30%, #008bc2);
  }
  .greeting-header-lead small {
    display: inline-block;
    margin-left: 0.5em;
  }
  .greeting-header > img {
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: right center;
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .greeting-header {
      height: 220rem;
    }
    .greeting-header-text {
      padding: 50rem 18rem 0;
      width: 190rem;
      clip-path: polygon(0 0, 100% 0, calc(100% - 63rem) 100%, 0 100%);
    }
    .greeting-header-ttl {
      margin: 0;
      font-size: 22rem;
      line-height: 36rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .greeting-header,
    .greeting-content {
      margin: 0 auto;
      width: 1000rem;
      background-color: #fff;
    }
    .greeting-header {
      margin-top: 16rem;
      height: 280rem;
    }

    .greeting-header-text {
      padding: 100rem 70rem;
      width: 480rem;
      clip-path: polygon(0 0, 100% 0, calc(100% - 80rem) 100%, 0 100%);
    }
    .greeting-header-ttl {
      margin: 0;
      font-size: 28rem;
    }
    .greeting-header-lead {
      font-size: 18rem;
    }
    .greeting-header-lead small {
      font-size: 16rem;
    }
  }
}

/* greeting-article */
@media all {
  .greeting-lead {
    font-weight: 600;
    color: var(--main-blue);
    text-align: center;
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .greeting-article {
      padding: 40rem 0 80rem;
    }
    .greeting-lead {
      margin-bottom: 40rem;
      padding: 0 25rem;
      line-height: 32rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .greeting-article {
      margin: 0 auto;
      padding: 60rem 100rem 120rem;
      width: 1000rem;
      background-color: #fff;
    }
    .greeting-lead {
      line-height: 2.5;
    }
  }
}

/* interview-section */
@media all {
  .interview-header {
    position: relative;
  }
  .interview-header::before {
    content: "";
    position: absolute;
    display: block;
    background: center / contain no-repeat url(../img/common/quote.svg);
  }
  .interview-header-ttl {
    font-family: var(--lineseed);
    font-weight: bold;
  }

  .interview-content .col-gap {
    margin-top: 1em;
  }
  .interview-q {
    position: relative;
    padding-left: 2.25em;
    font-weight: 600;
    color: var(--main-blue);
  }
  .interview-q::before {
    content: "";
    position: absolute;
    top: 1em;
    left: 0;
    display: block;
    width: 2em;
    height: max(2px, 2rem);
    background: linear-gradient(to right, #f00, #b507de, #00a2e7);
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .interview-section {
      margin-top: 10rem;
    }
    .interview-header::before {
      top: -25rem;
      left: -12rem;
      width: 19rem;
      height: 15.5rem;
    }
    .interview-header-ttl {
      font-size: 22rem;
      letter-spacing: 0.01em;
      line-height: 36rem;
    }
    .interview-q {
      margin: 30rem 0 10rem;
      padding-left: 1.5em;
      line-height: 26rem;
    }
    .interview-q::before {
      /* top: 1.15em; */
      width: 1.25em;
    }
    .interview-a {
      line-height: 32rem;
    }

    .interview-img {
      margin-left: -25rem;
      margin-bottom: 20rem;
      width: 100vw;
      height: 180rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .interview-section {
      margin-top: 100rem;
    }
    .interview-header::before {
      top: -28rem;
      left: -23rem;
      width: 23rem;
      height: 19rem;
    }
    .interview-header-ttl {
      font-size: 28rem;
      line-height: 1.38;
    }

    .interview-content {
      line-height: 2.5;
    }
    .interview-q {
      margin: 34rem 0 10rem;
      line-height: 30rem;
    }

    .interview-img {
      margin: 80rem auto 0;
      width: 600rem;
      height: 280rem;
    }
  }
}

/* director */
@media all {
  /* sp */
  @media only screen and (max-width: 767px) {
    .director-img {
      margin: 30rem auto;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .director-img {
      margin: 60rem auto;
      width: 430rem;
    }
  }
}

/* interviewee-aside */
@media all {
  .interviewee-aside {
    position: relative;
    background-color: var(--bg-lightblue);
  }
  .interviewee-aside::before {
    content: "";
    position: absolute;
    display: block;
    background: center / contain no-repeat url(../img/home/clip2.webp);
  }

  .interviewee-ttl {
    font-family: var(--lineseed);
    font-weight: bold;
    color: var(--main-blue);
  }
  .interviewee-pos {
    display: block;
    margin-top: 1em;
    font-weight: 500;
    color: var(--table-lightblue);
  }

  .interviewee-dl {
    display: flex;
    flex-wrap: wrap;
    border-top: max(1px, 1rem) solid var(--border-lightblue);
  }
  .interviewee-dt,
  .interviewee-dd {
    padding: 0.9em 0;
    border-bottom: max(1px, 1rem) solid var(--border-lightblue);
  }

  /* sp */
  @media only screen and (max-width: 767px) {
    .interviewee-aside {
      margin: 50rem auto 0;
      padding: 40rem 25rem;
      width: 350rem;
      font-size: 13rem;
    }
    .interviewee-aside::before {
      top: -11rem;
      right: 15rem;
      width: 35rem;
      height: 60rem;
    }
    .interviewee-ttl {
      font-size: 16rem;
    }
    .interviewee-pos {
      line-height: 24rem;
    }
    .interviewee-dl {
      margin-top: 18rem;
    }
    .interviewee-dt {
      width: 55rem;
    }
    .interviewee-dd {
      width: calc(100% - 55rem);
      line-height: 20rem;
    }
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
    .interviewee-aside {
      margin-top: 90rem;
      padding: 40rem 60rem;
      font-size: 14rem;
    }
    .interviewee-aside::before {
      top: -18rem;
      right: 20rem;
      width: 56rem;
      height: 97rem;
    }
    .interviewee-ttl {
      font-size: 18rem;
    }

    .interviewee-dl {
      margin-top: 28rem;
    }
    .interviewee-dt {
      width: 80rem;
    }
    .interviewee-dd {
      width: calc(100% - 80rem);
    }
  }
}

/* template-section */
@media all {
  /* sp */
  @media only screen and (max-width: 767px) {
  }

  /* pc & tab */
  @media print, (min-width: 768px) {
  }
}