@charset "UTF-8";
/***************************************************************
 *
 * 				mogans　
 *
***************************************************************/
body {
  margin: 0;
}

#mgns_lp * {
  position: relative;
  box-sizing: border-box;
}

#mgns_lp img {
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: bottom;
}

#mgns_lp p,
#mgns_lp ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
			Font
*********************************************/
#mgns_lp {
  position: relative;
  overflow: hidden;
  font-size: 20px;
  line-height: 1.6em;
  color: #000;
  font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
}
#mgns_lp * {
  font-size: 20px;
}

#mgns_lp strong {
  font-weight: 800;
}

#mgns_lp .font_a {
  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Helvetica Neue", "Noto Sans Japanese", "メイリオ", "Meiryo", sans-serif;
}

/* 
			inview (ScrollTrigger)
*********************************************/
.inview {
  transition: all 1s ease;
}

.ivo {
  opacity: 0;
  filter: blur(12px);
}
.ivo.in-view {
  opacity: 1;
  filter: blur(0);
}

/***************************************************************
 *
 * sass media query
 *
***************************************************************/
/***************************************************************
 *
 * Stylesheet for LP
 *
***************************************************************/
/* 
			Responsive
*********************************************/
.lg_show,
.md_show,
.sm_show,
.xs_show,
.lg_showin,
.md_showin,
.sm_showin,
.xs_showin {
  display: none;
}

@media screen and (max-width: 1300px) {
  .lg_hide {
    display: none;
  }
  .lg_show {
    display: block;
  }
  .lg_showin {
    display: inline;
  }
}
@media screen and (max-width: 768px) {
  .md_hide {
    display: none;
  }
  .md_show {
    display: block;
  }
  .md_showin {
    display: inline;
  }
  #mgns_lp * {
    font-size: 2.6041666667vw;
    line-height: 1.4em;
  }
}
@media screen and (max-width: 600px) {
  .sm_hide {
    display: none;
  }
  .sm_show {
    display: block;
  }
  .sm_showin {
    display: inline;
  }
}
@media screen and (max-width: 414px) {
  .xs_hide {
    display: none;
  }
  .xs_show {
    display: block;
  }
  .xs_showin {
    display: inline;
  }
}
/***************************************************************
 *
 * 				 mogans　2025/11/20
 *
***************************************************************/
#lpxmas_pcbg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  margin: 0;
  background: url(img/051.png) no-repeat center center/cover;
}
#lpxmas_pcbg > li {
  position: absolute;
}
#lpxmas_pcbg > li:nth-child(1) {
  width: 31.6vw;
  height: 27.7vw;
  top: 0;
  left: 0;
}
#lpxmas_pcbg > li:nth-child(2) {
  width: 20.8vw;
  height: 29.5vw;
  top: 0;
  right: 0;
}
#lpxmas_pcbg > li:nth-child(3) {
  width: 20.55vw;
  height: 28.15vw;
  bottom: 0;
  left: 0;
}
#lpxmas_pcbg > li:nth-child(4) {
  width: 28.1vw;
  height: 31.4vw;
  bottom: 0;
  right: 0;
}
#lpxmas_pcbg > li:nth-child(5) {
  width: 5.3em;
  height: 34.6em;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  transform: translateX(-23.5em);
}
#lpxmas_pcbg > li:nth-child(6) {
  width: 4.6vw;
  height: 34.6vw;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
  transform: translateX(23.5em);
}
#lpxmas_pcbg > li:nth-child(7) {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
}
#lpxmas_pcbg > li:nth-child(8) {
  width: 22vw;
  height: 100vh;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
}
#lpxmas_pcbg > li:nth-child(9) {
  width: 25.1vw;
  height: 100vh;
  top: 0;
  right: 0;
  mix-blend-mode: screen;
}
#lpxmas_pcbg > li:nth-child(10) {
  width: 30.6vw;
  height: 100vh;
  top: 0;
  left: 0;
}
#lpxmas_pcbg > li:nth-child(11) {
  width: 30.15vw;
  height: 100vh;
  top: 0;
  right: 0;
}

#lxs_body {
  padding: 4em 0;
  width: 768px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #lxs_body {
    width: 100vw;
  }
}

#lxs_head {
  background: url(img/008.png) no-repeat center top/100% 100%;
  padding-bottom: 2em;
  z-index: 2;
}
#lxs_head > div {
  width: 100%;
  height: 53em;
  padding-top: 6em;
}
#lxs_head > div > img {
  position: absolute;
  max-width: none;
  z-index: 2;
  top: -0.5em;
  left: -3.5em;
  width: 46.95em;
  height: 41.4em;
}
#lxs_head > div > ul {
  padding: 3.5em 0 5.5em;
  margin-bottom: 2em;
}
#lxs_head > div > ul > li {
  transition: all 1.5s ease;
  opacity: 0;
  filter: blur(12px);
}
#lxs_head > div > ul > li.show {
  opacity: 1;
  filter: blur(0);
}
#lxs_head > div > ul > li:nth-child(1) {
  width: 25.45em;
  margin: 0 auto;
}
#lxs_head > div > ul > li:nth-child(2) {
  position: absolute;
  z-index: 2;
  width: 31.7em;
  height: 18.5em;
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
}
#lxs_head > div > ul > li:nth-child(3) {
  position: absolute;
  width: 14.5em;
  height: 6.7em;
  margin: 0 auto;
  top: 7em;
  left: 0;
  right: 0;
}
#lxs_head > div > ul > li:nth-child(4) {
  position: absolute;
  width: 22.65em;
  height: 32.05em;
  margin: 0 auto;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 1;
  filter: blur(0);
  filter: grayscale(100%);
  will-change: filter;
  transition: all 3s ease;
}
#lxs_head > div > ul > li:nth-child(4).show {
  filter: grayscale(0%);
}
#lxs_head > div > ul > li:nth-child(5) {
  position: absolute;
  width: 12.6em;
  height: 12.5em;
  bottom: 2.5em;
  right: 4.5em;
}
#lxs_head > h2 {
  width: 27.15em;
  padding-top: 2em;
  margin-bottom: 2.5em;
  margin-left: auto;
  margin-right: auto;
}
#lxs_head > h3 {
  width: 27.65em;
  margin-bottom: 1.5em;
  margin-left: auto;
  margin-right: auto;
}
#lxs_head > h4 {
  width: 36.225em;
  margin-left: auto;
  margin-right: auto;
}
#lxs_head > span:nth-child(5) {
  display: block;
  position: absolute;
  top: -4em;
  left: 2em;
  width: 5.75em;
  height: 15.6em;
}
#lxs_head > span:nth-child(6) {
  display: block;
  position: absolute;
  top: -4em;
  right: 1em;
  width: 6.3em;
  height: 19.65em;
}

#lxs_bottle > span {
  z-index: 1;
  display: block;
  width: 26.05em;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: -8em;
}
#lxs_bottle > div {
  z-index: 2;
  background: url(img/102.png) no-repeat center top/100% 100%;
  padding: 3em 0 2em;
}
#lxs_bottle > div > h2 {
  width: 20.35em;
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
}
#lxs_bottle > div > ul > li {
  width: 33.6em;
  margin: 0 auto 3.5em;
}
#lxs_bottle > strong {
  display: block;
  width: 38.3em;
  left: 0;
  padding: 3em 0 5em;
}
#lxs_bottle > strong > img:nth-child(2) {
  position: absolute;
  width: 27.35em;
  height: 26.8em;
  left: -3em;
  bottom: 0;
}
#lxs_bottle > strong > img:nth-child(3) {
  position: absolute;
  width: 19.05em;
  height: 26.05em;
  right: 0;
  bottom: 4em;
}

#lxs_refill > span {
  display: block;
  width: 38.25em;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: -8em;
}
#lxs_refill > div {
  background: url(img/202.png) no-repeat center top/100% 100%;
  padding: 3em 0 2em;
}
#lxs_refill > div > h2 {
  width: 20.625em;
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
}
#lxs_refill > div > ul > li {
  width: 33.6em;
  margin: 0 auto 3.5em;
}
#lxs_refill > strong {
  display: block;
  width: 38.3em;
  left: 0;
  padding: 3em 0 5em;
}
#lxs_refill > strong > img:nth-child(2) {
  position: absolute;
  width: 27.35em;
  height: 26.8em;
  left: -3em;
  top: 2em;
}
#lxs_refill > strong > img:nth-child(3) {
  position: absolute;
  width: 19.3em;
  height: 26.05em;
  right: 0;
  bottom: 4em;
}

#lxs_pres > span {
  display: block;
  width: 26.05em;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: -8em;
}
#lxs_pres > div {
  background: url(img/303.png) no-repeat center top/100% 100%;
  padding: 7em 0 2em;
}
#lxs_pres > div > img {
  position: absolute;
  width: 16.1em;
  height: 11.05em;
  top: -0.2em;
  left: -0.5em;
}
#lxs_pres > div > h2 {
  width: 20.625em;
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
}
#lxs_pres > div > h3 {
  width: 25.675em;
  margin-bottom: 2em;
  margin-top: 5em;
  margin-left: auto;
  margin-right: auto;
}
#lxs_pres > div > ul > li {
  width: 33.6em;
  margin: 0 auto 3.5em;
}
#lxs_pres > strong {
  display: block;
  width: 38.3em;
  left: 0;
  padding: 3em 0 5em;
}
#lxs_pres > strong > img:nth-child(2) {
  position: absolute;
  width: 27.35em;
  height: 26.8em;
  left: -3em;
  top: 2em;
}
#lxs_pres > strong > img:nth-child(3) {
  position: absolute;
  width: 20.05em;
  height: 29.05em;
  right: 0;
  bottom: 4em;
}

#lxs_bath > span {
  display: block;
  width: 26.05em;
  margin-left: auto;
  margin-right: 0;
  margin-bottom: -8em;
}
#lxs_bath > div {
  background: url(img/402.png) no-repeat center top/100% 100%;
  padding: 3em 0 2em;
}
#lxs_bath > div > h2 {
  width: 25.15em;
  margin-bottom: 2em;
  margin-left: auto;
  margin-right: auto;
}
#lxs_bath > div > ul > li {
  width: 33.6em;
  margin: 0 auto 3.5em;
}

#lxs_footer {
  padding: 18em 0 0;
}
#lxs_footer > img:nth-child(1) {
  position: absolute;
  top: -3em;
  left: 5em;
  width: 16.5em;
  height: 22.3em;
  mix-blend-mode: screen;
}
#lxs_footer > img:nth-child(2) {
  position: absolute;
  top: -5em;
  right: 2em;
  width: 11em;
  height: 24.9em;
  mix-blend-mode: screen;
}
#lxs_footer > p {
  width: 33.65em;
  margin: 0 auto;
}/*# sourceMappingURL=style.css.map */