@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
/* common
================================================== */
/*
 * media query
**/
/**
 * フォントサイズの可変
 *
 * @param {number} $fontsize 基準となるフォントサイズ
 * @param {number} $basewidth 基準となる幅
 * @param {number} $maxwidth フォントサイズの拡大をとめる幅（未指定時は上限なし）
 * @param {number} $minwidth フォントサイズの縮小をとめる幅（未指定時は下限なし）
 */
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

body {
  overscroll-behavior-y: none;
  overscroll-behavior: none;
}
body * {
  box-sizing: border-box;
}
body a {
  text-decoration: none;
  color: inherit;
}

@media screen and (min-width: 768px) {
  #contentsWrap {
    padding-top: 100px;
  }
}

@media screen and (max-width: 767px) {
  #gnav ul li a img {
    height: 18.6666666667vw;
  }
}

#feature {
  background: url(/-/Media/com/meltycreamlip/202607/bg.png) no-repeat top center #ffffff;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  #feature {
    background: url(/-/Media/com/meltycreamlip/202607/bg.sp.png) no-repeat top center #ffffff;
    background-size: cover;
  }
}

#feature h4 {
  width: 595px;
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  #feature h4 {
    padding-top: 15.0666666667vw;
  }
}

@media screen and (max-width: 767px) {
  #feature .point {
    margin-top: 8vw;
  }
}
@media screen and (min-width: 768px) {
  #feature .point li:first-child {
    width: 820px;
    margin-inline: auto;
  }
}
@media screen and (min-width: 768px) {
  #feature .point li:nth-child(2) {
    width: 692px;
    margin-inline: auto;
    margin-top: 100px;
  }
}
@media screen and (min-width: 768px) {
  #feature .point li:nth-child(3) {
    width: 940px;
    margin-inline: auto;
    margin-top: 100px;
  }
}
#feature .point li img {
  width: 100%;
}

#contentsWrap #feature .lead {
  font-family: "Noto Serif JP", serif;
  color: #ba9026;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
  font-size: 32px;
  line-height: 2.1875;
  margin-top: 150px;
}
#contentsWrap #feature .lead sup {
  font-size: 20px;
}
@media screen and (max-width: 767px) {
  #contentsWrap #feature .lead sup {
    font-size: 2.6666666667vw;
  }
}
@media screen and (max-width: 767px) {
  #contentsWrap #feature .lead {
    margin-top: 10.6666666667vw;
  }
  #contentsWrap #feature .lead {
    font-size: 3.7333333333vw;
  }
}
#contentsWrap #feature .lead__note {
  font-family: "Noto Serif JP", serif;
  color: #ba9026;
  font-weight: 400;
  text-align: center;
  font-size: 20px;
  margin-top: 20px;
  display: block;
}
@media screen and (max-width: 767px) {
  #contentsWrap #feature .lead__note {
    margin-top: 2.6666666667vw;
  }
  #contentsWrap #feature .lead__note {
    font-size: 3.2vw;
  }
}

#mv .premium {
  height: auto;
  width: 100%;
}
#mv .premium img {
  width: 100%;
  position: static;
  margin: 0;
}

@media screen and (min-width: 768px) {
  #gnav {
    height: 100px;
  }
}

@media screen and (min-width: 768px) {
  #gnav ul {
    width: 310px;
  }
}

@media screen and (min-width: 768px) {
  #gnav ul li a {
    width: 155px;
  }
}

@media screen and (min-width: 768px) {
  #product .inner {
    max-width: 1300px;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  #pageContainer .inner {
    max-width: 100%;
  }
}

@media screen and (min-width: 768px) {
  #product .inner h4 {
    width: 265px;
    margin: auto;
  }
}

@media screen and (min-width: 768px) {
  #product .catch li:first-child {
    width: 293px;
    margin: auto;
  }
}

@media screen and (min-width: 768px) {
  #product .catch li:last-child {
    width: 340px;
    margin: auto;
  }
}

@media screen and (min-width: 768px) {
  #product .tabCont.tab01 {
    padding: 40px 0 380px;
  }
}

#product .tab li {
  height: 140px;
}
@media screen and (max-width: 767px) {
  #product .tab li {
    height: 29.3333333333vw;
  }
}

#product .tab li.tab01 a {
  width: 520px;
}
@media screen and (max-width: 767px) {
  #product .tab li.tab01 a {
    width: 34.1333333333vw;
  }
}

#product .tab li.tab02 a {
  width: 375px;
}
@media screen and (max-width: 767px) {
  #product .tab li.tab02 a {
    width: 38.1333333333vw;
  }
}

#product .tab li.tab01:before {
  height: 140px;
}
@media screen and (max-width: 767px) {
  #product .tab li.tab01:before {
    height: 29.3333333333vw;
  }
}

#product .tab li.tab02:before {
  height: 140px;
}
@media screen and (max-width: 767px) {
  #product .tab li.tab02:before {
    height: 29.3333333333vw;
  }
}

@media screen and (max-width: 767px) {
  #product .tab li img {
    height: auto;
  }
}

@media screen and (max-width: 767px) {
  #product .tabCont.tab01 .lineup li {
    width: 60%;
  }
}

@media screen and (min-width: 768px) {
  #product .tabCont.tab02 .lineup .lineupList dl:nth-child(1) {
    margin-right: -2px;
  }
  #product .tabCont.tab02 .lineup .lineupList dl:nth-child(3) {
    margin-left: -2px;
  }
}

@media screen and (max-width: 767px) {
  #product .tabCont.tab02 .lineup dl:nth-child(1) dd {
    margin-left: 6vw;
  }
}
@media screen and (max-width: 767px) {
  #product .tabCont.tab02 .lineup dl:nth-child(2) dd {
    margin-right: 4vw;
  }
}

#product .tabCont.tab02 .lineup dt + dd {
  margin-top: -70px;
}
@media screen and (max-width: 767px) {
  #product .tabCont.tab02 .lineup dt + dd {
    margin-top: -26.6666666667vw;
  }
}

@media screen and (max-width: 767px) {
  #product .tabCont.tab02 .lineup dl:nth-child(3) dt + dd {
    margin-top: -21.3333333333vw;
  }
}

#product .tabCont.tab02 .lineup dd span {
  font-size: 14px;
}
@media screen and (max-width: 767px) {
  #product .tabCont.tab02 .lineup dd span {
    font-size: 3.7333333333vw;
  }
}

#product .tabCont.tab02 .lineup dd p.item {
  font-size: 20px;
}
@media screen and (max-width: 767px) {
  #product .tabCont.tab02 .lineup dd p.item {
    font-size: 4vw;
  }
}

#product .tabCont.tab02 .lineup dd p {
  font-size: 20px;
}
@media screen and (max-width: 767px) {
  #product .tabCont.tab02 .lineup dd p {
    font-size: 4vw;
  }
}

#pageContainer .over a {
  width: 255px;
  margin: auto;
  display: block;
}
@media screen and (max-width: 767px) {
  #pageContainer .over a {
    width: 26.6666666667vw;
  }
}
#pageContainer .over a img {
  width: 100%;
}

@media screen and (max-width: 767px) {
  #product .tabCont.tab01 .lineup ul li .btn {
    width: 26.6666666667vw;
  }
}