/* リセット＆ベース */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

main {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
}

picture {
  display: block;
}

img,
video {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* 位置指定ユーティリティ */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

/* スケールユーティリティ（画像幅≠960px用） */
.scaled-259 {
  width: calc(259 / 960 * 100%);
}

.scaled-293 {
  width: calc(293 / 960 * 100%);
}

.scaled-258 {
  width: calc(258 / 960 * 100%);
}

.scaled-333 {
  width: calc(333 / 960 * 100%);
}

.scaled-334 {
  width: calc(334 / 960 * 100%);
}

.scaled-886 {
  width: calc(886 / 960 * 100%);
}

.scaled-866 {
  width: calc(866 / 960 * 100%);
}

.scaled-770 {
  width: calc(770 / 960 * 100%);
}

.scaled-291 {
  width: calc(291 / 960 * 100%);
}

.scaled-369 {
  width: calc(369 / 960 * 100%);
}

.scaled-369-vw {
  width: min(calc(369 / 960 * 100vw), 369px);
}

.scaled-328-vw {
  width: min(calc(328 / 960 * 100vw), 328px);
}

.scaled-327-vw {
  width: min(calc(327 / 960 * 100vw), 327px);
}

.scaled-329-vw {
  width: min(calc(329 / 960 * 100vw), 329px);
}

.scaled-326-vw {
  width: min(calc(326 / 960 * 100vw), 326px);
}

.scaled-368-vw {
  width: min(calc(368 / 960 * 100vw), 368px);
}

.scaled-545 {
  width: calc(545 / 960 * 100%);
}

.scaled-923 {
  width: calc(923 / 960 * 100%);
}

.scaled-910 {
  width: calc(910 / 960 * 100%);
}

.scaled-863 {
  width: calc(863 / 960 * 100%);
}

.scaled-867 {
  width: calc(867 / 960 * 100%);
}

.scaled-179 {
  width: calc(179 / 960 * 100%);
}

.scaled-588 {
  width: calc(588 / 960 * 100%);
}

.scaled-775 {
  width: calc(775 / 960 * 100%);
}

.scaled-638 {
  width: calc(638 / 960 * 100%);
}

.scaled-789 {
  width: calc(789 / 960 * 100%);
}

.scaled-700 {
  width: calc(700 / 960 * 100%);
}

.scaled-931 {
  width: calc(931 / 960 * 100%);
}

.scaled-840 {
  width: calc(840 / 960 * 100%);
}

/* ======= FVポップアップ ======= */

.pop-1,
.pop-2,
.pop-3 {
  transform: translateY(40px) scale(0.8);
  opacity: 0;
  bottom: 10.9%;
  transition: all 0.6s ease-out;
}

.fv-popups.visible .pop {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pop-1.absolute {
  left: 0;
}

.pop-2.absolute {
  left: 50%;
  translate: -50% 0;
  transition-delay: 0.5s;
}

.pop-3.absolute {
  right: 0;
  transition-delay: 1s;
}

/* ======= LDKポップアップ ======= */

.ldk-popup-group.visible .pop-ldk {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pop-ldk.pop-1.absolute {
  left: 2.9%;
  bottom: 3.6%;
}

.pop-ldk.pop-2.absolute {
  left: 50%;
  translate: -50% 0;
}

.pop-ldk.pop-3.absolute {
  right: 2.9%;
  bottom: 3.6%;
}

/* ======= スライドイン＆フェードアップ ======= */
.slide-in-left {
  bottom: 34%;
  transform: translateX(100px);
}

.slide-in-right {
  bottom: 0;
  transform: translateX(-100px);
}

.slide-in-left,
.slide-in-right {
  position: absolute;
  left: 0;
  opacity: 0;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
  z-index: 1;
  will-change: transform, opacity;
}

.slide-in-left.visible,
.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ======= サロン実績スライダー ======= */
.slider {
  position: absolute;
  left: 0;
  display: flex;
  white-space: nowrap;
  gap: calc(15 / 960 * 100vw);
}

.slider--left {
  animation: scrollLeft 60s linear infinite;
}

.slider--right {
  animation: scrollRight 60s linear infinite;
}

.slider-1 {
  top: 24%;
}

.slider-2 {
  top: 41%;
}

.slider-3 {
  top: 58%;
}

@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* ======= サロン採用率 ======= */
.pop-salon-94 {
  position: absolute;
  top: 36.6%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(40px) scale(0.8);
  opacity: 0;
  transition: all 0.6s ease-out;
}

.pop-salon-94.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ======= 4STEPケア ======= */
.step-group {
  position: absolute;
  bottom: 3.5%;
  left: 1.9%;
  width: 100%;
  margin: 0 auto;
}

.step-group img {
  display: block;
}

/* ======= ホームケア ======= */
.homecare-text {
  position: absolute;
  top: 12.9%;
  left: 8%;
  right: 0;
}

/* ======= 特徴1 ======= */
.feature-1-1-title {
  position: absolute;
  top: 3.2%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.feature-1-1-video {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.scale-up {
  position: absolute;
  right: 4%;
  bottom: 20.8%;
  clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0% 100%);
  transition: clip-path 0.5s ease-out;
}

.feature-1-2.visible .scale-up {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.feature-1-3 {
  background-color: #595959;
}

.feature-1-3 picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.feature-1-3 video {
  mix-blend-mode: multiply;
}

/* ======= 特徴2 ======= */
.feature-2-1-title {
  position: absolute;
  top: 3.2%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.feature-2-1-video {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.feature-2-2 {
  background-color: #fff;
}

.feature-2-2 video {
  display: block;
  margin: 9% auto 0;
}

.feature-2-2-texture {
  position: relative;
  margin-top: -10%;
  z-index: 1;
}

.feature-2-3-video {
  position: absolute;
}

.feature-2-3-video-1 {
  bottom: 18%;
  left: 4%;
}

.feature-2-3-video-2 {
  bottom: 15.6%;
  left: 50%;
  transform: translateX(-50%);
}

.feature-2-3-video-3 {
  bottom: 18%;
  right: 4%;
}

/* ======= 特徴3 ======= */
.feature-3-title {
  position: absolute;
  top: 3.2%;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.feature-3-video-wrapper {
  position: absolute;
  bottom: 4%;
  left: 0;
  right: 0;
}

.feature-3-video-wrapper picture {
  position: relative;
  margin-top: -53.9%;
  margin-left: auto;
  z-index: 1;
}

.feature-3-video {
  margin-left: 7%;
}

/* ======= 特徴4 ======= */
.feature-4-title {
  position: absolute;
  top: 3%;
  left: 5%;
}

.close picture {
  position: absolute;
  top: 0;
  right: 0;
}

.specification {
  background: #666462;
  padding: 10% 8%;
}

.specification__main-ttl {
  margin-bottom: 5%;
  font-size: min(2.7587890625vw, 35.3125px);
  color: #fff;
  text-align: center;
}

@media screen and (max-width: 719px) {
  .specification__main-ttl {
    font-size: min(5.2083333333vw, 37.3958333333px);
  }
}

.specification__ttl {
  background: #cecece;
  padding: 2.5% 5%;
  font-size: min(2.3173828125vw, 29.6625px);
  color: #000;
}

@media screen and (max-width: 719px) {
  .specification__ttl {
    font-size: min(4.375vw, 31.4125px);
  }
}

.specification__body {
  padding: 5% 7.5% 7.5%;
  font-size: min(1.6552734375vw, 21.1875px);
  color: #fff;
}

@media screen and (max-width: 719px) {
  .specification__body {
    font-size: min(3.125vw, 22.4375px);
  }
}

.specification__qa {
  background: #ebebeb;
  padding: 5%;
}

.specification__qa__item {
  margin-bottom: 10%;
}

.specification__qa__ttl {
  margin-bottom: 2.5%;
  padding-bottom: 2.5%;
  border-bottom: solid 1px #cecece;
  font-size: min(1.6552734375vw, 21.1875px);
  color: #000;
}

@media screen and (max-width: 719px) {
  .specification__qa__ttl {
    font-size: min(3.125vw, 22.4375px);
  }
}

.specification__qa__body {
  font-size: min(1.3793945312vw, 17.65625px);
  color: #000;
}

@media screen and (max-width: 719px) {
  .specification__qa__body {
    font-size: min(2.6041666667vw, 18.6979166667px);
  }
}

.fv-top video {
  top: 0px;
  left: 0;
  right: 0;
}

.fv-top picture {
  position: relative;
  z-index: 1;
}

.fv-bottom video {
  width: 90%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1;
}

.fv-bottom .video-1 {
  top: 2.8%;
}

.fv-bottom .video-2 {
  top: 39.9%;
}

.fv-bottom .video-3 {
  top: 70.5%;
}