@charset "UTF-8";

/* =====================
  shops
===================== */
.shops {
  padding-block: 86px 127px;

  @media (width <= 768px) {
    padding-block: 16.1vw 22.5vw;
  }

  /* ==== more ==== */
  .more {
    margin-inline: auto;

    @media (width > 768px) {
      display: none;
    }

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

/* =====================
  detail
===================== */
.detail {
  padding-block-end: 128px;

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
  }

  /* ==== information ==== */
  .information {
    display: block flex;
    flex-direction: row-reverse;
    gap: 150px;
    justify-content: space-between;
    padding-block: 87px 0;

    @media (width <= 768px) {
      flex-direction: column;
      gap: 10.7vw;
      padding-block: 14vw 0;
    }

    /* ==== img ==== */
    .img {
      display: block grid;
      flex-shrink: 0;
      place-content: center;
      width: 432px;
      height: 296px;
      padding-inline: 80px;
      margin-block-start: 7px;
      pointer-events: none;
      user-select: none;
      background: white;
      border: 1px solid var(--color-text-primary, #47321d);

      @media (width <= 768px) {
        width: 100%;
        height: calc((100 / 390) * 204 * 1vw);
        padding-inline: calc((100 / 390) * 80 * 1vw);
      }

      img {
        max-block-size: 190px;
        user-select: none;
        object-fit: contain;
      }
    }

    /* ==== wrap ==== */
    .wrap {
      display: block grid;
      grid-template-rows: repeat(auto-fit, minmax(0, min-content));
      gap: 48px;

      @media (width <= 768px) {
        gap: 10vw;
      }

      /* ==== title ==== */
      .title {
        position: relative;
        display: block grid;
        gap: 10px;
        align-self: flex-start;
        font-size: 28px;
        font-weight: 600;

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

        &::after {
          display: block;
          inline-size: 48px;
          block-size: 1px;
          content: '';
          background: var(--color-text-primary);

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

      /* ==== body ==== */
      .body {
        position: relative;

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

      /* ==== u-anchor ==== */
      .u-anchor {
        @media (width <= 768px) {
          margin-block-start: 0.6vw;
        }
      }
    }
  }

  /* ==== list ==== */
  .list {
    padding-block: 79px;
    padding-inline: 80px;
    margin-block-start: 128px;
    background: white;

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

    /* ==== h2 ==== */
    h2 {
      font-size: 24px;
      font-weight: 600;

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

    /* ==== u-scroll-table ==== */
    .u-scroll-table {
      margin-block-start: 47px;

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

    /* ==== link ==== */
    .link {
      display: block grid;
      place-content: center;
      inline-size: fit-content;
      padding-inline: 2em;
      margin-inline: auto;
      text-decoration: none;
      border: 1px solid currentcolor;
      border-radius: calc(infinity * 1px);
      transition:
        background 250ms ease 0s,
        color 250ms ease 0s;

      @media (any-hover: hover) {
        &:hover {
          color: white;
          background: var(--color-text-primary);
        }
      }
    }
  }
}