@charset "UTF-8";

@media screen and (min-width: 768px) {
  .footer {
    padding-top: 237px;
  }
}
.footer {
  padding-top: 0px;
}
@media screen and (max-width: 767px) {
  footer#footer {
    margin-top: 26.6666666667vw;
  }
}
/* 
//////////////////////////////////////////////////////////////////////////////////////////
default settings
//////////////////////////////////////////////////////////////////////////////////////////
*/
#MO260129maria {
  --pc-width: 1400;
  --sp-width: 750;
  --pc-artboard-width: 490;
  --sp-artboard-width: 750;
  --formula: calc(var(--variable) * var(--ratio));
  --formula_pc: calc(var(--variable) * 1);
}

@media (min-width: 1401px) {
  #MO260129maria {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: 1px;
  }
}

@media (min-width: 768px) and (max-width: 1400px) {
  #MO260129maria {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: calc(100vw / var(--pc-width));
  }
}

@media (max-width: 767px) {
  #MO260129maria {
    --ratio: 1;
    --variable: calc(100vw / var(--sp-width));
  }
}

#MO260129maria img,
#MO260129maria .lp-mv-img picture {
  display: block;
  width: 100%;
  height: auto;
}

#MO260129maria h2,
#MO260129maria h3,
#MO260129maria p,
#MO260129maria li {
  margin-block: calc((1em - 1lh) / 2);
}

#MO260129maria .invisible-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/* 
//////////////////////////////////////////////////////////////////////////////////////////
common settings
//////////////////////////////////////////////////////////////////////////////////////////
*/
#MO260129maria {
  display: flex;
  position: relative;
  --yu-gochic:
    "游ゴシック体", "游ゴシック Medium", Yu Gothic Medium, Yu Gothic, YuGothic,
    yu-gothic-pr6n, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
  --font-credit: neue-haas-grotesk-display, sans-serif;
  --black: #000000;
  --font-medium: 500;
  font-feature-settings: "palt";
  font-style: normal;
  overflow-x: clip;
}
#MO260129maria .sec-set {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(490 * var(--formula_pc));
}
#MO260129maria [class*="__txt"] {
  font-family: var(--yu-gochic);
  color: var(--black);
  font-size: calc(24 * var(--formula));
  line-height: 1.916;
  letter-spacing: 0.05em;
  font-weight: var(--font-medium);
  text-align: justify;
  padding: 0 calc(43 * var(--formula));
  font-feature-settings: "pwid";
}
#MO260129maria [class*="__credit"] {
  font-family: var(--font-credit);
  color: var(--black);
  font-size: calc(24 * var(--formula));
  line-height: 2;
  letter-spacing: 0.02em;
  font-weight: var(--font-medium);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: calc(24 * var(--formula));
}
#MO260129maria [class*="__credit"] li {
  display: flex;
  gap: calc(17 * var(--formula));
}
#MO260129maria .fade-in {
  opacity: 0;
  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#MO260129maria .is-visible.fade-in {
  opacity: 1;
}
#MO260129maria .wipe-down {
  clip-path: inset(0 0 100% 0);
  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#MO260129maria .is-visible.wipe-down {
  clip-path: inset(0 0 0% 0);
}
/* 
//////////////////////////////////////////////////////////////////////////////////////////
layout settings
//////////////////////////////////////////////////////////////////////////////////////////
*/
#MO260129maria .lp-mv-area {
  position: sticky;
  top: 0;
  height: 100vh;
  flex: 1;
}
#MO260129maria .lp-mv-area a {
  width: 100%;
}
#MO260129maria .lp-mv-txt-01 {
  position: absolute;
  bottom: calc(12 * var(--formula_pc));
  left: calc(-3 * var(--formula_pc));
  width: calc(520 * var(--formula_pc));
  z-index: 5;
}

#MO260129maria .lp-mv-img {
  width: 100%;
  height: 100vh;
  z-index: 1;
  position: relative;
}
#MO260129maria .lp-mv-img picture,
#MO260129maria .lp-mv-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

#MO260129maria .lp-main-area {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#MO260129maria .lp-teaser {
  margin: calc(99 * var(--formula)) 0 calc(184 * var(--formula)) 0;
}

#MO260129maria .lp-teaser__txt {
  line-height: 2.166;
  text-align: center;
  padding: unset;
  font-feature-settings: "palt";
}
#MO260129maria .sec1-txt-01 {
  width: calc(568 * var(--formula));
}

#MO260129maria .sec1-img-01 {
  width: calc(690 * var(--formula));
  margin: calc(51 * var(--formula)) 0 0 0;
}

#MO260129maria .sec1-img-02 {
  width: calc(690 * var(--formula));
}

#MO260129maria .sec01__credit {
  margin: calc(44 * var(--formula)) 0 calc(100 * var(--formula))
    calc(30 * var(--formula));
}

#MO260129maria .sec1-img-03 {
  width: calc(570 * var(--formula));
}

#MO260129maria .sec1-txt-02 {
  width: calc(532 * var(--formula));
  margin: calc(80 * var(--formula)) 0 calc(76 * var(--formula))
    calc(11 * var(--formula));
}

#MO260129maria .sec02 {
  margin: calc(184 * var(--formula)) 0 calc(178 * var(--formula)) 0;
}
#MO260129maria .sec2-txt-01 {
  width: calc(637 * var(--formula));
}

#MO260129maria .sec2-img-01 {
  width: calc(750 * var(--formula));
  margin: calc(53 * var(--formula)) 0 calc(43 * var(--formula)) 0;
}

#MO260129maria .sec02__credit {
  margin: 0 0 calc(101 * var(--formula)) calc(30 * var(--formula));
}

#MO260129maria .sec2-img-02 {
  width: calc(570 * var(--formula));
}

#MO260129maria .sec2-txt-02 {
  width: calc(654 * var(--formula));
  margin: calc(80 * var(--formula)) 0 calc(75 * var(--formula))
    calc(-4 * var(--formula));
}

#MO260129maria .sec02__txt {
  padding: 0 calc(45 * var(--formula));
}

#MO260129maria .sec03 {
  margin: calc(6 * var(--formula)) 0 calc(184 * var(--formula)) 0;
}

#MO260129maria .sec3-txt-01 {
  width: calc(449 * var(--formula));
}

#MO260129maria .sec3-img-01 {
  width: calc(690 * var(--formula));
  margin: calc(53 * var(--formula)) 0 0 0;
}

#MO260129maria .sec03__credit {
  margin: calc(43 * var(--formula)) 0 calc(101 * var(--formula))
    calc(30 * var(--formula));
}

#MO260129maria .sec3-img-02 {
  width: calc(560 * var(--formula));
}

#MO260129maria .sec3-txt-02 {
  width: calc(648 * var(--formula));
  margin: calc(79 * var(--formula)) 0 calc(75 * var(--formula))
    calc(-10 * var(--formula));
}

#MO260129maria .sec03__txt {
  padding: 0 calc(45 * var(--formula));
}

#MO260129maria .sec4-txt-01 {
  width: calc(695 * var(--formula));
  margin: 0 0 calc(52 * var(--formula)) 0;
}

#MO260129maria .sec4-img-01 {
  width: calc(750 * var(--formula));
}

#MO260129maria .sec04__credit {
  margin: calc(43 * var(--formula)) 0 calc(101 * var(--formula))
    calc(30 * var(--formula));
}

#MO260129maria .sec4-img-02 {
  width: calc(570 * var(--formula));
}

#MO260129maria .sec4-txt-02 {
  width: calc(681 * var(--formula));
  margin: calc(80 * var(--formula)) 0 calc(73 * var(--formula)) 0;
}

#MO260129maria .sec04__txt {
  padding: 0 calc(45 * var(--formula));
}

#MO260129maria .lp-footer {
  margin: calc(198 * var(--formula)) 0 calc(210 * var(--formula)) 0;
}

#MO260129maria .footer-btn-01 {
  width: calc(675 * var(--formula));
}

#MO260129maria .footer-txt-01 {
  width: calc(115 * var(--formula));
  margin: calc(142 * var(--formula)) 0 calc(37 * var(--formula)) 0;
}

#MO260129maria .lp-footer__staff-credit {
  font-family: var(--font-credit);
  color: var(--black);
  font-size: calc(23 * var(--formula));
  line-height: 1.956;
  letter-spacing: 0.05em;
  font-weight: var(--font-medium);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(22 * var(--formula));
}

/* SP用設定 */
@media (max-width: 767px) {
  #MO260129maria .lp-mv-txt-01 {
    position: absolute;
    bottom: calc(15 * var(--formula));
    left: calc(-3 * var(--formula));
    width: calc(555 * var(--formula));
  }

  #MO260129maria .lp-mv-img {
    width: calc(750 * var(--formula));
    height: auto;
  }
  #MO260129maria {
    flex-direction: column;
  }
  #MO260129maria .lp-mv-area {
    position: relative;
    height: unset;
  }
  #MO260129maria .sec-set {
    width: 100%;
  }
  #footer {
    margin-top: 0;
  }
  #MO260129maria .lp-footer {
    margin: calc(198 * var(--formula)) 0 0 0;
  }
}