@charset "UTF-8";

/* --- デフォルトCSS設定 --- */

#footer {

  padding-top: 0;

}

#MO260514tops {

  min-width: 100%;

  font-feature-settings: "palt";

  position: relative;

  display: flex;

  --black: #000000;

  --white: #ffffff;

  --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-pr, sans-serif;

  --font-m: 500;

  --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) {

  #MO260514tops {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: 1px;

  }

}

@media (min-width: 768px) and (max-width: 1400px) {

  #MO260514tops {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: calc(100vw / var(--pc-width));

  }

}

@media (max-width: 767px) {

  #MO260514tops {

    --ratio: 1;

    --variable: calc(100vw / var(--sp-width));

  }

}



#MO260514tops img {

  display: block;

  width: 100%;

  height: auto;

}



#MO260514tops h2,

#MO260514tops h3,

#MO260514tops p,

#MO260514tops li {

  margin-block: calc((1em - 1lh) / 2);

}



#MO260514tops .invisible-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}



#MO260514tops [class*="-img-"]:has(a) {

  background: var(--white);

}



/* --- 属性セレクタ設定 --- */



#MO260514tops [class*="__txt"] {

  font-family: var(--yu-gochic);

  color: var(--black);

  font-size: calc(24 * var(--formula));

  line-height: calc(42 / 24);

  letter-spacing: 0.025em;

  text-align: justify;

  font-weight: var(--font-m);

  padding-inline: calc(55 * var(--formula));

  box-sizing: border-box;

}



#MO260514tops [class*="__credit"] {

  display: flex;

  flex-direction: column;

  align-self: start;

  margin: calc(50 * var(--formula)) 0 0 calc(55 * var(--formula));

  gap: calc(18 * var(--formula));

}



#MO260514tops [class*="__credit"] li {

  display: flex;

  font-family: var(--font-credit);

  color: var(--black);

  font-size: calc(24 * var(--formula));

  line-height: 1;

  letter-spacing: 0.025em;

  text-align: left;

  font-weight: var(--font-m);

  gap: calc(18 * var(--formula));

}



/* --- 固有クラス設定 --- */



#MO260514tops .z1-relative {

  z-index: 1;

  position: relative;

}



#MO260514tops .z5-absolute {

  z-index: 5;

  position: absolute;

}



#MO260514tops .sec-set {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: calc(490 * var(--formula_pc));

}



#MO260514tops .self-start {

  align-self: start;

}



#MO260514tops .self-end {

  align-self: end;

}



/* --- 抽出されたCSS（上から順） --- */



#MO260514tops .lp-mv-area {

  flex: 1;

  position: sticky;

  top: 0;

  height: 100vh;

}



#MO260514tops .lp-mv-img-01,

#MO260514tops .lp-mv-img-01 a {

  width: 100%;

  height: 100%;

}

#MO260514tops .lp-mv-img-01 img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



#MO260514tops .lp-mv-txt-01 {

  width: calc(692 * var(--formula_pc));

  bottom: calc(150 * var(--formula_pc));

  left: 50%;

  transform: translateX(-50%);

}



#MO260514tops .lp-main-area {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

}



#MO260514tops .teaser-sec {

  margin: calc(100 * var(--formula)) 0 calc(139 * var(--formula)) 0;

}



#MO260514tops .terser__txt {

  text-align: center;

  line-height: 2;

  padding-inline: unset;

}



#MO260514tops .sec1 {

  margin: 0 0 calc(160 * var(--formula)) 0;

}



#MO260514tops .sec1-txt-01 {

  width: calc(260 * var(--formula));

}



#MO260514tops .sec1-img-01 {

  width: calc(675 * var(--formula));

  margin: calc(65 * var(--formula)) 0 calc(100 * var(--formula)) 0;

}



#MO260514tops .sec1-img-02 {

  width: calc(750 * var(--formula));

  margin: 0 0 calc(80 * var(--formula)) 0;

}



#MO260514tops .sec2 {

  margin: 0 0 calc(160 * var(--formula)) 0;

}



#MO260514tops .sec2-txt-01 {

  width: calc(260 * var(--formula));

}



#MO260514tops .sec2-img-01 {

  width: calc(690 * var(--formula));

  margin: calc(65 * var(--formula)) 0 calc(80 * var(--formula)) 0;

}



#MO260514tops .sec2-img-02 {

  width: calc(645 * var(--formula));

  margin: 0 0 calc(80 * var(--formula)) 0;

}



#MO260514tops .sec3 {

  margin: 0 0 calc(160 * var(--formula)) 0;

}



#MO260514tops .sec3-txt-01 {

  width: calc(260 * var(--formula));

}



#MO260514tops .sec3-img-01 {

  width: calc(750 * var(--formula));

  margin: calc(65 * var(--formula)) 0 calc(100 * var(--formula)) 0;

}



#MO260514tops #sec3-slide {

  width: calc(675 * var(--formula));

  margin: 0 0 calc(100 * var(--formula)) 0;

}

#MO260514tops .splide__pagination {

  bottom: calc(-20 * var(--formula));

  padding: 0;

  left: unset;

  right: 0;

  gap: calc(12 * var(--formula));

}

#MO260514tops .splide__pagination__page {

  margin: 0;

  border-radius: unset;

  background: rgba(0, 0, 0, 0.4);

  height: calc(5 * var(--formula));

  width: calc(72 * var(--formula));

  position: relative;

  overflow: hidden;

  opacity: 1;

}

#MO260514tops .splide__pagination__page::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 0; /* 最初は 0 */

  height: 100%;

  background: var(--black);

}

#MO260514tops .splide__pagination__page.is-active::before {

  animation: splide-progress 4500ms linear forwards;

}

@keyframes splide-progress {

  0% {

    width: 0;

  }

  100% {

    width: 100%;

  }

}

#MO260514tops .splide__pagination__page.is-active {

  transform: scale(1);

  opacity: 1;

}



#MO260514tops #sec3-slide .splide__list {

  width: calc(675 * var(--formula));

}



#MO260514tops .sec4 {

  margin: 0 0 calc(160 * var(--formula)) 0;

}



#MO260514tops .sec4-txt-01 {

  width: calc(260 * var(--formula));

}



#MO260514tops .sec4-img-01 {

  width: calc(690 * var(--formula));

  margin: calc(65 * var(--formula)) 0 calc(80 * var(--formula)) 0;

}



#MO260514tops .sec4-img-02 {

  width: calc(660 * var(--formula));

  margin: 0 0 calc(80 * var(--formula)) 0;

}



#MO260514tops .sec5 {

  margin: 0 0 calc(160 * var(--formula)) 0;

}



#MO260514tops .sec5-txt-01 {

  width: calc(262 * var(--formula));

}



#MO260514tops #sec5-slide {

  width: calc(690 * var(--formula));

  margin: calc(65 * var(--formula)) 0 calc(100 * var(--formula)) 0;

}

#MO260514tops #sec5-slide .splide__list {

  width: calc(690 * var(--formula));

}



#MO260514tops .sec5-img-03 {

  width: calc(675 * var(--formula));

  margin: 0 0 calc(80 * var(--formula)) 0;

}



#MO260514tops .sec6 {

  margin: 0 0 calc(160 * var(--formula)) 0;

}



#MO260514tops .sec6-txt-01 {

  width: calc(332 * var(--formula));

}



#MO260514tops .sec6-img-01 {

  width: calc(690 * var(--formula));

  margin: calc(107 * var(--formula)) 0 calc(80 * var(--formula)) 0;

}



#MO260514tops .sec6-img-02 {

  width: calc(675 * var(--formula));

  margin: 0 0 calc(80 * var(--formula)) 0;

}



#MO260514tops .sec6__credit {

  margin: calc(40 * var(--formula)) 0 0 calc(55 * var(--formula));

}



#MO260514tops .sec7 {

  margin: 0 0 calc(160 * var(--formula)) 0;

}



#MO260514tops .sec7-txt-01 {

  width: calc(260 * var(--formula));

}



#MO260514tops .sec7-img-01 {

  width: calc(690 * var(--formula));

  margin: calc(65 * var(--formula)) 0 calc(80 * var(--formula)) 0;

}



#MO260514tops .sec7-img-02 {

  width: calc(660 * var(--formula));

  margin: 0 0 calc(80 * var(--formula)) 0;

}



#MO260514tops .sec8 {

  margin: 0 0 calc(160 * var(--formula)) 0;

}



#MO260514tops .sec8-txt-01 {

  width: calc(271 * var(--formula));

}



#MO260514tops .sec8-img-01 {

  width: calc(750 * var(--formula));

  margin: calc(65 * var(--formula)) 0 calc(100 * var(--formula)) 0;

}



#MO260514tops .sec8-img-02 {

  width: calc(690 * var(--formula));

  margin: 0 0 calc(80 * var(--formula)) 0;

}



#MO260514tops .sec9 {

  margin: 0 0 calc(200 * var(--formula)) 0;

}



#MO260514tops .sec9-txt-01 {

  width: calc(294 * var(--formula));

}



#MO260514tops .sec9-img-01 {

  width: calc(690 * var(--formula));

  margin: calc(107 * var(--formula)) 0 calc(80 * var(--formula)) 0;

}



#MO260514tops .sec9-img-02 {

  width: calc(645 * var(--formula));

  margin: 0 0 calc(80 * var(--formula)) 0;

}



#MO260514tops .lp-footer {

  margin: 0 0 calc(208 * var(--formula)) 0;

}



#MO260514tops .footer-txt-01 {

  width: calc(660 * var(--formula));

}



#MO260514tops .footer-txt-02 {

  width: calc(95 * var(--formula));

  margin: calc(122 * var(--formula)) 0 calc(45 * var(--formula)) 0;

}



#MO260514tops .lp-footer__staff-credit {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: calc(22 * var(--formula));

}

#MO260514tops .lp-footer__staff-credit li {

  display: flex;

  font-family: var(--font-credit);

  color: var(--black);

  font-size: calc(23 * var(--formula));

  line-height: 1;

  letter-spacing: 0.05em;

  text-align: left;

  font-weight: var(--font-m);

}

@media (max-width: 767px) {

  #MO260514tops {

    flex-direction: column;

    align-items: center;

  }

  #MO260514tops .lp-mv-area {

    position: relative;

    height: auto;

  }

  #MO260514tops .sec-set {

    width: 100%;

  }

  #MO260514tops .lp-mv-img-01 {

    width: calc(750 * var(--formula));

    height: auto;

  }

  #MO260514tops .lp-mv-txt-01 {

    width: calc(742 * var(--formula));

    bottom: calc(84 * var(--formula));

  }

}

/* 

////////////////////////////////////////////

animation

////////////////////////////////////////////

*/



.fade-in {

  opacity: 0;

  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);

}

.is-visible.fade-in {

  opacity: 1;

}

.slide-left {

  opacity: 0;

  transform: translateX(40px);

  transition: all 1s ease-out;

}

.is-visible.slide-left {

  opacity: 1;

  transform: translateX(0);

}



.slide-right {

  opacity: 0;

  transform: translateX(-40px);

}

.is-visible.slide-right {

  opacity: 1;

  transform: translateX(0);

  transition: all 1s ease-out;

}