@charset "UTF-8";

.top { font-family: var(--project-font-heading); }

.top ul { list-style: none; padding-left: 0; }

.top .container {
  max-width: var(--project-container-max);
  padding-inline: var(--project-container-gutter);
  margin-inline: auto;
}
.top .top-news > .container { max-width: var(--project-container-news); }
.top .section { padding-block: var(--space-5xl); }
.section--subtle { background-color: var(--main-light); }

.top .badge { font-size: 0.8125rem; font-weight: 700; }

.top-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  color: var(--gray-dark);
  font-size: var(--project-heading-lg);
  margin-bottom: 2.5rem;
  letter-spacing: 0.06em;
}
.top-heading__deco { width: 3.25rem; height: auto; flex-shrink: 0; }

.top-hero { position: relative; }
.top-hero__visual { display: block; width: 100%; }
.top-hero__visual img { display: block; width: 100%; height: auto; }

.top-hero__badge-wrap {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 150;
  width: 15rem;
}
.top-hero__badge {
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
  transition: transform 0.2s;
}
.top-hero__badge:hover { transform: scale(1.06); }
.top-hero__badge img { display: block; width: 100%; height: auto; }

.top-hero__badge-close {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #fff;
  color: var(--gray-dark);
  font-size: 1.125rem;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.top-hero__badge-close:hover { background-color: var(--gray-light); }
.top-hero__badge-wrap.is-hidden { display: none; }

.top-hero__catch {
  position: relative;
  width: min(50rem, 100%);
  margin-inline: auto;
  margin-top: -14.6875rem;
  padding: 6.5rem 1rem 1.5rem;
  background-color: #fff;
  border-radius: 50% 50% 0 0 / 15.6875rem 15.6875rem 0 0;
  text-align: center;
}
.top-hero__catch p {
  font-family: var(--project-font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--main);
}

.top .top-intro { padding-block: 1rem!important; }
.top-intro__inner {
  max-width: var(--project-container-max);
  margin-inline: auto;
  padding-inline: var(--project-container-gutter);
  display: grid;
  grid-template-columns: 1fr minmax(auto, 40rem) 1fr;
  align-items: start;
  gap: 1rem;
}
.top-intro__deco img { width: 100%; max-width: 20rem; margin-inline: auto; }
.top-intro__body { text-align: center; }
.top-intro__title {
  color: var(--gray-dark);
  font-size: 1.75rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.top-intro__lead { font-size: 1.5rem; margin-bottom: 2rem; }
.top-intro__btn .btn { min-width: 18rem; }

.top-guide__card { display: flex; flex-direction: column; height: auto; }
.top-guide__thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--project-radius-md);
  margin-bottom: 1rem;
}
.top-guide__card h3 {
  display: block;
  border-bottom: none;
  padding-bottom: 0;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.top-guide__card p {
  color: var(--project-color-text-muted);
  font-size: 0.9375rem;
  flex: 1;
  margin-bottom: 1rem;
}
.top-guide__carousel { position: relative; }
.top-guide__nav { display: none; }

.top-fac-area { margin-bottom: 2.5rem; }
.top-fac-area:last-child { margin-bottom: 0; }
.top-fac-area__head {
  display: block;
  border-bottom: none;
  padding: 0.75rem 1rem;
  margin-bottom: 1.75rem;
  background-color: var(--main);
  color: #fff;
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}
.top-fac-area__body {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 2rem;
  align-items: start;
}
.top-fac-area__photo { margin: 0; }
.top-fac-area__photo img { width: 100%; border-radius: var(--project-radius-md); }
.top-fac-area__facilities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.top-fac-area__facilities--single { grid-template-columns: 1fr; }
.top-fac__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  border-bottom: none;
  padding-bottom: 0;
  color: var(--gray-dark);
  font-size: 1.375rem;
  margin-bottom: 0.9rem;
}
.top-fac__target {
  background-color: #fff;
  border-radius: var(--bs-border-radius);
  padding: 0.4em 0.9em;
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.top-fac__desc {
  color: var(--project-color-text-muted);
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}
.top-fac .btn { width: auto; min-width: 12rem; }
.top-fac-area__note {
  grid-column: 1 / -1;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--project-color-text-muted);
}

.top-news__more { text-align: center; }
.top-news__more .btn { min-width: 20rem; }

.top-gallery { padding-block: 0 var(--space-5xl); }
.top-gallery__marquee { width: 100%; overflow: hidden; }
.top-gallery__track {
  display: flex;
  width: max-content;
  height: 22rem;
  animation: top-gallery-scroll 55s linear infinite;
  will-change: transform; /* ループ切替時にコマが消える現象の緩和(GPU合成を維持) */
  backface-visibility: hidden;
}
.top-gallery__marquee:hover .top-gallery__track { animation-play-state: paused; }
.top-gallery__col {
  flex: 0 0 auto;
  height: 100%;
  margin-right: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.top-gallery__col img { width: 100%; border-radius: 10px; object-fit: cover; }
.top-gallery__col--single { width: 22rem; }
.top-gallery__col--single img { flex: 1 1 0; min-height: 0; height: 100%; }
.top-gallery__col--stack { width: 19rem; }
.top-gallery__col--stack > img { flex: 1.35 1 0; min-height: 0; }
.top-gallery__pair { flex: 1 1 0; min-height: 0; display: flex; gap: 0.5rem; }
.top-gallery__pair img { flex: 1 1 0; min-width: 0; height: 100%; }
@keyframes top-gallery-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .top-gallery__track { animation: none; }
}

.top-gallery__more { text-align: center; margin-top: 2.5rem; padding-inline: var(--project-container-gutter); }

.top-insta-btn {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: transparent;
  background-image: linear-gradient(135deg, #F8A646, #F47AAB, #7A4EC9); /* token-ignore: Instagram ブランド固有グラデ(button.css の PDF 赤と同じ扱い) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 22rem;
}
.top-insta-btn__icon { width: 1.4rem; height: 1.4rem; }

@media (max-width: 767.98px) {
  .top .section { padding-block: var(--space-3xl); }

  .top-heading { font-size: 1.5rem; gap: 0.5rem; }
  .top-heading__deco { width: 2.25rem; }

  .top-hero__badge-wrap { width: 6.5rem; right: 1rem; bottom: 1rem; }
  .top-hero__badge-close { width: 1.5rem; height: 1.5rem; font-size: 1rem; }
  .top-hero__catch {
    width: 100%;
    margin-top: -7.8125rem;
    padding: 4rem 1rem 0.5rem;
    border-radius: 50% 50% 0 0 / 7.8125rem 7.8125rem 0 0;
  }
  .top-hero__catch p { font-size: 1.5rem; }

  .top-intro__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .top-intro__deco { display: none; }
  .top-intro__title { font-size: 1.0625rem; line-height: 1.6; }
  .top-intro__lead { font-size: 0.9375rem; }
  .top-intro__btn .btn { width: 100%; min-width: 0; }

  .top-fac-area__body { grid-template-columns: 1fr; gap: 1.25rem; }
  .top-fac-area__facilities { grid-template-columns: 1fr; gap: 2rem; }
  .top-fac .btn { width: 100%; }

  .top-news__more .btn { width: 100%; min-width: 0; }

  .top-guide__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 5;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    color: var(--main);
    cursor: pointer;
  }
  .top-guide__nav--prev { left: -0.25rem; }
  .top-guide__nav--next { right: -0.25rem; }
  .top-guide__nav::before {
    content: "";
    width: 1.1rem;
    height: 1.1rem;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  .top-guide__nav--prev::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
  }
  .top-guide__nav--next::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  }

  .top-gallery__track { height: 14rem; }
  .top-gallery__col--single { width: 9.5rem; }
  .top-gallery__col--stack { width: 12rem; }

  .top-insta-btn { width: 100%; min-width: 0; }
}