@charset "utf-8";

/* ---------------------------------------------
Reset
--------------------------------------------- */
body {
  margin: 0;
  padding: 0;
}
/* Modern browser */
#lp_macalemon1 *,
#lp_macalemon1 *::before,
#lp_macalemon1 *::after{box-sizing:border-box}
#lp_macalemon1 *{margin:0;padding:0;}
#lp_macalemon1 img,
#lp_macalemon1 picture,
#lp_macalemon1 video,
#lp_macalemon1 canvas,
#lp_macalemon1 svg{display:block;max-width:100%}
#lp_macalemon1 input,
#lp_macalemon1 button,
#lp_macalemon1 textarea,
#lp_macalemon1 select{font:inherit}
#lp_macalemon1 p,
#lp_macalemon1 h1,
#lp_macalemon1 h2,
#lp_macalemon1 h3,
#lp_macalemon1 h4,
#lp_macalemon1 h5,
#lp_macalemon1 h6{overflow-wrap:break-word}

/* template */
.l-header,
.c-breadcrumbs,
.l-bottom,
.l-footer,
.l-copyright {
  display: none !important;
}
.u-contents,
.u-container {
  padding: 0 !important;
}

/* addition */
#lp_macalemon1 img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
#lp_macalemon1 em {
  font-style: normal;
}
#lp_macalemon1 small {
  font-size: 70%;
}

#lp_macalemon1 ul,
#lp_macalemon1 ol,
#lp_macalemon1 li {
  padding: 0;
  list-style: none;
}


/* ---------------------------------------------
font
--------------------------------------------- */
html #lp_macalemon1  {
  font-family: 'Noto Sans JP', sans-serif;
}

html body #lp_macalemon1 ,
#lp_macalemon1 table th,
#lp_macalemon1 table td {
  line-height: 1.6;
  color: #000;
  font-size: 3.2vw;
}
@media screen and (min-width:751px) {
  html body #lp_macalemon1 ,
  #lp_macalemon1 table th,
  #lp_macalemon1 table td {
    font-size: 24px;
  }
}

#lp_macalemon1 strong,
#lp_macalemon1 em {
  font-weight: 700;
}


/* ---------------------------------------------
link
--------------------------------------------- */
#lp_macalemon1 a,
#lp_macalemon1 a:link,
#lp_macalemon1 a:visited {
  color: #1e87f0;
}
#lp_macalemon1 a:hover {
  color: #f01e1e;
  text-decoration: none;
}


/* ---------------------------------------------
width
--------------------------------------------- */
#lp_macalemon1.lp_page__wrapper {
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width:751px) {
  #lp_macalemon1.lp_page__wrapper {
    width: 750px;
  }
}

#lp_macalemon1.lp_page__wrapper .contentsWrapper {
  width: 92.2%;
  margin: 0 auto;
}


/* ---------------------------------------------
cmn
--------------------------------------------- */
#lp_macalemon1.lp_page__wrapper .sec {
  margin: 0 0 4em;
}

#lp_macalemon1.lp_page__wrapper .sec .secTtl {
  margin-bottom: 1.5em;
  text-align: center;
  font-size: 5.2vw;
  font-weight: 700;
}
@media screen and (min-width:751px) {
  #lp_macalemon1.lp_page__wrapper .sec .secTtl {
    font-size: 39px;
  }
}

#lp_macalemon1.lp_page__wrapper .sec h2 {
  margin: 0 0 2em;
}
#lp_macalemon1.lp_page__wrapper .sec h3 {
  margin: 0 0 1em;
}

#lp_macalemon1.lp_page__wrapper p {
  margin: 0 0 2em;
}

#lp_macalemon1.lp_page__wrapper sup {
  font-size: 40%;
  vertical-align: super;
}

#lp_macalemon1.lp_page__wrapper .btn a:hover {
  filter: saturate(130%);
}

#lp_macalemon1.lp_page__wrapper .grn1 {
  color: #0c9e6e;
}

#lp_macalemon1.lp_page__wrapper .note small {
  font-size: 2.7vw;
  display: block;
}
@media screen and (min-width:751px) {
  #lp_macalemon1.lp_page__wrapper .note small {
    font-size: 14px;
  }
}
#lp_macalemon1.lp_page__wrapper .note1 small {
  padding-left: 1em;
  text-indent: -1em;
}
#lp_macalemon1.lp_page__wrapper .note2 small {
  padding-left: 2em;
  text-indent: -2em;
}

#lp_macalemon1.lp_page__wrapper .spBr {
  display: block;
}
@media screen and (min-width:751px) {
  #lp_macalemon1.lp_page__wrapper .spBr {
    display: none;
  }
}

#lp_macalemon1.lp_page__wrapper .fKng1 {
  letter-spacing: -.1em;
  display: inline !important;
}

#lp_macalemon1.lp_page__wrapper .secBgSt1 {
  width: 94%;
  margin-right: auto;
  margin-left: auto;
  padding: 3em 0;
  background-color: #fff;
  border-radius: 4vw;
  box-shadow: 0px 14px 19px 0px rgba(0, 0, 0, .08);
}
@media screen and (min-width:751px) {
  #lp_macalemon1.lp_page__wrapper .secBgSt1 {
    border-radius: 30px;
  }
}

#lp_macalemon1.lp_page__wrapper .txtAreaSt1 {
  text-align: center;
  line-height: 2.3;
}

#lp_macalemon1.lp_page__wrapper .linkSt1 a {
  color: #000;
  text-decoration: underline;
}

#lp_macalemon1.lp_page__wrapper .bgSt1 {
  margin-bottom: 4em;
  padding: 2em 0;
  text-align: center;
  background-color: #f7f7f0;
  border-radius: 2.6666vw;
}
@media screen and (min-width:751px) {
  #lp_macalemon1.lp_page__wrapper .bgSt1 {
    border-radius: 20px;
  }
}

/* btn */
#lp_macalemon1.lp_page__wrapper .btnSt1 {
  width: 57.233%;
  margin: 0 auto;
}
#lp_macalemon1.lp_page__wrapper .btnSt1 .area {
  padding: .8em 0;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-size: 3.3333vw;
  font-weight: 400;
  background-color: #000;
  border-radius: 5em;
  display: block;
  box-shadow: 0px 7px 9px 0px rgba(0, 0, 0, .13);
}
@media screen and (min-width:751px) {
  #lp_macalemon1.lp_page__wrapper .btnSt1 .area {
    font-size: 25px;
  }
}

/* cta */
#lp_macalemon1.lp_page__wrapper .cta .ctaBtnArea {
  margin-bottom: 2em;
}
#lp_macalemon1.lp_page__wrapper .cta .ctaBtnArea .ctaBtn .area {
  padding: .4em 0;
  background-color: #0c9e6e;
  font-size: 4.2666vw;
  font-weight: 700;
}
@media screen and (min-width:751px) {
  #lp_macalemon1.lp_page__wrapper .cta .ctaBtnArea .ctaBtn .area {
    font-size: 32px;
  }
}
#lp_macalemon1.lp_page__wrapper .cta .ctaCoupon {
  margin-bottom: 2em;
}
#lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .txtArea1 {
  margin-bottom: 1em;
  text-align: center;
  font-size: 5.2vw;
  font-weight: 600;
}
@media screen and (min-width:751px) {
  #lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .txtArea1 {
    font-size: 39px;
  }
}
#lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .txtArea1 .txt1 {
  margin-bottom: .2em;
}
#lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .txtArea1 .txt2 {
  margin-bottom: 0;
  padding: .05em 1em;
  color: #fff;
  background-color: #ea5572;
  display: inline-block;
}
#lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .coupon {
  width: 92.31%;
  margin: 0 auto .5em;
  padding: .5em;
  background-color: #fff21d;
  display: block;
}
#lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .coupon .flexArea {
  margin-bottom: .5em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 7%;
}
#lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .coupon .logo {
  width: 42.014%;
  margin: 0;
}
#lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .coupon .txt1 {
  margin: 0;
  line-height: 1.1;
  font-size: 6.6666vw;
  font-weight: 700;
}
@media screen and (min-width:751px) {
  #lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .coupon .txt1 {
    font-size: 50px;
  }
}
#lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .coupon .txt1 .txt {
  margin: 0;
}
#lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .coupon .txt1 .txt .fs1 {
  font-size: 118%;
}
#lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .coupon .txt1 .txt .fs2 {
  font-size: 89%;
}
#lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .coupon .code {
  width: 80%;
  margin: 0 auto;
  padding: .2em 1em;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 1em;
}
#lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .coupon .code .ttl {
  margin: 0;
  padding: 0 .5em;
  color: #fff;
  font-size: 2.1333vw;
  background-color: #ea5572;
}
@media screen and (min-width:751px) {
  #lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .coupon .code .ttl {
    font-size: 16px;
  }
}
#lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .coupon .code .codeNum {
  margin: 0;
  letter-spacing: .1em;
  font-size: 3.2vw;
  font-weight: 600;
  display: block;
}
@media screen and (min-width:751px) {
  #lp_macalemon1.lp_page__wrapper .cta .ctaCoupon .coupon .code .codeNum {
    font-size: 24px;
  }
}

#lp_macalemon1.lp_page__wrapper .cta .ctaItem {
  margin-bottom: 2em;
}
#lp_macalemon1.lp_page__wrapper .cta .ctaItem .figImg {
  margin: 0 auto;
}
#lp_macalemon1.lp_page__wrapper .cta1 .ctaItem .figImg {
  width: 47.077%;
}
#lp_macalemon1.lp_page__wrapper .cta3 .ctaItem .figImg {
  width: 89.233%;
}

#lp_macalemon1.lp_page__wrapper .cta3 .ctaItemName {
  margin-bottom: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 5%;
}
#lp_macalemon1.lp_page__wrapper .cta3 .ctaItemName .name {
  padding: .3em .8em;
  border: 2px solid #000;
  display: inline-block;
}
#lp_macalemon1.lp_page__wrapper .cta3 .ctaItemName .name .ttl {
  margin: 0;
  font-size: 3.7333vw;
}
@media screen and (min-width:751px) {
  #lp_macalemon1.lp_page__wrapper .cta3 .ctaItemName .name .ttl {
    font-size: 28px;
  }
}
#lp_macalemon1.lp_page__wrapper .cta3 .ctaItemName .price {
  margin: 0;
}
#lp_macalemon1.lp_page__wrapper .cta3 .ctaItemName .price .num {
  margin: 0;
  font-size: 12.6666vw;
  font-weight: 900;
  display: flex;
  align-items: baseline;
  gap: 0 .05em;
}
@media screen and (min-width:751px) {
  #lp_macalemon1.lp_page__wrapper .cta3 .ctaItemName .price .num {
    font-size: 95px;
  }
}
#lp_macalemon1.lp_page__wrapper .cta3 .ctaItemName .price .num .unit {
  font-size: 58%;
  position: relative;
}
#lp_macalemon1.lp_page__wrapper .cta3 .ctaItemName .price .num .unit .tax {
  white-space: nowrap;
  font-size: 28%;
  font-weight: 500;
  position: absolute;
  top: -.5em;
  left: -.4em;
}


/* ---------------------------------------------
base
--------------------------------------------- */
#lp_macalemon1.lp_page__wrapper {
  background-color: #fff21d;
}


/* ---------------------------------------------
#pageHeader
--------------------------------------------- */
#lp_macalemon1 #pageHeader {
  margin: 0;
  padding: 1em 0;
  background-color: #fff;
}
#lp_macalemon1 #pageHeader .copy {
  text-align: center;
}
#lp_macalemon1 #pageHeader .copy .txt {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 1.5%;
}
#lp_macalemon1 #pageHeader .copy .txt .txt1 {
  width: 35.601%;
}
#lp_macalemon1 #pageHeader .copy .txt .txt2,
#lp_macalemon1 #pageHeader .copy .txt .txt3 {
  font-size: 5.3333vw;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 #pageHeader .copy .txt .txt2,
  #lp_macalemon1 #pageHeader .copy .txt .txt3 {
    font-size: 40px;
  }
}
#lp_macalemon1 #pageHeader .copy .txt .txt2 {
  color: #a9a9a9;
  font-weight: 300;
}
#lp_macalemon1 #pageHeader .copy .txt .txt3 {
  font-weight: 600;
}


/* ---------------------------------------------
#mainContents
--------------------------------------------- */
#lp_macalemon1 #mainContents {
  position: relative;
  z-index: 2;
}


/* contentHeader */
#lp_macalemon1 #hero {
  padding: 0 0 2.5em;
}
#lp_macalemon1 #hero .mainCopy {
  margin-bottom: 2em;
  position: relative;
}
#lp_macalemon1 #hero .mainCopy span {
  display: block;
}
#lp_macalemon1 #hero .mainCopy .copy {
  margin-bottom: 4em;
  padding-top: 2.5em;
  position: relative;
  z-index: 2;
}
#lp_macalemon1 #hero .mainCopy .copy .txt1 {
  line-height: 1.3;
  text-align: center;
  font-size: 10vw;
  font-weight: 800;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 #hero .mainCopy .copy .txt1 {
    font-size: 75px;
  }
}
#lp_macalemon1 #hero .mainCopy .copy .txt2 {
  line-height: 2;
  font-size: 5.4666vw;
  font-weight: 600;
  position: absolute;
  top: 46.6666vw;
  left: 8%;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 #hero .mainCopy .copy .txt2 {
    font-size: 41px;
    top: 350px;
  }
}
#lp_macalemon1 #hero .mainCopy .mv {
  width: 100%;
  position: relative;
  z-index: 1;
}
#lp_macalemon1 #hero .mainCopy .mv .figImg {
  width: 100%;
  position: relative;
  z-index: 1;
}
#lp_macalemon1 #hero .mainCopy .mv .txt1 {
  width: 30%;
  margin: 0;
  aspect-ratio: 1 / 1;
  text-align: center;
  color: #fff;
  line-height: 1.4;
  font-size: 5.4666vw;
  font-weight: 700;
  background-color: #0c9e6e;
  border-radius: 50%;
  position: absolute;
  right: 3.5%;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 #hero .mainCopy .mv .txt1 {
    font-size: 41px;
  }
}
#lp_macalemon1 #hero .pageTitle {
  margin: 0;
}
#lp_macalemon1 #hero .pageTitle .logo {
  width: 75.867%;
  margin: 0 auto 1em;
  display: block;
}
#lp_macalemon1 #hero .pageTitle .txt {
  margin: 0;
  font-size: 6.4vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 1%;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 #hero .pageTitle .txt {
    font-size: 48px;
  }
}
#lp_macalemon1 #hero .pageTitle .txt .txt2 {
  width: 33.601%;
  margin: 0;
  display: block;
}


/* contents */
#lp_macalemon1 #mainContents #sec1 {
  padding-bottom: .5em;
}
#lp_macalemon1 #mainContents #sec1 .recommendation .txt1 {
  font-size: 4.2666vw;
  font-weight: 700;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 #mainContents #sec1 .recommendation .txt1 {
    font-size: 32px;
  }
}
#lp_macalemon1 #mainContents #sec1 .recommendation .figImg {
  width: 87.54%;
  margin: 0 auto 1em;
}
#lp_macalemon1 #mainContents #sec1 .recommendation .recommendList {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 5%;
}
#lp_macalemon1 #mainContents #sec1 .recommendation .recommendList li {
  width: 27%;
  padding: .3em 0;
  font-size: 2.5333vw;
  white-space: nowrap;
  overflow: hidden;
  background-color: #fff;
  border-radius: 3em;
  border: 1px solid #000;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 #mainContents #sec1 .recommendation .recommendList li {
    font-size: 19px;
  }
}
#lp_macalemon1 #mainContents #sec1 .secTtlArea .secTtl span {
  display: block;
}
#lp_macalemon1 #mainContents #sec1 .secTtlArea .secTtl .txt1 {
  margin-bottom: .5em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 3%;
}
#lp_macalemon1 #mainContents #sec1 .secTtlArea .secTtl .txt1 .logo {
  width: 38%;
}


#lp_macalemon1 #mainContents #sec2 .figImg1 {
  width: 56.924%;
  margin: 0 auto 2em;
}
#lp_macalemon1 #mainContents #sec2 .detail {
  margin-bottom: 3em;
}
#lp_macalemon1 #mainContents #sec2 .detail:last-child {
  margin-bottom: 0;
}
#lp_macalemon1 #mainContents #sec2 .detail .ttlArea {
  margin-bottom: 2em;
}
#lp_macalemon1 #mainContents #sec2 .detail .ttlArea .ttl {
  margin-bottom: 0;
  font-size: 4.5333vw;
  font-weight: 700;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 #mainContents #sec2 .detail .ttlArea .ttl {
    font-size: 34px;
  }
}
#lp_macalemon1 #mainContents #sec2 .detail .txtArea {
  width: 88%;
  margin: 0 auto;
  padding-bottom: 1px;
  text-align: left;
}
#lp_macalemon1 #mainContents #sec2 .detail .figImg2 {
  width: 90%;
  margin: 0 auto;
  padding: 1.5em 0;
  background-color: #fff;
}
#lp_macalemon1 #mainContents #sec2 .detail .figImg2 figcaption {
  margin-bottom: 1em;
  font-size: 2.9333vw;
  font-weight: 600;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 #mainContents #sec2 .detail .figImg2 figcaption {
    font-size: 22px;
  }
}
#lp_macalemon1 #mainContents #sec2 .detail .figImg2 .img {
  width: 92.31%;
  margin: 0 auto;
}


#lp_macalemon1 #mainContents #sec3 .figImg1 {
  width: 89.233%;
  margin: 0 auto 2em;
}
#lp_macalemon1 #mainContents #sec3 .secTtl {
  margin-bottom: 1em;
}
#lp_macalemon1 #mainContents #sec3 .figImg2 {
  width: 95.32%;
  margin: 0 auto 2em;
}
#lp_macalemon1 #mainContents #sec3 .howToMake {
  width: 96%;
  margin: 0 auto 4em;
}
#lp_macalemon1 #mainContents #sec3 .howToMake .txtArea {
  padding: .5em 0 .7em;
  text-align: center;
  background-color: #fff;
  border-radius: 3em;
  border: 1px solid #000;
  box-shadow: 0px 7px 9px 0px rgba(0, 0, 0, .13);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 3%;
}
#lp_macalemon1 #mainContents #sec3 .howToMake .txtArea .txt {
  margin: 0;
  font-size: 3.8666vw;
  font-weight: 400;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 #mainContents #sec3 .howToMake .txtArea .txt {
    font-size: 29px;
  }
}
#lp_macalemon1 #mainContents #sec3 .howToMake .txtArea .icon {
  width: 20px;
  margin-top: .2em;
  aspect-ratio: 10 / 1;
  position: relative;
  transition: all .3s;
}
#lp_macalemon1 #mainContents #sec3 .howToMake .txtArea:hover .icon {
  transform: rotate(180deg);
}
#lp_macalemon1 #mainContents #sec3 .howToMake .txtArea .icon::before,
#lp_macalemon1 #mainContents #sec3 .howToMake .txtArea .icon::after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: #000;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#lp_macalemon1 #mainContents #sec3 .howToMake .txtArea .icon::after {
  transform: rotate(90deg);
}
#lp_macalemon1 #mainContents #sec3 .product {
  padding-top: 1em;
}
#lp_macalemon1 #mainContents #sec3 .figImg3 {
  width: 96.03%;
  margin: 0 auto 1em;
}


/* ---------------------------------------------
#pageFooter
--------------------------------------------- */
#lp_macalemon1 #pageFooter {
  margin: 0;
  font-size: 3vw;
  position: relative;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 #pageFooter {
    font-size: 16px;
  }
}
#lp_macalemon1 #pageFooter .footerNav {
  margin: 0;
  padding: 20px 0 10px;
  text-align: center;
}
#lp_macalemon1 #pageFooter .footerNav ul {
  margin: 0 0 2em;
  padding: 0;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 #pageFooter .footerNav ul {
    display: flex;
    justify-content: center;
  }
}
#lp_macalemon1 #pageFooter .footerNav ul li {
  margin: 0 1em;
  padding: 0;
}
#lp_macalemon1 #pageFooter .footerNav ul li a:link,
#lp_macalemon1 #pageFooter .footerNav ul li a:visited {
  color: #000;
}
#lp_macalemon1 #pageFooter .copyright {
  margin: 0;
  text-align: center;
  padding: 2em 0;
  font-size: 2vw;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 #pageFooter .copyright {
    font-size: 14px;
  }
}


/* ---------------------------------------------
modal
--------------------------------------------- */
/* micromodal */
@keyframes mmfadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes mmfadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}
@keyframes mmslideIn {
  from {transform: translateY(15%);}
  to {transform: translateY(0);}
}
@keyframes mmslideOut {
  from {transform: translateY(0);}
  to {transform: translateY(-10%);}
}
#lp_macalemon1 .modal {
  display: none;
  position: relative;
  z-index: 1000;
}
#lp_macalemon1 .modal.is-open {
  display: block;
}
#lp_macalemon1 .modal[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
#lp_macalemon1 .modal[aria-hidden="false"] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
#lp_macalemon1 .modal[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
#lp_macalemon1 .modal[aria-hidden="true"] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
#lp_macalemon1 .modal .modal__container,
#lp_macalemon1 .modal .modal__overlay {
  will-change: transform;
}
#lp_macalemon1 .modal__overlay {
  background: rgba(0, 0, 0, .7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
#lp_macalemon1 .modal__container {
  width: 90%;
  max-height: 100vh;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 .modal__container {
    width: 750px;
  }
}
#lp_macalemon1 .modal .stickyArea {
  text-align: right;
  position: sticky;
  top: 0;
  z-index: 2;
}
#lp_macalemon1 .modal .modal__close {
  white-space: nowrap;
  font-size: 2vw;
  font-weight: 600;
  border: 0;
  right: 0;
  position: absolute;
  outline: 0;
  cursor: pointer;
  background-color: rgba(255, 255, 255, .3);
}
@media screen and (min-width:751px) {
  #lp_macalemon1 .modal .modal__close {
    font-size: 15px;
    right: auto;
    left: 100%;
  }
}
#lp_macalemon1 .modal .modal__close:before {
  content: "\2715";
  line-height: 1;
  font-weight: 300;
  font-size: 6.6666vw;
  display: block;
  transition: transform .2s;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 .modal .modal__close:before {
    font-size: 50px;
  }
}
#lp_macalemon1 .modal .modal__close:hover:before {
  transform: scale(.8);
}
#lp_macalemon1 .modal .modal_cont {
  height: 100vh;
  position: relative;
  z-index: 1;
  overflow-y: auto;
}
#lp_macalemon1 .modal img {
  width: 100%;
  height: auto;
}

/* modal */
#lp_macalemon1 .modal_recipe .recipes {
  background-color: #fff;
}
#lp_macalemon1 .modal_recipe .recipes .modal_ttlArea,
#lp_macalemon1 .modal_recipe .recipes .recipeArea .ttlArea {
  margin: 0;
  padding: 1em 0;
  text-align: center;
  position: sticky;
  top: 0;
  left: 0;
}
#lp_macalemon1 .modal_recipe .recipes .modal_ttlArea {
  color: #fff;
  background-color: #000;
}
#lp_macalemon1 .modal_recipe .recipes .modal_ttlArea .ttl {
  margin: 0;
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .ttlArea {
  background-color: #fff21d;
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .ttlArea .ttl {
  margin: 0;
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList {
  margin: 0;
  padding: 0 0 2em;
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList:last-child {
  padding-bottom: 1px;
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe {
  padding: 2em 0;
  border-bottom: 2px solid #000;
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe:last-child {
  border-bottom: none;
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeTtl {
  margin-bottom: 1em;
  text-align: center;
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeTtl .ttl {
  margin: 0;
  font-size: 3.3333vw;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeTtl .ttl {
    margin: 0;
    font-size: 25px;
  }
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeItem {
  display: block;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeItem {
    display: flex;
    justify-content: center;
    gap: 0 5%;
  }
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeItem .figImg {
  width: 40%;
  margin: 0 auto 1em;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeItem .figImg {
    width: 25%;
    margin: 0;
  }
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeItem .detail {
  width: 90%;
  margin: 0 auto;
}
@media screen and (min-width:751px) {
  #lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeItem .detail {
    width: 65%;
    margin: 0;
  }
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeItem .detail .ingred {
  margin: 0 0 1em;
  padding: 1em;
  background-color: #f5f4f4;
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeItem .detail .process {
  margin: 0 0 1em;
  padding-left: 1.5em;
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeItem .detail .process li {
  list-style: decimal;
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeItem .detail .point {
  padding: 1em;
  border-radius: .5em;
  border: 2px solid #ccc;
  display: flex;
  gap: 0 .5em;
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeItem .detail .point .ttl {
  margin: 0;
  white-space: nowrap;
}
#lp_macalemon1 .modal_recipe .recipes .recipeArea .recipeList .recipe .recipeItem .detail .point .txt {
  margin: 0;
}