@charset "UTF-8";
.container {
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}
@media print, screen and (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media print, screen and (min-width: 768px) {
  .container {
    max-width: 768px;
    padding: 0 40px;
  }
}
@media print, screen and (min-width: 1025px) {
  .container {
    max-width: 1190px;
  }
}
@media print, screen and (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

/* =============================
   ヘッダー固定レイアウト
============================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  background: rgb(0, 0, 0);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* =============================
     メニューパネル
  ============================= */
}
.site-header .header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}
.site-header .header-inner .logo {
  display: block;
}
.site-header .header-inner .logo img {
  height: 50px;
  display: block;
}
.site-header .header-inner .menu-toggle {
  width: 32px;
  height: 22px;
  position: relative;
  cursor: pointer;
  z-index: 11000;
}
.site-header .header-inner .menu-toggle span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 3px;
  left: 0;
  transition: all 0.3s ease;
}
.site-header .header-inner .menu-toggle span:nth-child(1) {
  top: 0;
}
.site-header .header-inner .menu-toggle span:nth-child(2) {
  top: 9px;
}
.site-header .header-inner .menu-toggle span:nth-child(3) {
  bottom: 0;
}
.site-header .header-inner .menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 9px;
}
.site-header .header-inner .menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.site-header .header-inner .menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 9px;
}
.site-header .menu-panel {
  position: fixed;
  top: 60px;
  right: 0;
  width: 50vw;
  max-height: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);
  transition: max-height 0.4s ease;
  z-index: 9999;
  height: 80vh;
  overflow-y: auto;
}
.site-header .menu-panel.open {
  max-height: 90vh;
  transition: max-height 0.4s ease;
}
.site-header .menu-panel .menu-list {
  list-style: none;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.site-header .menu-panel .menu-list li {
  font-size: 0.875rem;
  color: #fff;
  cursor: pointer;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  transition: color 0.2s ease;
}

/* ---------------------------------------------------------
  Global Reset / Base
--------------------------------------------------------- */
body {
  padding-top: 60px;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
  background-image: repeating-linear-gradient(to bottom, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px, transparent 79px, transparent 103px, rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px, transparent 105px, transparent 129px, rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px), repeating-linear-gradient(to right, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px, transparent 79px, transparent 103px, rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px, transparent 105px, transparent 129px, rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px);
  font-family: "Segoe UI", sans-serif;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* ---------------------------------------------------------
  Scroll Hint
--------------------------------------------------------- */
#scrollHint {
  position: fixed;
  bottom: 1.25rem;
  width: 220px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.375rem 0.875rem;
  border-radius: 0.625rem;
  animation: bounce 1.5s infinite;
  z-index: 1000;
}

/* ---------------------------------------------------------
  City Map
--------------------------------------------------------- */
.city-container {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: grab;
  overflow: hidden;
}
.city-container img {
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(20px);
  opacity: 0;
  transition: filter 1s ease, opacity 1s ease;
  z-index: 1;
  pointer-events: none;
}

/* ---------------------------------------------------------
  Click Points
--------------------------------------------------------- */
.clickable {
  position: absolute;
  cursor: pointer;
  display: none;
  animation: bouncePin 1.5s infinite;
  z-index: 999;
  white-space: nowrap;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
.clickable span {
  display: inline-block;
  background: #2fbdff;
  padding: 0.375rem;
  width: 100px;
  position: relative;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.clickable span::after {
  content: "";
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: #2fbdff transparent transparent transparent;
}

/* ---------------------------------------------------------
  Animations
--------------------------------------------------------- */
@keyframes bouncePin {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -10px);
  }
}
/* ---------------------------------------------------------
  Modal (Glass Style)
--------------------------------------------------------- */
/* ========================================
   モーダル全体
======================================== */
#welcomeModal {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}
#welcomeModal.show {
  display: flex;
  animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#welcomeModal .modal-content {
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
  background-image: repeating-linear-gradient(to bottom, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px, transparent 79px, transparent 103px, rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px, transparent 105px, transparent 129px, rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px), repeating-linear-gradient(to right, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px, transparent 79px, transparent 103px, rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px, transparent 105px, transparent 129px, rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px);
}
#welcomeModal .closeBtn {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 28px;
  color: #4f4f4f;
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 10;
  background-color: #fff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#welcomeModal .closeBtn:hover {
  color: #000000;
}

#gallery {
  position: fixed;
  bottom: 70px;
  right: 0;
  background-color: #292929;
  color: #fff;
  padding: 10px 20px;
  z-index: 1000;
  display: none;
  font-weight: bold;
  cursor: pointer;
}

/* ========================================
   モーダル内部構成
======================================== */
.modal-body {
  max-height: calc(100vh - 60px);
  height: calc(100vh - 60px);
  width: 100vw;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}
@media print, screen and (min-width: 768px) {
  .modal-body {
    padding: 40px;
  }
}
@media print, screen and (min-width: 1025px) {
  .modal-body {
    flex-direction: row;
    gap: 40px;
    padding: 80px;
    justify-content: center;
  }
}
.modal-body .modal-title {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
}
.modal-body .modal-title span {
  display: inline-block;
  font-size: 1.25rem;
  background-color: #000;
  padding: 4px 10px;
  line-height: 1.5;
  color: #fff;
}
@media print, screen and (min-width: 768px) {
  .modal-body .modal-title span {
    font-size: 1.375rem;
  }
}
@media print, screen and (min-width: 1025px) {
  .modal-body .modal-title span {
    font-size: 1.625rem;
  }
}
.modal-body .modal-left {
  width: 100%;
}
@media print, screen and (min-width: 1025px) {
  .modal-body .modal-left {
    width: 50%;
  }
}
.modal-body .modal-left img {
  width: 100%;
  height: auto;
  display: block;
}
.modal-body .modal-right {
  overflow-y: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media print, screen and (min-width: 1025px) {
  .modal-body .modal-right {
    width: calc(50% - 40px);
  }
}
.modal-body .modal-right .modal-description {
  line-height: 1.6;
  font-size: 1rem;
  margin: 0;
  color: #000;
  font-weight: bold;
}
@media print, screen and (min-width: 768px) {
  .modal-body .modal-right .modal-description {
    font-size: 1.125rem;
  }
}
@media print, screen and (min-width: 1025px) {
  .modal-body .modal-right .modal-description {
    font-size: 1.25rem;
  }
}
.modal-body .modal-right .thumb-swiper {
  width: 100%;
}
.modal-body .modal-right .thumb-swiper > * {
  pointer-events: all;
}
.modal-body .modal-right .thumb-swiper .swiper-slide {
  opacity: 0.6;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.modal-body .modal-right .thumb-swiper .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}
.modal-body .modal-right .thumb-swiper .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

.modal-close {
  margin-top: 20px;
  width: auto;
  text-align: center;
  display: inline-block;
  padding: 12px 24px;
  background: #2fbdff;
  color: #fff;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
@media print, screen and (min-width: 1025px) {
  .modal-close {
    width: 260px;
    margin-top: 40px;
    margin-left: auto;
  }
}

/* ========================================
   Swiper ナビゲーションカスタム
======================================== */
.swiperThumbnail {
  margin-top: 20px;
}
.swiperThumbnail .swiper-slide {
  box-sizing: border-box;
  border: 2px solid #999;
  position: relative;
  cursor: pointer;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 16/9;
  overflow: hidden;
  transition: opacity 0.3s ease, filter 0.3s ease, border 0.3s ease;
}
.swiperThumbnail .swiper-slide:hover {
  opacity: 0.8;
  filter: brightness(1.2);
  border: 2px solid #2fbdff;
}

.swiper-slide {
  box-sizing: border-box;
  background-color: #fff;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 16/9;
}
.swiper-slide .swiper-description {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 4px;
  text-align: center;
  content: "";
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-weight: bold;
  font-size: 0.875rem;
}

.swiper-slide-thumb-active {
  border: 2px solid #2fbdff !important;
}/*# sourceMappingURL=style.css.map */