@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: 90px;
    justify-content: space-between;
    padding-block: 86px 0;

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

    /* ==== img ==== */
    .img {
      display: block grid;
      flex-shrink: 0;
      place-content: center;
      min-inline-size: 577px;
      max-inline-size: 577px;
      max-block-size: 398px;
      pointer-events: none;
      user-select: none;

      @media (width <= 768px) {
        inline-size: 100%;
        min-inline-size: 100%;
        max-inline-size: 100%;
        max-block-size: calc((100 / 390) * 240 * 1vw);
        margin-block-start: 0.5vw;
      }

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

        @media (width <= 768px) {
          inline-size: 100%;
          max-block-size: unset;
          max-block-size: calc((100 / 390) * 240 * 1vw);
          object-fit: cover;
        }
      }
    }

    /* ==== wrap ==== */
    .wrap {
      display: block grid;
      grid-template-rows: repeat(auto-fit, minmax(0, min-content));
      gap: 40px;
      inline-size: 623px;
      padding-block-start: 2px;

      @media (width <= 768px) {
        gap: 8.2vw;
        inline-size: 100%;
      }

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

        @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;
        align-self: flex-start;
        margin-block-start: -17px;
        word-break: break-all;

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

        a {
          text-decoration: underline;
          transition: all 250ms ease 0s;

          @media (any-hover: hover) {
            &:hover {
              opacity: 0.7;
            }
          }
        }
      }

      /* ==== type ==== */
      .type {
        display: block flex;
        flex-wrap: wrap;
        gap: 12px;
        align-self: flex-start;
        font-weight: 600;

        @media (width <= 768px) {
          gap: calc((100 / 390) * 10 * 1vw);
        }

        li {
          padding-inline: 32px;
          line-height: 2;
          color: white;
          background: var(--color-text-primary);
          border-radius: calc(infinity * 1px);

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

          &[data-id='1'] {
            background: var(--pink);
          }

          &[data-id='2'] {
            background: #84c4ff;
          }
        }
      }

      /* ==== expire ==== */
      .expire {
        display: block flex;
        gap: 0;
        align-items: flex-start;
        align-self: flex-start;
        padding-block: 15px;
        padding-inline: 8px;
        margin-block-start: -8px;
        border-block: 1px solid rgb(71 50 29 / 30%);

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

        a {
          text-decoration: underline;
          transition: all 250ms ease 0s;

          @media (any-hover: hover) {
            &:hover {
              opacity: 0.7;
            }
          }
        }

        dt {
          flex-shrink: 0;
        }

        dt,
        dd {
          font-size: 16px;
          word-break: break-all;

          @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;
      text-align: center;

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

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

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

      .occupations {
        display: block flex;
        flex-wrap: wrap;

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

        @media (width > 768px) {
          span + span::before {
            content: '、';
          }
        }
      }
    }
  }

  /* ==== u-anchor ==== */
  .u-anchor {
    margin-block-start: 49px;
    margin-inline: auto;

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