.p-top-kv__wrap{
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  width: 100vw;
  height: 120vw;
}

.p-top-kv__thumb {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

.p-kv-thumb {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
}

.p-kv-thumb:first-of-type {
  animation: change1 20s ease-in-out infinite;
  transform: none;
  opacity: 1;
  z-index: 2;
}

.p-kv-thumb:nth-of-type(2) {
  animation: change2 20s ease-in-out infinite;
  transform: none;
}


@keyframes change1 {
0%,48% {
	opacity: 1;
	z-index: 2;
	}
50%,100%{
	opacity: 0;
	z-index: 0;
	}
}
@keyframes change2 {
0%,48% {
	opacity: 0;
	z-index: 0;
	}
50%,100%{
	opacity: 1;
	z-index: 2;
	}
}

/*１枚*/
.p-top-kv__thumb--three .p-kv-thumb {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation-duration: 50s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.p-top-kv__thumb--three .p-kv-thumb:nth-of-type(1) { animation-name: fade1; }
.p-top-kv__thumb--three .p-kv-thumb:nth-of-type(2) { animation-name: fade2; }
.p-top-kv__thumb--three .p-kv-thumb:nth-of-type(3) { animation-name: fade3; }
.p-top-kv__thumb--three .p-kv-thumb:nth-of-type(4) { animation-name: fade4; }
.p-top-kv__thumb--three .p-kv-thumb:nth-of-type(5) { animation-name: fade5; }
.p-top-kv__thumb--three .p-kv-thumb:nth-of-type(6) { animation-name: fade6; }


@keyframes fade1 {
  0%      { opacity: 0; }    /* ← 最初は非表示からスタート */
  1.67%   { opacity: 0.9; }
  3.33%   { opacity: 1; }
  15.00%  { opacity: 1; }
  16.67%  { opacity: 0.9; }
  18.33%  { opacity: 0; }
  100%    { opacity: 0; }
}

@keyframes fade2 {
  16.67%  { opacity: 0; }
  18.33%  { opacity: 0.9; }
  20.00%  { opacity: 1; }
  31.67%  { opacity: 1; }
  33.33%  { opacity: 0.9; }
  35.00%  { opacity: 0; }
  100%    { opacity: 0; }
}

@keyframes fade3 {
  33.33%  { opacity: 0; }
  35.00%  { opacity: 0.9; }
  36.67%  { opacity: 1; }
  48.33%  { opacity: 1; }
  50.00%  { opacity: 0.9; }
  51.67%  { opacity: 0; }
  100%    { opacity: 0; }
}

@keyframes fade4 {
  50.00%  { opacity: 0; }
  51.67%  { opacity: 0.9; }
  53.33%  { opacity: 1; }
  65.00%  { opacity: 1; }
  66.67%  { opacity: 0.9; }
  68.33%  { opacity: 0; }
  100%    { opacity: 0; }
}

@keyframes fade5 {
  66.67%  { opacity: 0; }
  68.33%  { opacity: 0.9; }
  70.00%  { opacity: 1; }
  81.67%  { opacity: 1; }
  83.33%  { opacity: 0.9; }
  85.00%  { opacity: 0; }
  100%    { opacity: 0; }
}

@keyframes fade6 {
  83.33%  { opacity: 0; }
  85.00%  { opacity: 0.9; }
  86.67%  { opacity: 1; }
  98.33%  { opacity: 1; }
  100.00% { opacity: 0.5; }  /* ← ここがポイント！きちんとフェードアウトさせる */
}


.p-kv-thumb__inner {
  display: block;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
.p-kv-thumb-img{
  height: 100%;
  width: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}


.p-top-kv__lead {
  grid-area: 3 / 1 / 5 / 11;
  order: 10;
}

.p-top-kv__thumb[data-item="1"] {
  grid-area: 1/1/3/6;
  order: 0;
}
.p-top-kv__thumb[data-item="2"] {
  grid-area: 1/6/3/11;
  order: 2;
}
.p-top-kv__thumb[data-item="3"] {
  grid-area: 6/1/9/4;
  order: 3;
}
.p-top-kv__thumb[data-item="4"] {
  grid-area: 6/4/9/11;
  order: 4;
}
.p-top-kv__thumb[data-item="5"] {
  grid-area: 9/1/11/5;
  order: 5;
}
.p-top-kv__thumb[data-item="6"] {
  grid-area: 9/5/11/8;
  order: 6;
}
.p-top-kv__thumb[data-item="7"] {
  grid-area: 9/8/11/11;
  order: 6;
}


/* アニメーションディレイ設定 */
.p-kv-thumb[data-item="1-1"],
.p-kv-thumb[data-item="1-2"] {
  animation-delay: -8s;
}

.p-kv-thumb[data-item="2-1"],
.p-kv-thumb[data-item="2-2"] {
  animation-delay: 8s;
}

.p-kv-thumb[data-item="3-1"],
.p-kv-thumb[data-item="3-2"] {
  animation-delay: -6s;
}
.p-kv-thumb[data-item="4-1"],
.p-kv-thumb[data-item="4-2"] {
  animation-delay: 3s;
}
.p-kv-thumb[data-item="5-1"],
.p-kv-thumb[data-item="5-2"] {
  animation-delay: -3s;
}

.p-kv-thumb[data-item="6-1"],
.p-kv-thumb[data-item="6-2"] {
  animation-delay: 7s;
}

.p-kv-thumb[data-item="7-1"],
.p-kv-thumb[data-item="7-2"] {
  animation-delay: 0s;
}





/*====== TB(600px〜) ======*/
@media screen and (min-width: 600px) {

  .p-top-kv__wrap {
    height: 100vw;
  }
 .p-top-kv__lead {
    grid-area: 3/3/5/9;
  }
  .p-top-kv__thumb[data-item="1"] {
    grid-area: 1/1/3/6;
  }
  .p-top-kv__thumb[data-item="2"] {
    grid-area: 1/6/3/11;
  }
  .p-top-kv__thumb[data-item="3"] {
    grid-area: 5/1/9/4;
  }
  .p-top-kv__thumb[data-item="4"] {
    grid-area: 5/4/9/11;
  }
  .p-top-kv__thumb[data-item="5"] {
    grid-area: 9/1/11/5;
  }
  .p-top-kv__thumb[data-item="6"] {
    grid-area: 9/5/11/8;
  }
  .p-top-kv__thumb[data-item="7"] {
    grid-area: 9/8/11/11;
  }

}
/*====== TBここまで ======*/





/*====== PC(1024px～) ======*/
@media screen and (min-width: 1024px) {

  .p-top-kv__wrap {
    height: 50vw;
    max-height: calc(100vh - 80px);
  }
 .p-top-kv__lead {
    grid-area: 4/1/7/5;
  }
  .p-top-kv__thumb[data-item="1"] {
    grid-area: 1/1/4/3;
  }
  .p-top-kv__thumb[data-item="2"] {
    grid-area: 1/3/4/5;
  }
  .p-top-kv__thumb[data-item="3"] {
    grid-area: 1/5/7/7;
  }
  .p-top-kv__thumb[data-item="4"] {
    grid-area: 1/7/7/11;
  }
  .p-top-kv__thumb[data-item="5"] {
    grid-area: 7/1/11/5;
  }
  .p-top-kv__thumb[data-item="6"] {
    grid-area: 7/5/11/8;
  }
  .p-top-kv__thumb[data-item="7"] {
    grid-area: 7/8/11/11;
  }

}
/*====== PCここまで ======*/