* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #455629;
}
@media screen and (orientation: portrait) {
  html,
  body {
    background-color: #6e9995;
  }
}


.map-wrapper {
  position: relative;
  width: 100%;
  /* height: calc(100% - 115px); */
  height: calc(var(--vh, 1vh) * 100 - 115px)!important;
  overflow-x: auto;
  overflow-y: hidden;
  /* スクロールバーを非表示にする */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.map-wrapper::-webkit-scrollbar {
  display: none;
}


#map {
  position: relative;
  width: fit-content;
  height: fit-content;
  margin: 0 auto;
}

.map-image-LR-container {
  position: relative;
  display: flex;
}

.map-half-image {
  display: block;
  max-height: calc(var(--vh, 1vh) * 100 - 115px);
  height: 100vh;
  width: auto;
  object-fit: cover;

}


.link-container {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  z-index: 2;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;

  background: rgba(255, 165, 0, 0.4);
  padding: 8px;
  border-radius: 8px;
}

#map .linkToSlide {
  pointer-events: auto;
  position: absolute;
  text-decoration: none;
  color: #0000ff;
  padding: 0;
  border: 1px solid #0000ff;
  border-radius: 50%;
  width: calc(100vw * 0.03);
  height: calc(100vw * 0.03);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  font-weight: bold;
  background: transparent;
  background: #ffffff82;
  transform: translate(-50%, -50%);
  opacity: 0;
}

@media screen and (orientation: portrait) {
  #map .linkToSlide {
    width: 10vw;
    height: 10vw;
  }
}

@media screen and (orientation: landscape) {
  #map .linkToSlide {
    width: 8vh;
    height: 8vh;
  }
}

#map a:hover {
  background: #e4027e75;
  color: white;
}

.link1  { left: 36.4%; top: 11.5%; }
.link2  { left: 43%; top: 23.9%; }
.link3  { left: 51.6%; top: 28.2%; }
.link4  { left: 32%; top: 27.5%; }
.link5  { left: 44.3%; top: 34.4%; }
.link6  { left: 49.7%; top: 40.6%; }
.link7  { left: 33.6%; top: 40.6%; }
.link8  { left: 41.9%; top: 46%; }
.link9  { left: 27.2%; top: 46.5%; }
.link10 { left: 54.4%; top: 51.8%; }
.link11 { left: 45.2%; top: 60.6%; }
.link12 { left: 36%; top: 61.5%; }
.link13 { left: 55.3%; top: 64.2%; }
.link14 { left: 50.5%; top: 70%; }
.link15 { left: 43.1%; top: 74.7%; }

.linkToPublicFacility {
  position: absolute;
  text-decoration: none;
  color: #0000ff;
  padding: 0;
  border: 1px solid #0000ff;
  border-radius: 5px;
  width: 8%;
  height: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  font-weight: bold;
  background: transparent;
  background: #ffffff82;
  opacity: 0;
}

.linkToPublicFacility:hover {
  background: #e40280;
  color: white;
}

.link-to-theater {
  left: 60%;
  top: 23.5%;
  width: 7%;
  height: 5%;
}
.link-to-bank {
  left: 70.2%;
  top: 28.5%;
  width: 7%;
  height: 5%;
}
.link-to-post {
  left: 73.4%;
  top: 39%;
  width: 5%;
  height: 10%;
}
.link-to-labo {
  left: 69.2%;
  top: 55.5%;
  width: 5%;
  height: 10%;
}
.link-to-library {
  left: 61.5%;
  top: 67%;
  width: 7%;
  height: 5%;
}

.linkToTopScreen {
    position: absolute;
    left: 30.9%;
    top: 80%;
    transform: translate(-50%, -50%);
    background: #ffffff82;
    width: 10.2%;
    height: 4%;
    opacity: 0;
}

.bear, .ship, .movecore {
  position: absolute;
  background: #ffffff82;
  width: 2%;
  height: 5%;
  opacity: 0;
}

.bear {
  top: 15.6%;
  left: 19.3%;
}

.ship {
  top: 4.2%;
  left: 52%;
}

.movecore {
  top: 12.5%;
  left: 66.2%;
}


/* -------スライダ--------- */
.swiper {
  width: 100%;
  height: 115px;
  background: transparent;
  z-index: 3;
  background-color: #6e9995;
}

.swiper-wrapper {
  height: 100%;
  align-items: center;
}

.swiper-slide {
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 108px !important;
  height: 72px !important;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 5px solid #015c16;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.swiper-slide:hover {
  cursor: pointer;
}

#imageModal {
  flex-direction: column;
}


/* -------モーダル--------- */
/* モーダル共通設定 */

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 画像表示 */
.modal-content, .bearImage, .bearVideo {
  width: calc((70vh - 0.5rem) * 1016 / 638);
  max-width: 100%;
  max-height: calc(70vh - 0.5rem);
  object-fit: contain;
}

/* くまモーダル */
/* 安全エリア内コンテンツ（画像＋ボタン） */
#imageModal .safe-area-content, #modal-bear .safe-area-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 下のボタン */
.transition-button {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5em 1.5em;
  background-color: #015c16;
  text-decoration: none;
  color: white;
  font-size: 18px;
}

.transition-button:hover {
  cursor: pointer;
  opacity: 0.7;
}




/* 銀行モーダル */
#modal-bank .modal {
  position: relative;
}


#modal-bank::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0); /* ← 最初は透明 */
  transition: background-color 0.5s ease;
  z-index: 0;
  pointer-events: none;
}


#modal-bank.visible::before {
  background-color: rgba(0, 0, 0, 0.4); /* ← 表示時に暗く */
}


.modal-content-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#modal-bank .safe-area-content, #modal-post .safe-area-content, #modal-labo .safe-area-content {
  pointer-events: none;
}

#modal-bank .safe-area-content a, #modal-post .safe-area-content a, #modal-labo .safe-area-content a {
  pointer-events: auto;
}


/* 郵便局モーダル */
.modal-content-container .post .show-after-delay, .modal-content-container .labo .show-after-delay {
  z-index: 5;
  width: 100%;
}

.overlay-image {
  position: absolute;
  width: 100%;
  /* height: auto; */
  /* pointer-events: none; */
  object-fit: cover;
}

.overlay-link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: block;
}


/* スクロールヒントのスタイル、アニメーション */
.scroll-hint-icon-wrap {
  position: fixed !important;
  transition: opacity 0.5s ease;
  opacity: 1;
}

.scroll-hint-icon::before {
  animation: scroll-hint-custom 3s ease-in-out forwards !important;
}

.scroll-hint-icon::after {
  animation: hint-arrow 3s ease-in-out forwards !important;
}


@keyframes scroll-hint-custom {
  0%   { transform: translateX(30px); opacity: 0; }   /* 1st 出現 */
  5%   { opacity: 1; }
  20%  { transform: translateX(-30px); opacity: 0; }  /* 1st 消える */

  40%  { transform: translateX(30px); opacity: 0; }   /* 2nd 出現 */
  45%  { opacity: 1; }
  60%  { transform: translateX(-30px); opacity: 0; }  /* 2nd 消える */

  80%  { transform: translateX(0); opacity: 0; }      /* 一度消える */
  80.1%  { transform: translateX(0); opacity: 1; }      /* パッと中央に出現 */
  100% { transform: translateX(0); opacity: 1; }      /* 維持 */
}

@keyframes hint-arrow {
  0%, 80%  { opacity: 0; }
  81%, 100% { opacity: 1; }
}


.scroll-hint-icon,
.scroll-hint-shadow {
  opacity: 1 !important;
  display: block !important;
  z-index: 9999 !important;
  pointer-events: none;
  transition: opacity 0.5s ease;
}


/* 横長の場合 */
@media screen and (max-width: 1024px) and (orientation: landscape) {
  .swiper {
    height: 60px;
  }

  .swiper-slide {
    width: 63px !important;
    height: 42px !important;
    border-radius: 8px;
    border: 3px solid #015c16;
  }

  .container {
    /* height: calc(100% - 80px); */
    height: calc(var(--vh, 1vh) * 100 - 60px)!important;
  }

  .map-half-image {
    /* max-height: calc(100vh - 80px); */
    max-height: calc(var(--vh, 1vh) * 100 - 60px)!important;
  }

}

@media screen and (orientation: landscape) {
  .swiper {
    height: 80px;
  }

  .swiper-slide {
    width: 86px !important;
    height: 57px !important;
    border-radius: 15px;
    border: 4px solid #015c16;
  }

  .map-wrapper {
    /* height: calc(100% - 80px); */
    height: calc(var(--vh, 1vh) * 100 - 80px)!important;
  }

  .map-half-image {
    /* max-height: calc(100vh - 80px); */
    max-height: calc(var(--vh, 1vh) * 100 - 80px)!important;
  }

}