@charset "UTF-8";
@font-face {
  font-family: "FriendlyExpart";
  src: url(/assets/font/FriendlyExpart.woff) format("woff");
}
:root {
  --primary: #FADBAA;
  --white: #fff;
  --lightGoldGray: #FDFAF2;
  --midGoldGray: #FBF8F0;
  --goldGray: #F8F3E7;
  --lightRizeGold: #C6B183;
  --rizeGold: #B59751;
  --green: #65D171;
  --orange: #F7B837;
  --lightGray: #B2ADA9;
  --gray: #88837F;
  --pink: #E8857D;
  --darkGray: #6D6764;
  --subGray01: #A7A7A7;
  --subGray02: #BFBFBF;
  --grad-start-color01: #F7B837;
  --grad-end-color01: #B59751;
  --bg-gradient01: linear-gradient(var(--grad-start-color01), var(--grad-end-color01));
  --grad-start-color02: #BAA063;
  --grad-end-color02: #A88534;
  --bg-gradient02: linear-gradient(var(--grad-start-color02), var(--grad-end-color02));
}

.lumeccaKv__skin {
  text-align: center;
  background: url(/assets/img/skin/lumecca/mv_sp.jpg) top center no-repeat;
  background-size: 100% auto;
  height: 151.5625vw;
  position: relative;
  margin-bottom: 29.0625vw;
}
@media screen and (max-width: 767px) {
  .lumeccaKv__skin {
    padding-top: 76.71875vw;
  }
}
@media screen and (min-width: 768px) {
  .lumeccaKv__skin {
    background: url(/assets/img/skin/lumecca/mv_pc.jpg) top center no-repeat;
    background-size: 100% auto;
    min-height: 566px;
    height: 44.22vw;
    margin-bottom: 172px;
  }
}
@media screen and (min-width: 768px) {
  .lumeccaKv__skin .mv {
    position: relative;
    top: 143px;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding-left: 473px;
    box-sizing: content-box;
  }
}
@media screen and (min-width: 768px) and (min-width: 1297px) {
  .lumeccaKv__skin .mv {
    top: 11vw;
  }
}
.lumeccaKv__skin .mv__planBox {
  width: 89.375vw;
  height: 15.625vw;
  margin: 0 auto;
  background: #fff;
  display: flex;
  align-items: center;
  border-radius: 1.5625vw;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .lumeccaKv__skin .mv__planBox {
    width: 390px;
    height: 68px;
    border-radius: 8px;
  }
}
.lumeccaKv__skin .mv__planBox__Title {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  background: var(--lightRizeGold);
  width: 25vw;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 3.28125vw;
}
@media screen and (max-width: 767px) {
  .lumeccaKv__skin .mv__planBox__Title {
    font-size: 3.125vw;
  }
}
@media screen and (min-width: 768px) {
  .lumeccaKv__skin .mv__planBox__Title {
    width: 109px;
    padding-left: 14px;
  }
}
.lumeccaKv__skin .mv__planBox__monthArea {
  font-weight: bold;
  display: flex;
  align-items: center;
  padding-left: 12.8125vw;
}
@media screen and (min-width: 768px) {
  .lumeccaKv__skin .mv__planBox__monthArea {
    padding-left: 56px;
  }
}
.lumeccaKv__skin .mv__planBox__monthArea .shot {
  font-size: 14px;
  margin-right: 5vw;
}
@media screen and (max-width: 767px) {
  .lumeccaKv__skin .mv__planBox__monthArea .shot {
    font-size: 3.125vw;
  }
}
@media screen and (min-width: 768px) {
  .lumeccaKv__skin .mv__planBox__monthArea .shot {
    margin-right: 20px;
  }
}
.lumeccaKv__skin .mv__planBox__monthArea .yen {
  font-size: 18px;
}
@media screen and (max-width: 767px) {
  .lumeccaKv__skin .mv__planBox__monthArea .yen {
    font-size: 4.0625vw;
  }
}
.lumeccaKv__skin .mv__planBox__monthPrice {
  font-size: 30px;
}
@media screen and (max-width: 767px) {
  .lumeccaKv__skin .mv__planBox__monthPrice {
    font-size: 6.875vw;
  }
}
.lumeccaKv__skin .mv h1 {
  font-size: 46px;
  color: var(--lightRizeGold);
  letter-spacing: 0;
  line-height: 1.8;
  display: block;
  margin: 0 auto 3.578125vw;
}
@media screen and (max-width: 767px) {
  .lumeccaKv__skin .mv h1 {
    font-size: 7.1875vw;
  }
}
@media screen and (min-width: 768px) {
  .lumeccaKv__skin .mv h1 {
    margin-bottom: 35px;
  }
}
.lumeccaKv__skin .mv h1 .h1__subTop {
  font-size: 14px;
  color: var(--gray);
  letter-spacing: 0.1em;
  display: block;
}
@media screen and (max-width: 767px) {
  .lumeccaKv__skin .mv h1 .h1__subTop {
    font-size: 3.125vw;
  }
}
.lumeccaKv__skin .mv h1 .h1__subUnder {
  font-family: "FriendlyExpart", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, Arial, Helvetica, Verdana, sans-serif, "ＭＳ Ｐゴシック", "MS PGothic";
  font-size: 16px;
  font-weight: normal;
  color: var(--orange);
  letter-spacing: 0;
  display: block;
}
@media screen and (max-width: 767px) {
  .lumeccaKv__skin .mv h1 .h1__subUnder {
    font-size: 2.8125vw;
  }
}
.lumeccaKv__skin .mv .notice {
  font-size: 14px;
  color: var(--gray);
  font-weight: bold;
  letter-spacing: 0.1em;
  display: table;
  margin: 1.5em auto 0;
  position: relative;
}
@media screen and (max-width: 767px) {
  .lumeccaKv__skin .mv .notice {
    font-size: 3.125vw;
  }
}
.lumeccaKv__skin .mv .notice:after {
  content: "";
  background: var(--orange);
  display: block;
  width: 104%;
  height: 2px;
  position: absolute;
  left: -0.2%;
  bottom: -0.2em;
}

.planBox__priceArea img.img_lumecca {
  width: 32.96875vw;
  margin-top: 2.765625vw;
  margin-bottom: 4.890625vw;
}
@media screen and (min-width: 768px) {
  .planBox__priceArea img.img_lumecca {
    width: 154px;
    margin-top: 17px;
    margin-bottom: 32px;
  }
}

.lumecca .modMachine {
  margin-top: 29.0625vw;
  margin-bottom: 18vw;
}
@media screen and (min-width: 768px) {
  .lumecca .modMachine {
    margin-top: 200px;
  }
}
.lumecca .modMachine__Title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 6.5625vw;
  border-bottom: 2px solid #fff;
}
@media screen and (max-width: 767px) {
  .lumecca .modMachine__Title {
    font-size: 5vw;
  }
}
@media screen and (min-width: 768px) {
  .lumecca .modMachine__Title {
    padding-bottom: 36px;
  }
}
.lumecca .modMachine__Title.second {
  border-top: 2px solid #fff;
  padding-top: 6.5625vw;
  border-bottom: none;
}
.lumecca .modMachine__inner {
  width: 89.375vw;
  margin: 7.96875vw auto 0;
}
@media screen and (min-width: 768px) {
  .lumecca .modMachine__inner {
    width: 964px;
    margin: 86px auto 0;
  }
}
@media screen and (min-width: 768px) {
  .lumecca .modMachine__inner .pc_flex {
    gap: 16px;
  }
}
.lumecca .modMachine__inner .pc_flex li {
  margin-bottom: 6.25vw;
}
@media screen and (min-width: 768px) {
  .lumecca .modMachine__inner .pc_flex li {
    margin-bottom: 62px;
  }
}
.lumecca .modMachine__text {
  font-size: 16px;
  font-weight: bold;
  line-height: 2;
  margin-bottom: 7.15625vw;
}
@media screen and (max-width: 767px) {
  .lumecca .modMachine__text {
    font-size: 3.4375vw;
  }
}
@media screen and (min-width: 768px) {
  .lumecca .modMachine__text {
    width: 550px;
    margin: 0 auto 50px;
  }
}
.lumecca .modMachine__text .caution {
  font-size: 18px;
  font-weight: normal;
}
@media screen and (max-width: 767px) {
  .lumecca .modMachine__text .caution {
    font-size: 3.125vw;
  }
}
.lumecca .modMachine .modBox {
  width: 89.53125vw;
  margin: 0 auto;
  border-radius: 3.75vw;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .lumecca .modMachine .modBox {
    width: 964px;
    border-radius: 20px;
    padding: 43px 40px;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    align-items: flex-start;
  }
  .lumecca .modMachine .modBox img {
    width: 319px;
    height: 202px;
    object-fit: cover;
    border-radius: 10px;
  }
}
.lumecca .modMachine .modBox:nth-child(n+2) {
  margin-top: 9.375vw;
}
@media screen and (min-width: 768px) {
  .lumecca .modMachine .modBox:nth-child(n+2) {
    margin-top: 40px;
  }
}
.lumecca .modMachine .modBox > div {
  padding: 7.03125vw 3.125vw 0;
}
@media screen and (min-width: 768px) {
  .lumecca .modMachine .modBox > div {
    width: 415px;
    padding: 0;
  }
}
.lumecca .modMachine .modBox > div .midashi {
  color: var(--lightRizeGold);
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 4.6875vw;
}
@media screen and (max-width: 767px) {
  .lumecca .modMachine .modBox > div .midashi {
    font-size: 3.75vw;
  }
}
@media screen and (min-width: 768px) {
  .lumecca .modMachine .modBox > div .midashi {
    margin-bottom: 30px;
  }
}
.lumecca .modMachine .modBox > div .midashi .step {
  width: auto;
  height: 7.1875vw;
  margin-right: 4.375vw;
}
@media screen and (min-width: 768px) {
  .lumecca .modMachine .modBox > div .midashi .step {
    height: 42px;
    margin-right: 16px;
  }
}
.lumecca .modMachine .modBox > div .text {
  font-weight: bold;
  line-height: 2;
}
.lumecca .modFeatures {
  padding-bottom: 29.0625vw;
}
@media screen and (min-width: 768px) {
  .lumecca .modFeatures {
    padding-bottom: 0;
  }
}
.lumecca .modFeatures .modMediaBox__item .img {
  text-align: center;
}
.lumecca .modFeatures .modMediaBox__item .img.modBpSp {
  margin-bottom: 14.0625vw;
}
.lumecca .modFeatures .modMediaBox__item .text {
  margin-top: 26.203125vw;
}
@media screen and (min-width: 768px) {
  .lumecca .modFeatures .modMediaBox__item .text {
    margin-top: 50px;
  }
}
.lumecca .modFeatures .modMediaBox__item .text .normal {
  font-weight: normal;
}
.lumecca .modFeatures__box01 .img img {
  width: 48.90625vw;
}
@media screen and (min-width: 768px) {
  .lumecca .modFeatures__box01 .img img {
    width: 251px;
  }
}
.lumecca .modFeatures__box02 {
  margin-top: 19.15625vw !important;
}
@media screen and (min-width: 768px) {
  .lumecca .modFeatures__box02 {
    margin-top: 0 !important;
  }
}
.lumecca .modFeatures__box02 .img img {
  width: 43.59375vw;
  margin-left: -5.1796875vw;
}
@media screen and (min-width: 768px) {
  .lumecca .modFeatures__box02 .img img {
    width: 279px;
    margin-left: 0;
  }
}
.lumecca .modFeatures__box03 {
  margin-top: 29.125vw !important;
}
@media screen and (min-width: 768px) {
  .lumecca .modFeatures__box03 {
    margin-top: 105px !important;
  }
}
.lumecca .modFeatures__box03 .img img {
  width: 32.8125vw;
}
@media screen and (min-width: 768px) {
  .lumecca .modFeatures__box03 .img img {
    width: 210px;
  }
}
.lumecca .modFeatures__box04 {
  margin-top: 29.125vw !important;
}
@media screen and (min-width: 768px) {
  .lumecca .modFeatures__box04 {
    margin-top: 105px !important;
  }
}
.lumecca .modFeatures__box04 .img img {
  width: 49.0625vw;
}
@media screen and (min-width: 768px) {
  .lumecca .modFeatures__box04 .img img {
    width: 314px;
  }
}
.lumecca .modComparison {
  padding-bottom: 29.0625vw;
}
@media screen and (min-width: 768px) {
  .lumecca .modComparison {
    padding-bottom: 200px;
  }
}
.lumecca .modComparison .modSection {
  width: 89.375vw;
}
@media screen and (min-width: 768px) {
  .lumecca .modComparison .modSection {
    width: auto;
  }
}
.lumecca .modComparison .modSection .visual {
  background: url(/assets/img/skin/lumecca/visual_comparison.png) top center no-repeat;
  background-size: 100% auto;
  width: 59.375vw;
  height: 56.25vw;
  transform: translate(13.28125vw, -4.6875vw);
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .lumecca .modComparison .modSection .visual {
    width: 380px;
    height: 412px;
    transform: initial;
    position: absolute;
    top: -75px;
    right: -29px;
  }
}
.lumecca .modComparison__inner {
  margin-top: 1.359375vw;
}
@media screen and (min-width: 768px) {
  .lumecca .modComparison__inner {
    padding-left: 45px;
    margin-top: 114px;
  }
}
.lumecca .modComparison__text {
  font-size: 16px;
  font-weight: bold;
  line-height: 2;
  margin-bottom: 10.671875vw;
}
@media screen and (max-width: 767px) {
  .lumecca .modComparison__text {
    font-size: 3.4375vw;
  }
}
@media screen and (min-width: 768px) {
  .lumecca .modComparison__text {
    width: 550px;
    margin-bottom: 95px;
  }
}