@charset "UTF-8";
#footer {
  padding-top: 0;
}
#MO260522voices {
  --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) {
  #MO260522voices {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: 1px;
  }
}

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

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

#MO260522voices img {
  display: block;
  width: 100%;
  height: auto;
}

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

#MO260522voices .invisible-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: clip;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* --- 抽出されたCSS --- */

#MO260522voices {
  font-feature-settings: "palt";
  --black: #000000;
  --lime: #cae983;
  --white: #ffffff;
  --font-credit: neue-haas-grotesk-display, sans-serif;
  --font-neue: helvetica-neue-lt-pro, sans-serif;
  display: flex;
}

#MO260522voices .splide__slide[class*="modal-look"] {
  display: flex;
  flex-direction: column;
  align-items: start;
  position: relative;
  gap: calc(40 * var(--formula));
  width: calc(500 / 1400 * 100vw);
}

#MO260522voices [class*="lp-img-"][class*="--modal"] {
  width: calc(690 * var(--formula));
  /* aspect-ratio: 690 / 1035; */
  margin: calc(80 * var(--formula)) auto 0;
  height: auto;
  display: block;
  overflow: clip;
  background-color: #fff;
}

#MO260522voices [class*="lp-img-"][class*="--modal"] a {
  display: block;
  width: 100%;
  height: 100%;
}
#MO260522voices [class*="__credit"] {
  font-family: var(--font-credit);
  color: var(--black);
  font-size: calc(24 * var(--formula));
  line-height: 1.75;
  letter-spacing: 0.025em;
  text-align: left;
  font-weight: 400;
  width: calc(690 * var(--formula));
  margin: 0 auto;
}
#MO260522voices [class*="__credit"] li {
  display: flex;
  gap: calc(18 * var(--formula));
}

#MO260522voices [class*="__credit"] li:nth-of-type(1) {
  margin-bottom: calc(12 * var(--formula));
}

#MO260522voices [class*="lp-img-"] {
  z-index: 0;
  position: relative;
  background: #fff;
}

#MO260522voices .lp-mv-area {
  position: relative;
  width: 100%;
}
#MO260522voices .lp-mv-video {
  position: relative;
  width: calc(720 * var(--formula));
  margin: calc(15 * var(--formula)) auto 0;
  overflow: clip;
}

#MO260522voices #js-mv-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* サウンドボタン */
#MO260522voices .video-sound-btn {
  position: absolute;
  bottom: calc(20 * var(--formula));
  left: calc(20 * var(--formula));
  width: calc(45 * var(--formula));
  height: calc(45 * var(--formula));
  background: 0;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 0;
}

#MO260522voices .video-sound-btn[data-state="off"] .icon-on {
  display: none;
}
#MO260522voices .video-sound-btn[data-state="off"] .icon-off {
  display: block;
}

#MO260522voices .video-sound-btn[data-state="on"] .icon-on {
  display: block;
}
#MO260522voices .video-sound-btn[data-state="on"] .icon-off {
  display: none;
}
#MO260522voices .lp-main-area {
  width: calc(490 * var(--formula_pc));
  max-width: 100%;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

#MO260522voices [id^="look"] .splide__pagination {
  top: calc(24 * var(--formula));
  padding: 0;
  opacity: 0;
  bottom: unset;
  right: unset;
  left: calc(17 * var(--formula));
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease-in 0.4s;
}

#MO260522voices .splide:has(.is-revealed) .splide__pagination {
  opacity: 1;
  pointer-events: auto;
}

#MO260522voices [id^="look"] .splide__pagination__page {
  width: calc(48 * var(--formula));
  height: calc(2 * var(--formula));
  background: var(--black);
  opacity: 0.4;
  border-radius: 0;
  margin: 0 calc(4 * var(--formula));
  padding: 0;
  border: none;
  position: relative;
  overflow: clip;
  transition: opacity 0.3s;
}

#MO260522voices [id^="look"] .splide__pagination__page.is-active {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1);
}

#MO260522voices [id^="look"] .splide__pagination__page.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--black);
  animation: splide-gauge 2s linear forwards;
}

@keyframes splide-gauge {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

#MO260522voices .js-modal-open {
  padding: 0;
  position: relative;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  display: block; /* インラインブロックの隙間を消すためblock化 */
}

#MO260522voices .modal-open-01 {
  position: absolute;
  width: calc(48 * var(--formula));
  bottom: calc(15 * var(--formula));
  left: calc(15 * var(--formula));
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s linear 0.4s;
}

#MO260522voices .is-revealed .modal-open-01 {
  opacity: 1;
}

#MO260522voices .contents-title {
  width: 100%;
  max-width: calc(719 * var(--formula));
  margin: calc(34 * var(--formula)) auto 0;
}

#MO260522voices .contents-txt {
  width: calc(30 * var(--formula));
  position: absolute;
  top: calc(1016 * var(--formula));
  right: calc(5 * var(--formula));
  z-index: 2;
}

#MO260522voices .contents-lead {
  margin: calc(120 * var(--formula)) auto calc(60 * var(--formula));
  width: 100%;
}

#MO260522voices .contents-lead h3 {
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  font-size: calc(24 * var(--formula));
  letter-spacing: 0.05em;
  line-height: 2;
  font-weight: 300;
  color: var(--black);
  text-align: center;
}

#MO260522voices .about-btn {
  display: block;
  width: 100%;
  max-width: calc(255 * var(--formula));
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin: 0 auto calc(66 * var(--formula)) calc(480 * var(--formula));
}

#MO260522voices .lp-img-01 { width: 100%; }
#MO260522voices .lp-img-02 { width: 100%; }
#MO260522voices .lp-img-03 { width: 100%; }
#MO260522voices .lp-img-04 { width: 100%; }
#MO260522voices .lp-img-05 { width: 100%; }
#MO260522voices #lp-modal .splide__track { overflow: clip; }
#MO260522voices .lp-img-06 { width: 100%; }

#MO260522voices .lp-footer {
  padding: 0 0 calc(310 * var(--formula)) 0;
  width: 100%;
}

#MO260522voices .lp-footer-txt-01 {
  width: calc(480 * var(--formula));
  margin: calc(150 * var(--formula)) auto 0;
}

#MO260522voices .lp-footer-txt-01 a {
  display: block;
  width: 100%;
  height: auto;
}

#MO260522voices .lp-footer__staff-credit {
  font-family: var(--font-credit);
  color: var(--black);
  font-size: calc(23 * var(--formula));
  line-height: 1.5217391304;
  letter-spacing: 0.075em;
  text-align: center;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  margin: calc(122 * var(--formula)) auto 0;
  gap: calc(12 * var(--formula));
}
#MO260522voices [class^="lp-img-"] {
  position: relative;
  overflow: clip;
  background-color: transparent;
}
#MO260522voices .js-modal-open [class^="lp-img-"] img {
  height: auto;
  opacity: 0;
  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);
  transform-origin: center;
}

#MO260522voices .reveal-curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  opacity: 1;
  transition: transform 0.5s cubic-bezier(0.09, 0.25, 0.38, 0.99), opacity 0.2s linear 0.3s;
  transform-origin: center;
}

#MO260522voices .js-modal-open.is-revealed [class^="lp-img-"] img {
  opacity: 1;
}

#MO260522voices .is-revealed .reveal-curtain {
  opacity: 0;
}

/* モーダル基礎スタイル */
#MO260522voices .lp-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
}
#MO260522voices .lp-modal.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#MO260522voices .modal__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(42, 250, 81, 0.6);
}

#MO260522voices #lp-about-modal .modal__overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  background: linear-gradient(rgba(42, 250, 81, 0.6), rgba(42, 250, 81, 0.6)), url(../img/about_img.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#MO260522voices .modal__content {
  position: relative;
  width: 90%;
  max-width: calc(490 * var(--formula_pc));
  overflow: visible;
}

/* Aboutモーダルのコンテンツ中身用スタイル */
#MO260522voices .about-modal-body {
  width: 100%;
  margin: 0 auto;
  max-height: 100vh;
}

#MO260522voices .about-modal-body .about-modal-title {
  width: calc(493 * var(--formula));
  margin: 0 auto;
}

#MO260522voices .about-modal-body .about-txt-box {
  width: 100%;
  margin: 0 auto;
}

#MO260522voices .about-modal-body .about-txt-ja {
  font-family: hiragino-kaku-gothic-pron, sans-serif;
  font-weight: 300;
  font-size: calc(24 * var(--formula));
  text-align: center;
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: calc(90 * var(--formula));
}
#MO260522voices .about-modal-body .about-txt-en {
  font-family: var(--font-neue);
  font-weight: 400;
  font-size: calc(27 * var(--formula));
  text-align: center;
  line-height: 1.6666666667;
  letter-spacing: 0;
  margin-top: calc(38 * var(--formula));
}

#MO260522voices .modal__close {
  width: calc(40 * var(--formula));
  height: calc(40 * var(--formula));
  position: absolute;
  top: calc(-50 * var(--formula_pc));
  right: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 5;
}

#MO260522voices #modal-slider .splide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-95%);
  width: calc(22 * var(--formula));
  height: calc(46 * var(--formula));
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  border: none;
  opacity: 1;
  pointer-events: auto;
}

#MO260522voices #modal-slider .splide__arrow--next {
  right: calc(-40 * var(--formula_pc));
  background-image: url(../img/modal-next-01.svg);
}
#MO260522voices #modal-slider .splide__arrow--prev {
  left: calc(-40 * var(--formula_pc));
  background-image: url(../img/modal-prev-01.svg);
}
#MO260522voices #modal-slider .splide__arrow svg {
  display: none;
}

#MO260522voices .splide__slide[class*="modal-look"] {
  gap: calc(52 * var(--formula));
  width: 100% !important;
}

#MO260522voices .sandals-collection {
  width: 100%;
  display: block;
  visibility: visible;
  opacity: 1;
  padding-block: calc(68 * var(--formula)) calc(146 * var(--formula));
  background-color: #2afa51;
  overflow: clip;
}
#MO260522voices .sandals-collection-title {
  width: 100%;
  max-width: calc(594 * var(--formula));
  margin: 0 auto;
}
#MO260522voices .loop-track {
  display: flex;
  width: max-content;
  margin: calc(100 * var(--formula)) auto 0;
}
#MO260522voices .collection-slide {
  display: flex;
  /* 左へ横滑りする無限アニメーションを適用（30sの数値を小さくすると速くなります） */
  animation: cssLoopScroll 30s linear infinite; 
}
#MO260522voices .collection-img {
  width: calc(480 * var(--formula));
  height: auto;
  margin-right: calc(30 * var(--formula));
  flex-shrink: 0;
}
#MO260522voices .collection-img a {
  display: block;
  width: 100%;
}

@keyframes cssLoopScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 1セット分の幅（100%）だけ左にスライドしたら、一瞬で0に戻すことで無限ループに見せる */
    transform: translateX(-100%); 
  }
}

@media (max-width: 767px) {
  #MO260522voices {
    flex-direction: column;
    background: #ffffff;
  }

  #MO260522voices .lp-left-area,
  #MO260522voices .lp-right-area {
    display: none;
  }

  #MO260522voices .lp-mv-area {
    position: relative;
    height: auto;
    top: 0;
  }

  #MO260522voices .lp-main-area {
    width: 100%;
  }
  
  /* SP用の下部マージン（共通指定から分離してここで定義） */
  #MO260522voices .lp-main-area > * {
    width: 100%; 
  }
  
  #MO260522voices #js-mv-video {
    background-color: var(--white);
    background-size: cover;
    width: 100%;
    height: auto;
    display: block;
  }

  #MO260522voices .sp-sticky-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  #MO260522voices .about-btn {
    position: -webkit-sticky;
    position: sticky;
    top: 85%;
    align-self: center; 
    order: -1; 
    z-index: 100;
    border: none;
    background: transparent;
    padding: 0;
  }

  #MO260522voices .modal__content {
    width: 100%;
    max-width: calc(690 * var(--formula));
  }

  #MO260522voices #lp-about-modal .modal__content {
    width: 100%;
    max-width: calc(640 * var(--formula));
  }

  #MO260522voices [class*="lp-img-"][class*="--modal"] {
    width: 100%;
  }
  #MO260522voices [class*="__credit"] {
    width: 100%;
  }

  #MO260522voices .modal__close {
    right: calc(0 * var(--formula));
    top: calc(15 * var(--formula));
  }

  #MO260522voices #lp-about-modal .modal__close {
    right: calc(-24 * var(--formula));
    top: calc(-326 * var(--formula));
  }
  #MO260522voices #modal-slider .splide__arrow--next { right: calc(-12 * var(--formula)); }
  #MO260522voices #modal-slider .splide__arrow--prev { left: calc(-12 * var(--formula)); }

  #footer {
    padding-top: 0;
    margin-top: calc(-110 * (100vw / 750));
    position: relative;
  }

  .sp_only {
    display: block;
  }
}

@media (min-width: 768px) {
  .sp_only {
    display: none;
  }

  #MO260522voices .lp-left-area {
    width: 100%;
    flex: 1;
    display: block;
    top: 0;
    position: sticky;
    height: 100vh;
    order: 1;
  }

  #MO260522voices .lp-left-inner {
    width: 100%;
    height: 100%;
    position: relative;
  }
  #MO260522voices .lp-left-inner .lp-left-txt01 {
    /* width: calc(85 * var(--formula_pc));
    position: absolute;
    top: calc(22 * var(--formula_pc));
    left: calc(28 * var(--formula_pc)); */
    width: 6.1vw;
    position: absolute;
    top: 4.2rem;
    left: 2.8rem;
    z-index: 2;
  }

  #MO260522voices .lp-left-inner .lp-left-txt02 {
    /* width: calc(400 * var(--formula_pc));
    position: absolute;
    bottom: calc(33 * var(--formula_pc));
    left: calc(20 * var(--formula_pc)); */
    width: 27.4vw;
    position: absolute;
    bottom: 1.2rem;
    left: 2rem;
    z-index: 2;
  }

  /* #MO260522voices .lp-left-inner .lp-left-txt02 p {
    font-family: var(--font-neue);
    font-weight: 400;
    font-size: calc(14 * var(--formula_pc));
    line-height: 1.25;
    letter-spacing: 0.025em;
    color: #2afa51;
  } */

  #MO260522voices .lp-left-inner .lp-left-txt02 img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  #MO260522voices .lp-left-inner .lp-left-txt02 p:nth-of-type(1) {
    margin-bottom: calc(20 * var(--formula_pc));
  }

  #MO260522voices .lp-right-area {
    width: 100%;
    flex: 1;
    display: block;
    top: 0;
    position: sticky;
    height: 100vh;
    order: 3;
  }

  #MO260522voices .lp-right-inner {
    width: 100%;
    height: 100%;
    position: relative;
  }
  #MO260522voices .lp-right-inner .lp-right-txt01 {
    /* width: calc(87 * var(--formula_pc));
    position: absolute;
    bottom: calc(30 * var(--formula_pc));
    right: calc(28 * var(--formula_pc)); */
    width: 6.2vw;
    position: absolute;
    bottom: 1rem;
    right: 2.8rem;
    z-index: 2;
  }

  #MO260522voices .lp-main-area {
    order: 2;
  }

  /* PC時の縦並び余白の最適化（Look同士の隙間を排除） */
  #MO260522voices .lp-main-area > * {
    margin-bottom: 0; 
  }
  
  #MO260522voices .contents-txt {
    right: calc(-4 * var(--formula_pc));
  }

  #MO260522voices .lp-modal {
    left: 50%;
    transform: translateX(-50%);
    width: calc(490 * var(--formula_pc));
  }

  #MO260522voices .modal__content {
    width: 100%;
  }
  /* #MO260522voices [class*="lp-img-"][class*="--modal"] {
    width: 100%;
    margin-top: 0;
  }
  #MO260522voices [class*="__credit"] {
    width: 100%;
  } */
  #MO260522voices [class*="lp-img-"][class*="--modal"] {
    margin: calc(132 * var(--formula)) auto 0;
    max-height: 75vh;
    height: auto;
    overflow-y: clip;
  }
  #MO260522voices #modal-slider .splide__arrow {
    transform: translateY(-40%);
  }
  /* PC時のAbout専用モーダルの幅を最適化 */
  #MO260522voices #lp-about-modal .about-modal-body {
    width: 100%;
  }

  #MO260522voices .about-modal-body .about-txt-box {
    width: calc(410 * var(--formula_pc));
  }

  #MO260522voices .about-modal-body .about-modal-title {
    margin: calc(110 * var(--formula_pc)) auto 0;
  }

  #MO260522voices .about-modal-body .about-txt-en {
    margin-top: calc(22 * var(--formula_pc));
  }

  #MO260522voices .modal__close {
    top: calc(44 * var(--formula_pc));
    right: calc(20 * var(--formula_pc));
  }
  #MO260522voices #lp-about-modal .modal__close {
    top: calc(-104 * var(--formula_pc));
    right: calc(20 * var(--formula_pc));
  }

  #MO260522voices #modal-slider .splide__arrow--prev { left: calc(12 * var(--formula_pc)); }
  #MO260522voices #modal-slider .splide__arrow--next { right: calc(12 * var(--formula_pc)); }

  .footer .toTop {
    right: 50%;
    margin-right: -23rem;
  }
}