button {
  font-family: inherit;
}


/* 遷移ボタン設定 */
.btn-submit {
  display: inline-block;
  padding: 15px 60px;
  background: linear-gradient(135deg, #7a64d1 0%, #494bd4 100%);
  color: #ffffff;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(122, 100, 209, 0.4);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(122, 100, 209, 0.6);
}

#tab1 img {
  display: block;
  margin: 0 auto 20px;
  max-width: 100%;
  height: auto;
  max-height: 300px;
}

/* =========================
   tab2 全体マップ設定
========================= */

.tab-text {
  position: relative;
}

.clickable-img {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 20px auto;

  cursor: zoom-in;

  position: relative;
  z-index: 1000;

  pointer-events: auto !important;
}

.tab-text .clickable-img {
  position: relative;
  z-index: 1000;
}

.img-modal {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 99999;

  align-items: center;
  justify-content: center;

  cursor: zoom-out;
}

.img-modal.open {
  display: flex;
}

.modal-photo {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
}

@keyframes imgFadeIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.img-modal.open .modal-photo {
  animation: imgFadeIn 0.35s ease;
}

/* =========================
tab2 トイレ設定 
 =========================*/

.toilet-tabs {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 28px 0;
  flex-wrap: wrap;
}

.toilet-tab-button {
  padding: 12px 24px;
  border: 2px solid #7a64d1;
  background: rgba(255,255,255,0.9);
  color: #5b49b7;
  cursor: pointer;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
  box-shadow: 0 4px 12px rgba(122,100,209,0.18);
}

.toilet-tab-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(122,100,209,0.25);
}


.toilet-active-button {
  background: linear-gradient(
    135deg,
    #7a64d1 0%,
    #5c55d8 100%
  );
  color: #fff;
  border-color: #6a5ad1;
  box-shadow: 0 6px 18px rgba(92,85,216,0.35);
}

.toilet-tab-content {
  display: none;
  animation: toiletFade 0.35s ease;
}

.toilet-active-tab {
  display: block;
  padding: 0 2.5%;
}

@keyframes toiletFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toilet-big-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #4e45b8;
  margin: 42px 0 24px;
  padding-bottom: 10px;
  position: relative;
}

.toilet-big-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #7a64d1,
    #5c55d8
  );
}

.toilet-content-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #5b49b7;
  margin: 30px 0 12px;
  padding-bottom: 8px;
  position: relative;
}

.toilet-content-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 55px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #8a74e8,
    #5c55d8
  );
}

.toilet-content {
  margin-bottom: 22px;
  line-height: 1.9;
}

@media screen and (max-width: 767px) {
  .toilet-tabs {
    flex-direction: column;
    align-items: center;
  }

  .toilet-tab-button {
    width: min(280px, 100%);
  }

  .toilet-big-title {
    font-size: 1.5rem;
  }
}

/* =========================
   tab3設定
========================= */

.map-size {
  position: relative;
  width: 80%;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}

.map-size iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .map-size {
    width: 100%;
    aspect-ratio: 4 / 3;
  }
}