@charset "UTF-8";
/* top */
.kv.--top {
  background-image: url(/assets/images/top/main.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 10px;
}

@media (max-width: 900px) {
  .kv.--top {
    /* border: 1px solid red; */
    width: 100%;
  }
}

.contents-h1 {
  font-size: 3rem;
  color: #ffffff;
  margin: 0 0 20rem 5rem;
  line-height: normal;
}

@media (max-width: 900px) {
  .contents-h1 {
    font-size: 20px;
    margin: 0 20px;
  }
}
/* top-message */
.top-message__h2 {
  color: #ad6c43;
  font-size: 3.5rem;
  text-align: center;
  margin-top: 4rem;
}
.top-message p {
  text-align: center;
  font-size: 2rem;
  line-height: calc(42 / 20);
}
.top-message p + p {
  margin-top: 30px;
}
@media (max-width: 900px) {
  .top-message__h2 {
    font-size: 20px;
    margin-top: 20px;
  }
  .top-message p {
    font-size: 12px;
    text-align: left;
  }
  .top-message p + p {
    margin-top: 15px;
  }
}

/* staff-cat */
/* .staff-cat ul {
  display: flex;
  flex-wrap: wrap;
  gap: 100px;
}
.staff-cat ul li {
  width: calc((100% - 100px - 100px) / 3);
} */

/* staff-cat */
.staff-cat__pad {
  /* opacity: 0.1;
  position: absolute;
  transform: translate(-4%, -50%); */
  opacity: 0.1;
  position: absolute;
  transform: translate(-4%, -50%);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 2s;
  transition-timing-function: steps(14, end);
}
.staff-cat__pad.--reverse {
  clip-path: inset(0 0 0 100%);
}
.staff-cat__pad.--active {
  clip-path: inset(0 0% 0 0);
}
.staff-cat__h2 {
  color: #ad6c43;
  font-size: 3.5rem;
  text-align: center;
  margin: 155px 0px 40px;
}
.staff-cat__h3 {
  font-size: 2rem;
}
.staff-cat ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 100px 13.47%;
  font-size: 3.5rem;
}
.staff-cat__leason {
  font-size: 1.5rem;
  line-height: calc(28 / 15);
}
@media (max-width: 900px) {
  .staff-cat__pad {
    transform: translate(-4%, -40%);
  }
  .staff-cat__h2 {
    font-size: 20px;
    margin: 50px 0 10px;
  }
  .staff-cat__h3 {
    font-size: 15px;
  }
  .staff-cat ul {
    grid-template-columns: 1fr 1fr;
    gap: 15px 20.47%;
  }
  .staff-cat__leason {
    font-size: 12px;
  }
}

/* access */
.access {
  margin-top: 220px;
}
.access-h2 {
  color: #ad6c43;
  font-size: 3.5rem;
  text-align: center;
}
.access-address {
  font-size: 1.5rem;
  text-align: center;
  line-height: calc(28 / 15);
  margin-bottom: 35px;
}
.access-img {
  width: 145px;
  position: absolute;
  right: 15%;
  transform: translate(65%, -100%);
}
.map {
  margin-bottom: 90px;
}
@media (max-width: 900px) {
  .access {
    margin-top: 70px;
  }
  .access-h2 {
    font-size: 2rem;
  }
  .access-address {
    font-size: 1.2rem;
  }
  .access-img {
    width: 60px;
  }
  .map {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 75%;
  }
  .map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* contact */
.contact-h2 {
  color: #ad6c43;
  font-size: 3.5rem;
  text-align: center;
  margin-bottom: 35px;
}
.contact-list {
  max-width: 640px;
  margin: 0 auto;
}
.contact-list__row {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}
.contact-list__ttl {
  width: 265px;
  text-align: center;
  font-size: 2.4rem;
}
.contact-list__details {
  width: 100%;
}
.contact-list__details.--first {
  display: flex;
  gap: 45px;
}
.contact-list__details input,
.contact-list__details textarea {
  width: 100%;
  padding: 0.25rem 0.5rem;
}
.contact-button {
  width: 130px;
  text-align: center;
  margin: auto;
  display: block;
  transform: translateX(90px);
  background-color: rgb(255, 255, 255, 5.5);
  border-radius: 100vw;
  color: #ad6c43;
  font-size: 18px;
}
@media (max-width: 900px) {
  .contact-h2 {
    font-size: 2rem;
    margin-bottom: 0;
  }
  .contact-list {
    font-size: 1.2rem;
  }
  .contact-list__row {
    display: block;
  }
  .contact-list__ttl {
    text-align: left;
    font-size: 1.5rem;
  }
  .contact-button {
    transform: translateX(0px);
  }
}