@charset "UTF-8";
/* hover
=================================================================== */
/* ================================================ vw */
/* ================================================ vh */
/* common
=================================================================== */
/* layout
=================================================================== */
/* video / iframe
=================================================================== */
/* imgCover
=================================================================== */
/* mask
=================================================================== */
/* background
=================================================================== */
/* flex
=================================================================== */
/* animation delay
=================================================================== */
/* 3d
=================================================================== */
/* font
=================================================================== */
/* textTate
=================================================================== */
/* form
=================================================================== */
/* ============================================================================================ topKv */
.kvArticle--1 {
  height: 10540px;
}

.kvStepContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.kv--cards {
  position: sticky;
  height: 100dvh;
  top: 0;
}

.cards {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: calc(538 * 100 / 1366 * 1vw);
  height: calc(303 * 100 / 1366 * 1vw);
}

.card--inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* 子要素の3Dを保持 */
  will-change: transform;
}

.card--front,
.card--back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
}
.card--front img, .card--front video,
.card--back img,
.card--back video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card--front {
  background: #000;
  color: #fff;
}

.card--back {
  background: #eee;
  color: #000;
  transform: rotateX(180deg); /* 裏面を反転 */
}

.js--service .card--front,
.js--service .card--back {
  transform: rotate(-5deg);
}

.point {
  width: 10px;
  height: 2000px;
  background-color: #f00;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
}
.point.point--1 {
  top: -650px;
  left: 0px;
}
.point.point--2 {
  top: -350px;
  left: 10px;
}
.point.point--3 {
  top: -50px;
  left: 20px;
}
.point.point--4 {
  top: -650px;
  left: 30px;
}
.point.point--5 {
  top: -350px;
  left: 40px;
}
.point.point--2--1 {
  top: 1800px;
  left: 10px;
  background-color: #fea;
  height: 500px;
}
.point.point--3--0 {
  top: 2301px;
  left: 30px;
  height: 698px;
  background-color: #ff0;
}
.point.point--3--1 {
  top: 3000px;
  left: 0px;
  height: 1500px;
  background-color: #ff0;
}
.point.point--4--1 {
  top: 4500px;
  left: 20px;
  height: 100px;
  background-color: rgb(195, 72, 220);
}
.point.point--4--2 {
  top: 5600px;
  left: 30px;
  height: 100px;
  background-color: rgb(195, 72, 220);
}
.point.point--4--3 {
  top: 6600px;
  left: 40px;
  height: 100px;
  background-color: rgb(195, 72, 220);
}
.point.point--4--4 {
  top: 7700px;
  left: 50px;
  height: 100px;
  background-color: rgb(195, 72, 220);
}
.point.point--4--5 {
  top: 8800px;
  left: 60px;
  height: 100px;
  background-color: rgb(195, 72, 220);
}
.point.point--4--6 {
  top: 9900px;
  left: 70px;
  height: 100px;
  background-color: rgb(195, 72, 220);
}

.cardsBlock {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.cardsBlock__target {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 20px;
  overflow: hidden;
}
.cardsBlock__target img, .cardsBlock__target video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cardsService .cardsBlock__target {
  border-radius: 0;
}

.cardsCreative .cardsBlock__target:nth-child(1) {
  transform: translate(calc(-100% - 15 * 100 / 1366 * 1vw), calc(-100% - 15 * 100 / 1366 * 1vw));
}
.cardsCreative .cardsBlock__target:nth-child(2) {
  transform: translate(0, calc(-100% - 15 * 100 / 1366 * 1vw));
}
.cardsCreative .cardsBlock__target:nth-child(3) {
  transform: translate(calc(100% + 15 * 100 / 1366 * 1vw), calc(-100% - 15 * 100 / 1366 * 1vw));
}
.cardsCreative .cardsBlock__target:nth-child(4) {
  transform: translate(calc(100% + 15 * 100 / 1366 * 1vw), 0);
}
.cardsCreative .cardsBlock__target:nth-child(5) {
  transform: translate(calc(100% + 15 * 100 / 1366 * 1vw), calc(100% + 15 * 100 / 1366 * 1vw));
}
.cardsCreative .cardsBlock__target:nth-child(6) {
  transform: translate(0, calc(100% + 15 * 100 / 1366 * 1vw));
}
.cardsCreative .cardsBlock__target:nth-child(7) {
  transform: translate(calc(-100% - 15 * 100 / 1366 * 1vw), calc(100% + 15 * 100 / 1366 * 1vw));
}
.cardsCreative .cardsBlock__target:nth-child(8) {
  transform: translate(calc(-100% - 15 * 100 / 1366 * 1vw), 0);
}

.cardsBlock.card--inner {
  z-index: 2;
}

.cardsBlock.cardsCreative {
  z-index: 1;
  pointer-events: none;
  transform: rotate(-5deg);
}
.cardsBlock.cardsCreative .cardsBlock__target {
  opacity: 0;
}

.cardsBlock.cardsService {
  z-index: 3;
  pointer-events: none;
}
.cardsBlock.cardsService .cardsBlock__target {
  opacity: 0;
}

/*============================================================================================ 767px */
@media only screen and (max-width: 767px) {
  .cards {
    width: 73.3333333333vw;
    height: 41.3333333333vw;
  }
  .card--front, .card--back, .cardsBlock__target {
    border-radius: 6px;
  }
  .kvArticle--1 {
    height: 7800px;
  }
  .point.point.point--2--1 {
    top: 1500px;
  }
  .point.point.point--3--0 {
    height: 400px;
  }
  .point.point.point--3--1 {
    top: 2701px;
  }
  .point.point.point--4--1 {
    top: 4200px;
  }
  .point.point--4--2 {
    top: 4800px;
  }
  .point.point--4--3 {
    top: 5400px;
  }
  .point.point--4--4 {
    top: 6000px;
  }
  .point.point--4--5 {
    top: 6600px;
  }
  .point.point--4--6 {
    top: 7200px;
  }
}/*# sourceMappingURL=test.css.map */