@charset "UTF-8";

/* =====================
  common
===================== */
.main article {
  position: relative;
  z-index: 2;

  .u-inner {
    position: relative;
    z-index: 2;
    isolation: isolate;
  }
}

.u-main {
  &::before {
    @media (width <= 768px) {
      inset-block-start: 96vw;
    }
  }
}

/* =====================
  store
===================== */
.store {
  .u-bg {
    inset-block-start: 906px;

    @media (width <= 768px) {
      inset-block-start: 205.9vw;
    }
  }

  padding-block: 179px 51px;

  @media (width <= 768px) {
    padding-block: 24.2vw 0;
    overflow: hidden;
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-rows: repeat(auto-fit, minmax(0, min-content));
    grid-template-columns: auto 720px;
    gap: 108px 20px;
    padding-block: 9px;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 1vw;
      padding-block: 2.9vw;
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
  }

  /* ==== catch ==== */
  .catch {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    align-self: flex-start;
    padding-inline-start: 8px;
    margin-block-start: 8.9vw;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.65;

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

  /* ==== body ==== */
  .body {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    align-self: flex-start;
    margin-block-start: 4.2vw;
    font-weight: 400;

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

  /* ==== list ==== */
  .list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row: 3 / 4;
    grid-column: 1 / 3;
    gap: 105px;
    align-self: flex-start;
    margin-block-start: 5px;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 1.9vw;
      margin-block-start: 11.7vw;
    }

    li {
      display: block grid;
      grid-template-rows: repeat(auto-fit, minmax(0, min-content));
      gap: 29px;
      padding-block: 40px;
      border-block-start: 1px solid var(--smoke);

      @media (width <= 768px) {
        gap: 5.6vw;
        padding-block: 7vw 8.3vw;
      }
    }

    h3 {
      align-self: flex-start;
      font-size: 24px;
      font-weight: 500;

      @media (width <= 768px) {
        font-size: calc((100 / 390) * 18 * 1vw);
        text-align: center;
      }
    }

    picture {
      display: block flow;
      align-self: flex-start;

      @media (width <= 768px) {
        inline-size: calc((100 / 390) * 358 * 1vw);
        block-size: calc((100 / 390) * 208 * 1vw);
      }
    }

    p {
      display: block flow;
      align-self: flex-start;
      margin-block-start: 3px;

      @media (width <= 768px) {
        margin-block-start: 2.3vw;
        font-size: calc((100 / 390) * 15 * 1vw);
      }
    }
  }
}

/* =====================
  other
===================== */
.other {
  padding-block: 80px 172px;

  @media (width <= 768px) {
    padding-block: 11.4vw 20.1vw;
    overflow: hidden;
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 20px;
    padding-block: 8px;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 20px;
      padding-block: 2.9vw;
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
  }

  /* ==== list ==== */
  .list {
    display: block grid;
    grid-row: 2 / 3;
    grid-column: 1 / 3;
    gap: 104px;
    margin-block-start: 88px;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 12.8vw;
      margin-block-start: 8vw;
    }

    li {
      display: block grid;
      grid-template-columns: 574px auto;
      gap: 10px 77px;

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

      picture {
        display: block flow;
        grid-row: 1 / 4;
        grid-column: 1 / 2;
        align-self: flex-start;

        @media (width <= 768px) {
          inline-size: calc((100 / 390) * 358 * 1vw);
          block-size: calc((100 / 390) * 208 * 1vw);
        }
      }

      h3 {
        grid-row: 1 / 2;
        grid-column: 2 / 3;
        align-self: flex-start;
        padding-block-start: 49px;
        font-size: 24px;
        font-weight: 500;

        @media (width <= 768px) {
          padding-block-start: 2vw;
          margin-inline: auto;
          font-size: calc((100 / 390) * 18 * 1vw);
          text-align: center;
        }
      }

      p {
        display: block flow;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        align-self: flex-start;
        padding-block-start: 27px;

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