@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
//////////////////////////////////////////////////////////////////////////////////////////
*/
#MO260212maria {
  --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) {
  #MO260212maria {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: 1px;
  }
}

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

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

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

#MO260212maria .footer-btn-01 a {
  display: block;
  width: 100%;
  height: auto;
}

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

#MO260212maria .invisible-heading {
  display: block;
  font-family: var(--ryo-text);
  color: var(--black);
  font-size: calc(48 * var(--formula));
  line-height: 1.625;
  letter-spacing: 0.12em;
  font-weight: var(--font-medium);
  text-align: center;
  padding-block: calc(88 * var(--formula)) calc(45 * var(--formula));
}
/* 
//////////////////////////////////////////////////////////////////////////////////////////
common settings
//////////////////////////////////////////////////////////////////////////////////////////
*/
#MO260212maria {
  display: flex;
  justify-content: space-between;
  position: relative;
  --ryo-text: "ryo-text-plusn", serif;
  --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;
  box-sizing: border-box;
  width: 100%;
}
#MO260212maria .sec-set {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; 
  max-width: 100%;
}
#MO260212maria .sec-inner {
  width: calc(490 * var(--formula_pc));
  margin: 0 auto;
}
#MO260212maria [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";
}
#MO260212maria [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));
}
#MO260212maria [class*="__credit"] li {
  display: flex;
  gap: calc(17 * var(--formula));
}
#MO260212maria .fade-in {
  opacity: 0;
  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#MO260212maria .is-visible.fade-in {
  opacity: 1;
}
#MO260212maria .wipe-down {
  clip-path: inset(0 0 100% 0);
  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#MO260212maria .is-visible.wipe-down {
  clip-path: inset(0 0 0% 0);
}
/* 
//////////////////////////////////////////////////////////////////////////////////////////
layout settings
//////////////////////////////////////////////////////////////////////////////////////////
*/
#MO260212maria .lp-mv-area{
  position: sticky;
  top: 0;
  height: 100vh;
  /* flex: 1; */
  overflow: hidden;
  width: 50%;
}

#MO260212maria .lp-mv-area a {
  width: 100%;
}

#MO260212maria .intro__title {
  position: absolute;
  bottom: calc(1 * var(--formula_pc));
  left: calc(-2 * var(--formula_pc));
  width: calc(535 * var(--formula_pc));
  z-index: 5;
}

#MO260212maria .mv-inner {
  width: 100%;
  height: 100vh;
  z-index: 1;
  position: relative;
}

#MO260212maria .intro__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

#MO260212maria .intro__image .intro__imageInner img {
  height: 100vh;
  object-fit: cover;
  object-position: top center;
}

#MO260212maria .lp-main-area {
  position: relative;
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
}

#MO260212maria .lp-teaser {
  margin: calc(100 * var(--formula)) 0 calc(185 * var(--formula)) 0;
}

#MO260212maria .lp-teaser__txt {
  line-height: 2.166;
  text-align: center;
  padding: unset;
  font-feature-settings: "palt";
}
#MO260212maria .sec1-txt-01 {
  width: calc(630 * var(--formula));
  margin: 0 auto;
  margin-left: calc(52 * var(--formula));
}

#MO260212maria .sec1-img-01 {
  width: calc(660 * var(--formula));
  margin: calc(50 * var(--formula)) auto 0;
}

#MO260212maria .sec01__credit {
  margin: calc(45 * var(--formula)) auto 0 calc(45 * var(--formula));
}

#MO260212maria .sec02 {
  margin: calc(186 * var(--formula)) auto calc(180 * var(--formula));
}
#MO260212maria .sec2-txt-01 {
  width: calc(649 * var(--formula));
  margin: 0 auto;
}

#MO260212maria .sec2-img-01 {
  width: calc(710 * var(--formula));
  margin: calc(50 * var(--formula)) auto 0;
}

#MO260212maria .sec02__credit {
  margin: calc(44 * var(--formula)) auto 0 calc(46 * var(--formula));
}

#MO260212maria .sec2-img-02 {
  width: calc(580 * var(--formula));
  margin: calc(80 * var(--formula)) auto 0;
}

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

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

#MO260212maria .sec3-txt-01 {
  width: calc(429 * var(--formula));
  margin: 0 auto;
}

#MO260212maria .sec3-img-01 {
  width: calc(750 * var(--formula));
  margin: calc(52 * var(--formula)) auto 0;
}

#MO260212maria .sec03__credit {
  margin: calc(45 * var(--formula)) auto 0 calc(45 * var(--formula));
}

#MO260212maria .sec3-img-02 {
  width: calc(600 * var(--formula));
  margin: calc(78 * var(--formula)) auto 0;
}

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

#MO260212maria .sec04 .sec-inner {
  width: 100%;
  margin: 0 auto;
}

#MO260212maria .sec4-txt-01 {
  width: calc(507 * var(--formula));
  margin: 0 auto;
}

#MO260212maria #sec4-slide {
  width: 100%;
  margin-top: calc(52 * var(--formula));
}

#MO260212maria #sec4-slide .splide__slide {
  width: calc(560 * var(--formula));
}

#MO260212maria .sec04__credit {
  margin: calc(46 * var(--formula)) auto 0 calc(45 * var(--formula));
}

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

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

#MO260212maria .footer-btn-01 {
  width: calc(675 * var(--formula));
  margin: 0 auto;
}

#MO260212maria .footer-txt-01 {
  width: calc(115 * var(--formula));
  margin: calc(146 * var(--formula)) auto calc(35 * var(--formula));
}

#MO260212maria .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) {
  #MO260212maria .mv-inner {
    width: calc(750 * var(--formula));
    height: fit-content;
  }
  #MO260212maria .intro__title {
    bottom: calc(32 * var(--formula));
    left: calc(0 * var(--formula));
    width: calc(570 * var(--formula));
  }

  #MO260212maria .intro__image {
    width: calc(750 * var(--formula));
    height: auto;
  }
  #MO260212maria {
    flex-direction: column;
  }
  #MO260212maria .lp-mv-area {
    position: relative;
    height: unset;
    width: 100%;
  }
  #MO260212maria .lp-main-area {
    display: block;
    width: 100%;
  }
  #MO260212maria .sec-set {
    width: 100%;
  }

  #MO260212maria .sec-inner {
    width: 100%;
  }

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

  #MO260212maria .intro__image .mv__slider img {
    height: 100%;
  }

}

@media (max-width: 767px) {
  #MO260212maria .pc_only {
    display: none;
  }
  #MO260212maria .sp_only {
    display: block;
  }
}

@media (min-width: 768px) {
  #MO260212maria .sec04__block {
    width: calc(490 * var(--formula_pc));
    margin: 0 auto;
  }
  #MO260212maria .footer-btn-01 {
    display: flex;
    justify-content: center;
  }

  #MO260212maria .pc_only {
    display: block;
  }
  #MO260212maria .sp_only {
    display: none;
  }
}