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

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

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

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

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

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

#MO260305maria .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.145em;
  font-weight: var(--font-medium);
  text-align: center;
  padding-block: calc(86 * var(--formula)) calc(48 * var(--formula));
}
/* 
//////////////////////////////////////////////////////////////////////////////////////////
common settings
//////////////////////////////////////////////////////////////////////////////////////////
*/
#MO260305maria {
  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%;
}
#MO260305maria .sec-set {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; 
  max-width: 100%;
}
#MO260305maria .sec-inner {
  width: calc(490 * var(--formula_pc));
  margin: 0 auto;
}
#MO260305maria [class*="__txt"] {
  font-family: var(--yu-gochic);
  color: var(--black);
  font-size: calc(24 * var(--formula));
  line-height: 1.9166666667;
  letter-spacing: 0.02em;
  font-weight: var(--font-medium);
  text-align: justify;
  padding: 0 calc(54 * var(--formula));
  font-feature-settings: "pwid";
}
#MO260305maria [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));
}
#MO260305maria [class*="__credit"] li {
  display: flex;
  gap: calc(17 * var(--formula));
}
#MO260305maria .fade-in {
  opacity: 0;
  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#MO260305maria .is-visible.fade-in {
  opacity: 1;
}
#MO260305maria .wipe-down {
  clip-path: inset(0 0 100% 0);
  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
}
#MO260305maria .is-visible.wipe-down {
  clip-path: inset(0 0 0% 0);
}
/* 
//////////////////////////////////////////////////////////////////////////////////////////
layout settings
//////////////////////////////////////////////////////////////////////////////////////////
*/
#MO260305maria .lp-mv-area{
  position: sticky;
  top: 0;
  height: 100vh;
  /* flex: 1; */
  overflow: hidden;
  width: 50%;
}

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

#MO260305maria .intro__title {
  position: absolute;
  bottom: calc(15 * var(--formula_pc));
  left: 50.4%;
  transform: translateX(-50%);
  width: calc(648 * var(--formula_pc));
  z-index: 5;
  pointer-events: none;
}

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

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

#MO260305maria .intro__image .intro__imageInner img {
  width: 100%;
  object-fit: cover;
  object-position: top center;
}

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

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

#MO260305maria .lp-teaser__txt {
  line-height: 2.166;
  text-align: center;
  padding: unset;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
}
#MO260305maria .sec1-txt-01 {
  width: calc(548 * var(--formula));
  margin: 0 auto;
}

#MO260305maria .sec1-img-01 {
  width: calc(750 * var(--formula));
  margin: calc(68 * var(--formula)) auto 0;
}
#MO260305maria .sec1-img-02 {
  width: calc(640 * var(--formula));
  margin: calc(98 * var(--formula)) auto 0 calc(110 * var(--formula));
}
#MO260305maria .sec1-img-03 {
  width: calc(560 * var(--formula));
  margin: calc(20 * var(--formula)) auto 0 0;
}
#MO260305maria #sec01__h4 {
  padding-block: calc(86 * var(--formula)) calc(50 * var(--formula));
}
#MO260305maria .sec01__credit {
  margin: calc(48 * var(--formula)) auto 0 calc(55 * var(--formula));
}

#MO260305maria .sec02 {
  margin: calc(187 * var(--formula)) auto 0;
}
#MO260305maria .sec2-txt-01 {
  width: calc(377 * var(--formula));
  margin: 0 auto;
  margin-left: calc(188 * var(--formula));
}

#MO260305maria .sec2-img-01 {
  width: calc(690 * var(--formula));
  margin: calc(54 * var(--formula)) auto 0 calc(60 * var(--formula));
}

#MO260305maria .sec02__credit {
  margin: calc(48 * var(--formula)) auto 0 calc(55 * var(--formula));
}

#MO260305maria .sec2-img-02 {
  width: calc(640 * var(--formula));
  margin: calc(82 * var(--formula)) auto 0 0;
}

#MO260305maria .sec03 {
  margin: calc(186 * var(--formula)) auto 0;
}
#MO260305maria .sec3-txt-01 {
  width: calc(594 * var(--formula));
  margin: 0 auto;
}
#MO260305maria .sec3-img-01 {
  width: calc(650 * var(--formula));
  margin: calc(56 * var(--formula)) auto 0;
}

#MO260305maria .sec03__credit {
  margin: calc(48 * var(--formula)) auto 0 calc(56 * var(--formula));
}

#MO260305maria .sec3-img-02 {
  width: calc(650 * var(--formula));
  margin: calc(20 * var(--formula)) auto 0;
}

#MO260305maria .sec04 {
  margin: calc(184 * var(--formula)) auto 0;
}
#MO260305maria .sec4-txt-01 {
  width: calc(548 * var(--formula));
  margin: 0 auto;
}
#MO260305maria .sec4-img-01 {
  width: calc(750 * var(--formula));
  margin: calc(67 * var(--formula)) auto 0;
}

#MO260305maria .sec04__credit {
  margin: calc(50 * var(--formula)) auto 0 calc(56 * var(--formula));
}

#MO260305maria .sec4-img-02 {
  width: calc(630 * var(--formula));
  margin: calc(80 * var(--formula)) auto 0;
}

#MO260305maria .sec05 {
  margin: calc(186 * var(--formula)) auto 0;
}
#MO260305maria .sec5-txt-01 {
  width: calc(447 * var(--formula));
  margin: 0 auto;
}
#MO260305maria .sec5-img-01 {
  width: calc(700 * var(--formula));
  margin: calc(55 * var(--formula)) auto 0 0;
}

#MO260305maria .sec05__credit {
  margin: calc(50 * var(--formula)) auto 0 calc(56 * var(--formula));
}

#MO260305maria .sec5-img-02 {
  width: calc(650 * var(--formula));
  margin: calc(80 * var(--formula)) auto 0 calc(100 * var(--formula));
}

#MO260305maria .sec06 {
  margin: calc(185 * var(--formula)) auto 0;
}
#MO260305maria .sec6-txt-01 {
  width: calc(563 * var(--formula));
  margin: 0 auto;
}
#MO260305maria .sec6-img-01 {
  width: calc(640 * var(--formula));
  margin: calc(55 * var(--formula)) auto 0;
}

#MO260305maria .sec06__credit {
  margin: calc(50 * var(--formula)) auto 0 calc(56 * var(--formula));
}

#MO260305maria .sec6-img-02 {
  width: calc(640 * var(--formula));
  margin: calc(20 * var(--formula)) auto 0;
}
#MO260305maria #sec06__h4 {
  letter-spacing: 0.105em;
}

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

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

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

#MO260305maria .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) {
  #MO260305maria .mv-inner {
    width: calc(750 * var(--formula));
    height: fit-content;
  }
  #MO260305maria .intro__title {
    bottom: calc(12 * var(--formula));
    left: 50.5%;
    transform: translateX(-50%);
    width: calc(696 * var(--formula));
  }

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

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

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

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

}

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

@media (min-width: 768px) {

  #MO260305maria .mv-inner {
    width: 100%;
    height: 100vh;
  }

  #MO260305maria .intro__image {
    width: 100%;
    height: 100%;
  }

  #MO260305maria .intro__image .intro__imageInner img {
    height: 100vh;
  }

  #MO260305maria .footer-btn-01 {
    display: flex;
    justify-content: center;
  }

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