.menu-frame-outer {
  position: relative;
  width: 100%;
  border: #ffc7e3 solid 4px;
  padding: 8px;
}

.menu-frame {
  width: 100%;
  border: #ffc7e3 solid 2px;
  padding: 4rem 5%;
  background-image:
    url(../img/goods/heart-2.png),
    url(../img/goods/heart-2.png),
    url(../img/goods/heart-2.png),
    url(../img/goods/heart-2.png);
  background-position:
    top .3rem left .3rem,
    top .3rem right .3rem,
    bottom .3rem left .3rem,
    bottom .3rem right .3rem;
  background-repeat: no-repeat;
  background-size: 2.5% auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.ribbon {
  position: absolute;
  width: 100%;
  top: -2rem;
  left: 0;
  text-align: center;
}

.ribbon img {
  width: 8%;
}

.goods-item {
  position: relative;
  width: 31%;
  margin: 0 0 2rem;
}

.goods-item p.name {
  text-align: center;
  color: #ff7bc3;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.goods-item p.price {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.goods-item p.price span {
  font-size: 12px;
  font-weight: 400;
}

.goods-front {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 3;
}

.goods-front img {
  opacity: 1;
  transition: all 0.4s;
}

.goods-front img:hover {
  opacity: 0;
}

.link-icon {
  position: absolute;
  width: 8%;
  top: 2%;
  right: 2%;
  z-index: 2;
}

.store-outer {
  width: 87%;
  margin: 4rem auto 0;
}

.store {
  padding: 0 0 2rem;
  margin: 4rem 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: #ff7bc3 dotted 3px;
}

.store-image {
  width: 31%;
  margin: 0 3% 0 0;
}

.store-text {
  width: 66%;
  font-size: 16px;
  font-weight: 500;
}

.goods-name {
  color: #ff7bc3;
  font-size: 22px;
  font-weight: 700;
}

.goods-note {
  font-size: 14px;
  font-weight: 400;
  ;
}

.goods-list {
  color: #ff7bc3;
  font-size: 16px;
  font-weight: 500;
}

.goods-price {
  font-size: 22px;
  font-weight: 500;
}

@media screen and (min-width: 1px) and (max-width: 743px) {
  .menu-frame-outer {
    border: #ffc7e3 solid 3px;
    padding: 6px;
  }

  .menu-frame {
    border: #ffc7e3 solid 1px;
    padding: 2rem 5%;
    background-size: 5% auto;
    justify-content: center;
  }

  .ribbon {
    top: -1.4rem;
  }

  .ribbon img {
    width: 16%;
  }

  .goods-item {
    width: 47%;
    margin: 0 6% 1.5rem 0;
  }

  .goods-item:nth-child(2n) {
    margin: 0 0 1.5rem;
  }

  .goods-item p.name {
    font-size: 3.6vw;
    letter-spacing: -0.05em;
  }

  .goods-item p.price {
    font-size: 3.2vw;
  }

  .goods-item p.price span {
    font-size: 2.8vw;
  }

  .link-icon {
    width: 12%;
    top: 2%;
    right: 2%;
  }

  .store-outer {
    width: 100%;
    margin: 2rem auto 0;
  }

  .store {
    padding: 0 0 2rem;
    margin: 4rem 0 2rem;
    display: block;
  }

  .store-image {
    width: 50%;
    margin: 0 auto 1rem;
  }

  .store-text {
    width: 100%;
    font-size: 3.6vw;
  }

  .goods-name {
    font-size: 4.6vw;
  }

  .goods-note {
    font-size: 2.8vw;
  }

  .goods-list {
    font-size: 3.6vw;
  }

  .goods-price {
    font-size: 4.6vw;
  }
}


@media screen and (min-width: 744px) and (max-width: 1024px) {

  .ribbon {
    top: -1rem;
  }

  .goods-item p.name {
    font-size: 1.8vw;
  }

  .goods-item p.price {
    font-size: 1.6vw;
  }

  .goods-item p.price span {
    font-size: 1.2vw;
  }

  .store-text {
    font-size: 1.6vw;
  }

  .goods-name {
    font-size: 2vw;
  }

  .goods-note {
    font-size: 1.4vw;
  }

  .goods-list {
    font-size: 1.6vw;
  }

  .goods-price {
    font-size: 2vw;
  }

}