@charset "utf-8";
/* CSS Document */
.kvGuam__inner {
  position: relative;
  display: inline-block;
}

.kvGuam__map {
  display: block;
  width: 100%;
}

/* ★ 写真レイヤーを地図より一回り大きくする（外側に置けるように） */
.kvanimation--photo {
  position: absolute;
  inset: -120px;          /* 地図から上下左右に120px広げた範囲 */
  pointer-events: none;
}

/* 写真の共通スタイル */
.kvanimation__img {
  position: absolute;
  width: 150px !important;
  height: 100px !important;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.85);
}

/* フェードイン→キープ→フェードアウト */
.kvanimation__img.is-active {
  animation-name: kvPhotoAnim;
  animation-duration: 7s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes kvPhotoAnim {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }

  /* フェードイン */
  20% {
    opacity: 1;
    transform: scale(1.0);
  }

  /* 静止＋ごくわずかな拡大（自然な演出） */
  70% {
    opacity: 1;
    transform: scale(1.03);
  }

  /* フェードアウト */
  100% {
    opacity: 0;
    transform: scale(1.03);
  }
}



/* ─ 北のとんがり周辺（上側：島の一番上をぐるっと） ─ */
.kvanimation__img__1  { top: 39px; left: 52%; }  /* 先端ど真ん中より少し右 */
.kvanimation__img__2  { top: 148px; left: 40%; }  /* 先端の左上 */
.kvanimation__img__3  { top: 238px; left: 56%; }  /* 先端の右上 */

/* ─ 上〜中央の左カーブ（西側のくびれ〜太い部分） ─ */
.kvanimation__img__4  { top:  256px; left:  252px; }   /* 左上の角付近 */
.kvanimation__img__5  { top: 399px; left: 70px; }   /* 左中央上 */
.kvanimation__img__6  { top: 300px; left: 110px; }   /* くびれ左外側 */
.kvanimation__img__7  { top: 567px; left: -17px; }   /* 南側に向かうカーブの左 */

/* ─ 南西〜南端（左下側） ─ */
.kvanimation__img__8  { top: 610px; left: 136px; }   /* 南西部の外側 */
.kvanimation__img__9  { top: 730px; left: 123px; }   /* 南端の少し左下 */

/* ─ 上〜中央の右カーブ（東側：細い首〜南東方向） ─ */
.kvanimation__img__10 { top:  378px; right: 148px; }  /* 右上 */
.kvanimation__img__11 { top: 491px; right:398px ; }  /* 首の右外側 */
.kvanimation__img__12 { top: 146px; right:66px; }  /* 中央やや下の右 */
.kvanimation__img__13 { top: 494px; right: 232; }  /* 南東部の右 */

/* ─ 南東〜真下（右下〜中央下） ─ */
.kvanimation__img__14 { top: 595px; right: 265px; }  /* 右下ぎりぎり */
.kvanimation__img__15 { top: 484px; left: 47%; }                 /* 島の真下・右寄り */
.kvanimation__img__16 { top: 719px; left: 40%; }                 /* 島の真下・中央寄り */





@media screen and (max-width: 767px){

  /* ▼ 写真の共通サイズ（SP 用） */
  .kvanimation__img{
    width: 90px !important;
    height: 68px !important;
  }

  /* ▼ SP 用の位置：PC 版の位置を縮尺して調整（スマホ幅にフィット済み） */

  /* ─ 北のとんがり周辺（上側） ─ */
  .kvanimation__img__1  { top: 94px; left: 58%; }  /* 先端ど真ん中より少し右 */
  .kvanimation__img__2  { top:  170px; left: 51%; }  /* 先端の左側 */
  .kvanimation__img__3  { top:  234px; left: 40%; }  /* 先端の右上 */

  /* ─ 上〜中央の左カーブ ─ */
  .kvanimation__img__4  { top: 286px; left: 152px; }  /* 左上の角付近 */
  .kvanimation__img__5  { top: 220px; left:  71px; }  /* 左中央上 */
  .kvanimation__img__6  { top: 182px; left:  108px; }  /* くびれ左外側 */
  .kvanimation__img__7  { top: 285px; left:  62px; }  /* 南側に向かうカーブの左 */

  /* ─ 南西〜南端（左下側） ─ */
  .kvanimation__img__8  { top: 354px; left:  70px; }  /* 南西部の外側 */
  .kvanimation__img__9  { top: 402px; left:  97px; }  /* 南端の少し左下 */

  /* ─ 上〜中央の右カーブ（東側） ─ */
  .kvanimation__img__10 { top: 151px; left: 148px; }  /* 右上 */
  .kvanimation__img__11 { top: 104px; left: 162px; }  /* 首の右外側 */
  .kvanimation__img__12 { top:  129px; left: 296px; }  /* 中央やや下の右 */
  .kvanimation__img__13 { top: 198px; left: 308px; }  /* 南東部の右 */

  /* ─ 南東〜真下（右下〜中央下） ─ */
  .kvanimation__img__14 { top: 273px; left: 256px; }  /* 右下ぎりぎり */
  .kvanimation__img__15 { top: 342px; left: 45%;  }   /* 島の真下・右寄り */
  .kvanimation__img__16 { top: 419px; left: 47%;  }   /* 島の真下・中央寄り */

}