@charset "UTF-8";
/* =========================================================
   Lookbook — instant image switching / fixed 100svh
   ========================================================= */
body.lookbook,
body.page-template-lookbook,
body.page-id-lookbook {
  background: #fff;
  overscroll-behavior-y: none;
}

.lookbook-section {
  --lookbook-fixed-vh: 100svh;
  --lookbook-section-height: 100svh;
  position: relative;
  height: var(--lookbook-section-height);
  min-height: var(--lookbook-fixed-vh);
  background: #fff;
  color: #111;
  isolation: isolate;
}

.lookbook-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--lookbook-fixed-vh);
  min-height: var(--lookbook-fixed-vh);
  overflow: hidden;
  background: #fff;
  contain: paint;
}

/* 画像ステージ */
.lookbook-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/*
 * アニメーションは一切使用しません。
 * is-activeの付け替えと同時に画像が切り替わります。
 */
.lookbook-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(55vw, 900px);
  height: min(var(--lookbook-fixed-vh) * 0.94, 1080px);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, -50%, 0);
  transition: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  pointer-events: none;
}

.lookbook-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, -50%, 0);
  transition: none;
}

.lookbook-slide.is-leaving {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, -50%, 0);
  transition: none;
}

.lookbook-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}
@media screen and (max-width: 767px) {
  .lookbook-image {
    height: auto;
  }
}

/* プログレス */
.lookbook-progress {
  position: absolute;
  bottom: 1%;
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  width: clamp(48px, 7vw, 96px);
  height: 1px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.16);
}

.lookbook-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: #111;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* stickyを壊しやすい指定をLookbookページのみ解除 */
body.lookbook,
body.lookbook main,
body.lookbook .site,
body.lookbook .site-content,
body.lookbook .page-wrapper,
body.lookbook [data-barba=container] {
  overflow: visible;
  transform: none;
}

/* Tablet */
@media (max-width: 1024px) {
  .lookbook-slide {
    width: min(66vw, 760px);
    height: min(var(--lookbook-fixed-vh) * 0.91, 960px);
  }
}
/* Mobile */
@media (max-width: 767px) {
  html,
body.lookbook {
    overscroll-behavior-y: none;
  }
  .lookbook-sticky {
    height: var(--lookbook-fixed-vh, 100svh);
    min-height: var(--lookbook-fixed-vh, 100svh);
    max-height: var(--lookbook-fixed-vh, 100svh);
  }
  .lookbook-stage {
    padding: 60px 2.5%;
  }
  .lookbook-slide {
    width: min(84vw, 460px);
    height: min(var(--lookbook-fixed-vh) - 120px, 790px);
    transform: translate3d(-50%, -50%, 0);
    transition: none;
  }
  .lookbook-slide.is-active,
.lookbook-slide.is-leaving {
    transform: translate3d(-50%, -50%, 0);
    transition: none;
  }
}
@media (min-width: 768px) {
  .lookbook-stage {
    padding: 60px;
  }
  .lookbook-slide {
    width: min(100%, 1000px);
    height: calc(100svh - 120px);
  }
  .lookbook-image {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}
@media (max-width: 430px) {
  .lookbook-slide {
    width: 95%;
  }
}
/* =========================================================
   original
   ========================================================= */
/* スクロールバーを非表示（スクロールは可能） */
html,
body {
  -ms-overflow-style: none;
  /* IE, Edge */
  scrollbar-width: none;
  /* Firefox */
  height: 100svh;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

/* タイトル・カウンター */
.lookbook-title {
  position: absolute;
  bottom: 2%;
  left: 2%;
  font-family: "Roboto", sans-serif;
  font-size: 90%;
}

.lookbook-counter {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-size: 90%;
}
@media screen and (max-width: 767px) {
  .lookbook-counter {
    font-size: 10px;
  }
}

.lookbook_copyright {
  position: absolute;
  bottom: 2%;
  right: 2%;
  font-family: "Roboto", sans-serif;
  font-size: 90%;
}