@charset "UTF-8";
/* CSS Document */
/* CSS Document */
/*
  ------------------------------------
  ####################################
   共通設定
  ####################################
  ------------------------------------
*/
/*
  ------------------------------------
   MediaScreen指定
  ------------------------------------
*/
/*
  ------------------------------------
   ベースプロパティ
  ------------------------------------
*/
/*
  ------------------------------------
   FONT指定
  ------------------------------------
*/
/* CSS Document */
/*
  ------------------------------------
  ####################################
   module
  ####################################
  ------------------------------------
*/
/*
  ------------------------------------
  ####################################
   #AddProduct
  ####################################
  ------------------------------------
*/
#product #jelly, #product #drink {
  margin: 280px auto;
}
#product #charge .box {
  border-radius: 12px;
  text-align: left;
  margin: 100px auto 130px;
  max-width: 1080px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  font-size: 16px;
}
@media screen and (max-width: 1080px) {
  #product #charge .box {
    width: 95%;
  }
}
@media screen and (max-width: 780px) {
  #product #charge .box {
    background: none;
    padding: 0;
    margin: 80px auto 80px;
    gap: 40px;
    width: 90%;
  }
}
#product #charge .title-wrap {
  background: #fff;
  padding: 20px 30px;
  border: 2px solid;
  width: fit-content;
  margin-bottom: 20px;
}
@media screen and (max-width: 780px) {
  #product #charge .title-wrap {
    padding: 10px 20px;
  }
}
#product #charge .title {
  font-size: 130%;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 10px;
}
@media screen and (max-width: 780px) {
  #product #charge .title {
    font-size: 100%;
  }
}
#product #charge .sub-title {
  margin-left: -0.3em;
}
@media screen and (max-width: 780px) {
  #product #charge .sub-title {
    margin-left: -0.1em;
  }
}
#product #charge .sub-title-img {
  display: block;
}
@media screen and (max-width: 780px) {
  #product #charge .sub-title-img {
    width: 200px;
  }
}
#product #charge .caution {
  font-size: 95%;
  margin-top: 1em;
}
#product #charge .detail {
  line-height: 1.8;
  width: 35%;
}
@media screen and (max-width: 780px) {
  #product #charge .detail {
    width: 55%;
  }
}
#product #charge .charge_img {
  width: 30%;
  margin-right: 3%;
  margin-bottom: -90px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: auto;
}
@media screen and (max-width: 780px) {
  #product #charge .charge_img {
    width: 100px;
    margin-bottom: -120px;
  }
}
#product #charge .charge_imgItem {
  max-width: 100%;
}