@charset "utf-8";

/* clinic-N3 */
.clinic-N3 {
  position: relative;
  overflow: hidden;
  padding-top: 6rem;
  padding-bottom: 9rem;
  background: var(--body-bg)
}

.clinic-N3 .hero-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 5rem
}

.clinic-N3 .textset {
  margin: 0
}

.clinic-N3 .textset-subtit {
  color: var(--secondary);
  margin-bottom: 2rem
}

.clinic-N3 .textset-tit {
  font-family: var(--ff-en1);
  font-weight: 400;
  margin: 0
}

.clinic-N3 .textset-tit em {
  font-weight: 400
}

.clinic-N3 .textset-desc {
  margin-top: 2.4rem;
  color: var(--secondary)
}

.clinic-N3 .hero-note {
  padding-bottom: 1rem;
  text-align: right
}

.clinic-N3 .hero-note p {
  color: var(--secondary)
}

.clinic-N3 .textset-more {
  display: inline-flex;
  align-items: center;
  gap: 2.4rem;
  margin-top: 3rem;
  color: var(--primary)
}

.clinic-N3 .hero-media {
  position: relative
}

.clinic-N3 .thumb {
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  position: absolute;
  inset: 0;
  width: 100%
}

.clinic-N3 .imageset {
  display: block;
  width: 100%;
  height: 100%
}

.clinic-N3 .imageset-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%
}

.clinic-N3 .hero-caption {
  display: flex;
  justify-content: space-between;
  padding-top: 2rem
}

.clinic-N3 .slide-area {
  width: 100%;
  min-width: 0
}

.clinic-N3 .swiper {
  width: 100%;
  height: 68rem;
  overflow: hidden;
  border-radius: 0 5rem 0 0;
  touch-action: pan-y
}

.clinic-N3 .swiper-wrapper {
  display: flex;
  height: 100%
}

.clinic-N3 .swiper-slide {
  position: relative;
  width: 100%;
  height: 100%;
  flex-shrink: 0
}

.clinic-N3 .slide-detail .imageset-img {
  object-position: center center;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none
}

.clinic-N3 .slide-space .imageset-img {
  object-position: center 48%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none
}

.clinic-N3 .hero-controls {
  display: flex;
  align-items: center;
  gap: 1.6rem
}

.clinic-N3 .hero-controls .btnset {
  padding: 0;
  min-width: 3.2rem;
  width: 3.2rem;
  height: 3.2rem;
  border: 0;
  background: transparent;
  color: var(--primary)
}

.clinic-N3 .hero-controls .btnset:focus-visible {
  outline: 0.2rem solid var(--secondary);
  outline-offset: .4rem
}

.clinic-N3 .swiper-pagination {
  position: static;
  width: auto;
  display: flex;
  align-items: center;
  gap: 1rem
}

.clinic-N3 .swiper-pagination-bullet {
  display: block;
  width: .8rem;
  height: .8rem;
  padding: 0;
  border: 0;
  background: var(--secondary);
  opacity: .3;
  border-radius: 50%;
  cursor: pointer
}

.clinic-N3 .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--primary)
}

.clinic-N3 .hero-count {
  min-width: 6.2rem
}

.clinic-N3 .hero-count:empty {
  display: none
}

.clinic-N3 .slide-detail .thumb,
.clinic-N3 .slide-space .thumb {
  background: var(--body-bg)
}

.clinic-N3 .slide-detail .imageset,
.clinic-N3 .slide-space .imageset {
  display: block;
  height: 100%;
  width: 100%
}

.clinic-N3 .slide-skin .thumb .videoset {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden
}

.clinic-N3 .slide-skin .thumb .videoset-video,
.clinic-N3 .slide-skin .thumb .videoset video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center
}

.clinic-N3 .slide-skin .videoset-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center
}

@media (max-width: 992px) {
  .clinic-N3 {
    padding-top: 4rem;
    padding-bottom: 6rem
  }

  .clinic-N3 .hero-heading {
    display: block;
    padding-bottom: 3rem
  }

  .clinic-N3 .hero-note {
    display: none
  }

  .clinic-N3 .thumb {
    height: 48rem;
    border-radius: 0 3rem 0 0
  }

  .clinic-N3 .hero-caption {
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap
  }

  .clinic-N3 .swiper {
    height: 48rem;
    border-radius: 0 3rem 0 0
  }

  .clinic-N3 .hero-controls {
    gap: 1rem
  }
}

@media (prefers-reduced-motion: reduce) {
  .clinic-N3 .swiper-wrapper {
    transition-duration: 0s !important
  }
}