/* ========================================
   REGATTO SUIT COLLECTION
   STYLE
======================================== */

* {
  box-sizing: border-box;
}


/* ========================================
   BODY
======================================== */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;

  background: #ffffff;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;
}


body {
  overflow-x: hidden;
}


/* ========================================
   COLLECTION
======================================== */

.collection {
  width: 100%;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;

  background: #ffffff;
}


/* ========================================
   SLIDER
======================================== */

.slider {
  width: 100%;
  max-width: 1200px;

  margin: 0 auto;

  position: relative;
}


/* ========================================
   TRACK
======================================== */

.track {
  width: 100%;

  overflow: hidden;

  position: relative;

  touch-action: pan-y;

  -webkit-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;

  cursor: grab;
}


.track.dragging {
  cursor: grabbing;
}


/* ========================================
   SLIDES
======================================== */

.slides {
  display: flex;

  width: 100%;

  will-change: transform;

  transform: translate3d(0, 0, 0);
}


/* ========================================
   SLIDE
======================================== */

.slide {
  flex: 0 0 100%;

  width: 100%;

  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;

  background: #ffffff;
}


/* ========================================
   SLIDE IMAGE

   pointer-events は none にしない
   タップを確実に受け取る
======================================== */

.slide img {
  display: block;

  width: 100%;
  height: auto;

  max-width: 100%;

  object-fit: contain;

  -webkit-user-select: none;
  user-select: none;

  -webkit-user-drag: none;

  -webkit-touch-callout: none;

  cursor: zoom-in;
}


/* ========================================
   COUNTER
======================================== */

.counter {
  margin-top: 14px;

  font-size: 13px;

  line-height: 1;

  letter-spacing: 0.12em;

  color: #222222;

  text-align: center;

  -webkit-user-select: none;
  user-select: none;
}


/* ========================================
   HOME BUTTON
======================================== */

.home-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-top: 18px;
  margin-bottom: 30px;

  min-width: 110px;
  height: 38px;

  padding: 0 22px;

  border: 1px solid #222222;

  background: #ffffff;

  color: #222222;

  text-decoration: none;

  font-size: 12px;

  letter-spacing: 0.16em;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}


.home-button:hover {
  background: #222222;

  color: #ffffff;
}


/* ========================================
   ZOOM OVERLAY
======================================== */

.zoom-overlay {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: none;

  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 100vh;

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

  overflow: hidden;

  /*
    独自のピンチズームを使うため
    ブラウザのジェスチャーを止める
  */
  touch-action: none;

  overscroll-behavior: none;

  -webkit-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;

  -webkit-tap-highlight-color: transparent;
}


.zoom-overlay.active {
  display: flex;
}


/* ========================================
   ZOOM AREA
======================================== */

.zoom-area {
  position: relative;

  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  touch-action: none;

  -webkit-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;
}


/* ========================================
   ZOOM IMAGE
======================================== */

.zoom-area img {
  display: block;

  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  object-fit: contain;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  transform-origin: center center;

  will-change: transform;

  touch-action: none;

  -webkit-user-select: none;
  user-select: none;

  -webkit-user-drag: none;

  -webkit-touch-callout: none;

  pointer-events: auto;

  cursor: grab;
}


.zoom-area img:active {
  cursor: grabbing;
}


/* ========================================
   CLOSE BUTTON
======================================== */

.zoom-close {
  position: absolute;

  top: 18px;
  right: 18px;

  z-index: 10001;

  width: 42px;
  height: 42px;

  padding: 0;

  border: none;

  background: transparent;

  color: #ffffff;

  font-size: 36px;

  font-weight: 200;

  line-height: 42px;

  text-align: center;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}


/* ========================================
   PC
======================================== */

@media (min-width: 769px) {

  .slider {
    max-width: 1200px;
  }

  .slide img {
    max-height: 85vh;
  }

}


/* ========================================
   TABLET
======================================== */

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

  .slide img {
    width: 100%;
    height: auto;
  }

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 480px) {

  .slider {
    width: 100%;
  }


  .track {
    width: 100%;

    touch-action: pan-y;
  }


  .slide {
    width: 100%;
  }


  .slide img {
    width: 100%;
    height: auto;

    max-width: 100%;
  }


  .counter {
    margin-top: 12px;

    font-size: 12px;
  }


  .home-button {
    margin-top: 16px;
    margin-bottom: 24px;

    min-width: 100px;
    height: 36px;

    font-size: 11px;
  }


  .zoom-close {
    top: 10px;
    right: 10px;

    width: 44px;
    height: 44px;

    font-size: 34px;
  }


  .zoom-area {
    width: 100vw;
    height: 100vh;

    touch-action: none;
  }


  .zoom-area img {
    max-width: 100vw;
    max-height: 100vh;

    touch-action: none;
  }

}


/* ========================================
   iOS
======================================== */

@supports (-webkit-touch-callout: none) {

  .zoom-overlay,
  .zoom-area,
  .zoom-area img {
    -webkit-touch-callout: none;
  }

}


/* ========================================
   DRAG中の選択防止
======================================== */

.dragging,
.dragging * {
  -webkit-user-select: none !important;
  user-select: none !important;
}


/* ========================================
   画像の長押しメニュー防止
======================================== */

.slide img,
.zoom-area img {
  -webkit-touch-callout: none;
}


/* ========================================
   アニメーション軽量化
======================================== */

@media (prefers-reduced-motion: reduce) {

  .slides {
    transition: none !important;
  }

}