@charset "UTF-8";

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

/* HeaderSlider
======================================== */
.hero-slider {
  position: relative;
  overflow: hidden;
  background-image: url("../images/vegas/photo04.webp");
}

.page-index .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: 0 0 4px rgb(0 0 0 / 0.3);
}

.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);
}



/* Reserve
======================================== */
.reserve a {
  display: block;
  background-color: var(--color_brownMain);
  border-radius: 50px;
  text-align: center;
  font-weight: 700;
  color: var(--color_white);
  padding: var(--size-s);
}



/* Card
======================================== */
.card {
  padding: var(--size-l);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.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(300px, 1fr));
}

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

#treatment .icon {
  /* 親要素の幅を超えない */
  width: 100%;
  max-width: 100%;
  /* 比率を維持して高さを自動調整 */
  height: auto;
  /* imgと同じ挙動にする */
  display: block;
  /* アイコンの色(currentColorがこれを参照する) */
  color: var(--color_orangeDark);
  padding: var(--size-m);
}



/* 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(230px, 1fr));
  gap: var(--size-ll);
}



/* News
======================================== */
.news-detail {
  max-width: 720px;
  margin-inline: auto;
  background-color: var(--color_white);
  padding: 4.0rem var(--size-ll);
  border-radius: var(--size-s);
  box-shadow: 2px 2px 8px rgb(0 0 0 / 0.2);
  border-top: 8px solid var(--color_orangeLight);
  border-bottom: 8px solid var(--color_orangeLight);
}

.news-detail .signature {
  text-align: right;
  margin-top: var(--size-ll);
}



/* 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;
}

.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";
}