@charset "UTF-8";

/*
** Description: のぞみデンタルクリニック
** Parts - CSS
** ================================================== */

/* HeaderSlider
======================================== */
.hero-slider {
  position: relative;
  overflow: hidden;
}

.hero-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.5s ease-in-out, transform 8s ease;
  z-index: 0;
}

.hero-slider .slide.active {
  opacity: 1;
  transform: scale(1.2);
}

.hero-slider>*:not(.slide) {
  position: relative;
  z-index: 1;
}



/* Contents
======================================== */
.photo img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-radius: var(--size-ss);
  box-shadow: var(--shadow-light);
}

.text-columns {
  columns: 2 16em;
  column-gap: var(--size-ll);
}

.sectionBox {
  display: grid;
  gap: var(--size-ll);
  padding: var(--size-l) 0;
}

.detailsBox {
  display: grid;
  gap: var(--size-m);
}

#newsArticle {
  max-width: 700px;
  margin: 0 auto;
  padding: 4.0em var(--size-ll);
  background-color: var(--color_white);
  border-radius: var(--size-m);
  box-shadow: var(--shadow-strong);
  line-height: 1.9;
}
#newsArticle h2 {
  margin-bottom: var(--size-ll);
}
#newsArticle .signature {
  padding-top: var(--size-ll);
  text-align: right;
}



/* Card -------------------- */
.card {
  padding: var(--size-l);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

.card figure {
  margin-bottom: var(--size-m);
}

.card .note {
  border: 3px solid var(--color_orangeMain);
  border-radius: var(--size-s);
  padding: var(--size-s);
}



/* Treatment -------------------- */
.treatment-list {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.card#general, .card#pediatric,
.card#esthetic, .card#surgery,
.card#preventive, .card#orthodontics,
.card#implant {
  scroll-margin-top: 40px;
}

/* Staff -------------------- */
.staff-list {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Facility -------------------- */
#facility .facilityList {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--size-m);
}



/* PageTop
======================================== */
#pageTop {
  position: sticky;
  bottom: var(--size-l);
  display: flex;
  justify-content: flex-end;
  transform: translateY(100px);
  transition: 1.0s;
  opacity: 0;
  z-index: 1000;
  left: calc(100vw - 15px);
  max-width: 16.5em;
}

#pageTop * {
  color: var(--color_white);
  margin: 0;
}

#pageTop.show {
  transform: translateY(0px);
  opacity: 0.95;
}

#pageTop .pageTop-info {
  background-color: var(--color_orangeMain);
  border-radius: 8px 0 0 8px;
  display: flex;
  align-items: center;
  padding: var(--size-s);
}

#pageTop .pageTop-info a {
  padding: var(--size-s);
  display: grid;
  text-align: center;
  line-height: 1.4;
}

#pageTop .pageTop-info .up {
  border-right: 1px solid #fff;
  padding-right: var(--size-ss);
  margin: 0 var(--size-s) 0 0;
}

#pageTop .pageTop-info .tel a {
  padding: var(--size-ss) 0;
}



/* GoogleMap
======================================== */
.googleMap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow-light);
}

.googleMap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.link {
  text-align: right;
  padding-top: var(--size-l);
}

/* Font Awesome Icon
======================================== */
.icon>*::before {
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  padding-right: var(--size-ss);
}

.up>*::before {
  content: "\f139";
}

.right>*::before {
  content: "\f138";
}