@charset "UTF-8";

/* =====================
  Interview　リスト
===================== */
body[data-page='interview_list'] {
  .main {
    .interview-list {
      padding-block: 130px;

      @media (width <= 768px) {
        padding-block: calc((100 / 750) * 98 * 1vw) calc((100 / 750) * 130 * 1vw);
      }
    }
    .list {
      display: block flex;
      flex-wrap: wrap;
      gap: 24px;
      margin-block-start: 60px;
      justify-content: center;

      @media (width <= 768px) {
        gap: calc((100 / 750) * 24 * 1vw);
        margin-block-start: calc((100 / 750) * 56 * 1vw);
      }

      & > li {
        position: relative;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        inline-size: 316px;
        block-size: 404px;

        &::before {
          content: '';
          display: block flow;
          inline-size: 100%;
          block-size: 120px;
          background-image: linear-gradient(to bottom, rgba(16, 16, 18, 0), #101012);
          position: absolute;
          bottom: 0;
          left: 0;
          pointer-events: none;
        }

        @media (width <= 768px) {
          inline-size: calc((100 / 750) * 316 * 1vw);
          block-size: calc((100 / 750) * 404 * 1vw);

          &::before {
            block-size: calc((100 / 750) * 132 * 1vw);
          }
        }

        & > a {
          position: relative;
          inline-size: 100%;
          block-size: 100%;
          display: block grid;
          align-items: end;
          padding-inline: 16px;
          padding-block-end: 14px;

          @media (width <= 768px) {
            padding-inline: calc((100 / 750) * 16 * 1vw);
            padding-block-end: calc((100 / 750) * 10 * 1vw);
          }

          .wrap {
            position: relative;

            .group {
              font-weight: bold;
              line-height: 1.8;
              color: #fff;

              @media (width <= 768px) {
                font-size: calc((100 / 750) * 22 * 1vw);
                line-height: 1.5;
              }
            }
            .name {
              font-family: var(--alatsi);
              font-size: 40px;
              line-height: 1;
              letter-spacing: 1.2px;
              color: #fff;

              @media (width <= 768px) {
                font-size: calc((100 / 750) * 50 * 1vw);
                letter-spacing: calc((100 / 750) * 1.5 * 1vw);
              }

              .nyusha {
                font-family: var(--yugo);
                font-size: 16px;
                font-weight: bold;
                letter-spacing: normal;
                line-height: 1.8;
                color: #fff;

                @media (width <= 768px) {
                  font-size: calc((100 / 750) * 22 * 1vw);
                }
              }
            }
          }
        }
        &[data-id='1'] {
          background-image: url('../img/interview/01.png');
        }
        &[data-id='2'] {
          background-image: url('../img/interview/02.png?394a5d8a-9054-5046-b998-e8242d3a5b5d');
        }
        &[data-id='3'] {
          background-image: url('../img/interview/03.png');
        }
        &[data-id='4'] {
          background-image: url('../img/interview/04.png');
        }
      }
    }
    .u-anchor {
      margin-block-start: 60px;
    }
  }
}
/* =====================
interview 個別ページ
===================== */
body[data-page='interview'] {
  .main {
    .interview {
      padding-block-end: 130px;

      @media (width <= 768px) {
        padding-block-end: calc((100 / 750) * 130 * 1vw);
      }
      /* ==== profile ==== */
      .profile {
        position: relative;
        padding-block-start: 60px;

        @media (width <= 768px) {
          padding-block-start: calc((100 / 750) * 29 * 1vw);
        }

        &::before {
          content: '';
          display: block flow;
          inline-size: 100%;
          block-size: 440px;
          background-color: #ddedff;
          position: absolute;
          top: 100px;
          left: 0;
          pointer-events: none;
        }

        @media (width <= 768px) {
          &::before {
            block-size: calc((100 / 750) * 440 * 1vw);
            top: calc((100 / 750) * 71 * 1vw);
          }
        }
        .inner {
          position: relative;
          z-index: 3;
          width: 1300px;
          padding-inline: 90px 37.5px;
          margin-inline: auto;
          display: grid;
          grid-template-areas:
            'group img'
            'name img'
            'catch img';
          grid-template-columns: auto 1fr;
          grid-template-rows: auto auto 1fr;

          @media (width <= 768px) {
            width: 100%;
            padding-inline: calc((100 / 750) * 40 * 1vw) 0;
            grid-template-areas:
              'group img'
              'name img'
              'catch catch';
            grid-template-columns: max-content 1fr;
            grid-template-rows: auto 1fr;
          }

          .group {
            grid-area: group;
            font-size: 20px;
            font-weight: bold;
            line-height: 1.8;
            margin-block-start: 115px;

            @media (width <= 768px) {
              font-size: calc((100 / 750) * 22 * 1vw);
              margin-block-start: calc((100 / 750) * 154 * 1vw);
              padding-left: calc((100 / 750) * 20 * 1vw);
            }
          }

          .name {
            grid-area: name;
            font-family: var(--alatsi);
            font-size: 120px;
            line-height: 1;
            letter-spacing: 3.6px;
            margin-block-start: 30px;

            @media (width <= 768px) {
              font-size: calc((100 / 750) * 120 * 1vw);
              letter-spacing: calc((100 / 750) * 3.6 * 1vw);
              margin-block-start: calc((100 / 750) * 28 * 1vw);
              padding-left: calc((100 / 750) * 20 * 1vw);
            }

            .nyusha {
              font-family: var(--yugo);
              font-size: 16px;
              font-weight: bold;
              line-height: 1.8;
              letter-spacing: normal;
              margin-left: 1em;

              @media (width <= 768px) {
                display: block flow;
                font-size: calc((100 / 750) * 20 * 1vw);
                line-height: 1;
                margin-left: 0;
              }
            }
          }
          .catch {
            grid-area: catch;
            font-family: var(--yumin);
            font-size: 30px;
            font-weight: 600;
            line-height: 1.6;
            margin-block-start: 12px;

            @media (width <= 768px) {
              font-size: calc((100 / 750) * 38 * 1vw);
              margin-block-start: calc((100 / 750) * 47 * 1vw);
              padding-right: calc((100 / 750) * 40 * 1vw);
            }
          }
          .picture {
            grid-area: img;
            display: block flow;
            margin-inline: auto 0;

            @media (width <= 768px) {
              & img {
                inline-size: calc((100 / 750) * 498 * 1vw);
              }
            }
          }
        }
      }

      /* ==== interview内容 ==== */
      .u-inner {
        @media (width <= 768px) {
          padding-inline: calc((100 / 750) * 40 * 1vw) 0;
        }
        .qa_list {
          & > li {
            margin-block-start: 90px;
            border-top: 1px solid #172f49;
            display: block grid;
            grid-template-columns: auto 1fr 1fr;
            align-items: center;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 750) * 75 * 1vw);
              grid-template-columns: auto 1fr;
              grid-template-rows: auto auto;
            }

            .q-no {
              font-family: var(--yumin);
              font-weight: 600;
              line-height: 1.8;
              color: #fff;
              background-color: #172f49;
              padding-inline: 20px;
              padding-block: 6px;
              writing-mode: vertical-rl;
              inline-size: fit-content;

              @media (width <= 768px) {
                font-size: calc((100 / 750) * 16 * 1vw);
                padding-inline: calc((100 / 750) * 20 * 1vw);
                padding-block: calc((100 / 750) * 6 * 1vw);
                grid-column: 1/2;
                grid-row: 1/2;
              }
            }

            .question {
              font-family: var(--yumin);
              font-size: 29px;
              font-weight: 600;
              line-height: 1.6;
              margin-left: 20px;

              @media (width <= 768px) {
                font-size: calc((100 / 750) * 32 * 1vw);
                margin-left: calc((100 / 750) * 20 * 1vw);
                grid-column: 2/3;
                grid-row: 1/2;
              }
            }

            .answer {
              font-weight: 500;
              padding-block-start: calc(20px + var(--leading-trim));
              margin-left: 10px;

              @media (width <= 768px) {
                padding-block-start: calc((100 / 750) * 28 * 1vw);
                margin-left: 0;
                padding-inline: calc((100 / 750) * 40 * 1vw);
                grid-column: 1/3;
                grid-row: 2/3;
              }
            }
          }
        }
      }
      .u-anchor {
        margin-block-start: 91px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 750) * 116 * 1vw);
        }
      }
    }
  }
}