@charset "UTF-8";
/* media query */
/* SP縦から */
/* SP横から */
/* タブレット縦から */
/* フルワイド */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap");
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
.logo {
  margin: 30px 0 0 0;
  text-align: center;
}

.melit .area_melit > ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: #fff;
  padding: 30px 0px;
  box-sizing: border-box;
}
@media all and (max-width: 480px) {
  .melit .area_melit > ul {
    padding: 0 20px;
  }
}
.melit .area_melit > ul li {
  width: 33.333%;
  padding: 0 30px;
  box-sizing: border-box;
  border-right: 1px solid #C2A371;
}
@media all and (max-width: 896px) {
  .melit .area_melit > ul li {
    width: 50%;
    margin-bottom: 30px;
  }
}
@media all and (max-width: 480px) {
  .melit .area_melit > ul li {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #C2A371;
    padding: 20px 0;
    margin: 0;
  }
}
.melit .area_melit > ul li:last-child {
  border-right: none;
}
@media all and (max-width: 480px) {
  .melit .area_melit > ul li:last-child {
    border-bottom: none;
  }
}
.melit .area_melit > ul li h3 {
  text-align: center;
}
.melit .area_melit > ul li > p {
  display: block;
  margin: 10px 0 0 0;
  line-height: 1.8em;
}
.melit .area_melit .sec_sweets {
  margin: 50px 0 0 40px;
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 20px 20px 20px 100px;
  box-sizing: border-box;
  border-radius: 500px;
  position: relative;
  background-image: repeating-linear-gradient(to bottom, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px, transparent 79px, transparent 103px, rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px, transparent 105px, transparent 129px, rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px), repeating-linear-gradient(to right, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px, transparent 79px, transparent 103px, rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px, transparent 105px, transparent 129px, rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px);
}
@media all and (max-width: 896px) {
  .melit .area_melit .sec_sweets {
    flex-wrap: wrap-reverse;
    border-radius: 10px;
    padding: 20px;
    margin: 30px 0 0 0;
  }
}
@media all and (max-width: 480px) {
  .melit .area_melit .sec_sweets {
    padding: 15px;
  }
}
.melit .area_melit .sec_sweets .point {
  position: absolute;
  top: 50px;
  left: -40px;
}
@media all and (max-width: 480px) {
  .melit .area_melit .sec_sweets .point {
    top: -30px;
    left: 0;
  }
}
.melit .area_melit .sec_sweets .point img {
  width: 150px;
  transform: rotate(-10deg);
}
@media all and (max-width: 480px) {
  .melit .area_melit .sec_sweets .point img {
    width: 100px;
  }
}
.melit .area_melit .sec_sweets .block_txt {
  width: calc(100% - 200px);
  display: flex;
  justify-content: center;
  align-items: center;
}
@media all and (max-width: 896px) {
  .melit .area_melit .sec_sweets .block_txt {
    width: 100%;
  }
}
.melit .area_melit .sec_sweets .block_txt p {
  text-align: center;
  font-weight: bold;
  line-height: 1.5em;
}
.melit .area_melit .sec_sweets .block_txt p:first-child {
  font-size: 2.5rem;
}
@media all and (max-width: 480px) {
  .melit .area_melit .sec_sweets .block_txt p:first-child {
    font-size: 2rem;
  }
}
.melit .area_melit .sec_sweets .block_txt p:last-child {
  font-size: 2rem;
  margin: 15px 0 0 0;
}
@media all and (max-width: 480px) {
  .melit .area_melit .sec_sweets .block_txt p:last-child {
    font-size: 1.6rem;
  }
}
.melit .area_melit .sec_sweets .block_txt p .pink {
  color: #F35663;
  font-size: 150%;
}
.melit .area_melit .sec_sweets .block_txt p img {
  max-width: 100%;
  width: 100%;
}
.melit .area_melit .sec_sweets .block_img {
  border-radius: 50%;
  overflow: hidden;
  width: 200px;
  min-width: 200px;
}
@media all and (max-width: 896px) {
  .melit .area_melit .sec_sweets .block_img {
    width: 100%;
    border-radius: 0;
    height: 300px;
    margin: 0 0 15px 0;
  }
}
@media all and (max-width: 480px) {
  .melit .area_melit .sec_sweets .block_img {
    height: 150px;
  }
}

.feature .area_feature {
  margin: 30px 0 0 0;
}
.feature .area_feature dl {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.feature .area_feature dl dt {
  width: 400px;
}
@media all and (max-width: 480px) {
  .feature .area_feature dl dt {
    width: 100%;
  }
}
.feature .area_feature dl dd {
  width: calc(100% - 420px);
}
@media all and (max-width: 480px) {
  .feature .area_feature dl dd {
    width: 100%;
    margin: 10px 0 0 0;
  }
}

.flow .area_flow .copy {
  text-align: center;
  font-weight: bold;
  padding: 30px;
  box-sizing: border-box;
  background: #F9F9F9;
  font-size: 1.8rem;
  line-height: 1.8em;
}
@media all and (max-width: 480px) {
  .flow .area_flow .copy {
    padding: 15px;
    font-size: 1.5rem;
  }
}
.flow .area_flow .copy .red {
  font-size: 2.5rem;
  color: #E50012;
}
.flow .area_flow .img {
  margin: 50px 0 0 0;
}
.flow .area_flow > ul {
  margin: 30px 0 0 0;
}
.flow .area_flow > ul li {
  font-size: 1.2rem;
}
.flow .area_flow > ul li:before {
  content: "●";
}
.flow .area_caption {
  margin: 50px 0 0 0;
  padding: 30px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  background: #fff;
}
@media all and (max-width: 480px) {
  .flow .area_caption {
    padding: 15px;
  }
}
.flow .area_caption h3 {
  text-align: center;
}
.flow .area_caption .sec_caption > p {
  margin: 10px 0 0 0;
}
.flow .area_caption .sec_caption ul {
  margin: 10px 0 0 1em;
}
@media all and (max-width: 480px) {
  .flow .area_caption .sec_caption ul {
    margin: 10px 0 0 0.5em;
  }
}
.flow .area_caption .sec_caption ul li {
  text-indent: -1em;
  margin-left: 1em;
  padding: 3px 0;
}
.flow .area_caption .sec_caption ul li:before {
  content: "●";
}

.smart .area_smart .sec_smart {
  margin: 30px 0 0 0;
}
.smart .area_smart .sec_smart dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  position: relative;
  margin: 30px 0 0 0;
}
.smart .area_smart .sec_smart dl:last-child:after {
  display: none;
}
.smart .area_smart .sec_smart dl:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 20px;
  border-color: #E50012 transparent transparent transparent;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  margin: 0 auto;
}
.smart .area_smart .sec_smart dl dt {
  width: 300px;
  position: relative;
}
@media all and (max-width: 480px) {
  .smart .area_smart .sec_smart dl dt {
    width: 100%;
    margin: 0 !important;
  }
}
.smart .area_smart .sec_smart dl dt .no {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #53a263;
  color: #fff;
  font-size: 3rem;
  top: -10px;
  left: -10px;
  z-index: 1;
}
.smart .area_smart .sec_smart dl dt.twin {
  width: 450px;
  display: flex;
}
@media all and (max-width: 480px) {
  .smart .area_smart .sec_smart dl dt.twin {
    margin: 20px 0 0 0 !important;
  }
}
.smart .area_smart .sec_smart dl dt.twin > p {
  margin: 0 5px 0 0;
  display: block;
}
.smart .area_smart .sec_smart dl dt.twin > p img {
  width: 100%;
}
.smart .area_smart .sec_smart dl dd {
  width: calc(100% - 330px);
}
@media all and (max-width: 480px) {
  .smart .area_smart .sec_smart dl dd {
    width: 100%;
    margin: 20px 0 0 0;
  }
}
.smart .area_smart .sec_smart dl dd.twin {
  width: calc(100% - 470px);
}
@media all and (max-width: 480px) {
  .smart .area_smart .sec_smart dl dd.twin {
    width: 100%;
  }
}
.smart .area_smart .sec_smart dl dd.w100 {
  width: 100%;
}
.smart .area_smart .sec_smart dl dd > div {
  width: 100%;
}
.smart .area_smart .sec_smart dl dd > div .title {
  font-weight: bold;
  font-size: 2rem;
  line-height: 1.2em;
  background: rgba(60, 168, 82, 0.2);
  padding: 10px;
  box-sizing: border-box;
}
@media all and (max-width: 480px) {
  .smart .area_smart .sec_smart dl dd > div .title {
    font-size: 1.8rem;
  }
}
.smart .area_smart .sec_smart dl dd > div .title.red {
  background: rgba(225, 36, 27, 0.2);
  font-size: 1.7rem;
}
.smart .area_smart .sec_smart dl dd > div .txt {
  margin: 20px 0 0;
}
@media all and (max-width: 480px) {
  .smart .area_smart .sec_smart dl dd > div .txt {
    margin: 10px 0 0 0;
  }
}
.smart .area_smart .sec_smart dl dd > div .txt .red {
  color: #E50012;
}
.smart .area_smart .sec_smart dl dd > div ul {
  margin: 20px 0 0 0;
}
.smart .area_smart .sec_smart dl dd > div ul li {
  text-indent: -1.5em;
  margin: 0 0 0 1.5em;
}
.smart .area_smart .sec_smart dl dd > div ul li:before {
  content: "●";
  margin: 0 5px 0 0;
}

.weit .area_weit {
  display: flex;
  flex-wrap: wrap;
}
.weit .area_weit li {
  width: calc(50% - 20px);
  margin: 10px;
  padding: 30px;
  box-sizing: border-box;
  background: #fff;
}
@media all and (max-width: 480px) {
  .weit .area_weit li {
    width: 100%;
    margin: 0 0 15px 0;
    padding: 15px;
  }
}
.weit .area_weit li h3 {
  margin-bottom: 15px;
}
.weit .area_weit li > p {
  text-align: center;
  font-weight: bold;
}
.weit .area_weit li .box {
  padding: 15px;
  box-sizing: border-box;
  background: #F0F0F0;
  margin: 15px 0 0 0;
  font-size: 1.4rem;
}
.weit .area_weit li .box span {
  display: block;
  margin: 5px 0;
  font-weight: bold;
}
.weit .area_weit li .more_btn {
  margin-top: 15px;
}

.cv {
  padding: 0 !important;
}