.fs-c-subgroupList__label {
  font-weight: 400;
}

.fs-c-productList__controller {
  font-weight: 400;
}

.fs-c-salesPeriod__date {
  font-weight: 400;
}

.fs-c-productPrice__addon {
  font-weight: 400;
}

.fs-c-button--plain.fs-c-button--addToCart--list {
  font-weight: 400;
}

.contact_inner {
  font-weight: 400;
}

.fnavi {
  font-weight: 400;
}

.navi li .navi_drop {
  font-weight: 400;
}

.footer .finfo_txt {
  font-weight: 400;
}

.footer .copy {
  font-weight: 400;
}

.fs-l-main {
  max-width: 100% !important;
}

.fs-c-productList__list {
  font-weight: 400;
}

.fs-c-breadcrumb__list li:last-child {
  font-weight: 400;
}

body {
  font-weight: 400;
}

/*------------------------
 apps
------------------------*/

.main-area {
  margin: 0 0 5.5rem;
}

.main-area .inner {
  margin: 0 auto;
}

.main-area .main-flex figure {
  margin: 0 0 3rem;
}

.main-area .main-flex .conts {
  padding: 0 20px;
}

.main-area .main-flex .head h2 {
  position: relative;
  font-size: 1.0625rem;
  margin: 0 0 2.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  margin: 2rem 0 2rem 40px;
  color: #abaeb3;
}

.main-area .main-flex .head h2 span {
  display: block;
  font-size: 0.875rem;
  line-height: 3;
  color: rgb(51, 51, 51);
}

.main-area .main-flex .conts .ja-title {
  font-weight: 400;
  letter-spacing: 0.3rem;
  line-height: 1.5;
  font-size: 1.25rem;
  text-align: center;
}

/* .main-area .main-flex .conts .ja-title span {
  font-weight: 400;
  letter-spacing: 0.24rem;
} */

@media screen and (min-width: 768px) {
  .main-area {
    margin: 0 0 5.5rem;
    margin-bottom: clamp(6rem, 13vw, 15rem);
  }

  .main-area .main-flex {
    display: grid;
    grid-template-columns: 55% auto;
    grid-template-rows: 1fr 1fr;
    gap: 6rem 0;
  }

  .main-area .main-flex figure {
    margin: 0;
    grid-area: 1 / 1 / 3 / 2;
  }

  .main-area .main-flex .head {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    align-items: flex-end;
    margin: 0 0 0 25%;
  }

  .main-area .main-flex .conts {
    grid-area: 2 / 2 / 3 / 3;
    display: flex;
    justify-content: flex-start;
    /* margin-right: 6rem; */
    margin: 0 0 0 25%;
    padding: 0;
  }

  .main-area .main-flex .head h2 {
    font-size: 1.7vw;
    font-size: max(1rem, 1.4vw);
    /* margin-bottom: 6rem; */
    margin: 0;
  }

  .main-area .main-flex .head h2 span {
    letter-spacing: 0;
    font-size: 1.7vw;
    font-size: max(1rem, 1.4vw);
  }

  .main-area .main-flex .head h2:before {
    content: "";
    position: absolute;
    width: 60px;
    height: 6px;
    bottom: -3rem;
    background-color: #abaeb3;
  }

  .main-area .main-flex .conts .ja-title {
    line-height: 1.8;
    /* font-size: 1.125rem; */
    letter-spacing: 0.1rem;
    font-size: 1.7vw;
    font-size: max(1rem, 1.4vw);
    text-align: left;
  }

  .main-area .main-flex .conts .ja-title span {
    font-size: 1.125rem;
    font-size: max(1rem, 1.4vw);
    font-weight: 400;
    letter-spacing: 0.24em;
    margin: 0 10px 0 0;
  }
}

.concept-area {
  position: relative;
  margin: 0 0 8.5rem;
}

.concept-area .inner {
  position: relative;
  width: 100%;
  max-width: 1082px;
  margin: 0 auto;
}

.concept-area .head {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  position: absolute;
  top: 7rem;
  color: #abaeb3;
}

.concept-area .concept-box01 {
  position: relative;
  min-height: 659px;
}

.concept-area .concept-box01 .image {
  position: absolute;
  right: -125px;
  top: 0;
  width: 87%;
}

.concept-area .concept-box01 .conts {
  width: 100%;
  max-width: 444px;
  background: #dee6df;
  position: relative;
  box-sizing: border-box;
  padding: 3.2rem 2.9rem;
  top: 14rem;
  z-index: 1;
  box-shadow: rgb(0 0 0 / 20%) 0px 18px 50px -10px;
}

.concept-area .concept-box01 .conts h3 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 2.1;
  margin: 0 0 1.5rem;
}

.concept-area .concept-box01 .conts p {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 2.1;
  margin: 0;
}

.concept-area .concept-box02 {
  position: relative;
  display: flex;
  align-items: center;
}

.concept-area .concept-box02 .image {
  width: 71%;
  margin: 0 -7% 0 0;
}

.concept-area .concept-box02 .conts {
  width: 100%;
  max-width: 444px;
  background: #dee6df;
  position: relative;
  box-sizing: border-box;
  padding: 3rem 3.5rem;
  margin: 0 auto;
  box-shadow: rgb(0 0 0 / 20%) 0px 18px 50px -10px;
}

.concept-area .concept-box02 .conts h3 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 2.1;
  margin: 0 0 2.5rem;
}

.concept-area .concept-box02 .conts li {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  margin: 0 0 1.6rem;
  padding: 0 0 0 2.6rem;
  position: relative;
}

.concept-area .concept-box02 .conts li:before {
  content: "";
  width: 29.44px;
  height: 21.13px;
  background: url("https://mmoon.itembox.design/item/premium/black-check.svg") no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  top: 5px;
}

.features-area figure img {
  box-shadow: rgb(0 0 0 / 20%) 0px 18px 50px -10px;
}

.features-area {
  position: relative;
  margin: 0 0 8.5rem;
}

.features-area .obj01 {
  position: absolute;
  right: 0;
  top: -13rem;
  width: 66%;
  z-index: -1;
  text-align: right;
}

.features-area .obj02 {
  position: absolute;
  left: 0;
  top: 22rem;
  width: 32%;
  z-index: -1;
}

.features-area .obj03 {
  position: absolute;
  right: -11rem;
  top: 59rem;
  width: 49%;
  z-index: -1;
  text-align: right;
}

.features-area .inner {
  position: relative;
  width: 100%;
  max-width: 1082px;
  margin: 0 auto;
}

.features-area .head {
  margin: 0 0 4rem;
}

.features-area .head .en-title {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  margin: 0 0 0.6rem;
  color: #abaeb3;
}

.features-area .head h2 {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.features-area .features-box01 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin: 0 0 8rem;
}

.features-area .features-box01 figure {
  width: 64%;
}

.features-area .features-box01 .conts {
  width: 32%;
}

.features-area .features-box01 .conts .no-head {
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  position: relative;
  margin: 0 0 6.8rem;
}

.features-area .features-box01 .conts .no-head:before {
  content: "";
  width: 140px;
  height: 6px;
  background: #000;
  position: absolute;
  left: 0;
  bottom: -1.2rem;
  background-color: #abaeb3;
}

.features-area .features-box01 .conts h3 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  margin: 0 0 2rem;
}

.features-area .features-box01 .conts p {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 2;
  margin: 0 0 1rem;
}

.features-area .features-box02 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 8rem;
}

.features-area .features-box02 figure {
  width: 64%;
}

.features-area .features-box02 .conts {
  width: 27.4%;
}

.features-area .features-box02 .conts .no-head {
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  position: relative;
  margin: 0 0 6.8rem;
}

.features-area .features-box02 .conts .no-head:before {
  content: "";
  width: 140px;
  height: 6px;
  background: #000;
  position: absolute;
  left: 0;
  bottom: -1.2rem;
  background-color: #abaeb3;
}

.features-area .features-box02 .conts h3 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin: 0 0 1.8rem;
}

.features-area .features-box02 .conts p {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 2;
  margin: 0 0 1rem;
}

.features-area .features-box03 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  margin: 0 0 6rem;
}

.features-area .features-box03 figure {
  width: 64%;
}

.features-area .features-box03 .conts {
  width: 32%;
}

.features-area .features-box03 .conts .no-head {
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  position: relative;
  margin: 0 0 6.5rem;
}

.features-area .features-box03 .conts .no-head:before {
  content: "";
  width: 140px;
  height: 6px;
  background: #000;
  position: absolute;
  left: 0;
  bottom: -1.2rem;
  background-color: #abaeb3;
}

.features-area .features-box03 .conts h3 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  margin: 0 0 1.8rem;
}

.features-area .features-box03 .conts p {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 2;
  margin: 0 0 1rem;
}

.use-area .inner {
  position: relative;
  width: 100%;
  max-width: 1082px;
  margin: 0 auto;
}

.use-area .head {
  margin: 0 0 5.1rem;
  text-align: center;
}

.use-area .head .en-title {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  margin: 0 0 0.8rem;
  color: #abaeb3;
}

.use-area .head h2 {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.use-area .use-box01 {
  display: flex;
  align-items: flex-start;
  flex-direction: row-reverse;
  position: relative;
  margin: 0 0 12.4rem;
}

.use-area .use-box01:before {
  content: "";
  width: 200%;
  height: 104%;
  background: #f8f6f0;
  position: absolute;
  top: 15%;
  right: 0%;
  z-index: -1;
}

.use-area .use-box01 figure {
  width: 60%;
  position: relative;
}

.use-area .use-box01 figure video {
  width: 100%;
}

.use-area .use-box01 figure .oracl-obj {
  width: 106px;
  height: 106px;
  background: #fff;
  font-size: 0.8125rem;
  position: absolute;
  left: 2rem;
  top: 2rem;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 500;
}

.use-area .use-box01 figure .text-obj {
  font-size: 2.625rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  position: absolute;
  right: 2rem;
  bottom: -1.7rem;
}

.use-area .use-box01 .conts {
  display: flex;
  justify-content: left;
  flex: 1;
  position: relative;
  padding: 3rem 0;
}

.use-area .use-box01 .conts h3 {
  font-size: 1.625rem;
  font-weight: 400;
  margin: 0 0 5rem;
  letter-spacing: 0.3em;
}

.use-area .use-box01 .conts h4 {
  font-size: 1rem;
  line-height: 2;
  font-weight: 500;
  margin: 0 0 1rem;
}

.use-area .use-box01 .conts p {
  font-size: 0.875rem;
  line-height: 2.4;
  font-weight: 400;
}

.use-area .use-box01 .conts p .big {
  font-size: 1.125rem;
}

.use-area .use-box02 {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin: 0 0 9.4rem;
}

.use-area .use-box02:before {
  content: "";
  width: 200%;
  height: 90.5%;
  background: #f8f6f0;
  position: absolute;
  top: 9.5%;
  left: 0%;
}

.use-area .use-box02 figure {
  width: 60%;
  position: relative;
}

.use-area .use-box02 figure video {
  width: 100%;
}

.use-area .use-box02 figure .oracl-obj {
  width: 106px;
  height: 106px;
  background: #fff;
  font-size: 0.8125rem;
  position: absolute;
  right: 2rem;
  top: 2rem;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 500;
}

.use-area .use-box02 figure .text-obj {
  font-size: 2.625rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  position: absolute;
  left: 2rem;
  bottom: -2rem;
}

.use-area .use-box02 .conts {
  display: flex;
  justify-content: end;
  flex: 1;
  padding: 3rem 20px;
  position: relative;
  margin: 0 0 0 auto;
}

.use-area .use-box02 .conts h3 {
  font-size: 1.625rem;
  font-weight: 400;
  margin: 0 0 3.8rem;
  letter-spacing: 0.3em;
}

.use-area .use-box02 .conts h4 {
  font-size: 1rem;
  line-height: 2;
  font-weight: 500;
  margin: 0 0 1.6rem;
}

.use-area .use-box02 .conts p {
  font-size: 0.875rem;
  line-height: 1.85;
  font-weight: 400;
}

.use-area .use-box02 .conts p a {
  transition: all 0.3s ease;
}

.use-area .use-box02 .conts p.bottom-border {
  border-bottom: 2px solid #000;
  padding: 0 0 1.2rem;
}

.use-area .use-box02 .conts p .big {
  font-size: 1.125rem;
}

.use-area .use-box02 .conts .link {
  margin: 2rem 0 0;
}

.use-area .use-box02 .conts .link a {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: all 0.3s ease;
  font-weight: 400;
}

.use-area .use-box02 .conts .link a .arrow {
  display: flex;
  padding: 0 0 0 0.6rem;
}

.points-area {
  margin: 0 0 10rem;
}

.points-area .inner {
  position: relative;
  width: 100%;
  max-width: 1094px;
  margin: 0 auto;
}

.points-area .head {
  margin: 0 0 5.2rem;
}

.points-area .head .en-title {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  margin: 0 0 0.7rem;
  color: #abaeb3;
}

.points-area .head h2 {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.points-area ul {
  display: flex;
  justify-content: center;
}

.points-area ul li {
  width: 32%;
  min-width: 350px;
  margin: 0 4.9%;
}

.points-area ul li:last-child {
  margin-top: 97px;
}

.points-area ul li figure {
  margin: 0 0 2.7rem;
}

.points-area ul li .point-head {
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  margin: 0 0 3.5rem;
  font-weight: 400;
}

.points-area ul li .point-head span {
  border-bottom: 5px solid #abaeb3;
  padding: 0 0 1rem;
}

.points-area ul li h3 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 2;
  margin: 0 0 1.1rem;
}

.points-area ul li p {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 2;
}

/* select-area */

.select-area .inner {
  width: 90%;
  margin: 0 auto 3rem;
}

.select-area .inner .head {
  margin: 0 0 3rem;
}

.select-area .inner .head h2 {
  font-size: 1rem;
  margin: 0 0 1rem;
  line-height: 1.9;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
}

.select-area .inner .head p {
  font-size: 0.875rem;
  line-height: 2;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

.select-area .inner .select-item {
  background: url(https://mmoon.itembox.design/item/premium/sp/item-select-bg@2x.png) center no-repeat;
  background-size: 100% auto;
  width: 100%;
  height: 150vw;
  position: relative;
  margin: 0 auto;
  margin: 0 auto 5rem;
}

.select-area .inner .select-item .image {
  width: 85px;
  margin: 0 auto;
}

.orange-head {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 7.5%;
  left: 50%;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #cc8c40;
}

.blue-head {
  position: absolute;
  transform: translate(-50%, -50%);
  bottom: 2.5%;
  left: 50%;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #76b7ce;
}

.orange-item {
  display: flex;
  justify-content: center;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 100%;
  margin: 0 auto;
  top: 25%;
  left: 50%;
}

.orange-item01,
.orange-item02 {
  font-size: 0.6875rem;
  text-align: center;
  font-weight: 500;
  width: 125px;
}

.temp-all-area .select-item a {
  text-decoration: underline;
  color: #333;
}

.green-item {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 0.6875rem;
  text-align: center;
  font-weight: 500;
  width: 125px;
}

.blue-item {
  position: absolute;
  transform: translate(-50%, -50%);
  bottom: 7.5%;
  left: 50%;
  font-size: 0.6875rem;
  text-align: center;
  font-weight: 500;
  width: 150px;
  color: #76b7ce;
}


/* review_area */
.review_area {
  background-color: #EEF3F7;
}

.review_area .inner {
  max-width: 1000px;
  padding: 100px 20px;

  position: relative;
  margin: 0 auto 10rem;
}

.review_area .head {
  text-align: center;
  margin: 0 0 50px;
}

.review_area .head h2 {
  font-size: 20px;
}

.review_area .review-box {
  background: #fff;
  border-radius: 20px;
  padding: 1.8rem 1.8rem;
  margin: 0 0 1.5rem;
}

.review_area .review-box .box-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 16px;
}

.review_area .review-box .name-area {
  display: flex;
  align-items: center;
}

.review_area .review-box .name-area .name {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 1rem 0 0;
}

.review_area .review-box .box-head .star {
  padding: 0 1.2rem 0 0;
}

@media only screen and (max-width: 767px) {
  .review_area .inner {
    padding: 50px 20px;
    margin: 0 auto 80px;
  }

  .review_area .review-box {
    margin: 0 1rem 1.5rem;
    padding: 1.2rem;
  }

  .review_area .review-box .name-area .name {
    font-size: 14px;
    white-space: nowrap;
    margin: 0 0rem 0 0;
  }

  .review_area .review-box p {
    font-size: 11px;
    margin-top: .5rem;
  }
}

.facel_lo_box h2 {
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  text-align: center;
  margin: 0 0 2rem;
}


.facel_lo_wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2.5% 80px;
  display: flex;
  flex-direction: column;
  gap: 50px 0;
}

.facel_lo_wrap img {
  box-shadow: 20px 20px 30px 0px rgba(0, 0, 0, 0.06);
}

@media screen and (min-width: 768px) {
  .facel_lo_box h2 {
    font-size: 22px;
  }

}

@media screen and (max-width: 767px) {
  /*767px以下で非表示*/

  .pc-hide {
    display: none;
    /*非表示*/
  }

  /* 独自コメント1と11 */
  .product_comment-1,
  .product_comment-2 {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  /*768px以上で非表示*/

  .sp-hide {
    display: none;
    /*非表示*/
  }
}



@media screen and (min-width: 375px) {
  .select-area .inner .select-item .image {
    width: 100px;
    margin: 0 auto;
  }

  .orange-head {
    font-size: 1.25rem;
  }

  .blue-head {
    font-size: 1.25rem;
  }

  .blue-item {
    bottom: 7.5%;
  }

  .orange-item01,
  .orange-item02 {
    padding: 0 2.5%;
    font-size: 0.75rem;
  }

  .green-item {
    font-size: 0.75rem;
  }

  .blue-item {
    font-size: 0.75rem;
  }
}

@media screen and (min-width: 425px) {
  .select-area .inner .select-item .image {
    width: 100%;
    margin: 0 auto;
  }

  .orange-item01,
  .orange-item02 {
    width: 35%;
  }

  .green-item {
    width: 35%;
  }

  .blue-item {
    width: 40%;
    bottom: 0;
  }
}

@media screen and (min-width: 768px) {
  .select-area .inner {
    width: 95%;
    margin: 0 auto 5rem;
  }

  .select-area .inner .head h2 {
    font-size: 1.25rem;
    margin: 0 0 2rem;
  }

  .select-area .inner .select-item {
    width: 100%;
    max-width: 908px;
    height: 604px;
    background: url(https://mmoon.itembox.design/item/premium/item-select-bg@2x.png) center no-repeat;
    background-size: 100% auto;
    margin: 0 auto;
    position: relative;
    margin: 0 auto 10rem;
  }

  .select-area .inner .select-item .image {
    width: 100%;
    margin: 0 auto;
  }

  .orange-head {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 12.5%;
    left: 32.5%;
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #cc8c40;
  }

  .blue-head {
    position: absolute;
    transform: translate(-50%, -50%);
    bottom: auto;
    left: auto;
    top: 12.5%;
    right: 22.5%;
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #76b7ce;
  }

  .orange-item {
    display: block;
    justify-content: center;
    position: revert;
    transform: revert;
    width: 100%;
    margin: 0 auto;
    top: 0;
    left: 0;
  }

  .orange-item01 {
    position: absolute;
    top: 22.5%;
    left: 7.5%;
    width: 135px;
    padding: 0;
    font-size: 0.8125rem;
  }

  .orange-item02 {
    position: absolute;
    bottom: 15%;
    left: 17.5%;
    width: 115px;
    padding: 0;
    font-size: 0.8125rem;
  }

  .green-item {
    width: 135px;
    font-size: 0.8125rem;
  }

  .blue-item {
    width: 135px;
    font-size: 0.8125rem;
    bottom: auto;
    left: auto;
    top: 50%;
    right: 5%;
    white-space: nowrap;
  }
}




@media screen and (min-width: 1024px) {
  .orange-head {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 7.5%;
    left: 32.5%;
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #cc8c40;
  }

  .blue-head {
    position: absolute;
    transform: translate(-50%, -50%);
    bottom: auto;
    left: auto;
    top: 7.5%;
    right: 25%;
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #76b7ce;
  }

  .orange-item01 {
    width: 145px;
  }

  .orange-item02 {
    position: absolute;
    bottom: 7.5%;
    width: 145px;
  }

  .green-item {
    width: 175px;
    font-size: 1.125rem;
  }

  .blue-item {
    width: 145px;
    right: 0;
  }
}

@media screen and (min-width: 1366px) {
  .select-area .inner {
    width: 95%;
    margin: 0 auto 7.5rem;
  }
}

.select-area .open-box {
  transition: all 0.3s ease;
  max-width: 876px;
  margin: 0 auto;
}

.select-area .open-box:hover {
  opacity: 0.7;
}

.select-area .open-box .ac-head {
  font-size: 1.125rem;
  font-weight: 500;
  text-align: center;
  padding: 2.5rem 0;
  background: #ebebeb;
  position: relative;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
}

.select-area .open-box .ac-head:after {
  content: "";
  background: url("https://mmoon.itembox.design/item/lp/ac-icon.svg") no-repeat;
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%) rotate(-45deg);
  -webkit-transform: translateY(-50%) rotate(-45deg);
  -ms-transform: translateY(-50%) rotate(-45deg);
  height: 20px;
  width: 20px;
  background-size: 100% auto;
  transition: all 0.3s ease;
}

.select-area .open-box .ac-head.active:after {
  transform: translateY(-50%) rotate(-0deg);
  -webkit-transform: translateY(-50%) rotate(-0deg);
  -ms-transform: translateY(-50%) rotate(-0deg);
}

.select-area .open-box .hidden-box {
  display: none;
  padding: 2.8rem 0 0;
}

.select-area .open-box .hidden-box .table-box {
  display: flex;
  justify-content: center;
}

.select-area .open-box .hidden-box table {
  font-size: 0.875rem;
}

.select-area .open-box .hidden-box table th {
  text-align: left;
  font-weight: 400;
  padding: 0 2rem 0.2rem 0;
  vertical-align: top;
}

.select-area .open-box .hidden-box table td {
  font-weight: 400;
}



.recipes-area {
  padding: 8.2rem 0 5.4rem;
}

.recipes-area .head {
  margin: 0 0 4rem;
  text-align: center;
}

.recipes-area .inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.recipes-area .head .en-title {
  display: block;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  margin: 0 0 0.7rem;
}

.recipes-area .head .ja-title {
  font-weight: 500;
  font-size: 1rem;
}

.recipes-flex {
  display: flex;
  justify-content: space-between;
}

.recipes-flex .recipes-box a {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}

.recipes-flex .recipes-box a:hover {
  opacity: 1;
}

.recipes-flex .recipes-box a:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: -webkit-linear-gradient(bottom,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.4) 30%,
      rgba(255, 255, 255, 0) 50%);
  background: linear-gradient(to top,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.4) 30%,
      rgba(255, 255, 255, 0) 50%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
  transition: 0.3s ease-in-out;
  z-index: 2;
}

.recipes-flex .recipes-box a:after {
  position: absolute;
  content: "";
  width: 23.7px;
  height: 9.55px;
  right: 24px;
  bottom: 37px;
  background: url("https://mmoon.itembox.design/item/lp/black-arrow.svg") no-repeat;
  background-size: 100% auto;
  transition: 0.3s ease-in-out;
  z-index: 3;
}

.recipes-flex .recipes-box a:hover:after {
  right: 15px;
  bottom: 37px;
}

.recipes-flex .recipes-box a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recipes-flex .recipes-box a h3 {
  position: absolute;
  bottom: 3.8rem;
  left: 1.5rem;
  margin: 0 2rem 0 0;
  letter-spacing: 0.12em;
  line-height: 1.75rem;
  z-index: 2;
}

#floting-bt {
  position: fixed;
  right: 2.6rem;
  bottom: 2rem;
  z-index: 10;
}

#floting-bt a {
  display: block;
  width: 100px;
  height: 100px;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.625;
  text-align: center;
  background: #4c6f50;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: rgb(0 0 0 / 30%) 0px 19px 38px, rgb(0 0 0 / 22%) 0px 15px 12px;
  transition: all 0.3s ease;
}

#floting-bt a:hover {
  opacity: 0.8;
  box-shadow: none;
}

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

@media only screen and (max-width: 767px) {
  .sp_hidden {
    display: none !important;
  }

  /*------------------------
		apps
	------------------------*/

  .concept-area {
    margin: 0 0 3.1rem;
  }

  .concept-area .inner {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .concept-area .head {
    position: relative;
    top: 0;
    left: 20px;
    font-size: 1.25rem;
    margin: 0 0 2.5rem;
  }

  .concept-area .concept-box01 .image {
    width: calc(100% + 20px);
    position: relative;
    left: -10px;
  }

  .concept-area .concept-box01 .conts {
    top: -1rem;
    padding: 2.2rem 1.9rem 1.4rem;
  }

  .concept-area .concept-box01 .conts h3 {
    font-size: 1rem;
  }

  .concept-area .concept-box01 .conts p {
    font-size: 0.8125rem;
    line-height: 1.9;
  }

  .concept-area .concept-box02 {
    display: block;
  }

  .concept-area .concept-box02 .image {
    width: 100%;
    margin: 0 0 -2rem;
    width: calc(100% + 20px);
    position: relative;
    left: -10px;
  }

  .concept-area .concept-box02 .conts {
    top: -1rem;
    padding: 2.2rem 1.9rem;
  }

  .concept-area .concept-box02 .conts h3 {
    font-size: 1rem;
    margin: 0 0 1.5rem;
  }

  .concept-area .concept-box02 .conts p {
    font-size: 0.8125rem;
  }

  .concept-area .concept-box02 .conts li {
    font-size: 0.875rem;
    margin: 0 0 0.6rem;
    padding: 0 0 0 1.6rem;
  }

  .concept-area .concept-box02 .conts li:before {
    width: 15px;
    height: 14.5px;
    top: 7px;
  }

  .features-area {
    margin: 0 0 3.1rem;
  }

  .features-area .obj01 {
    right: 0;
    top: -1rem;
    width: 85%;
  }

  .features-area .obj02 {
    right: 0;
    top: 38rem;
    width: 56%;
  }

  .features-area .obj03 {
    right: -9rem;
    top: 75rem;
    width: 72%;
  }

  .features-area .inner {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    border: none;
  }

  .features-area .head {
    text-align: center;
  }

  .features-area .head h2 {
    font-size: 0.75rem;
  }

  .features-area .features-box01 {
    display: block;
    margin: 0 0 4.1rem;
  }

  .features-area .features-box01 figure {
    width: 100%;
    margin: 0 0 2rem;
  }

  .features-area .features-box01 .conts {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .features-area .features-box01 .conts .no-head {
    font-size: 1.25rem;
    margin: 0 0 3rem;
  }

  .features-area .features-box01 .conts .no-head:before {
    width: 70px;
  }

  .features-area .features-box01 .conts h3 {
    font-size: 1.25rem;
    margin: 0 0 1.6rem;
  }

  .features-area .features-box02 {
    display: block;
    margin: 0 0 4.3rem;
  }

  .features-area .features-box02 figure {
    width: 100%;
    margin: 0 0 2.5rem;
  }

  .features-area .features-box02 .conts {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .features-area .features-box02 .conts .no-head {
    font-size: 1.25rem;
    margin: 0 0 2.6rem;
  }

  .features-area .features-box02 .conts .no-head:before {
    width: 70px;
    bottom: -0.9rem;
  }

  .features-area .features-box02 .conts h3 {
    font-size: 1.25rem;
    margin: 0 0 1.6rem;
  }

  .features-area .features-box03 {
    display: block;
    margin: 0;
  }

  .features-area .features-box03 figure {
    width: 100%;
    margin: 0 0 2rem;
  }

  .features-area .features-box03 .conts {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .features-area .features-box03 .conts .no-head {
    font-size: 1.25rem;
    margin: 0 0 3rem;
  }

  .features-area .features-box03 .conts .no-head:before {
    width: 70px;
  }

  .features-area .features-box03 .conts h3 {
    font-size: 1.25rem;
    margin: 0 0 1.6rem;
  }

  .use-area {
    margin: 0 0 6.5rem;
  }

  .use-area .head {
    margin: 0 0 2.5rem;
  }

  .use-area .inner {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    border: none;
  }

  .use-area .head h2 {
    font-size: 0.75rem;
  }

  .use-area .use-box01 {
    margin: 0 0 6.5rem;
    display: block;
  }

  .use-area .use-box01:before {
    width: calc(100% + 40px);
    left: -20px;
    height: 83%;
    top: 26%;
  }

  .use-area .use-box01 figure {
    position: relative;
    width: calc(100% + 20px);
    right: 0px;
    left: 0px;
    margin: 0 0 2.8rem;
  }

  .use-area .use-box01 figure .oracl-obj {
    width: 70px;
    height: 70px;
    left: 0.6rem;
    top: 0.6rem;
    font-size: 0.7185rem;
    line-height: 1.4;
  }

  .use-area .use-box01 figure .text-obj {
    right: 20px;
    bottom: -1.2rem;
    font-size: 2.125rem;
  }

  .use-area .use-box01 .conts {
    padding: 0 15px;
    box-sizing: border-box;
  }

  .use-area .use-box01 .conts h3 {
    font-size: 1.3125rem;
    margin: 0 0 1.9rem;
  }

  .use-area .use-box01 .conts h4 {
    font-size: 0.875rem;
    margin: 0 0 0.8rem;
  }

  .use-area .use-box01 .conts p .big {
    font-size: 0.9375rem;
  }

  .use-area .use-box01 .conts p {
    font-size: 0.8125rem;
    margin: 0;
    line-height: 2.2;
  }

  .use-area .use-box02 {
    margin: 0 0 5.4rem;
    display: block;
  }

  .use-area .use-box02:before {
    width: calc(100% + 40px);
    left: -20px;
    height: 88%;
    top: 17%;
  }

  .use-area .use-box02 figure {
    position: relative;
    width: calc(100% + 20px);
    right: 0px;
    left: -20px;
    margin: 0 0 4.2rem;
  }

  .use-area .use-box02 figure .oracl-obj {
    width: 70px;
    height: 70px;
    right: 0.6rem;
    top: 0.6rem;
    font-size: 0.7185rem;
    line-height: 1.4;
    text-align: center;
  }

  .use-area .use-box02 figure .text-obj {
    left: 15px;
    bottom: -2rem;
    font-size: 2.125rem;
  }

  .use-area .use-box02 .conts {
    padding: 0 15px;
    box-sizing: border-box;
  }

  .use-area .use-box02 .conts h3 {
    font-size: 1.3125rem;
    margin: 0 0 1.6rem;
  }

  .use-area .use-box02 .conts h4 {
    font-size: 0.875rem;
    margin: 0 0 0.8rem;
  }

  .use-area .use-box02 .conts p .big {
    font-size: 0.9375rem;
  }

  .use-area .use-box02 .conts p {
    font-size: 0.8125rem;
    line-height: 2.1;
  }

  .use-area .use-box02 .conts .link a {
    justify-content: normal;
    font-weight: 400;
    font-size: 0.8125rem;
  }

  .points-area {
    margin: 0 0 5rem;
  }

  .points-area .inner {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    border: none;
  }

  .points-area .head {
    margin: 0 0 2.6rem;
  }

  .points-area .head .en-title {
    margin: 0 0 0.4rem;
  }

  .points-area .head h2 {
    font-size: 0.875rem;
    line-height: 1.9;
  }

  .points-area ul {
    display: block;
  }

  .points-area ul li {
    width: 100%;
    min-width: initial;
    margin: 0 0 3.5rem;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .points-area ul li figure {
    margin: 0 0 1.5rem;
  }

  .points-area ul li .point-head {
    font-size: 1rem;
    margin: 0 0 2.2rem;
    text-align: left;
  }

  .points-area ul li .point-head span {
    border-bottom: 3px solid #abaeb3;
    padding: 0 0 0.8rem;
  }

  .points-area ul li h3 {
    font-size: 1rem;
  }

  .points-area ul li p {
    font-size: 0.8125rem;
  }

  .points-area ul li:last-child {
    margin-top: 0;
    margin-bottom: 4.7rem;
  }

  .select-area .open-box {
    width: 100%;
  }

  .select-area .open-box .ac-head {
    padding: 1.5rem 0;
    font-size: 1.125rem;
  }

  .select-area .open-box .ac-head:after {
    width: 15px;
    height: 15px;
  }

  .select-area .open-box .hidden-box .table-box {
    width: 100%;
  }

  .select-area .open-box .hidden-box table th {
    width: 34%;
    padding: 0 1.3rem 0.2rem 0;
  }


  .recipes-area {
    padding: 3.2rem 0 2.4rem;
  }

  .recipes-area .head {
    margin: 0 0 3rem;
  }

  .recipes-area .head .en-title {
    font-size: 24px;
  }

  .recipes-area .head .ja-title {
    font-size: 12px;
  }

  .recipes-area .inner {
    width: 100%;
    padding: 0 20px 0;
    box-sizing: border-box;
  }

  .recipes-area .swipe-inner {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px 3rem;
    margin: 0 -20px;
  }

  .recipes-area .recipes-flex {
    min-width: 893px;
    box-sizing: border-box;
  }

  .recipes-area .recipes-flex>div {
    width: 31.333%;
    margin: 0 2% 0 0;
  }

  #floting-bt {
    right: 20px;
    bottom: 20px;
  }

  #floting-bt a {
    width: 80px;
    height: 80px;
    font-size: 0.68rem;
  }
}

/* 22.05.06 一部色修正 */

#floting-bt a {
  color: #707070;
  background: #fff;
  border: solid 1px #e4e4e4;
}

.concept-area .concept-box01 .conts {
  background: #f7f7f7;
}

.concept-area .concept-box02 .conts {
  background: #f7f7f7;
}

.use-area .use-box01:before {
  background: #f7f7f7;
}

.use-area .use-box02:before {
  background: #f7f7f7;
}

.select-area .select-item .green-item .link {
  color: #707070;
}


/* 230809 追記 */
.temp-all-area img {
  width: 100%;
}

.temp-all-area .star img {
  width: auto;
}

.temp-all-area .concept-box02 {
  margin: 2rem 0 0;
}

@media only screen and (min-width: 768px) {
  .temp-all-area .concept-box02 {
    margin: 8rem 0 0;
  }
}


/* 230822クーポンバナー */
.coupon_10_pc {
  text-align: center;
  margin: 0 auto;
  margin-top: 100px;
  margin-bottom: 100px;
  max-width: 900px;
}

.coupon_10_sp {
  text-align: center;
  margin-top: 100px;
  margin-bottom: 100px;
}

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

@media screen and (max-width: 767px) {
  .coupon_10_pc {
    display: none;
  }
}



/* 240618 */

.baner_area .inner {
  width: 90%;
  margin: 0 auto 3rem;
}

.baner_area figure,
h2,
h3,
h4,
p,
ul {
  margin: 0;
}

.baner_area img {
  width: 100%;
}

.baner_area .baner_01 {
  max-width: 670px;
  margin: 0 auto 100px;
}

.baner_area .head h2 {
  text-align: center;
  font-weight: 400;
  margin: 50px 0 30px;
  font-size: 16px;
}

.baner_area .baner_flex {
  display: flex;
  flex-direction: column;
  gap: 50px 0;
}

.baner_area .baner_flex figure {
  margin: 0;
  position: relative;
}

.baner_area .baner_flex figure figcaption {
  position: absolute;
  top: 5%;
  left: 5%;
  letter-spacing: 2px;
  font-size: 16px;
}

.baner_area .baner_text h3 {
  margin: 10px 0 10px;
  font-size: 16px;
  font-weight: 400;
}

.baner_area .baner_text p {
  font-size: 14px;
  margin: 0;
}


.baner_area .baner_02 {
  max-width: 900px;
  margin: 0 auto 100px;
}

.baner_area .baner_02 .red {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 5%;
  position: relative;
  margin: 0 auto 50px;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 400;
  color: #C34F50;
}

.baner_area .baner_02 .red::before {
  content: "";
  transform: rotate(50deg);
  background-color: #333333;
  padding: 0.5px;
  height: 100%;
  display: block;
  width: 40px;
  background-color: #C34F50;
}

.baner_area .baner_02 .red::after {
  content: "";
  transform: rotate(-50deg);
  background-color: #333333;
  padding: 0.5px;
  height: 100%;
  display: block;
  width: 40px;
  background-color: #C34F50;
}

.baner_area .baner_02 figure {
  margin: 0 0 50px;
}

@media screen and (min-width: 768px) {

  .baner_area .head h2 {
    font-size: 18px;
  }

  .baner_area .baner_flex {
    flex-direction: initial;
    gap: 0 20px;
  }

  .baner_area .baner_02 .red {
    font-size: 18px;
  }
}

@media screen and (min-width: 768px) {
  .recipes-area {
    grid-area: 2 / 1 / 3 / 3;
  }
}