@charset "UTF-8";

/* =====================
  c-mv
===================== */
.c-mv {
  position: relative;
  display: block grid;
  padding-block-start: 16px;
  padding-inline: 16px;

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

  /* ==== wrap ==== */
  .wrap {
    position: relative;
    display: block grid;
    grid-template-columns: 1fr 41.5%;
    gap: 16px;
    align-content: flex-start;
    padding-block: 103px 17px;
    padding-inline: 17px;
    background-color: var(--gray100);
    background-image: linear-gradient(90deg, #c7c7c7 1px, transparent 1px), linear-gradient(#c7c7c7 1px, transparent 1px);
    background-position: 10px 10px;
    background-size: 31px 31px;
    border-radius: 16px;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column-reverse;
      gap: var(--nudge-1);
      padding-block: calc(17.2vw + var(--nudge-1)) var(--nudge-2);
      padding-inline: var(--nudge-2);
      background-position: calc((100 / 390) * 5 * 1vw) calc((100 / 390) * 5 * 1vw);
      background-size: calc((100 / 390) * 15.1 * 1vw) calc((100 / 390) * 15.1 * 1vw);
      border-radius: calc((100 / 390) * 16 * 1vw);
    }

    /* ==== text ==== */
    .text {
      position: relative;
      display: block grid;
      grid-template-columns: auto 1fr;
      gap: 30px 16px;
      align-content: flex-start;
      align-items: baseline;
      padding-block: 72px 37px;
      padding-inline: 39px;
      color: white;
      background: var(--lightblue);
      border-radius: 8px;

      @media (width <=768px) {
        gap: var(--nudge-2);
        padding-block: var(--nudge-3);
        padding-inline: var(--nudge-3);
        border-radius: calc((100 / 390) * 8 * 1vw);
      }
    }

    /* ==== catch ==== */
    .catch {
      grid-row: 1 / 2;
      grid-column: 1 / 3;
      padding-block-end: 40px;
      font-size: 26px;
      font-weight: 500;
      border-block-end: 1px solid white;

      @media (width <=768px) {
        padding-block-end: var(--nudge-2);
        font-size: calc((100 / 390) * 20 * 1vw);
      }

      br {
        display: none;
      }
    }

    /* ==== division ==== */
    .division {
      grid-row: 2 / 3;
      grid-column: 1 / 3;
      inline-size: fit-content;
      padding-inline: 24px;
      border-radius: calc(infinity * 1px);

      @media (width <=768px) {
        padding-block: calc((100 / 390) * 5 * 1vw);
        padding-inline: var(--nudge-2);
        margin-block-start: 1vw;
        line-height: 1;
      }
    }

    /* ==== title ==== */
    .title {
      grid-row: 3 / 4;
      grid-column: 1 / 2;
      margin-block: -29px calc((1em - 1lh) / 2);
      font-family: var(--title);
      font-size: 56px;

      @media (width <=768px) {
        margin-block: -7.1vw calc((1em - 1lh) / 2);
        font-size: calc((100 / 390) * 56 * 1vw);
      }
    }

    /* ==== year ==== */
    .year {
      grid-row: 3 / 4;
      grid-column: 2 / 3;
      font-size: 18px;
      translate: 0 -2px;

      @media (width <=768px) {
        font-size: calc((100 / 390) * 16 * 1vw);
        translate: 0 calc((100 / 390) * -2 * 1vw);
      }
    }

    /* ==== img ==== */
    .img {
      block-size: 395px;
      background: white;
      border-radius: 8px;

      img {
        object-fit: contain;
      }

      @media (width <=768px) {
        block-size: calc((100 / 390) * 220 * 1vw);
        border-radius: calc((100 / 390) * 8 * 1vw);

        img {
          object-fit: cover;
          object-position: center 0;
        }
      }
    }
  }

  /* ==== .u-breadcrumb ==== */
  .u-breadcrumb {
    grid-row: 4 / 5;
    grid-column: 1 / 3;
    margin-block-start: 14px;

    @media (width <=768px) {
      margin-block-start: 0;
      color: white;
    }
  }
}

/* =====================
  c-qa
===================== */
.c-qa {
  display: block grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 23px 16px;
  align-content: flex-start;
  counter-reset: number;

  @media (width <=768px) {
    display: block flex;
    flex-direction: column;

    @media (width <=768px) {
      gap: var(--nudge-2);
    }
  }

  /* ==== item ==== */
  .item {
    display: block grid;
    align-content: flex-start;
  }

  .q {
    position: relative;
    align-self: flex-start;
    padding-block: 13px;
    padding-inline: 69px;
    font-size: 20px;
    font-weight: 500;
    color: white;
    background: var(--lightblue);
    border-radius: 6px;

    @media (width <=768px) {
      padding-block: var(--nudge-1);
      padding-inline: 13.4vw var(--nudge-2);
      font-size: calc((100 / 390) * 18 * 1vw);
      border-radius: calc((100 / 390) * 6 * 1vw);
    }
  }

  .q::before {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 24px;
    font-family: var(--title);
    font-size: 28px;
    font-weight: 400;
    content: 'Q' counter(number);
    counter-increment: number;

    @media (width <=768px) {
      inset-block-start: 1.8vw;
      inset-inline-start: 4.3vw;
      font-size: calc((100 / 390) * 20 * 1vw);
    }
  }

  .a {
    align-self: flex-start;
    padding-block: 25px;
    padding-inline: 24px;

    @media (width <=768px) {
      padding-block: var(--nudge-2);
      padding-inline: var(--nudge-2);
    }
  }
}

/* =====================
  list-contents
===================== */
.list-contents {
  inline-size: var(--inner-width);
  padding-block: 103px;
  padding-inline: 24px;
  margin-inline: auto;

  @media (width <=768px) {
    padding-block: var(--nudge-7);
    padding-inline: 0;
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 56px;
    align-content: flex-start;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: var(--nudge-4);
    }
  }

  /* ==== ul ==== */
  ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 15.5px;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: var(--nudge-3);
      padding-inline: calc((100 / 390) * 8 * 1vw);
    }
  }
}

/* =====================
  qa
===================== */
.qa {
  inline-size: var(--inner-width);
  padding-block: 103px;
  margin-inline: auto;

  @media (width <=768px) {
    padding-block: var(--nudge-7);
    padding-inline: 0;
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 40px;

    @media (width <=768px) {
      gap: var(--nudge-5);
    }
  }

  /* ==== u-anchor ==== */
  .u-anchor {
    @media (width > 768px) {
      min-inline-size: 192px;
    }
  }
}